Add more everything

This commit is contained in:
Austen Adler 2022-04-11 00:30:58 -04:00
parent b9bd0eefc5
commit 0c4a243911
8 changed files with 286 additions and 180 deletions

View File

@ -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

View File

@ -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/*.*

View File

@ -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%;
}

View File

@ -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;
}
}

View File

@ -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.
| &#x64;&#x72;&#x2E;&#x64;&#x69;&#x61;&#x6E;&#x65;<span style="display: none"> well hello there &#x2603; :)</span>
| &#x40;
| 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

3
includes/hawk.pug Normal file
View File

@ -0,0 +1,3 @@
br
| Photo courtesy:
a(href="https://ryanhawk.com/") RyanHawk.com

View File

@ -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

View File

@ -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