diff --git a/src/pages/submit.astro b/src/pages/submit.astro
index 4726280..734ab19 100644
--- a/src/pages/submit.astro
+++ b/src/pages/submit.astro
@@ -10,31 +10,29 @@ import BaseLayout from '../layouts/BaseLayout.astro';
If you work in the tech industry and own a cat that you'd like to share,
then you've come to the right place! Fill out the form below and Mac should add your feline friend.
-
+
Guidelines
- - Only cats, please. This is not dogsof.dev or peopleof.tech
+ - Only cats, please. This is not dogsof.dev or peopleof.tech.
-
I'm fine with any resolution, orientation, and aspect ratio as along as
- the photo's size doesn't exceed 1 MB
+ the photo's size doesn't exceed 1 MB.
-
Refrain from adding artsy filters or stickers/overlays. Let your cat be
- the star
+ the star.
- - If you own multiple cats, please submit them separately
+ - If you own multiple cats, please submit them separately.
-
If you wish to have your cat's entry updated (e.g. if it passed away), email Mac or or open an issue on GitHub
+ >.
@@ -96,6 +94,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
a {
text-decoration: underline;
+ color: var(--bg-color);
}
form {
@@ -105,13 +104,22 @@ import BaseLayout from '../layouts/BaseLayout.astro';
gap: 1.25rem;
}
+ input,
+ textarea {
+ border-color: var(--color-grey);
+ background-color: transparent;
+ color: var(--font-color);
+ }
+
button[type='submit'] {
margin-top: 0.5rem;
+ color: var(--bg-color);
}
#guidelines {
padding: 0.05rem 1rem 0.5rem 2rem;
padding-top: 0.05rem;
margin-bottom: 1.5rem;
+ color: var(--bg-color);
}
diff --git a/src/styles/global.css b/src/styles/global.css
index e023383..1b4df8a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,11 +3,30 @@
--grid-max-width: 100rem;
}
-body {
- margin: 0 auto;
- max-width: min(var(--grid-max-width), 75%);
+body.dark {
+ --bg-color: #000;
+ --color-primary: #26b670;
+ --bg-secondary-color: #131316;
+ --font-color: #f5f5f5;
+ --color-grey: #ccc;
+ --color-darkGrey: #777;
}
-a:focus {
+body {
+ margin: 0 auto;
+ max-width: min(var(--grid-max-width), 80%);
+}
+
+a:focus,
+button:focus {
outline: var(--color-primary) solid 3px;
}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+ .col-6-md {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc(50% - var(--grid-gutter));
+ flex: 0 0 calc(50% - var(--grid-gutter));
+ max-width: calc(50% - var(--grid-gutter));
+ }
+}