Add more everything
This commit is contained in:
parent
b9bd0eefc5
commit
0c4a243911
@ -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
|
||||
|
6
build.sh
6
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/*.*
|
||||
|
@ -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%;
|
||||
}
|
||||
|
394
css/style.css
394
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;
|
||||
}
|
||||
}
|
||||
|
@ -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<span style="display: none"> well hello there ☃ :)</span>
|
||||
| @
|
||||
| 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
3
includes/hawk.pug
Normal file
@ -0,0 +1,3 @@
|
||||
br
|
||||
| Photo courtesy:
|
||||
a(href="https://ryanhawk.com/") RyanHawk.com
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user