diff options
| -rw-r--r-- | desktop.css | 21 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | stylesheet.css | 38 | ||||
| -rw-r--r-- | widescreen.css | 7 |
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% + ); + } +} @@ -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%; +} + |