288 lines
3.5 KiB
CSS
288 lines
3.5 KiB
CSS
|
*, ::before, ::after {
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
::-moz-focus-inner {
|
||
|
border-style: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
:-moz-focusring { outline: 1px dotted ButtonText; }
|
||
|
:-moz-ui-invalid { box-shadow: none; }
|
||
|
|
||
|
:root[data-theme="theme-dark"] {
|
||
|
--white: #f2f2f2;
|
||
|
--black: #252525;
|
||
|
--purple: #bd93f9;
|
||
|
--blue: #8be9fd;
|
||
|
--yellow: #ffff80;
|
||
|
--pink: #ff80bf;
|
||
|
--orange: #ffca80;
|
||
|
--green: #50fa7b;
|
||
|
--grey: #414558;
|
||
|
--greyer: #282a36;
|
||
|
}
|
||
|
|
||
|
html {
|
||
|
background-color: var(--greyer);
|
||
|
color: var(--white);
|
||
|
line-height: 1.5;
|
||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||
|
"Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||
|
"Segoe UI Emoji", "Segoe UI Symbol";
|
||
|
-webkit-text-size-adjust: 100%;
|
||
|
-moz-tab-size: 4;
|
||
|
tab-size: 4;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
margin: 0 auto;
|
||
|
max-width: 42rem;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
b, strong {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
code, kbd, samp, pre {
|
||
|
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||
|
font-size: 1rem;
|
||
|
background-color: var(--black) !important;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
border-radius: 5px;
|
||
|
padding: 1rem;
|
||
|
overflow-x: auto;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
small {
|
||
|
font-size: 0.8rem;
|
||
|
}
|
||
|
|
||
|
summary {
|
||
|
display: list-item;
|
||
|
}
|
||
|
|
||
|
h1, h2, h3 {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
border: 0;
|
||
|
font-style: normal;
|
||
|
font-weight: inherit;
|
||
|
font-size: inherit;
|
||
|
}
|
||
|
|
||
|
hr {
|
||
|
color: inherit;
|
||
|
border: 0;
|
||
|
margin: 0;
|
||
|
height: 1px;
|
||
|
background: var(--grey);
|
||
|
margin: 2rem auto;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: underline;
|
||
|
color: var(--blue);
|
||
|
}
|
||
|
|
||
|
a:hover, a:visited:hover {
|
||
|
color: var(--pink);
|
||
|
}
|
||
|
|
||
|
a:visited {
|
||
|
color: var(--purple);
|
||
|
}
|
||
|
|
||
|
a.link-grey {
|
||
|
text-decoration: underline;
|
||
|
color: var(--white);
|
||
|
}
|
||
|
|
||
|
a.link-grey:visited {
|
||
|
color: var(--white);
|
||
|
}
|
||
|
|
||
|
section {
|
||
|
margin-bottom: 2rem;
|
||
|
}
|
||
|
|
||
|
section:last-child {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
margin: 1rem auto;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
margin: 1rem 0;
|
||
|
}
|
||
|
|
||
|
article {
|
||
|
overflow-wrap: break-word;
|
||
|
}
|
||
|
|
||
|
blockquote {
|
||
|
border-left: 5px solid var(--purple);
|
||
|
background-color: var(--grey);
|
||
|
padding: 0.5rem;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
ul, ol {
|
||
|
padding: 0 0 0 2rem;
|
||
|
list-style-position: outside;
|
||
|
}
|
||
|
|
||
|
ul[style*="list-style-type: none;"] {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
li {
|
||
|
margin: 0.5rem 0;
|
||
|
}
|
||
|
|
||
|
li > pre {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
text-align: center;
|
||
|
margin-bottom: 4rem;
|
||
|
}
|
||
|
|
||
|
dt {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
dd {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
|
||
|
dd:not(:last-child) {
|
||
|
margin-bottom: .5rem;
|
||
|
}
|
||
|
|
||
|
.md h1 {
|
||
|
font-size: 1.25rem;
|
||
|
line-height: 1.15;
|
||
|
font-weight: bold;
|
||
|
padding: 0.5rem 0;
|
||
|
}
|
||
|
|
||
|
.md h2 {
|
||
|
font-size: 1.125rem;
|
||
|
line-height: 1.15;
|
||
|
font-weight: bold;
|
||
|
padding: 0.5rem 0;
|
||
|
}
|
||
|
|
||
|
.md h3 {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.md h4 {
|
||
|
font-size: 0.875rem;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.post-date {
|
||
|
width: 130px;
|
||
|
}
|
||
|
|
||
|
.text-grey {
|
||
|
color: var(--grey);
|
||
|
}
|
||
|
|
||
|
.text-2xl {
|
||
|
font-size: 1.5rem;
|
||
|
line-height: 1.15;
|
||
|
}
|
||
|
|
||
|
.text-xl {
|
||
|
font-size: 1.25rem;
|
||
|
line-height: 1.15;
|
||
|
}
|
||
|
|
||
|
.text-lg {
|
||
|
font-size: 1.125rem;
|
||
|
line-height: 1.15;
|
||
|
}
|
||
|
|
||
|
.text-sm {
|
||
|
font-size: 0.875rem;
|
||
|
}
|
||
|
|
||
|
.text-center {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.font-bold {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.font-italic {
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
.inline {
|
||
|
display: inline;
|
||
|
}
|
||
|
|
||
|
.flex {
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
.items-center {
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.m-0 {
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
.my {
|
||
|
margin-top: 0.5rem;
|
||
|
margin-bottom: 0.5rem;
|
||
|
}
|
||
|
|
||
|
.mx {
|
||
|
margin-left: 0.5rem;
|
||
|
margin-right: 0.5rem;
|
||
|
}
|
||
|
|
||
|
.mx-2 {
|
||
|
margin-left: 1rem;
|
||
|
margin-right: 1rem;
|
||
|
}
|
||
|
|
||
|
.justify-between {
|
||
|
justify-content: space-between;
|
||
|
}
|
||
|
|
||
|
.flex-1 {
|
||
|
flex: 1;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 600px) {
|
||
|
body {
|
||
|
padding: 1rem;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|