Add dark-theme-specific styling tweaks

This commit is contained in:
Maciej Pędzich 2023-09-04 13:01:56 +02:00
parent 27e3a8ad0f
commit 439eeae468
2 changed files with 41 additions and 14 deletions

View File

@ -10,31 +10,29 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<p>
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 <a
class="text-primary"
href="https://maciejpedzi.ch">Mac</a
> should add your feline friend.
</p>
<div id="guidelines" class="bg-primary text-white">
<div id="guidelines" class="bg-primary">
<h3>Guidelines</h3>
<ul>
<li>Only cats, please. This is not dogsof.dev or peopleof.tech</li>
<li>Only cats, please. This is not dogsof.dev or peopleof.tech.</li>
<li>
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.
</li>
<li>
Refrain from adding artsy filters or stickers/overlays. Let your cat be
the star
the star.
</li>
<li>If you own multiple cats, please submit them separately</li>
<li>If you own multiple cats, please submit them separately.</li>
<li>
If you wish to have your cat's entry updated (e.g. if it passed away), <a
class="text-white"
href="mailto:contact@maciejpedzi.ch">email Mac</a
> or <a
class="text-white"
href="https://github.com/maciejpedzich/catsof.tech/issues"
> or <a href="https://github.com/maciejpedzich/catsof.tech/issues"
>open an issue on GitHub</a
>
>.
</li>
</ul>
</div>
@ -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);
}
</style>

View File

@ -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));
}
}