summaryrefslogtreecommitdiff
path: root/stylesheet.css
diff options
context:
space:
mode:
Diffstat (limited to 'stylesheet.css')
-rw-r--r--stylesheet.css57
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%;
+}
+