commit 72c7966f8eeebe96e0f3792c158e05e337ca82cc Author: kebler.net Date: Sat Oct 30 07:52:57 2021 -0700 iniital build bare bones diff --git a/archive/index.xml b/archive/index.xml new file mode 100644 index 0000000..a9d3e85 --- /dev/null +++ b/archive/index.xml @@ -0,0 +1,21 @@ + + + + Archives on GPCCA + https://www.gpccaor.org/archive/ + Recent content in Archives on GPCCA + Hugo -- gohugo.io + en-us + + Custom Home Section + https://www.gpccaor.org/archive/first/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/archive/first/ + 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: + + + + diff --git a/categories/index.xml b/categories/index.xml new file mode 100644 index 0000000..ebbf48c --- /dev/null +++ b/categories/index.xml @@ -0,0 +1,10 @@ + + + + Categories on GPCCA + https://www.gpccaor.org/categories/ + Recent content in Categories on GPCCA + Hugo -- gohugo.io + en-us + + diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..32ce190 --- /dev/null +++ b/css/base.css @@ -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; +} diff --git a/css/custom-responsive.css b/css/custom-responsive.css new file mode 100644 index 0000000..57088b7 --- /dev/null +++ b/css/custom-responsive.css @@ -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) { +} diff --git a/css/custom.css b/css/custom.css new file mode 100644 index 0000000..5cc0327 --- /dev/null +++ b/css/custom.css @@ -0,0 +1,6 @@ + +.box--maps .embed--map { + padding: 5px; + background-color: black; +} + diff --git a/css/navbar.css b/css/navbar.css new file mode 100644 index 0000000..b2a50c8 --- /dev/null +++ b/css/navbar.css @@ -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) { + + +} diff --git a/css/page.css b/css/page.css new file mode 100644 index 0000000..6445a21 --- /dev/null +++ b/css/page.css @@ -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; +} diff --git a/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..8f80abc --- /dev/null +++ b/css/responsive.css @@ -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; + } +} diff --git a/css/uci-shortcodes-custom.css b/css/uci-shortcodes-custom.css new file mode 100644 index 0000000..3adfb5e --- /dev/null +++ b/css/uci-shortcodes-custom.css @@ -0,0 +1,6 @@ +/* picture captions */ +.lg-sub-html { + font-size: 2em; + font-weight: bold; +} + diff --git a/css/uci-shortcodes.css b/css/uci-shortcodes.css new file mode 100644 index 0000000..dd7e63b --- /dev/null +++ b/css/uci-shortcodes.css @@ -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; +} diff --git a/files/latest-minutes.pdf b/files/latest-minutes.pdf new file mode 100644 index 0000000..f99edd2 Binary files /dev/null and b/files/latest-minutes.pdf differ diff --git a/images/city-park.jpg b/images/city-park.jpg new file mode 100644 index 0000000..22194f0 Binary files /dev/null and b/images/city-park.jpg differ diff --git a/images/community-center.jpg b/images/community-center.jpg new file mode 100644 index 0000000..00839a4 Binary files /dev/null and b/images/community-center.jpg differ diff --git a/images/strawberrys.jpg b/images/strawberrys.jpg new file mode 100644 index 0000000..c788a8f Binary files /dev/null and b/images/strawberrys.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e70b8bc --- /dev/null +++ b/index.html @@ -0,0 +1,452 @@ + + + + + GPCCA + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+
+ +

Greater Prairie City Community Association

+

GPCCA

+ +
+ +

Serving Prairie City

+ + +
+
+
+ + +
+ + + + + +
+
+
+

The GPCCA

+
+
+ +
+
+
+ + +
+
+
+

+
+
+
+

site updated: October 29, 2021@8:08 pm
+status: initial development

+
+ +
+
+
+ + + +
+
+
+

Example Modal

+
+
+

Here is how you can add additional content to your page without having it take up space…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

+
{{< link url="#modal-test" text="A test modal" type="btn" display="modal" >}}
+

where there is a file test.md in the content/modals directory

+

