diff --git a/README.adoc b/README.adoc index 0256fe9..5f94f2e 100644 --- a/README.adoc +++ b/README.adoc @@ -11,3 +11,4 @@ * [ ] Figure out contact info * [ ] Font? * [ ] Make it so links are underlined when not hovered +* [ ] All images with `Hawk` should be attributed diff --git a/build.sh b/build.sh index 44da50c..08a7568 100755 --- a/build.sh +++ b/build.sh @@ -21,17 +21,19 @@ cp -vr css/ images/ build/ render_image() { local SIZE="${1}" FILENAME="${2}" EXTRA_OPTIONS=(-auto-orient) + EXTENSION="${FILENAME##*.}" shift 2 - if [[ "${1}" == "--square" ]]; then + if [[ "${1-}" == "--square" ]]; then EXTRA_OPTIONS+=(-background none -gravity center -extent "${SIZE}") fi - convert -resize "${SIZE}^" "${EXTRA_OPTIONS[@]}" "orig/${FILENAME}" "build/images/${FILENAME}" + convert -resize "${SIZE}^" "${EXTRA_OPTIONS[@]}" "orig/${FILENAME}" "build/images/${FILENAME%.*}-${SIZE}.${EXTENSION}" } render_image 200x200 "5._Elementary_GLOBE_Climate_Book_Cover.jpg" --square render_image 200x200 "Diane_Student_Scammon_Bay.png" --square render_image 200x200 "earth-small.png" --square render_image 1000x1000 "earth-huge.png" --square +render_image 1000x1000 "Diane_Student_Scammon_Bay.png" echo "Stripping metadata" exiftool -overwrite_original -all= -- build/images/*.* diff --git a/css/custom.css b/css/custom.css index 25e736b..9b22a2d 100644 --- a/css/custom.css +++ b/css/custom.css @@ -1,3 +1,13 @@ .left-align { text-align: left; } + +img.thumbnail { + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; +} + +img.big { + width: 100%; +} diff --git a/css/style.css b/css/style.css index d4528f6..7626aee 100644 --- a/css/style.css +++ b/css/style.css @@ -1,241 +1,297 @@ -@import url(http://fonts.googleapis.com/css?family=Abel); +/*@import url(http://fonts.googleapis.com/css?family=Abel);*/ -body { background-color:#fefdfb; color: #555; font-family: 'Abel', sans-serif; font-size: 14px; font-weight:normal;margin: 0; } -a:link, a:visited, a:active{ color:inherit; text-decoration: none; } -a:hover {color: #FC436B; text-decoration:underline; } -img {padding:5px; border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%;} +body { + background-color: #fefdfb; + color: #555; + font-family: 'Abel', sans-serif; + font-size: 14px; + font-weight: normal; + margin: 0; +} -.icon, .hide {font-size:20px;} -.right {text-align:right; } -.hide {display: none;} +a:link, a:visited, a:active { + color: inherit; + /*text-decoration: none;*/ +} + +a:hover { + color: #FC436B; + text-decoration: underline; +} + +img { + padding: 5px; +} + +.icon, .hide { + font-size: 20px; +} + +.right { + text-align: right; +} + +.hide { + display: none; +} #menu { - width:100%; - min-height:35px; - background-color: /*#01dddd #B61B82 #03D7CB*/ green; - position:fixed; - top:0; left:0; + width: 100%; + min-height: 35px; + background-color: /*#01dddd #B61B82 #03D7CB*/ + green; + position: fixed; + top: 0; + left: 0; } #menu a { - background-color:inherit; - color: #fff; + background-color: inherit; + color: #fff; } #menu a:hover { - background: inherit; - color: #ccc; - text-decoration:none; + background: inherit; + color: #ccc; + text-decoration: none; } nav { - display: table; - table-layout: fixed; - width: 70%; - margin: 0 auto; + display: table; + table-layout: fixed; + width: 70%; + margin: 0 auto; } -ul#topnav { - display: table-row; - padding: 0; - overflow: hidden; - position:relative; - bottom:0; +ul#topnav { + display: table-row; + padding: 0; + overflow: hidden; + position: relative; + bottom: 0; } ul#topnav li { - list-style-type: none; - display: table-cell; - text-align:center; - vertical-align:middle; + list-style-type: none; + display: table-cell; + text-align: center; + vertical-align: middle; } - ul#topnav li a { - display:block; - padding:4px 0px; + display: block; + padding: 4px 0px; } #container { - width:100%; - margin-top:48px; + width: 100%; + margin-top: 48px; } #pageheader { - display:table; - width:62.5%; - margin:auto; + display: table; + width: 62.5%; + margin: auto; } - .section { - width:62.5%; - border-top:1px solid #eee; - padding:20px 0; - margin:auto; + width: 62.5%; + border-top: 1px solid #eee; + padding: 20px 0; + margin: auto; } .pageitem { - display:table; - width:100%; - margin-bottom:15px; - padding-top:15px; - text-align:center; + display: table; + width: 100%; + margin-bottom: 15px; + padding-top: 15px; + text-align: center; } .pageitem h1 { - font-weight:normal; - color:#555; - margin:0; - text-align:left; + font-weight: normal; + color: #555; + margin: 0; + text-align: left; } .pageitem h2 { - font-size:32px; - background-color:inherit; - color:#444; - margin-top:0; + font-size: 32px; + background-color: inherit; + color: #444; + margin-top: 0; } .pageitem p em { - background-color:inherit; - color:#444; - font-size:40px; - font-style:normal; - font-weight:100; + background-color: inherit; + color: #444; + font-size: 40px; + font-style: normal; + font-weight: 100; } .pageitem p { - padding:0 75px; - margin:0; - font-size:18px; - line-height:200%; - } - - -.col { - display: table-cell; + padding: 0 75px; + margin: 0; + font-size: 18px; + line-height: 200%; } +.col { + display: table-cell; +} .col ul#sub { - float:right; - padding:0; - margin:0; + float: right; + padding: 0; + margin: 0; } .col ul#sub li { - display:inline; - list-style-type: none; - text-align:right; + display: inline; + list-style-type: none; + text-align: right; } .col ul#sub li a { - padding:5px; - background-color:inherit; - color:#777; + padding: 5px; + background-color: inherit; + color: #777; } .col ul#sub li a:hover { - color:#FC436B; + color: #FC436B; } #footer { - display:table; - width:100%; - margin-bottom:15px; - padding:15px 0; - text-align:left; - font-size:13px; - color:#999; + display: table; + width: 100%; + margin-bottom: 15px; + padding: 15px 0; + text-align: left; + font-size: 13px; + color: #999; } #footer p { - text-align:left; - padding:0; -} - -ul#bottomnav { - display: table-row; - padding: 0; -} - -ul#bottomnav li { - list-style-type: none; - display: table-cell; - text-align:left; - font-weight:bold; - vertical-align:top; -} - -ul#bottomnav li ul { -padding:0; -padding-bottom:20px; -} - -ul#bottomnav li li { - display: list-item; - font-weight:100; -} - -#credits { - display:table; - width:100%; - text-align:left; - font-size:12px; - color:#999; - line-height:100%; -} - -#show-menu {display: none;} -.responsive { background-color:inherit; color:#fff; text-align:left; font-weight:normal; font-size:1.5em; padding: 0; position:absolute; top:10%; left:5%; display:none; } -@media screen and (max-width : 700px){ - -/* menu */ - -ul#topnav {display:none;} -.hide, .responsive { display:block;} -.icon { display:none;} -.logo { position:absolute; top:10%; right:50%;} -.search {position:absolute; top:10%; right:5%; } - -#show-menu:checked ~ ul#topnav {display: block; position: absolute; top:100%; width:100%; margin:0; overflow:visible; } -ul#topnav li { display: block; text-align:left; margin:0 0 1px -15%; background-color:#FC436B;} -ul#topnav li a { padding-left:20px;} - -.pageitem p{ - padding:0; -} - -.col { - float:left; - margin:auto; - width:100%; - text-align:center; -} - -.col ul#sub { - clear:both; - float:none; - margin:auto; -} - -.col ul#sub li { - text-align:center; + text-align: left; + padding: 0; } ul#bottomnav { - display: list-item; - list-style-type: none; - } + display: table-row; + padding: 0; +} ul#bottomnav li { - display:block; - text-align:center; + list-style-type: none; + display: table-cell; + text-align: left; + font-weight: bold; + vertical-align: top; } -#credits p{ -text-align:center; +ul#bottomnav li ul { + padding: 0; + padding-bottom: 20px; +} + +ul#bottomnav li li { + display: list-item; + font-weight: 100; +} + +#credits { + display: table; + width: 100%; + text-align: left; + font-size: 12px; + color: #999; + line-height: 100%; +} + +#show-menu { + display: none; +} + +.responsive { + background-color: inherit; + color: #fff; + text-align: left; + font-weight: normal; + font-size: 1.5em; + padding: 0; + position: absolute; + top: 10%; + left: 5%; + display: none; +} + +@media screen and (max-width: 700px) { + /* menu */ + ul#topnav { + display: none; + } + .hide, .responsive { + display: block; + } + .icon { + display: none; + } + .logo { + position: absolute; + top: 10%; + right: 50%; + } + .search { + position: absolute; + top: 10%; + right: 5%; + } + #show-menu:checked~ul#topnav { + display: block; + position: absolute; + top: 100%; + width: 100%; + margin: 0; + overflow: visible; + } + ul#topnav li { + display: block; + text-align: left; + margin: 0 0 1px -15%; + background-color: #FC436B; + } + ul#topnav li a { + padding-left: 20px; + } + .pageitem p { + padding: 0; + } + .col { + float: left; + margin: auto; + width: 100%; + text-align: center; + } + .col ul#sub { + clear: both; + float: none; + margin: auto; + } + .col ul#sub li { + text-align: center; + } + ul#bottomnav { + display: list-item; + list-style-type: none; + } + ul#bottomnav li { + display: block; + text-align: center; + } + #credits p { + text-align: center; + } } diff --git a/includes/footer.pug b/includes/footer.pug index b8e6869..99c15c1 100644 --- a/includes/footer.pug +++ b/includes/footer.pug @@ -5,28 +5,28 @@ div.section div.pageitem div.col // a(href="#") - img(src="images/fa.png") + img(src="images/fa.png" alt="Facebook logo") p Email. | dr.diane well hello there ☃ :) | @ | geocation.com div.col a(href="#") - img(src="images/tw.png") + img(src="images/tw.png" alt="Twitter logo") p Follow. | We are on Twitter br | twitter.com/foo-template div.col a(href="#") - img(src="images/in.png") + img(src="images/in.png" alt="Instagram logo") p Like. | We are on Instagram br | instagram.com/foo-template div.col a(href="#") - img(src="images/go.png") + img(src="images/go.png" alt="Google Plus logo") p +1. | We are on Google+ br diff --git a/includes/hawk.pug b/includes/hawk.pug new file mode 100644 index 0000000..3f3bc23 --- /dev/null +++ b/includes/hawk.pug @@ -0,0 +1,3 @@ +br +| Photo courtesy: +a(href="https://ryanhawk.com/") RyanHawk.com diff --git a/templates/index.pug b/templates/index.pug index 8e587ca..49f3f82 100644 --- a/templates/index.pug +++ b/templates/index.pug @@ -9,17 +9,17 @@ div.section div.pageitem div.col a(href="education.html") - img(src="images/5._Elementary_GLOBE_Climate_Book_Cover.jpg") + img.thumbnail(src="images/5._Elementary_GLOBE_Climate_Book_Cover-200x200.jpg", alt="Book cover for 'What in the World is Happening to Our Climate?'") br | Education div.col a(href="outreach.html") - img(src="images/Diane_Student_Scammon_Bay.png") + img.thumbnail(src="images/Diane_Student_Scammon_Bay-200x200.png", alt="Diane instructing a student at Scammon Bay, AK") br | Outreach div.col a(href="community-involvement.html") - img(src="images/earth-small.png") + img.thumbnail(src="images/earth-small-200x200.png", alt="The Earth from space") br | Community Involvement diff --git a/templates/outreach.pug b/templates/outreach.pug index 543a48d..1763cac 100644 --- a/templates/outreach.pug +++ b/templates/outreach.pug @@ -3,9 +3,43 @@ include ../includes/head.pug div.section div.pageitem - h2 Outreach + h2 NOAA Teacher at Sea - Scammon Bay, AK + + figure + img.big(src="images/Diane_Student_Scammon_Bay-1000x1000.png", alt="Diane instructing a student at Scammon Bay, AK") + figcaption + NOAA Teacher at Sea, Mary Cook, invited Diane Stanitski and John Adler to Scammon Bay, AK in 2017 to teach and interact with her indigenous Yup'ik students. See the highlights of their trip at + a(href="https://ryanhawk.com/noaa-teacher-at-sea-mary") https://ryanhawk.com/noaa-teacher-at-sea-mary + include ../includes/hawk.pug + + + h2 + a(href="https://jason.org/") JASON Learning + + p + | Diane was a JASON Host Researcher for Expedition 2: Climate Connections — Drift and Flow in the JASON Learning Curriculum, + a(href="https://jason.org/portfolio_item/climate-seas-of-change/") Climate: Seas of Change + + h3 + // | JASON Learning ( + a(href="https://jason.org/live/") JASON Live Events + // | ) + p + | Diane presented + a(href="https://home.edweb.net/webinar/planet20200114/?_ga=2.130302027.510347060.1649016112-644777626.1649016112") Climate Change and Its Impact on the Ocean – January 14, 2020 + | (Co-hosted by + a(href="https://home.edweb.net/") edWeb.net + | and + a(href="https://jason.org/") JASON Learning + | ) + + h3 JASON Learning STEM Role Model Q&A + p + | Diane was featured as a STEM role model on February 20, 2014 and described her career and role as a climate scientist ( + a(href="https://www.youtube.com/watch?v=lN-flOgkafk&list=PLwR00vai5XqrdNSj7qI3_FWJrFWicu1Vh&index=64") Watch on YouTube + | ) + - img(src="images/Diane_Student_Scammon_Bay.png") h3.left-align University Level Courses Taught