My new Hugo theme
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

160 lines
2.6 KiB

$colors: (
background: #fff,
background-dark: #000,
primary: #000,
primary-dark: #fff
);
@mixin color($property, $varName) {
#{$property}: map-get($colors, $varName);
#{$property}: var(--#{$varName}, map-get($colors, $varName));
}
@mixin color-border($property, $val1, $val2, $varName) {
#{$property}: #{$val1} #{$val2} map-get($colors, $varName);
#{$property}: #{$val1} #{$val2} var(--#{$varName}, map-get($colors, $varName));
}
@mixin lightmode {
--background: #{map-get($colors, background)};
--primary: #{map-get($colors, primary)};
color: #000;
}
@mixin darkmode {
--background: #{map-get($colors, background-dark)};
--primary: #{map-get($colors, primary-dark)};
color: #fff;
}
.sans-serif {
font-family: sans-serif;
}
html {
@include lightmode;
@media (prefers-color-scheme: dark) {
@include darkmode;
}
scrollbar-color: var(--primary) transparent;
}
body {
@extend .sans-serif;
@include color(background, background);
line-height: 1.5;
margin: 0 auto;
max-width: 750px;
padding: 10px;
word-break: break-word;
overflow-wrap: break-word;
* {
@include color(color, primary);
max-width: 100%;
}
}
header {
@extend .border-bottom;
padding: 10px 0;
* {
margin-top: 0;
margin-bottom: 0;
}
}
h1 a, h2 a {
text-decoration: none;
}
img {
width: 100%;
}
input, textarea, button, .button {
@include color-border(border, 1px, solid, primary);
@include color(background, background);
@include color(color, primary);
@extend .sans-serif;
padding: 5px 10px;
border-radius: 0;
box-sizing: border-box;
text-decoration: none;
font-size: 1rem;
}
.full-width-form {
@extend .full-width;
input[type="text"], input[type="email"], textarea {
@extend .full-width;
}
}
blockquote {
@include color-border(border-left, 5px, solid, primary);
padding-left: 20px;
margin-left: 0;
}
pre {
padding: 10px;
@include color-border(border, 1px, solid, primary);
white-space: pre-wrap;
}
:not(pre) > code {
@extend .invert;
font-size: 1rem;
}
code {
font-family: monospace;
}
footer {
@extend .border-top;
padding: 10px 0;
* {
margin-top: 0;
margin-bottom: 0;
}
}
.border-top {
@include color-border(border-top, 1px, solid, primary);
}
.border-bottom {
@include color-border(border-bottom, 1px, solid, primary);
}
.invert {
@include color(color, background);
@include color(background, primary);
}
.fake-p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.flex {
display: flex;
}
.hide {
display: none;
}
.full-width {
width: 100%;
}
/* Twemoji */
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}