mirror of
https://github.com/maciejpedzich/cats-album.git
synced 2024-11-27 22:35:47 +01:00
Add dark-theme-specific styling tweaks
This commit is contained in:
parent
27e3a8ad0f
commit
439eeae468
@ -10,31 +10,29 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<p>
|
<p>
|
||||||
If you work in the tech industry and own a cat that you'd like to share,
|
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
|
then you've come to the right place! Fill out the form below and <a
|
||||||
|
class="text-primary"
|
||||||
href="https://maciejpedzi.ch">Mac</a
|
href="https://maciejpedzi.ch">Mac</a
|
||||||
> should add your feline friend.
|
> should add your feline friend.
|
||||||
</p>
|
</p>
|
||||||
<div id="guidelines" class="bg-primary text-white">
|
<div id="guidelines" class="bg-primary">
|
||||||
<h3>Guidelines</h3>
|
<h3>Guidelines</h3>
|
||||||
<ul>
|
<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>
|
<li>
|
||||||
I'm fine with any resolution, orientation, and aspect ratio as along as
|
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>
|
||||||
<li>
|
<li>
|
||||||
Refrain from adding artsy filters or stickers/overlays. Let your cat be
|
Refrain from adding artsy filters or stickers/overlays. Let your cat be
|
||||||
the star
|
the star.
|
||||||
</li>
|
</li>
|
||||||
<li>If you own multiple cats, please submit them separately</li>
|
<li>If you own multiple cats, please submit them separately.</li>
|
||||||
<li>
|
<li>
|
||||||
If you wish to have your cat's entry updated (e.g. if it passed away), <a
|
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
|
href="mailto:contact@maciejpedzi.ch">email Mac</a
|
||||||
> or <a
|
> or <a href="https://github.com/maciejpedzich/catsof.tech/issues"
|
||||||
class="text-white"
|
|
||||||
href="https://github.com/maciejpedzich/catsof.tech/issues"
|
|
||||||
>open an issue on GitHub</a
|
>open an issue on GitHub</a
|
||||||
>
|
>.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -96,6 +94,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
@ -105,13 +104,22 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
border-color: var(--color-grey);
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
button[type='submit'] {
|
button[type='submit'] {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
|
color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#guidelines {
|
#guidelines {
|
||||||
padding: 0.05rem 1rem 0.5rem 2rem;
|
padding: 0.05rem 1rem 0.5rem 2rem;
|
||||||
padding-top: 0.05rem;
|
padding-top: 0.05rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
color: var(--bg-color);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -3,11 +3,30 @@
|
|||||||
--grid-max-width: 100rem;
|
--grid-max-width: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body.dark {
|
||||||
margin: 0 auto;
|
--bg-color: #000;
|
||||||
max-width: min(var(--grid-max-width), 75%);
|
--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;
|
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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user