Compare commits
4 Commits
101658ea04
...
5ff62b4889
| Author | SHA1 | Date | |
|---|---|---|---|
| 5ff62b4889 | |||
| 48423b8702 | |||
| d435aa4867 | |||
| 5494711402 |
BIN
assets/img/logo-dark.png
Normal file → Executable file
BIN
assets/img/logo-dark.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 52 KiB |
BIN
assets/img/logo-light.png
Normal file → Executable file
BIN
assets/img/logo-light.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 52 KiB |
@ -1,7 +1,7 @@
|
||||
.resident {
|
||||
margin: 2rem auto;
|
||||
display: grid;
|
||||
grid-template:
|
||||
grid-template:
|
||||
'img h1'
|
||||
'img desc'
|
||||
'img .';
|
||||
@ -10,18 +10,18 @@
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.resident {
|
||||
grid-template:
|
||||
grid-template:
|
||||
'img'
|
||||
'h1'
|
||||
'desc';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resident h1 {
|
||||
grid-area: h1;
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
border-bottom: solid var(--color-accent);
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.resident img {
|
||||
|
||||
@ -14,20 +14,20 @@
|
||||
|
||||
#directory li {
|
||||
list-style: none;
|
||||
border: solid thin var(--color-accent);
|
||||
border: solid .25rem var(--color-accent);
|
||||
border-radius: .5rem;
|
||||
outline-offset: .1rem;
|
||||
outline-offset: .25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
#directory li:hover {
|
||||
background-color: var(--color-text);
|
||||
border-color: var(--color-text);
|
||||
}
|
||||
|
||||
#directory li:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-accent-flipped);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-light: #d5e9ff;
|
||||
--color-light-alt: #beddff;
|
||||
--color-dark: #001a33;
|
||||
--color-dark-alt: #00274b;
|
||||
--color-orange-light: #ff764f;
|
||||
--color-orange-dark: #f55e33;
|
||||
--color-light: #e5e0c7;
|
||||
--color-light-alt: #d1cbab;
|
||||
--color-dark: #142B15;
|
||||
--color-dark-alt: #1a3b1b;
|
||||
--color-accent-light: #4ba19e;
|
||||
--color-accent-dark: #0c6a74;
|
||||
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
|
||||
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
|
||||
--color-accent: light-dark(var(--color-orange-dark), var(--color-orange-light));
|
||||
--color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
|
||||
--color-accent: light-dark(var(--color-accent-dark), var(--color-accent-light));
|
||||
--color-accent-flipped: light-dark(var(--color-accent-light), var(--color-accent-dark));
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@ -12,21 +12,23 @@ nav a {
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 .25rem;
|
||||
border: solid thin var(--color-accent);
|
||||
border: solid .125rem var(--color-accent);
|
||||
border-radius: .25rem;
|
||||
outline-offset: .1rem;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
nav a:hover {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-text);
|
||||
border-color: var(--color-text);
|
||||
background-color: var(--color-text-alt);
|
||||
border-color: var(--color-accent-flipped);
|
||||
outline: .125rem solid var(--color-accent);
|
||||
outline-offset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav a:focus-visible {
|
||||
outline: solid .25rem var(--color-accent);
|
||||
outline: solid .125rem var(--color-accent);
|
||||
outline-offset: .125rem;
|
||||
}
|
||||
|
||||
#skip {
|
||||
@ -37,7 +39,6 @@ nav a:focus-visible {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -99;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
#skip:focus-visible {
|
||||
|
||||
Reference in New Issue
Block a user