cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(css): 💄 update global css

Browse source
This commit is contained in:
Julien Oculi 2024-06-19 10:33:31 +02:00
parent 91eefc520f
commit ee69d545b5
2 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/stylesheets/base.css
View file

@ -105,14 +105,42 @@ h1 {
margin-block: var(--_gap); margin-block: var(--_gap);
} }
.cta { label {
display: grid;
gap: var(--_gap-half);
}
input {
transition: all var(--_transition-delay) ease;
}
input:not([type='radio']):not([type='checkbox']) {
padding: var(--_gap-half);
border: var(--_border-size) solid var(--_translucent);
background-color: var(--_translucent);
color: hsl(from var(--_font-color) h s l / 0.8);
}
input:not([type='radio']):not([type='checkbox']):focus {
background-color: var(--_background-color);
color: var(--_font-color);
}
input[type='radio'],
input[type='checkbox'] {
width: calc(1.5 * var(--_gap));
aspect-ratio: 1;
}
.cta,
.button {
text-decoration: none; text-decoration: none;
background-color: var(--_accent-color); background-color: var(--_accent-color);
color: var(--sand-0); color: var(--sand-0);
width: fit-content; width: 100%;
font-size: 120%;
height: fit-content; height: fit-content;
padding: 1rem 2rem; padding: var(--_gap-half);
font-size: 150%;
font-family: var(--_font-family-accent); font-family: var(--_font-family-accent);
border: var(--_border-size) solid var(--_accent-color); border: var(--_border-size) solid var(--_accent-color);
transition: all var(--_transition-delay) ease; transition: all var(--_transition-delay) ease;
@ -121,7 +149,9 @@ h1 {
} }
.cta:hover, .cta:hover,
.cta:focus-visible { .cta:focus-visible,
.button:hover,
.button:focus-visible {
background-color: var(--lime-1); background-color: var(--lime-1);
color: var(--_accent-color); color: var(--_accent-color);
box-shadow: 0 0 0 0 var(--_accent-color); box-shadow: 0 0 0 0 var(--_accent-color);
@ -130,3 +160,9 @@ h1 {
.cta:active { .cta:active {
box-shadow: 0 0 180px 20px var(--_accent-color); box-shadow: 0 0 180px 20px var(--_accent-color);
} }
.cta {
width: fit-content;
font-size: 150%;
padding: 1rem 2rem;
}

1
src/stylesheets/components.css
View file

@ -12,3 +12,4 @@
@import url('../../islands/SearchBox.css'); @import url('../../islands/SearchBox.css');
@import url('../../islands/MoreBox.css'); @import url('../../islands/MoreBox.css');
@import url('../../islands/AiChatBox.css'); @import url('../../islands/AiChatBox.css');
@import url('../../islands/LoginForm.css');