iniital build bare bones
commit
72c7966f8e
|
|
@ -0,0 +1,21 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Archives on GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/archive/</link>
|
||||||
|
<description>Recent content in Archives on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/archive/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
<item>
|
||||||
|
<title>Custom Home Section</title>
|
||||||
|
<link>https://www.gpccaor.org/archive/first/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/archive/first/</guid>
|
||||||
|
<description>This section is used like a hero but one can put anything here like a live cam
|
||||||
|
Can removed or hidden by deleting the file or uncommenting hidden = true in the front matter
|
||||||
|
Some examples:</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Categories on GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/categories/</link>
|
||||||
|
<description>Recent content in Categories on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
/* resets */
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* regions */
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* 14px default before jquery scalling */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile first column */
|
||||||
|
|
||||||
|
.section__container {
|
||||||
|
display: flex;
|
||||||
|
width: 95%;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* using ::before for list numbers and icons */
|
||||||
|
nav,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.clickable {
|
||||||
|
color:inherit;
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
/* font-style: italic;
|
||||||
|
filter: saturate(200%); */
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
.clickable:hover {
|
||||||
|
color: black;
|
||||||
|
filter: saturate(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.3em;
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
border: 4px solid grey;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 95vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.avatar {
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
display: block;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
display: block;
|
||||||
|
margin: 1em 0;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
orphans: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* divider */
|
||||||
|
|
||||||
|
hr {
|
||||||
|
width: 50%;
|
||||||
|
height: 0;
|
||||||
|
border-top-color: white;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-col-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-col-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-left p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-right p {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* keeps in the DOM but moves from the page */
|
||||||
|
.invisible {
|
||||||
|
position: absolute;
|
||||||
|
left: -999em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*keeps in the same location and maintains it's layout space even though hidden*/
|
||||||
|
.hide {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*completely removes from DOM */
|
||||||
|
.remove {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/* mobile first in base and page css*/
|
||||||
|
|
||||||
|
/* small tablets */
|
||||||
|
@media only screen and (min-width: 600px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/*images width will be 95% of view port width until this pixel width with you can set */
|
||||||
|
@media only screen and (min-width: 450px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 600px) and (max-device-width: 799px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tablets */
|
||||||
|
@media only screen and (min-width: 800px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 800px) and (max-device-width: 1199px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* desktop */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1200px) {
|
||||||
|
|
||||||
|
/*this left justifies the individual elements left*/
|
||||||
|
/*.section__content--hero {
|
||||||
|
align-items: flex-start;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*this moves all the elements together left and down*/
|
||||||
|
/*.section--hero {
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* large */
|
||||||
|
@media screen and (min-width: 1800px) {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
.box--maps .embed--map {
|
||||||
|
padding: 5px;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
/* NAVIGATION BAR */
|
||||||
|
|
||||||
|
/* mobile first at <1000px */
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
width: 100vw;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: 1px solid grey;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2em;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: center;
|
||||||
|
padding-top: 0.9em;
|
||||||
|
padding-bottom: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__logo {
|
||||||
|
padding-left: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__logo {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__draft {
|
||||||
|
padding-left: 1em;
|
||||||
|
color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__draft {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.nav-bar__menu-button {
|
||||||
|
order: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu {
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-height: 75vh;
|
||||||
|
padding-right: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-menu {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 200ms;
|
||||||
|
border-top: 2px solid;
|
||||||
|
padding: .35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu-item > a {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover {
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bigger than small tablet */
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
.nav-bar {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu {
|
||||||
|
display: flex;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-menu {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__header {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu-item,
|
||||||
|
.nav-bar__logo,
|
||||||
|
.nav-bar__draft {
|
||||||
|
padding-left: 0.3em;
|
||||||
|
padding-right: 0.3em;
|
||||||
|
padding-top: 0.7em;
|
||||||
|
padding-bottom: 0.7em;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar__menu-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
} /* end responsive */
|
||||||
|
|
||||||
|
|
||||||
|
/* full size */
|
||||||
|
|
||||||
|
@media screen and (min-width: 1400px) {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,360 @@
|
||||||
|
/* sections */
|
||||||
|
|
||||||
|
.section__headline {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
max-width: 85%;
|
||||||
|
padding-top: 0.3em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content li {
|
||||||
|
padding-bottom: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lists in section content */
|
||||||
|
.section__content li {
|
||||||
|
font-size: 1em;
|
||||||
|
list-style-type: none;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ul,
|
||||||
|
.section__content ol {
|
||||||
|
margin-left: 2em;
|
||||||
|
list-style-position: inside;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ul > li::before {
|
||||||
|
font-family: FontAwesome;
|
||||||
|
content: "\f18e";
|
||||||
|
padding-right: 1.1em;
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ol {
|
||||||
|
counter-reset: foo;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ol > li {
|
||||||
|
counter-increment: foo;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content ol > li::before {
|
||||||
|
content: counter(foo) ".";
|
||||||
|
padding-right: 0.8em;
|
||||||
|
margin-left: -1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--odd {
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--hero {
|
||||||
|
color: white;
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--odd .btn {
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--footer {
|
||||||
|
color: white;
|
||||||
|
background-color: darkgrey;
|
||||||
|
min-height: 4000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* modal */
|
||||||
|
|
||||||
|
.section--modal {
|
||||||
|
display: none;
|
||||||
|
color: white;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__container--modal {
|
||||||
|
margin: 0.5em;
|
||||||
|
margin-top: 2em;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
max-height: 85%;
|
||||||
|
border-radius: 1em;
|
||||||
|
width: auto;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__headline--modal {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__headline--modal > h1 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__headline--modal > a[modal-close] {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1em;
|
||||||
|
top: 0.4em;
|
||||||
|
right: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__content--modal {
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*fix for fucking google chrome pushing up overflow content */
|
||||||
|
.section__content--modal * {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
/* ----------------
|
||||||
|
Hero Section
|
||||||
|
---------------- */
|
||||||
|
.section--hero {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--hero .section-content--hero {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*mobile first*/
|
||||||
|
.section--hero h1,
|
||||||
|
.section--hero h2,
|
||||||
|
.section--hero h3,
|
||||||
|
.section--hero h4,
|
||||||
|
.section--hero h5,
|
||||||
|
.section--hero h6 {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------
|
||||||
|
Components/Shortcodes Styling
|
||||||
|
---------------- */
|
||||||
|
|
||||||
|
/* box creates a flexbox wrapper, row default */
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding-bottom: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed::before,
|
||||||
|
.box--image::before {
|
||||||
|
content: "";
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed::after,
|
||||||
|
.box--image::after {
|
||||||
|
content: "";
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn-bar {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--column {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__caption {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__title {
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--headline {
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--text {
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn-bar > .box--btn {
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn__text {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn__icon {
|
||||||
|
align-self: center;
|
||||||
|
padding-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--large .btn__text,
|
||||||
|
.btn--large .btn__icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--small .btn__text,
|
||||||
|
.btn--small .btn__icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
font-size: 0.7em;
|
||||||
|
align-items: left;
|
||||||
|
color: red;
|
||||||
|
background-color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 3px;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight > ul > li::before {
|
||||||
|
font-family: FontAwesome;
|
||||||
|
content: "\f054"; /* chevron-right */
|
||||||
|
padding-right: 1.1em;
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--avatar > a {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt:hover {
|
||||||
|
-webkit-filter: brightness(1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt > .play-button {
|
||||||
|
font-size: 3.5em;
|
||||||
|
color: red;
|
||||||
|
text-shadow: 3px 3px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__embed--disqus {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__contact-info > * {
|
||||||
|
padding: 0.1em;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__contact-info > * > * {
|
||||||
|
margin: 0.2em;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*turn off default bullets*/
|
||||||
|
.box--gallery {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--gallery li,
|
||||||
|
.box--gallery__item {
|
||||||
|
padding: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*turn off fontawesome bullets*/
|
||||||
|
.box--gallery li::before,
|
||||||
|
.box--gallery__item li::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-family: 'Roboto Mono', monospace;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
color: white;
|
||||||
|
padding-left: 0.2em;
|
||||||
|
padding-right: 0.2em;
|
||||||
|
padding-top: 0.05em;
|
||||||
|
padding-bottom: 0.07em;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
code.hljs {
|
||||||
|
font-size: 0.75em;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 0.7em;
|
||||||
|
width: inherit;
|
||||||
|
max-width: 90vw;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 3px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* mobile first in base and page css*/
|
||||||
|
|
||||||
|
/* small tablets */
|
||||||
|
@media only screen and (min-width: 600px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 600px) and (max-device-width: 799px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tablets */
|
||||||
|
@media only screen and (min-width: 800px) {
|
||||||
|
.section__headline--modal > h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__headline--modal > a[modal-close] {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 800px) and (max-device-width: 1199px) {
|
||||||
|
.section--hero h1,
|
||||||
|
.section--hero h2,
|
||||||
|
.section--hero h3,
|
||||||
|
.section--hero h4,
|
||||||
|
.section--hero h5,
|
||||||
|
.section--hero h6 {
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* desktop */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1200px) {
|
||||||
|
.section__container {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
/* help with centering content with hidden phone number */
|
||||||
|
.box__contact {
|
||||||
|
margin-left: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--hero h1,
|
||||||
|
.section--hero h2,
|
||||||
|
.section--hero h3,
|
||||||
|
.section--hero h4,
|
||||||
|
.section--hero h5,
|
||||||
|
.section--hero h6 {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {
|
||||||
|
/* Styles */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* large */
|
||||||
|
@media screen and (min-width: 1800px) {
|
||||||
|
.section__container {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* picture captions */
|
||||||
|
.lg-sub-html {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
/* ----------------
|
||||||
|
Components/Shortcodes Styling
|
||||||
|
---------------- */
|
||||||
|
|
||||||
|
/* box creates a flexbox wrapper, row default */
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding-bottom: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed::before,
|
||||||
|
.box--image::before {
|
||||||
|
content: "";
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--embed::after,
|
||||||
|
.box--image::after {
|
||||||
|
content: "";
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn-bar {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--column {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__caption {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__title {
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--headline {
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--text {
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn {
|
||||||
|
padding: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--btn-bar > .box--btn {
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn__text {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn__icon {
|
||||||
|
align-self: center;
|
||||||
|
padding-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--large .btn__text,
|
||||||
|
.btn--large .btn__icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--small .btn__text,
|
||||||
|
.btn--small .btn__icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
font-size: 0.7em;
|
||||||
|
align-items: left;
|
||||||
|
color: red;
|
||||||
|
background-color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 3px;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight > ul > li::before {
|
||||||
|
font-family: FontAwesome;
|
||||||
|
content: "\f054"; /* chevron-right */
|
||||||
|
padding-right: 1.1em;
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--avatar > a {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt:hover {
|
||||||
|
-webkit-filter: brightness(1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb--yt > .play-button {
|
||||||
|
font-size: 3.5em;
|
||||||
|
color: red;
|
||||||
|
text-shadow: 3px 3px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__embed--disqus {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__contact-info > * {
|
||||||
|
padding: 0.1em;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__contact-info > * > * {
|
||||||
|
margin: 0.2em;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*turn off default bullets*/
|
||||||
|
.box--gallery {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--gallery li,
|
||||||
|
.box--gallery__item {
|
||||||
|
padding: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*turn off fontawesome bullets*/
|
||||||
|
.box--gallery li::before,
|
||||||
|
.box--gallery__item li::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-family: 'Roboto Mono', monospace;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
color: white;
|
||||||
|
padding-left: 0.2em;
|
||||||
|
padding-right: 0.2em;
|
||||||
|
padding-top: 0.05em;
|
||||||
|
padding-bottom: 0.07em;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
code.hljs {
|
||||||
|
font-size: 0.75em;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 0.7em;
|
||||||
|
width: inherit;
|
||||||
|
max-width: 90vw;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 3px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
|
@ -0,0 +1,452 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="generator" content="Hugo 0.88.1" />
|
||||||
|
<title>GPCCA</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<meta http-equiv="Cache-Control" content="max-age= 3600" />
|
||||||
|
<base href="https://www.gpccaor.org/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
|
||||||
|
|
||||||
|
<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<link href="//fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link href="//fonts.googleapis.com/css?family=Open%20Sans" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" type="text/css" media="screen" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link href="/css/base.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
<link href="/css/page.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
<link href="/css/navbar.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
<link href="/css/responsive.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body { font-family:Open Sans,Helvetica,Arial,sans-serif; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover {color: #26ad60; }
|
||||||
|
.nav-bar, .section--footer { background-color: #26ad60; }
|
||||||
|
.nav-bar__logo,.nav-bar__logo:hover, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: #1f5e3a; }
|
||||||
|
.nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover { background-color: #1f5e3a; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#hero { color: red; }
|
||||||
|
#hero { background-color: #6fc695; }
|
||||||
|
#hero h1 { color: red; }
|
||||||
|
#hero h2 { color: red; }
|
||||||
|
#hero h3 { color: red; }
|
||||||
|
#hero h4 { color: red; }
|
||||||
|
#hero hr { border-top-color: red; }
|
||||||
|
|
||||||
|
|
||||||
|
#hero { background-image: url("https://www.gpccaor.org/images/city-park.jpg"); }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.section--odd, .section--even .btn {
|
||||||
|
color: #1f5e3a;
|
||||||
|
background-color: #6fc695;
|
||||||
|
}
|
||||||
|
.section--even, .section--odd .btn {
|
||||||
|
color: #6fc695;
|
||||||
|
background-color: #1f5e3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.section--footer {
|
||||||
|
color: green;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/uci-shortcodes-custom.css">
|
||||||
|
<link rel="stylesheet" href="/css/uci-shortcodes.css">
|
||||||
|
<link rel="stylesheet" href="/css/custom.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="nav-bar" class="nav-bar">
|
||||||
|
|
||||||
|
<div class="nav-bar__header">
|
||||||
|
<a href="#hero" class="nav-bar__logo">
|
||||||
|
GPCCA
|
||||||
|
</a>
|
||||||
|
<div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
|
||||||
|
<div class="nav-bar__draft"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="nav-bar__menu hide-menu">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li >
|
||||||
|
<a class="nav-bar__menu-item" href="#about">
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="nav-bar-spacer"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="hero" class="section section--hero">
|
||||||
|
<div class="section__container" >
|
||||||
|
<div class="section__content section__content--hero" >
|
||||||
|
|
||||||
|
<h1>Greater Prairie City Community Association</h1>
|
||||||
|
<h2>GPCCA</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h4> Serving Prairie City</h4>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<main class="sections">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="about" class="section section--about section--odd"
|
||||||
|
style="color:; background-color:;"
|
||||||
|
>
|
||||||
|
<div class="section__container">
|
||||||
|
<div class="section__headline section__headline--about">
|
||||||
|
<h1>The GPCCA</h1>
|
||||||
|
</div>
|
||||||
|
<div class="section__content section-content--about" >
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="footer" class="section section--footer section--even"
|
||||||
|
style="color:; background-color:;"
|
||||||
|
>
|
||||||
|
<div class="section__container">
|
||||||
|
<div class="section__headline section__headline--footer">
|
||||||
|
<h1></h1>
|
||||||
|
</div>
|
||||||
|
<div class="section__content section-content--footer" >
|
||||||
|
<div class="updated">
|
||||||
|
<p>site updated: October 29, 2021@8:08 pm</br>
|
||||||
|
status: initial development</br></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="modal-test" class="section section--modal">
|
||||||
|
<div class="section__container section__container--modal">
|
||||||
|
<div class="section__headline section__headline--modal">
|
||||||
|
<h1>Example Modal</h1>
|
||||||
|
</div>
|
||||||
|
<div class="section__content section__content--modal" >
|
||||||
|
<p>Here is how you can add additional content to your page without having it take up space…use a modal!</p>
|
||||||
|
<p>To do that make a .md file in the <code>content/modals</code> directory.</p>
|
||||||
|
<p>Put any markdown content in it including shortcodes.</p>
|
||||||
|
<p>Then just link to it in a section markdown file using the link shortcode.</p>
|
||||||
|
<p><strong>example</strong></p>
|
||||||
|
<pre tabindex="0"><code>{{< link url="#modal-test" text="A test modal" type="btn" display="modal" >}}
|
||||||
|
</code></pre><p>where there is a file <code>test.md</code> in the <code>content/modals directory</code></p>
|
||||||
|
<p>and the url is `url="#modal-<modal file name without .md>"``</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="modal-map" class="section section--modal">
|
||||||
|
<div class="section__container section__container--modal">
|
||||||
|
<div class="section__headline section__headline--modal">
|
||||||
|
<h1>More Markdown</h1>
|
||||||
|
</div>
|
||||||
|
<div class="section__content section__content--modal" style="align-items: center;" >
|
||||||
|
<h3 id="and-now-for-the-rest-of-the-show">And now for the rest of the show</h3>
|
||||||
|
<div class="box ">
|
||||||
|
<div class="box box--column ">
|
||||||
|
<ul>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">*</span> One
|
||||||
|
<span style="color:#66d9ef">*</span> Two
|
||||||
|
<span style="color:#66d9ef">*</span> Three
|
||||||
|
</code></pre></div></div>
|
||||||
|
<hr>
|
||||||
|
<div class="box ">
|
||||||
|
<div class="box box--column ">
|
||||||
|
<ol>
|
||||||
|
<li>Buy flour and salt</li>
|
||||||
|
<li>Mix together with water</li>
|
||||||
|
<li>Bake</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">1.</span> Buy flour and salt
|
||||||
|
<span style="color:#66d9ef">1.</span> Mix together with water
|
||||||
|
<span style="color:#66d9ef">1.</span> Bake
|
||||||
|
</code></pre></div></div>
|
||||||
|
<hr>
|
||||||
|
<p>Monspaced Font Box:</p>
|
||||||
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">Monospaced type box primarily for showing code
|
||||||
|
Indent three or enclose in```
|
||||||
|
</code></pre></div><p>or put it <code>inline</code> like this</p>
|
||||||
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">or put it <span style="color:#e6db74">`inline`</span> like this
|
||||||
|
</code></pre></div><hr>
|
||||||
|
<p>a separator line <br>
|
||||||
|
* * *</p>
|
||||||
|
<hr>
|
||||||
|
<p>This is <a href="http://example.com" title="example">an example</a> simple markdown link.</p>
|
||||||
|
<p><a href="http://example.com">This link</a> has no title attr.</p>
|
||||||
|
<p>This is [an example] <a href="http://example.com" title="Optional Title">someid</a> reference-style link.</p>
|
||||||
|
<pre><code>This is [an example](http://example.com "Example") link.
|
||||||
|
|
||||||
|
[This link](http://example.com) has no title attr.
|
||||||
|
|
||||||
|
This is [an example] [id] reference-style link.
|
||||||
|
|
||||||
|
[id]: http://example.com "Optional Title"
|
||||||
|
</code></pre>
|
||||||
|
<p>Use the link plugin shortcode for doing more fancy things.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="box box--btn btn btn--regular"
|
||||||
|
href="javascript:void( window.open('https://dkebler.github.io/landingpage-guide', 'blank', 'scrollbars=yes, toolbar=no, width=1000 ' ))">
|
||||||
|
<i class="btn__icon fa fa-space-shuttle"></i>
|
||||||
|
<div class="btn__text">A Button Styled Link with icon opens in window</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
<hr>
|
||||||
|
<p>You can put images from external sources in this way</p>
|
||||||
|
<p><img src="http://placehold.it/200x50" alt="Alt Text" title="Image Title"></p>
|
||||||
|
<pre><code>
|
||||||
|
</code></pre>
|
||||||
|
<p>but it’s probably better to use the plugin shortcode for your images</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="box box--column box--image
|
||||||
|
|
||||||
|
|
||||||
|
"
|
||||||
|
style="
|
||||||
|
|
||||||
|
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="box__title">Where I Want To Be</div>
|
||||||
|
<a href="/images/green-landscape.jpg" target="_blank" >
|
||||||
|
<img
|
||||||
|
style="
|
||||||
|
|
||||||
|
|
||||||
|
"
|
||||||
|
|
||||||
|
src="/images/green-landscape.jpg" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="box__caption">Sure is Green</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre tabindex="0"><code>{{< image filename="green-landscape.jpg" title="Where I Want To Be" caption="Sure is Green" >}}
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/js/util.js"></script>
|
||||||
|
|
||||||
|
<script src="/js/fitToWindow.js"></script>
|
||||||
|
<script src="/js/flowType.js"></script>
|
||||||
|
|
||||||
|
<script src="/js/youtube.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/js/page.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/js/docready.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
lightgallery('#photos')
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
lightgallery('.box--image-lightbox')
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/</link>
|
||||||
|
<description>Recent content on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
<item>
|
||||||
|
<title>Custom Home Section</title>
|
||||||
|
<link>https://www.gpccaor.org/archive/first/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/archive/first/</guid>
|
||||||
|
<description>This section is used like a hero but one can put anything here like a live cam
|
||||||
|
Can removed or hidden by deleting the file or uncommenting hidden = true in the front matter
|
||||||
|
Some examples:</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>The GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/sections/about/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/sections/about/</guid>
|
||||||
|
<description></description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title></title>
|
||||||
|
<link>https://www.gpccaor.org/sections/footer/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/sections/footer/</guid>
|
||||||
|
<description>site updated: October 29, 2021@8:08 pm status: initial development
|
||||||
|
</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Example Modal</title>
|
||||||
|
<link>https://www.gpccaor.org/modals/test/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/modals/test/</guid>
|
||||||
|
<description>Here is how you can add additional content to your page without having it take up space&hellip;use a modal!
|
||||||
|
To do that make a .md file in the content/modals directory.
|
||||||
|
Put any markdown content in it including shortcodes.
|
||||||
|
Then just link to it in a section markdown file using the link shortcode.
|
||||||
|
example
|
||||||
|
{{&lt; link url=&quot;#modal-test&quot; text=&quot;A test modal&quot; type=&quot;btn&quot; display=&quot;modal&quot; &gt;}} where there is a file test.md in the content/modals directory</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>More Markdown</title>
|
||||||
|
<link>https://www.gpccaor.org/modals/map/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/modals/map/</guid>
|
||||||
|
<description>And now for the rest of the show One Two Three * One * Two * Three Buy flour and salt Mix together with water Bake 1. Buy flour and salt 1. Mix together with water 1. Bake Monspaced Font Box:
|
||||||
|
Monospaced type box primarily for showing code Indent three or enclose in``` or put it inline like this
|
||||||
|
or put it `inline` like this a separator line * * *</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
(function (i, s, o, g, r, a, m) {
|
||||||
|
i['GoogleAnalyticsObject'] = r;
|
||||||
|
i[r] = i[r] || function () {
|
||||||
|
(i[r].q = i[r].q || []).push(arguments)
|
||||||
|
}, i[r].l = 1 * new
|
||||||
|
Date();
|
||||||
|
a = s.createElement(o),
|
||||||
|
m = s.getElementsByTagName(o)[0];
|
||||||
|
a.async = 1;
|
||||||
|
a.src = g;
|
||||||
|
m.parentNode.insertBefore(a, m)
|
||||||
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||||
|
|
||||||
|
ga('create', '{{ .Site.Params.googleAnalytics }}', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
function nothing() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
// TODO register these individually with window resize use self callled function
|
||||||
|
function resizeElements() {
|
||||||
|
navbarSpacer();
|
||||||
|
$('.box--embed iframe').fitToWindow()
|
||||||
|
$('.box--image img').fitToWindow()
|
||||||
|
heroResize();
|
||||||
|
typeResize(); // for section content
|
||||||
|
$('.section__content--modal').perfectScrollbar('update');
|
||||||
|
$('.nav-bar__menu').perfectScrollbar('update');
|
||||||
|
$('.code').perfectScrollbar('update');
|
||||||
|
};
|
||||||
|
|
||||||
|
function initialize() {
|
||||||
|
hljs.initHighlightingOnLoad();
|
||||||
|
$('.section__content--modal').perfectScrollbar();
|
||||||
|
$('.nav-bar__menu').perfectScrollbar();
|
||||||
|
$('code').perfectScrollbar('update');
|
||||||
|
resizeElements()
|
||||||
|
};
|
||||||
|
|
||||||
|
initialize();
|
||||||
|
|
||||||
|
// requires jquery
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
// bind resize events
|
||||||
|
$(window).resize(function () {
|
||||||
|
resizeElements()
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
/*!
|
||||||
|
* adapted from
|
||||||
|
* https://github.com/drewbaker/fitToParent
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
|
||||||
|
$.fn.fitToWindow = function (maxWidth, wPad) {
|
||||||
|
|
||||||
|
// console.log("in fit to Window")
|
||||||
|
|
||||||
|
// if more than one element
|
||||||
|
this.each(function () {
|
||||||
|
let $el = $(this);
|
||||||
|
|
||||||
|
// console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`)
|
||||||
|
// console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
|
||||||
|
var mw = $el.parent().attr('maxWidth');
|
||||||
|
maxWidth = mw ? mw : maxWidth
|
||||||
|
maxWidth = (maxWidth || $el.data('maxWidth')) || 450
|
||||||
|
var wp = $el.parent().attr('wPad');
|
||||||
|
wPad = wp ? wp : wPad
|
||||||
|
wPad = (wPad || $el.data('wPad')) || 5
|
||||||
|
|
||||||
|
let windowWidth = $(window).width()
|
||||||
|
let newWidth = (windowWidth > maxWidth) ? maxWidth : windowWidth - 2 * wPad
|
||||||
|
|
||||||
|
// console.log(`after ${maxWidth} ${wPad} ${newWidth}`)
|
||||||
|
|
||||||
|
// Initial Aspect given in attributes by element itself
|
||||||
|
let setWidth = $el.attr('width');
|
||||||
|
let setHeight = $el.attr('height');
|
||||||
|
|
||||||
|
if (!setWidth || !setHeight) {
|
||||||
|
setWidth = $el.width();
|
||||||
|
setHeight = $el.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
// retrieve aspect ratio for element if none then set (first time)
|
||||||
|
var aspect = $el.data('aspect');
|
||||||
|
if (!aspect) {
|
||||||
|
aspect = setWidth / setHeight;
|
||||||
|
$el.data('aspect', aspect);
|
||||||
|
// console.log(`aspect set ${aspect} = ${$el.data('aspect')}`)
|
||||||
|
$el.data('maxWidth', maxWidth)
|
||||||
|
$el.data('wPad', wPad)
|
||||||
|
// console.log(`values set ${maxWidth} = ${$el.data('maxWidth')} ${wPad} = ${$el.data('wPad')}`)
|
||||||
|
// console.log("REGISTERING RESIZE")
|
||||||
|
$(window).resize({ el: $el }, function (event) {
|
||||||
|
event.data.el.fitToWindow()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
newHeight = (newWidth / aspect);
|
||||||
|
|
||||||
|
// TODO conform to enclosing .box with max-height set
|
||||||
|
// need to detect wrap so adjustement can be made
|
||||||
|
// http://stackoverflow.com/questions/40012428/how-to-detect-css-flex-wrap-event
|
||||||
|
// var maxParentHeight = parseInt($el.parents('.box').filter(function () {
|
||||||
|
// // var mel = $(this).attr('class');
|
||||||
|
// // var mxh = $(this).css('max-height')
|
||||||
|
// // console.log(`${mel} ${mxh}`)
|
||||||
|
// return $(this).css("max-height") != "none"
|
||||||
|
// }).first().css('max-height'))
|
||||||
|
//
|
||||||
|
// console.log(`max-height of parent ${maxParentHeight}`)
|
||||||
|
//
|
||||||
|
// if (maxParentHeight) {
|
||||||
|
// newHeight = maxParentHeight;
|
||||||
|
// newWidth = (newHeight * aspect);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log(`new width and height before setting ${newWidth} ${newHeight}`)
|
||||||
|
|
||||||
|
// Set new size of element
|
||||||
|
$el.width(newWidth);
|
||||||
|
$el.height(newHeight);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
|
|
||||||
|
// one time fit a element based on selector to the window
|
||||||
|
let fitToWindow = function (sel) {
|
||||||
|
if (sel) {
|
||||||
|
$(sel).fitToWindow()
|
||||||
|
} else { Alert("no selector provided for resize event to call fitToWindow") }
|
||||||
|
}
|
||||||
|
|
||||||
|
// register a selector to be fitted to window on window resize
|
||||||
|
let onResizeFitToWindow = function (sel) {
|
||||||
|
if (sel) {
|
||||||
|
$(window).resize(function () {
|
||||||
|
$(sel).fitToWindow()
|
||||||
|
})
|
||||||
|
} else { Alert("no selector provided for resize event to call fitToWindow") }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
/*
|
||||||
|
* Adapted from FlowType.JS v1.1
|
||||||
|
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
$.fn.flowtype = function (options) {
|
||||||
|
|
||||||
|
// Establish default settings/variables
|
||||||
|
// ====================================
|
||||||
|
var settings = $.extend({
|
||||||
|
maximum: 9999,
|
||||||
|
minimum: 1,
|
||||||
|
maxFont: 9999,
|
||||||
|
minFont: 1,
|
||||||
|
fontRatio: 35
|
||||||
|
}, options),
|
||||||
|
|
||||||
|
// the magic math
|
||||||
|
// =================
|
||||||
|
resize = function (el) {
|
||||||
|
var $el = $(el),
|
||||||
|
elw = $el.width(),
|
||||||
|
width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
|
||||||
|
fontBase = width / settings.fontRatio,
|
||||||
|
fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
|
||||||
|
$el.css('font-size', fontSize + 'px');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Make the magic visible
|
||||||
|
// ======================
|
||||||
|
this.each(function () {
|
||||||
|
// resize text in each element
|
||||||
|
resize(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
var Lorem;
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
//Create a class named Lorem and constructor
|
||||||
|
Lorem = function() {
|
||||||
|
//Default values.
|
||||||
|
this.type = null;
|
||||||
|
this.query = null;
|
||||||
|
this.data = null;
|
||||||
|
};
|
||||||
|
//Static variables
|
||||||
|
Lorem.IMAGE = 1;
|
||||||
|
Lorem.TEXT = 2;
|
||||||
|
Lorem.TYPE = {
|
||||||
|
PARAGRAPH: 1,
|
||||||
|
SENTENCE: 2,
|
||||||
|
WORD: 3
|
||||||
|
};
|
||||||
|
//Words to create lorem ipsum text.
|
||||||
|
Lorem.WORDS = [
|
||||||
|
"lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "ut", "aliquam,", "purus", "sit", "amet", "luctus", "venenatis,", "lectus", "magna", "fringilla", "urna,", "porttitor", "rhoncus", "dolor", "purus", "non", "enim", "praesent", "elementum", "facilisis", "leo,", "vel", "fringilla", "est", "ullamcorper", "eget", "nulla", "facilisi", "etiam", "dignissim", "diam", "quis", "enim", "lobortis", "scelerisque", "fermentum", "dui", "faucibus", "in", "ornare", "quam", "viverra", "orci", "sagittis", "eu", "volutpat", "odio", "facilisis", "mauris", "sit", "amet", "massa", "vitae", "tortor", "condimentum", "lacinia", "quis", "vel", "eros", "donec", "ac", "odio", "tempor", "orci", "dapibus", "ultrices", "in", "iaculis", "nunc", "sed", "augue", "lacus,", "viverra", "vitae", "congue", "eu,", "consequat", "ac", "felis", "donec", "et", "odio", "pellentesque", "diam", "volutpat", "commodo", "sed", "egestas", "egestas", "fringilla", "phasellus", "faucibus", "scelerisque", "eleifend", "donec", "pretium", "vulputate", "sapien", "nec", "sagittis", "aliquam", "malesuada", "bibendum", "arcu", "vitae", "elementum",
|
||||||
|
"curabitur", "vitae", "nunc", "sed", "velit", "dignissim", "sodales", "ut", "eu", "sem", "integer", "vitae", "justo", "eget", "magna", "fermentum", "iaculis", "eu", "non", "diam", "phasellus", "vestibulum", "lorem", "sed", "risus", "ultricies", "tristique", "nulla", "aliquet", "enim", "tortor,", "at", "auctor", "urna", "nunc", "id", "cursus", "metus", "aliquam", "eleifend", "mi", "in", "nulla", "posuere", "sollicitudin", "aliquam", "ultrices", "sagittis", "orci,", "a", "scelerisque", "purus", "semper", "eget", "duis", "at", "tellus", "at", "urna", "condimentum", "mattis", "pellentesque", "id", "nibh", "tortor,", "id", "aliquet", "lectus", "proin", "nibh", "nisl,", "condimentum", "id", "venenatis", "a,", "condimentum", "vitae", "sapien", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "sed", "tempus,", "urna", "et", "pharetra", "pharetra,", "massa", "massa", "ultricies", "mi,", "quis", "hendrerit", "dolor", "magna", "eget", "est", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "integer", "eget", "aliquet", "nibh", "praesent", "tristique", "magna", "sit", "amet", "purus", "gravida", "quis", "blandit", "turpis", "cursus", "in", "hac", "habitasse", "platea", "dictumst", "quisque", "sagittis,", "purus", "sit", "amet", "volutpat", "consequat,", "mauris", "nunc", "congue", "nisi,", "vitae", "suscipit", "tellus", "mauris", "a", "diam",
|
||||||
|
"maecenas", "sed", "enim", "ut", "sem", "viverra", "aliquet", "eget", "sit", "amet", "tellus", "cras", "adipiscing", "enim", "eu", "turpis", "egestas", "pretium", "aenean", "pharetra,", "magna", "ac", "placerat", "vestibulum,", "lectus", "mauris", "ultrices", "eros,", "in", "cursus", "turpis", "massa", "tincidunt", "dui", "ut", "ornare", "lectus", "sit", "amet", "est", "placerat", "in", "egestas", "erat", "imperdiet", "sed", "euismod", "nisi", "porta", "lorem", "mollis", "aliquam", "ut", "porttitor", "leo", "a", "diam", "sollicitudin", "tempor", "id", "eu", "nisl", "nunc", "mi", "ipsum,", "faucibus", "vitae", "aliquet", "nec,", "ullamcorper", "sit", "amet", "risus", "nullam", "eget", "felis", "eget", "nunc", "lobortis", "mattis", "aliquam", "faucibus", "purus", "in", "massa", "tempor", "nec", "feugiat", "nisl", "pretium", "fusce", "id", "velit", "ut", "tortor", "pretium", "viverra", "suspendisse", "potenti", "nullam", "ac", "tortor", "vitae", "purus", "faucibus", "ornare", "suspendisse", "sed", "nisi", "lacus,", "sed", "viverra", "tellus", "in", "hac", "habitasse", "platea", "dictumst", "vestibulum", "rhoncus", "est", "pellentesque", "elit", "ullamcorper", "dignissim", "cras", "tincidunt", "lobortis", "feugiat", "vivamus", "at", "augue", "eget", "arcu", "dictum", "varius", "duis", "at", "consectetur", "lorem",
|
||||||
|
"donec", "massa", "sapien,", "faucibus", "et", "molestie", "ac,", "feugiat", "sed", "lectus", "vestibulum", "mattis", "ullamcorper", "velit", "sed", "ullamcorper", "morbi", "tincidunt", "ornare", "massa,", "eget", "egestas", "purus", "viverra", "accumsan", "in", "nisl", "nisi,", "scelerisque", "eu", "ultrices", "vitae,", "auctor", "eu", "augue", "ut", "lectus", "arcu,", "bibendum", "at", "varius", "vel,", "pharetra", "vel", "turpis", "nunc", "eget", "lorem", "dolor,", "sed", "viverra", "ipsum", "nunc", "aliquet", "bibendum", "enim,", "facilisis", "gravida", "neque", "convallis", "a", "cras", "semper", "auctor", "neque,", "vitae", "tempus", "quam", "pellentesque", "nec", "nam", "aliquam", "sem", "et", "tortor", "consequat", "id", "porta", "nibh", "venenatis", "cras", "sed", "felis", "eget", "velit", "aliquet", "sagittis", "id", "consectetur", "purus", "ut", "faucibus", "pulvinar", "elementum", "integer", "enim", "neque,", "volutpat", "ac", "tincidunt", "vitae,", "semper", "quis", "lectus", "nulla", "at", "volutpat", "diam", "ut", "venenatis", "tellus", "in", "metus", "vulputate", "eu", "scelerisque", "felis", "imperdiet", "proin", "fermentum", "leo", "vel", "orci", "porta", "non", "pulvinar", "neque", "laoreet", "suspendisse", "interdum", "consectetur", "libero,", "id", "faucibus", "nisl", "tincidunt", "eget", "nullam", "non", "nisi", "est,", "sit", "amet", "facilisis", "magna",
|
||||||
|
"etiam", "tempor,", "orci", "eu", "lobortis", "elementum,", "nibh", "tellus", "molestie", "nunc,", "non", "blandit", "massa", "enim", "nec", "dui", "nunc", "mattis", "enim", "ut", "tellus", "elementum", "sagittis", "vitae", "et", "leo", "duis", "ut", "diam", "quam", "nulla", "porttitor", "massa", "id", "neque", "aliquam", "vestibulum", "morbi", "blandit", "cursus", "risus,", "at", "ultrices", "mi", "tempus", "imperdiet", "nulla", "malesuada", "pellentesque", "elit", "eget", "gravida", "cum", "sociis", "natoque", "penatibus", "et", "magnis", "dis", "parturient", "montes,", "nascetur", "ridiculus", "mus", "mauris", "vitae", "ultricies", "leo", "integer", "malesuada", "nunc", "vel", "risus", "commodo", "viverra", "maecenas", "accumsan,", "lacus", "vel", "facilisis", "volutpat,", "est", "velit", "egestas", "dui,", "id", "ornare", "arcu", "odio", "ut", "sem", "nulla", "pharetra", "diam", "sit", "amet", "nisl", "suscipit", "adipiscing", "bibendum", "est", "ultricies", "integer", "quis", "auctor", "elit",
|
||||||
|
"sed", "vulputate", "mi", "sit", "amet", "mauris", "commodo", "quis", "imperdiet", "massa", "tincidunt", "nunc", "pulvinar", "sapien", "et", "ligula", "ullamcorper", "malesuada", "proin", "libero", "nunc,", "consequat", "interdum", "varius", "sit", "amet,", "mattis", "vulputate", "enim", "nulla", "aliquet", "porttitor", "lacus,", "luctus", "accumsan", "tortor", "posuere", "ac", "ut", "consequat", "semper", "viverra", "nam", "libero", "justo,", "laoreet", "sit", "amet", "cursus", "sit", "amet,", "dictum", "sit", "amet", "justo", "donec", "enim", "diam,", "vulputate", "ut", "pharetra", "sit", "amet,", "aliquam", "id", "diam", "maecenas", "ultricies", "mi", "eget", "mauris", "pharetra", "et", "ultrices", "neque", "ornare", "aenean", "euismod", "elementum", "nisi,", "quis", "eleifend", "quam", "adipiscing", "vitae", "proin", "sagittis,", "nisl", "rhoncus", "mattis", "rhoncus,", "urna", "neque", "viverra", "justo,", "nec", "ultrices", "dui", "sapien", "eget", "mi", "proin", "sed", "libero", "enim,", "sed", "faucibus", "turpis", "in", "eu", "mi", "bibendum", "neque", "egestas", "congue", "quisque", "egestas", "diam", "in", "arcu", "cursus", "euismod", "quis", "viverra", "nibh", "cras", "pulvinar", "mattis", "nunc,", "sed", "blandit", "libero", "volutpat", "sed", "cras", "ornare", "arcu", "dui", "vivamus", "arcu", "felis,", "bibendum", "ut", "tristique", "et,", "egestas", "quis", "ipsum", "suspendisse", "ultrices", "gravida", "dictum",
|
||||||
|
"fusce", "ut", "placerat", "orci", "nulla", "pellentesque", "dignissim", "enim,", "sit", "amet", "venenatis", "urna", "cursus", "eget", "nunc", "scelerisque", "viverra", "mauris,", "in", "aliquam", "sem", "fringilla", "ut", "morbi", "tincidunt", "augue", "interdum", "velit", "euismod", "in", "pellentesque", "massa", "placerat", "duis", "ultricies", "lacus", "sed", "turpis", "tincidunt", "id", "aliquet", "risus", "feugiat", "in", "ante", "metus,", "dictum", "at", "tempor", "commodo,", "ullamcorper", "a", "lacus", "vestibulum", "sed", "arcu", "non", "odio", "euismod", "lacinia", "at", "quis", "risus", "sed", "vulputate", "odio", "ut", "enim", "blandit", "volutpat", "maecenas", "volutpat", "blandit", "aliquam", "etiam", "erat", "velit,", "scelerisque", "in", "dictum", "non,", "consectetur", "a", "erat", "nam", "at", "lectus", "urna", "duis", "convallis", "convallis", "tellus,", "id", "interdum", "velit", "laoreet", "id", "donec", "ultrices", "tincidunt", "arcu,", "non", "sodales", "neque", "sodales", "ut", "etiam", "sit", "amet", "nisl", "purus,", "in", "mollis", "nunc",
|
||||||
|
"sed", "id", "semper", "risus", "in", "hendrerit", "gravida", "rutrum", "quisque", "non", "tellus", "orci,", "ac", "auctor", "augue", "mauris", "augue", "neque,", "gravida", "in", "fermentum", "et,", "sollicitudin", "ac", "orci", "phasellus", "egestas", "tellus", "rutrum", "tellus", "pellentesque", "eu", "tincidunt", "tortor", "aliquam", "nulla", "facilisi", "cras", "fermentum,", "odio", "eu", "feugiat", "pretium,", "nibh", "ipsum", "consequat", "nisl,", "vel", "pretium", "lectus", "quam", "id", "leo", "in", "vitae", "turpis", "massa", "sed", "elementum", "tempus", "egestas", "sed", "sed", "risus", "pretium", "quam", "vulputate", "dignissim", "suspendisse", "in", "est", "ante", "in", "nibh", "mauris,", "cursus", "mattis", "molestie", "a,", "iaculis", "at", "erat",
|
||||||
|
"pellentesque", "adipiscing", "commodo", "elit,", "at", "imperdiet", "dui", "accumsan", "sit", "amet", "nulla", "facilisi", "morbi", "tempus", "iaculis", "urna,", "id", "volutpat", "lacus", "laoreet", "non", "curabitur", "gravida", "arcu", "ac", "tortor", "dignissim", "convallis", "aenean", "et", "tortor", "at", "risus", "viverra", "adipiscing", "at", "in", "tellus", "integer", "feugiat", "scelerisque", "varius", "morbi", "enim", "nunc,", "faucibus", "a", "pellentesque", "sit", "amet,", "porttitor", "eget", "dolor", "morbi", "non", "arcu", "risus,", "quis", "varius", "quam", "quisque", "id", "diam", "vel", "quam", "elementum", "pulvinar", "etiam", "non", "quam", "lacus", "suspendisse", "faucibus", "interdum", "posuere", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "tristique", "sollicitudin", "nibh", "sit", "amet", "commodo", "nulla", "facilisi",
|
||||||
|
"nullam", "vehicula", "ipsum", "a", "arcu", "cursus", "vitae", "congue", "mauris", "rhoncus", "aenean", "vel", "elit", "scelerisque", "mauris", "pellentesque", "pulvinar", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "maecenas", "pharetra", "convallis", "posuere", "morbi", "leo", "urna,", "molestie", "at", "elementum", "eu,", "facilisis", "sed", "odio", "morbi", "quis", "commodo", "odio", "aenean", "sed", "adipiscing", "diam", "donec", "adipiscing", "tristique", "risus", "nec", "feugiat", "in", "fermentum", "posuere", "urna", "nec", "tincidunt", "praesent", "semper", "feugiat", "nibh", "sed", "pulvinar", "proin", "gravida", "hendrerit", "lectus", "a", "molestie"
|
||||||
|
];
|
||||||
|
//random integer method.
|
||||||
|
Lorem.prototype.randomInt = function (min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
};
|
||||||
|
//text creator method with parameters: how many, what
|
||||||
|
Lorem.prototype.createText = function(count, type) {
|
||||||
|
switch (type) {
|
||||||
|
//paragraphs are loads of sentences.
|
||||||
|
case Lorem.TYPE.PARAGRAPH:
|
||||||
|
var paragraphs = new Array;
|
||||||
|
for (var i = 0; i < count; i++) {
|
||||||
|
var paragraphLength = this.randomInt(10, 20);
|
||||||
|
var paragraph = this.createText(paragraphLength, Lorem.TYPE.SENTENCE);
|
||||||
|
paragraphs.push('<p>'+paragraph+'</p>');
|
||||||
|
}
|
||||||
|
return paragraphs.join('\n');
|
||||||
|
break;
|
||||||
|
//sentences are loads of words.
|
||||||
|
case Lorem.TYPE.SENTENCE:
|
||||||
|
var sentences = new Array;
|
||||||
|
for (var i = 0; i < count; i++) {
|
||||||
|
var sentenceLength = this.randomInt(5, 10);
|
||||||
|
var words = this.createText(sentenceLength, Lorem.TYPE.WORD).split(' ');
|
||||||
|
words[0] = words[0].substr(0, 1).toUpperCase() + words[0].substr(1);
|
||||||
|
var sentence = words.join(' ');
|
||||||
|
|
||||||
|
sentences.push(sentence);
|
||||||
|
}
|
||||||
|
return (sentences.join('. ') + '.').replace(/(\.\,|\,\.)/g, '.');
|
||||||
|
break;
|
||||||
|
//words are words
|
||||||
|
case Lorem.TYPE.WORD:
|
||||||
|
var wordIndex = this.randomInt(0, Lorem.WORDS.length - count - 1);
|
||||||
|
|
||||||
|
return Lorem.WORDS.slice(wordIndex, wordIndex + count).join(' ').replace(/\.|\,/g, '');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Lorem.prototype.createLorem = function(element) {
|
||||||
|
|
||||||
|
var lorem = new Array;
|
||||||
|
var count;
|
||||||
|
|
||||||
|
if (/\d+-\d+[psw]/.test(this.query)){
|
||||||
|
var range = this.query.replace(/[a-z]/,'').split("-");
|
||||||
|
count = Math.floor(Math.random() * parseInt(range[1])) + parseInt(range[0]);
|
||||||
|
}else{
|
||||||
|
count = parseInt(this.query);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (/\d+p/.test(this.query)) {
|
||||||
|
var type = Lorem.TYPE.PARAGRAPH;
|
||||||
|
}
|
||||||
|
else if (/\d+s/.test(this.query)) {
|
||||||
|
var type = Lorem.TYPE.SENTENCE;
|
||||||
|
}
|
||||||
|
else if (/\d+w/.test(this.query)) {
|
||||||
|
var type = Lorem.TYPE.WORD;
|
||||||
|
}
|
||||||
|
|
||||||
|
lorem.push(this.createText(count, type));
|
||||||
|
lorem = lorem.join(' ');
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
if (this.type == Lorem.TEXT)
|
||||||
|
element.innerHTML += lorem;
|
||||||
|
else if (this.type == Lorem.IMAGE) {
|
||||||
|
//TODO: for now, using lorempixum.
|
||||||
|
var path = '';
|
||||||
|
var options = this.query.split(' ');
|
||||||
|
if (options[0] == 'gray') {
|
||||||
|
path += '/g';
|
||||||
|
options[0] = '';
|
||||||
|
}
|
||||||
|
if (element.getAttribute('width'))
|
||||||
|
path += '/' + element.getAttribute('width');
|
||||||
|
|
||||||
|
if (element.getAttribute('height'))
|
||||||
|
path += '/' + element.getAttribute('height');
|
||||||
|
|
||||||
|
path += '/' + options.join(' ').replace(/(^\s+|\s+$)/, '');
|
||||||
|
element.src = 'http://lorempixum.com'+path.replace(/\/\//, '/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element == null)
|
||||||
|
return lorem;
|
||||||
|
};
|
||||||
|
|
||||||
|
//Register as jQuery
|
||||||
|
if (typeof jQuery != 'undefined') {
|
||||||
|
(function($) {
|
||||||
|
$.fn.lorem = function() {
|
||||||
|
$(this).each(function() {
|
||||||
|
var lorem = new Lorem;
|
||||||
|
lorem.type = $(this).is('img') ? Lorem.IMAGE : Lorem.TEXT;
|
||||||
|
//data-lorem can be taken with data function (thanks to http://forrst.com/people/webking)
|
||||||
|
lorem.query = $(this).data('lorem');
|
||||||
|
lorem.createLorem(this);
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
//If developer run this javascript, then we can run the lorem.js
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('[data-lorem]').lorem();
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
// Smooth Scroll Init - Register click handler for ID anchors
|
||||||
|
$('a[href*="#"]:not(a[modal])').click(function () {
|
||||||
|
if (location.pathname.replace(/\/$/, "") == this.pathname.replace(/\/$/, "") && location.hostname == this.hostname) {
|
||||||
|
var target = $(this.hash);
|
||||||
|
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||||
|
if (target.length) {
|
||||||
|
var targetOffset = target.offset().top - $(".nav-bar__header").outerHeight(true);
|
||||||
|
// console.log(targetOffset, target.offset().top, $(".nav-bar__header").outerHeight())
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: targetOffset
|
||||||
|
}, 1000);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// navbar mobile toggle - preload
|
||||||
|
(function navbarInit() {
|
||||||
|
|
||||||
|
function toggleMobileMenu() {
|
||||||
|
$('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
|
||||||
|
$('.nav-bar__menu')[0].classList.toggle("hide-menu");
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMobileMenu() {
|
||||||
|
$('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
|
||||||
|
$('.nav-bar__menu')[0].classList.add("hide-menu");
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.nav-bar__menu-button, .nav-bar__menu, .nav-bar__menu-item').click(toggleMobileMenu)
|
||||||
|
$("main").click(hideMobileMenu)
|
||||||
|
|
||||||
|
}());
|
||||||
|
|
||||||
|
// using an image for phone and toggle hide it
|
||||||
|
$('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
|
||||||
|
// $('#phone').click(function () { alert('phone clicked'); return false; });
|
||||||
|
|
||||||
|
function navbarSpacer() {
|
||||||
|
$('.nav-bar-spacer').css({
|
||||||
|
height: $(".nav-bar__header").outerHeight(true),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// hero resizer
|
||||||
|
function heroResize(bfr = 30) {
|
||||||
|
var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
|
||||||
|
w = $(window).width(),
|
||||||
|
fr = bfr * h / w
|
||||||
|
// console.log('w,h,fr', w, h, fr)
|
||||||
|
// minimum base font ratio
|
||||||
|
fr = (fr > bfr) ? bfr : fr
|
||||||
|
// adjust for short viewport height
|
||||||
|
fr = (w / h > 1 && h < 700) ? 30 * w / h : fr
|
||||||
|
//console.log('fr after', fr)
|
||||||
|
|
||||||
|
$('#hero').css({
|
||||||
|
width: w + 15,
|
||||||
|
height: h / w > 1.5 ? w * 1.5 : h,
|
||||||
|
});
|
||||||
|
|
||||||
|
var mf = w / h > 1 ? 0 : 12
|
||||||
|
|
||||||
|
$('#hero').flowtype({
|
||||||
|
maxFont: 30,
|
||||||
|
minFont: mf,
|
||||||
|
fontRatio: fr
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function typeResize(fr = 20) {
|
||||||
|
$('main:not(#hero)').flowtype({
|
||||||
|
// maximum: 1000,
|
||||||
|
minFont: 12,
|
||||||
|
maxFont: 25,
|
||||||
|
fontRatio: fr
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lightbox for Gallery
|
||||||
|
|
||||||
|
function lightgallery(id) {
|
||||||
|
// Intialize all the media i.e. photos with "media" id
|
||||||
|
// TODO use Hugo params to initialize multiple galleries/albums
|
||||||
|
var lg = $(id).lightGallery({
|
||||||
|
thumbnail: true,
|
||||||
|
thumbWidth: 80,
|
||||||
|
controls: true,
|
||||||
|
loop: false,
|
||||||
|
download: false,
|
||||||
|
counter: true,
|
||||||
|
// videojs: true
|
||||||
|
});
|
||||||
|
|
||||||
|
lg.on('onBeforeOpen.lg', function (event) {
|
||||||
|
$('.nav-bar').css("display", "none")
|
||||||
|
});
|
||||||
|
|
||||||
|
lg.on('onCloseAfter.lg', function (event) {
|
||||||
|
$('.nav-bar').css("display", "flex")
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal tool. Must use modal template for content
|
||||||
|
(function ($) {
|
||||||
|
|
||||||
|
// extend jquery so remove handlers can be added and removed at the right time in a group
|
||||||
|
$.fn.modalHandlers = function (state = 'on') {
|
||||||
|
|
||||||
|
if (state === 'on') {
|
||||||
|
$(document).on('click', modalClickOutside);
|
||||||
|
$(document).keypress(modalEsc);
|
||||||
|
this.find('a[modal-close]').on('click', modalClickCloser);
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === 'off') {
|
||||||
|
$(document).off('click', modalClickOutside);
|
||||||
|
$(document).off('keypress', modalEsc);
|
||||||
|
this.find('a[modal-close]').off('click', modalClickCloser);
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// modal event handlers - add more if you want - add them to extension above
|
||||||
|
function modalEsc(event) {
|
||||||
|
if (event.key === "Escape") { modalHide() }
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalClickOutside(event) {
|
||||||
|
var container = $(".section__container--modal");
|
||||||
|
if (!container.is(event.target) && // If the target of the click isn't the container...
|
||||||
|
container.has(event.target).length === 0) // ... nor a descendant of the container
|
||||||
|
{ modalHide(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalClickCloser(event) {
|
||||||
|
modalHide();
|
||||||
|
}
|
||||||
|
|
||||||
|
// modal show and hide
|
||||||
|
function modalShow(modal_hash) {
|
||||||
|
var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
|
||||||
|
$(modal_hash).find('.section__headline').append(closer).end().modalHandlers().addClass("current").css('display', 'flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalHide() {
|
||||||
|
$('.section--modal.current').hide().modalHandlers("off").removeClass("current").find('a[modal-close]').remove;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Register click event for all modal links on page
|
||||||
|
$("a[modal]").click(function () {
|
||||||
|
if (location.pathname.replace(/\/$/, "") == this.pathname.replace(/\/$/, "") && location.hostname == this.hostname) {
|
||||||
|
var target = this.hash;
|
||||||
|
modalShow(target);
|
||||||
|
} else {
|
||||||
|
alert(`modal display of off page content not supported`);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
|
|
||||||
|
// end modal
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
function isMobile(a) {
|
||||||
|
return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call is
|
||||||
|
// isMobile(navigator.userAgent || navigator.vendor || window.opera)
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
(function ($) {
|
||||||
|
|
||||||
|
$(document).bind("DOMContentLoaded",
|
||||||
|
function () {
|
||||||
|
|
||||||
|
var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
|
||||||
|
$('div[youtube_id]').each(function () {
|
||||||
|
if ($(this).attr('nothumb') !== "yes") {
|
||||||
|
var vid = $(this).attr('youtube_id');
|
||||||
|
var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
|
||||||
|
var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
|
||||||
|
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()
|
||||||
|
|
||||||
|
} else { // if image thumbs turned off
|
||||||
|
insertIframe.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function insertIframe() {
|
||||||
|
var $box = $(this).parent()
|
||||||
|
var id = $box.attr('youtube_id')
|
||||||
|
var autoplay = "autoplay=1&"
|
||||||
|
if (!id) { // image thumb is off not called by thumb so don't need parent
|
||||||
|
$box = $(this)
|
||||||
|
id = $box.attr('youtube_id')
|
||||||
|
autoplay = ""
|
||||||
|
}
|
||||||
|
var mw = $box.attr('maxWidth');
|
||||||
|
var wp = $box.attr('wPad');
|
||||||
|
var start = $box.attr("start") || 1
|
||||||
|
if ($box.attr("end")) { var end = "&end=" + $box.attr("end") } else { var end = "" }
|
||||||
|
var list = ""
|
||||||
|
if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
|
||||||
|
var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}${end}`
|
||||||
|
var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
|
||||||
|
$box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
|
||||||
|
}
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
|
|
||||||
|
// TODO grab the video title as well as the thumb for use in thumb display
|
||||||
|
// only works if server allows cross domain like s3
|
||||||
|
//http://stackoverflow.com/questions/1760231/how-do-i-get-the-title-of-a-youtube-video-if-i-have-the-video-id
|
||||||
|
// #var ytApiKey = "...";
|
||||||
|
// #var videoId = "ylLzyHk54Z0";
|
||||||
|
// #$.get("https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + videoId + "&key=" + ytApiKey, function(data) {
|
||||||
|
// #alert(data.items[0].snippet.title);
|
||||||
|
// # });
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Modals on GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/modals/</link>
|
||||||
|
<description>Recent content in Modals on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/modals/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
<item>
|
||||||
|
<title>Example Modal</title>
|
||||||
|
<link>https://www.gpccaor.org/modals/test/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/modals/test/</guid>
|
||||||
|
<description>Here is how you can add additional content to your page without having it take up space&hellip;use a modal!
|
||||||
|
To do that make a .md file in the content/modals directory.
|
||||||
|
Put any markdown content in it including shortcodes.
|
||||||
|
Then just link to it in a section markdown file using the link shortcode.
|
||||||
|
example
|
||||||
|
{{&lt; link url=&quot;#modal-test&quot; text=&quot;A test modal&quot; type=&quot;btn&quot; display=&quot;modal&quot; &gt;}} where there is a file test.md in the content/modals directory</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>More Markdown</title>
|
||||||
|
<link>https://www.gpccaor.org/modals/map/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/modals/map/</guid>
|
||||||
|
<description>And now for the rest of the show One Two Three * One * Two * Three Buy flour and salt Mix together with water Bake 1. Buy flour and salt 1. Mix together with water 1. Bake Monspaced Font Box:
|
||||||
|
Monospaced type box primarily for showing code Indent three or enclose in``` or put it inline like this
|
||||||
|
or put it `inline` like this a separator line * * *</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Sections on GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/sections/</link>
|
||||||
|
<description>Recent content in Sections on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/sections/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
<item>
|
||||||
|
<title>The GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/sections/about/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/sections/about/</guid>
|
||||||
|
<description></description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title></title>
|
||||||
|
<link>https://www.gpccaor.org/sections/footer/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://www.gpccaor.org/sections/footer/</guid>
|
||||||
|
<description>site updated: October 29, 2021@8:08 pm status: initial development
|
||||||
|
</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||||
|
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||||
|
<url>
|
||||||
|
<loc>https://www.gpccaor.org/archive/first/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/sections/about/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/sections/footer/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/archive/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/categories/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/modals/test/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/modals/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/modals/map/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/sections/</loc>
|
||||||
|
</url><url>
|
||||||
|
<loc>https://www.gpccaor.org/tags/</loc>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Tags on GPCCA</title>
|
||||||
|
<link>https://www.gpccaor.org/tags/</link>
|
||||||
|
<description>Recent content in Tags on GPCCA</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language><atom:link href="https://www.gpccaor.org/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
Loading…
Reference in New Issue