134 lines
2.2 KiB
CSS
Executable file
134 lines
2.2 KiB
CSS
Executable file
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&display=swap');
|
|
|
|
:root {
|
|
--bg-color: rgb(39, 08, 46);
|
|
--fg-color: rgb(255, 186, 255);
|
|
}
|
|
|
|
#sun {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--fg-color: rgb(39, 08, 46);
|
|
--bg-color: rgb(255, 186, 255);
|
|
}
|
|
|
|
#moon {
|
|
display: none;
|
|
}
|
|
#sun {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
.theme-switch button {
|
|
background: none;
|
|
border: none;
|
|
vertical-align: center;
|
|
}
|
|
|
|
svg {
|
|
stroke: var(--fg-color);
|
|
}
|
|
|
|
a {
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
a:visited {
|
|
color: lch(from var(--fg-color) calc(l - 20) c h);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
font-size: 150%;
|
|
align-items: center;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
.logo {
|
|
color: var(--fg-color);
|
|
border: solid lch(from var(--bg-color) calc(l + 15) c h);
|
|
border-radius: 10px;
|
|
background-color: lch(from var(--bg-color) calc(l + 10) c h);
|
|
font-family: 'Caveat', sans-serif;
|
|
}
|
|
|
|
.logo a {
|
|
text-decoration: none;
|
|
margin: 15px;
|
|
}
|
|
.logo a:visited{
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.sep {
|
|
font-size: 175%;
|
|
font-family: 'Fira Code', 'Noto Sans Mono', monospace;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.theme-switch {
|
|
margin-right: 25px
|
|
}
|
|
|
|
article{
|
|
border: solid lch(from var(--bg-color) calc(l + 8) c h);
|
|
border-radius: 15px;
|
|
margin: 10px;
|
|
background-color: lch(from var(--bg-color) calc(l + 5) c h);
|
|
}
|
|
|
|
article h2{
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 300%;
|
|
}
|
|
|
|
hr {
|
|
max-width: 720px;
|
|
margin-left: 0px;
|
|
margin-right: 20%;
|
|
color: var(--fg-color)
|
|
}
|
|
|
|
h3 .date {
|
|
font-size: 80%
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-family: 'Comfortaa', 'Noto Sans', sans-serif;
|
|
}
|
|
|
|
code {
|
|
font-family: "Fira Code", monospace;
|
|
border: solid lch(from var(--bg-color) calc(l + 15) c h);
|
|
border-radius: 5px;
|
|
background-color: lch(from var(--bg-color) calc(l + 5) c h);
|
|
}
|
|
|
|
main * {
|
|
max-width: 720px;
|
|
justify-content: left;
|
|
}
|
|
|
|
footer {
|
|
justify-self: center;
|
|
text-align: center;
|
|
font-size: 75%;
|
|
margin-top: 25px;
|
|
}
|