Add more everything

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

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

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

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; }
+body {
-a:link, a:visited, a:active{ color:inherit; text-decoration: none; }
+	background-color: #fefdfb;
-a:hover {color: #FC436B; text-decoration:underline; }
+	color: #555;
-img {padding:5px; border-radius: 50%;
+	font-family: 'Abel', sans-serif;
- -webkit-border-radius: 50%;
+	font-size: 14px;
- -moz-border-radius: 50%;}
+	font-weight: normal;
+	margin: 0;
+}
 
-.icon, .hide {font-size:20px;}
+a:link, a:visited, a:active {
-.right {text-align:right; }
+	color: inherit;
-.hide {display: none;}
+	/*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%;
+	width: 100%;
-    min-height:35px;
+	min-height: 35px;
-    background-color: /*#01dddd #B61B82 #03D7CB*/  green;
+	background-color: /*#01dddd #B61B82 #03D7CB*/
-    position:fixed;
+	green;
-    top:0; left:0;
+	position: fixed;
+	top: 0;
+	left: 0;
 }
 
 #menu a {
-    background-color:inherit;
+	background-color: inherit;
-    color: #fff;
+	color: #fff;
 }
 
 #menu a:hover {
-    background: inherit;
+	background: inherit;
-    color: #ccc;
+	color: #ccc;
-    text-decoration:none;
+	text-decoration: none;
 }
 
 nav {
-    display: table;
+	display: table;
-    table-layout: fixed;
+	table-layout: fixed;
-    width: 70%;
+	width: 70%;
-    margin: 0 auto;
+	margin: 0 auto;
 }
 
-ul#topnav  {
+ul#topnav {
-    display: table-row;
+	display: table-row;
-    padding: 0;
+	padding: 0;
-    overflow: hidden;
+	overflow: hidden;
-    position:relative;
+	position: relative;
-    bottom:0;
+	bottom: 0;
 }
 
 ul#topnav li {
-    list-style-type: none;
+	list-style-type: none;
-    display: table-cell;
+	display: table-cell;
-    text-align:center;
+	text-align: center;
-    vertical-align:middle;
+	vertical-align: middle;
 }
 
-
 ul#topnav li a {
-    display:block;
+	display: block;
-    padding:4px 0px;
+	padding: 4px 0px;
 }
 
 #container {
-    width:100%;
+	width: 100%;
-    margin-top:48px;
+	margin-top: 48px;
 }
 
 #pageheader {
-    display:table;
+	display: table;
-    width:62.5%;
+	width: 62.5%;
-    margin:auto;
+	margin: auto;
 }
 
-
 .section {
-    width:62.5%;
+	width: 62.5%;
-    border-top:1px solid #eee;
+	border-top: 1px solid #eee;
-    padding:20px 0;
+	padding: 20px 0;
-    margin:auto;
+	margin: auto;
 }
 
 .pageitem {
-    display:table;
+	display: table;
-    width:100%;
+	width: 100%;
-    margin-bottom:15px;
+	margin-bottom: 15px;
-    padding-top:15px;
+	padding-top: 15px;
-    text-align:center;
+	text-align: center;
 }
 
 .pageitem h1 {
-    font-weight:normal;
+	font-weight: normal;
-    color:#555;
+	color: #555;
-    margin:0;
+	margin: 0;
-    text-align:left;
+	text-align: left;
 }
 
 .pageitem h2 {
-    font-size:32px;
+	font-size: 32px;
-    background-color:inherit;
+	background-color: inherit;
-    color:#444;
+	color: #444;
-    margin-top:0;
+	margin-top: 0;
 }
 
 .pageitem p em {
-    background-color:inherit;
+	background-color: inherit;
-    color:#444;
+	color: #444;
-    font-size:40px;
+	font-size: 40px;
-    font-style:normal;
+	font-style: normal;
-    font-weight:100;
+	font-weight: 100;
 }
 
 .pageitem p {
-    padding:0 75px;
+	padding: 0 75px;
-    margin:0;
+	margin: 0;
-    font-size:18px;
+	font-size: 18px;
-    line-height:200%;
+	line-height: 200%;
- }
-
-
-.col {
-    display: table-cell;
 }
 
+.col {
+	display: table-cell;
+}
 
 .col ul#sub {
-    float:right;
+	float: right;
-    padding:0;
+	padding: 0;
-    margin:0;
+	margin: 0;
 }
 
 .col ul#sub li {
-    display:inline;
+	display: inline;
-    list-style-type: none;
+	list-style-type: none;
-    text-align:right;
+	text-align: right;
 }
 
 .col ul#sub li a {
-    padding:5px;
+	padding: 5px;
-    background-color:inherit;
+	background-color: inherit;
-    color:#777;
+	color: #777;
 }
 
 .col ul#sub li a:hover {
-    color:#FC436B;
+	color: #FC436B;
 }
 
 #footer {
-    display:table;
+	display: table;
-    width:100%;
+	width: 100%;
-    margin-bottom:15px;
+	margin-bottom: 15px;
-    padding:15px 0;
+	padding: 15px 0;
-    text-align:left;
+	text-align: left;
-    font-size:13px;
+	font-size: 13px;
-     color:#999;
+	color: #999;
 }
 
 #footer p {
-     text-align:left;
+	text-align: left;
-     padding:0;
+	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;
 }
 
 ul#bottomnav {
-    display: list-item;
+	display: table-row;
-    list-style-type: none;
+	padding: 0;
- }
+}
 
 ul#bottomnav li {
-    display:block;
+	list-style-type: none;
-    text-align:center;
+	display: table-cell;
+	text-align: left;
+	font-weight: bold;
+	vertical-align: top;
 }
 
-#credits p{
+ul#bottomnav li ul {
-text-align:center;
+	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;
+	}
 }

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.
             | &#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

includes/hawk.pug

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

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
 

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