summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2021-06-15 20:41:40 -0400
committerAdam T. Carpenter <atc@53hor.net>2021-06-15 20:41:40 -0400
commitef1e400f9e6bf00f5529abd1be63886372fe92b2 (patch)
tree80377c7ee6ed0e43737e74972ea9b14779b57e17
parent153f905dfd1e95aa2bd0a227d2790021849d12d5 (diff)
downloadcarpentertutoring-ef1e400f9e6bf00f5529abd1be63886372fe92b2.tar.xz
carpentertutoring-ef1e400f9e6bf00f5529abd1be63886372fe92b2.zip
separated media viewports into individual stylesheets
-rw-r--r--desktop.css21
-rw-r--r--index.html4
-rw-r--r--stylesheet.css38
-rw-r--r--widescreen.css7
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%;
+}
+