and the url is `url="#modal-<modal file name without .md>"``

+ +
+
+
+ +
+
+
+

More Markdown

+
+
+

And now for the rest of the show

+
+
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
+
* One
+* Two
+* Three
+
+
+
+
+
    +
  1. Buy flour and salt
    2. +
  2. Mix together with water
    3. +
  3. Bake
    4. +
+
+
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
+* * *

+
+

This is an example simple markdown link.

+

This link has no title attr.

+

This is [an example] someid reference-style link.

+
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"
+
+

Use the link plugin shortcode for doing more fancy things.

+ + + + + + + + + + + + +
A Button Styled Link with icon opens in window
+ + +
+

You can put images from external sources in this way

+

Alt Text

+
![Alt Text](http://placehold.it/200x50 "Image Title")
+
+

but it’s probably better to use the plugin shortcode for your images

+ + + +
+
Where I Want To Be
+ + + + +
Sure is Green
+ +
+ +
{{< image filename="green-landscape.jpg" title="Where I Want To Be" caption="Sure is Green" >}}
+
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.xml b/index.xml new file mode 100644 index 0000000..69f9af9 --- /dev/null +++ b/index.xml @@ -0,0 +1,65 @@ + + + + GPCCA + https://www.gpccaor.org/ + Recent content on GPCCA + Hugo -- gohugo.io + en-us + + Custom Home Section + https://www.gpccaor.org/archive/first/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/archive/first/ + 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: + + + + The GPCCA + https://www.gpccaor.org/sections/about/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/sections/about/ + + + + + + https://www.gpccaor.org/sections/footer/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/sections/footer/ + site updated: October 29, 2021@8:08 pm status: initial development + + + + + Example Modal + https://www.gpccaor.org/modals/test/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/modals/test/ + 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 + + + + More Markdown + https://www.gpccaor.org/modals/map/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/modals/map/ + 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 * * * + + + + diff --git a/js/analytics.js b/js/analytics.js new file mode 100644 index 0000000..88b5577 --- /dev/null +++ b/js/analytics.js @@ -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'); diff --git a/js/custom-docready.js b/js/custom-docready.js new file mode 100644 index 0000000..e69de29 diff --git a/js/custom.js b/js/custom.js new file mode 100644 index 0000000..1e26460 --- /dev/null +++ b/js/custom.js @@ -0,0 +1,3 @@ +function nothing() { + return false; +} diff --git a/js/docready.js b/js/docready.js new file mode 100644 index 0000000..f421953 --- /dev/null +++ b/js/docready.js @@ -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() + }); + +}); diff --git a/js/fitToWindow.js b/js/fitToWindow.js new file mode 100644 index 0000000..a63a8d2 --- /dev/null +++ b/js/fitToWindow.js @@ -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") } +} diff --git a/js/flowType.js b/js/flowType.js new file mode 100644 index 0000000..d769d09 --- /dev/null +++ b/js/flowType.js @@ -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); + }); + +}; diff --git a/js/lorem.js b/js/lorem.js new file mode 100644 index 0000000..39479c6 --- /dev/null +++ b/js/lorem.js @@ -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('

'+paragraph+'

'); + } + 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); + } + +})(); \ No newline at end of file diff --git a/js/page.js b/js/page.js new file mode 100644 index 0000000..1f06d70 --- /dev/null +++ b/js/page.js @@ -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 = "" + $(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 diff --git a/js/util.js b/js/util.js new file mode 100644 index 0000000..c29b5d1 --- /dev/null +++ b/js/util.js @@ -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) diff --git a/js/youtube.js b/js/youtube.js new file mode 100644 index 0000000..4a95ddd --- /dev/null +++ b/js/youtube.js @@ -0,0 +1,50 @@ +(function ($) { + + $(document).bind("DOMContentLoaded", + function () { + + var playBtn = '' + $('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 = `
` + $(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 = `` + $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); +// # }); diff --git a/modals/index.xml b/modals/index.xml new file mode 100644 index 0000000..7b545b5 --- /dev/null +++ b/modals/index.xml @@ -0,0 +1,35 @@ + + + + Modals on GPCCA + https://www.gpccaor.org/modals/ + Recent content in Modals on GPCCA + Hugo -- gohugo.io + en-us + + Example Modal + https://www.gpccaor.org/modals/test/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/modals/test/ + 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 + + + + More Markdown + https://www.gpccaor.org/modals/map/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/modals/map/ + 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 * * * + + + + diff --git a/sections/index.xml b/sections/index.xml new file mode 100644 index 0000000..9b46430 --- /dev/null +++ b/sections/index.xml @@ -0,0 +1,29 @@ + + + + Sections on GPCCA + https://www.gpccaor.org/sections/ + Recent content in Sections on GPCCA + Hugo -- gohugo.io + en-us + + The GPCCA + https://www.gpccaor.org/sections/about/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/sections/about/ + + + + + + https://www.gpccaor.org/sections/footer/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://www.gpccaor.org/sections/footer/ + site updated: October 29, 2021@8:08 pm status: initial development + + + + + diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..f9aba44 --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,27 @@ + + + + https://www.gpccaor.org/archive/first/ + + https://www.gpccaor.org/sections/about/ + + https://www.gpccaor.org/sections/footer/ + + https://www.gpccaor.org/archive/ + + https://www.gpccaor.org/categories/ + + https://www.gpccaor.org/modals/test/ + + https://www.gpccaor.org/ + + https://www.gpccaor.org/modals/ + + https://www.gpccaor.org/modals/map/ + + https://www.gpccaor.org/sections/ + + https://www.gpccaor.org/tags/ + + diff --git a/tags/index.xml b/tags/index.xml new file mode 100644 index 0000000..0e8240f --- /dev/null +++ b/tags/index.xml @@ -0,0 +1,10 @@ + + + + Tags on GPCCA + https://www.gpccaor.org/tags/ + Recent content in Tags on GPCCA + Hugo -- gohugo.io + en-us + +