diff options
Diffstat (limited to 'stylesheet.css')
-rw-r--r-- | stylesheet.css | 57 |
1 files changed, 44 insertions, 13 deletions
diff --git a/stylesheet.css b/stylesheet.css index e057ae8..3112218 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -18,6 +18,7 @@ body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; + color: dimgray; } body { @@ -25,26 +26,28 @@ body { } .banner { + font-size: 1em; text-align: center; - padding-top: 5%; - padding-bottom: 5%; - padding-right: 5%; - padding-left: 5%; + padding: 3em; background-color: white; } nav { display: flex; - flex-direction: column; background-color: white; + flex-direction: column-reverse; +} + +nav img { + height: 1.4em; } nav a { - font-family: "PT Sans Narrow", sans-serif; - display: block; + font-family: "PT Sans", sans-serif; color: darkgray; text-align: center; text-decoration: none; + padding: 1em 1em; } nav a:hover { @@ -52,6 +55,11 @@ nav a:hover { background-color: lightgray; } +div.buttons { + display: flex; + flex-direction: column; +} + h1 { font-size: 3em; color: var(--darkteal); @@ -65,8 +73,9 @@ h2 { } section { + font-size: 1.5em; margin: 0; - padding: 0; + padding: 3em; } section.quiet { @@ -76,6 +85,7 @@ section.quiet { a.button { background-color: var(--teal); padding: 1em; + margin: 0.5em; text-decoration: none; color: white; border-radius: 3em; @@ -85,23 +95,44 @@ a.primary { background-color: var(--darkteal); } +footer { + background-color: white; + text-align: center; + padding: 3em; + font-size: 1.5em; +} + +footer a { + color: var(--darkteal); + text-decoration: underline; +} + /* Desktop Layout */ @media only screen and (min-width: 800px) { nav { - flex-direction: row; - } - - nav { + flex-direction: row-reverse; margin: 0; padding: 0; } + div.buttons { + flex-direction: row-reverse; + } + .banner { text-align: right; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 1) 40% + rgba(255, 255, 255, 1) 50% ); } } + +/* Widescreen Layout */ +@media only screen and (min-width: 2000px) { +section { + padding-left: 20%; + padding-right: 20%; +} + |