maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-11-27 22:35:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add dark-theme-specific styling tweaks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/submit.astro
View File

@ -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>

27
src/styles/global.css
View File

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