139 lines
2.1 KiB
CSS
139 lines
2.1 KiB
CSS
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
|
|
|
/* makes sizing simpler */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* remove default spacing */
|
|
/* force styling of type through styling, rather than elements */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
/* font: inherit; */
|
|
}
|
|
|
|
/* dark mode user-agent-styles */
|
|
/* improves punctuation in supported browsers */
|
|
html {
|
|
color-scheme: dark light;
|
|
hanging-punctuation: first last;
|
|
}
|
|
|
|
/* min body height */
|
|
body {
|
|
min-height: 100svh;
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
Oxygen,
|
|
Ubuntu,
|
|
Cantarell,
|
|
"Open Sans",
|
|
"Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
|
|
/* responsive images/videos */
|
|
img,
|
|
picture,
|
|
svg,
|
|
video {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Improved heading in supported browsers */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* improve readability with max-width on paragraphs and lists */
|
|
/* prevent orphans in supported browsers */
|
|
p,
|
|
li {
|
|
max-width: var(--p-max-width, 65ch);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* My css */
|
|
|
|
section {
|
|
min-height: 100svh;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
h3:has(span) {
|
|
color: lightblue;
|
|
}
|
|
|
|
h3:not(:has(span)) {
|
|
color: lightsalmon;
|
|
}
|
|
|
|
h3 > span {
|
|
color: lightpink;
|
|
font-style: italic;
|
|
}
|
|
|
|
h3,
|
|
.subtitle {
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
|
|
.header-group:has(h3):has(.subtitle) h3 {
|
|
margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
|
|
}
|
|
|
|
.card:not(:has(img)) {
|
|
border: 1px solid var(--my-amazing-color);
|
|
}
|
|
|
|
/* section 2 */
|
|
|
|
:root {
|
|
--bg-color: rgb(11, 58, 33);
|
|
}
|
|
|
|
.switch {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.switch__label {
|
|
display: none;
|
|
}
|
|
.switch__input::before {
|
|
content: "Light";
|
|
margin-inline-start: 1em;
|
|
}
|
|
|
|
.switch__input::after {
|
|
content: "Dark";
|
|
margin-inline-end: 1em;
|
|
}
|
|
|
|
:root:has(.switch__input:checked) {
|
|
--bg-color: rgb(0, 26, 255);
|
|
}
|
|
|
|
.switch__input:checked {
|
|
/* color: aquamarine; */
|
|
background-color: blueviolet;
|
|
}
|
|
|
|
#section2 {
|
|
background-color: var(--bg-color);
|
|
}
|