separated media viewports into individual stylesheets

4 files changed, 37 insertions, 33 deletions

diff --git a/desktop.css b/desktop.css
new file mode 100644
index 0000000..029d7e6
--- /dev/null
+++ b/desktop.css
@@ -0,0 +1,21 @@
+/* Desktop Layout */
+@media only screen and (min-width: 800px) {
+  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) 50%
+    );
+  }
+}
diff --git a/index.html b/index.html
index 4efb766..f9cddbb 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
       href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Indie+Flower&family=PT+Sans&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="/desktop.css" />
+    <link rel="stylesheet" href="/widescreen.css" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
@@ -248,7 +250,7 @@
           <input name="name" type="text" id="name" />
 
           <label for="email">Email Address</label>
-          <input name="email" type="text" id="email" />
+          <input name="email" type="email" id="email" />
 
           <label for="body">Question/Comment</label>
           <textarea name="body" id="body"></textarea>
diff --git a/stylesheet.css b/stylesheet.css
index 3112218..fd034c1 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -44,7 +44,7 @@ nav img {
 
 nav a {
   font-family: "PT Sans", sans-serif;
-  color: darkgray;
+  color: dimgray;
   text-align: center;
   text-decoration: none;
   padding: 1em 1em;
@@ -84,11 +84,15 @@ section.quiet {
 
 a.button {
   background-color: var(--teal);
-  padding: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
   margin: 0.5em;
   text-decoration: none;
   color: white;
   border-radius: 3em;
+  font-size: 1.25em;
 }
 
 a.primary {
@@ -106,33 +110,3 @@ footer a {
   color: var(--darkteal);
   text-decoration: underline;
 }
-
-/* Desktop Layout */
-@media only screen and (min-width: 800px) {
-  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) 50%
-    );
-  }
-}
-
-/* Widescreen Layout */
-@media only screen and (min-width: 2000px) {
-section {
-	padding-left: 20%;
-	padding-right: 20%;
-}
-
diff --git a/widescreen.css b/widescreen.css
new file mode 100644
index 0000000..38b13dc
--- /dev/null
+++ b/widescreen.css
@@ -0,0 +1,7 @@
+/* Widescreen Layout */
+@media only screen and (min-width: 2000px) {
+section {
+	padding-left: 20%;
+	padding-right: 20%;
+}
+