222 lines
4.5 KiB
CSS
222 lines
4.5 KiB
CSS
@import "reset.css";
|
|
@import "props.css";
|
|
@import "prism.min.css";
|
|
|
|
body {
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
overflow: hidden;
|
|
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: .5rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-slate-800);
|
|
outline: 1px solid var(--color-slate-800);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
main {
|
|
background-color: var(--color-slate-700);
|
|
color: var(--color-neutral-200);
|
|
display: flex;
|
|
scroll-snap-type: x mandatory;
|
|
overflow-x: auto;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.slide {
|
|
scroll-snap-align: start;
|
|
position: relative;
|
|
height: 100%;
|
|
flex: 1 0 100%;
|
|
font-size: var(--text-size-m);
|
|
|
|
|
|
|
|
h1 {
|
|
font-size: var(--text-size-2xl);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-size-xl);
|
|
border-bottom: 2px solid var(--color-neutral-200);
|
|
padding-inline: var(--space-size-xs);
|
|
}
|
|
|
|
&.title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-size-sm);
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
h2 {
|
|
border-bottom: 0px solid;
|
|
}
|
|
}
|
|
|
|
&.statement {
|
|
ul {
|
|
width: 100%;
|
|
margin: var(--space-size-3xl) auto;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
}
|
|
|
|
ul {
|
|
max-width: 60ch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-size-m);
|
|
}
|
|
|
|
pre[class*=language-] {
|
|
max-width: 60ch;
|
|
max-height: 80vh;
|
|
max-height: 80dvh;
|
|
font-size: var(--text-size-s);
|
|
}
|
|
|
|
pre, code {
|
|
word-wrap:
|
|
}
|
|
|
|
input[type="checkbox"][data-role="toggle"] {
|
|
appearance: none;
|
|
background: lightgray;
|
|
border: 1px solid gray;
|
|
width: 55px;
|
|
height: 25px;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
background: gray;
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 1px;
|
|
border-radius: 20px;
|
|
border: 1px solid transparent;
|
|
transition: left .2s ease-in-out, right .2s ease-in-out;
|
|
}
|
|
|
|
&:checked {
|
|
background: var(--color-green-500);
|
|
|
|
&::before {
|
|
border-color: gray;
|
|
background-color: white;
|
|
left: calc(100% - 22px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: space-around;
|
|
padding: var(--space-size-s);
|
|
|
|
> :not(:first-child) {
|
|
flex-shrink: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--space-size-s);
|
|
flex-basis: 40%;
|
|
}
|
|
|
|
> :first-child {
|
|
min-width: 40ch;
|
|
flex-basis: 60%;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
}
|
|
|
|
dialog {
|
|
z-index: 10;
|
|
|
|
&::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
button {
|
|
margin-block-start: var(--space-size-s);
|
|
}
|
|
|
|
details {
|
|
position: relative;
|
|
width: max-content;
|
|
min-width: 20ch;
|
|
background: white;
|
|
border-radius: 10px;
|
|
border: 1px solid darkgray;
|
|
color: black;
|
|
|
|
summary {
|
|
display: flex;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-bottom: 1px solid transparent;
|
|
padding: 10px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
svg {
|
|
width: var(--text-size-s);
|
|
height: auto;
|
|
transform: rotate(180deg) translate(-1px);
|
|
transition: transform .3s linear;
|
|
}
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[open] summary {
|
|
border-color: darkgray;
|
|
|
|
svg {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|