chore: implement initial simple website

This commit is contained in:
2024-04-26 18:13:22 +02:00
parent abd6e47906
commit d8fb60f23c
91 changed files with 15291 additions and 2 deletions

View File

@ -0,0 +1,6 @@
/* Bulma Base */
@charset "utf-8";
@forward "minireset";
@forward "generic";
@forward "animations";

View File

@ -0,0 +1,15 @@
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes pulsate {
50% {
opacity: 0.5;
}
}

View File

@ -0,0 +1,239 @@
@use "../utilities/css-variables.scss" as cv;
@use "../utilities/mixins" as mx;
$body-background-color: cv.getVar("scheme-main") !default;
$body-size: 1em !default;
$body-min-width: 300px !default;
$body-rendering: optimizeLegibility !default;
$body-family: cv.getVar("family-primary") !default;
$body-overflow-x: hidden !default;
$body-overflow-y: scroll !default;
$body-color: cv.getVar("text") !default;
$body-font-size: 1em !default;
$body-weight: cv.getVar("weight-normal") !default;
$body-line-height: 1.5 !default;
$code-family: cv.getVar("family-code") !default;
$code-padding: 0.25em 0.5em 0.25em !default;
$code-weight: normal !default;
$code-size: 0.875em !default;
$small-font-size: 0.875em !default;
$hr-background-color: cv.getVar("background") !default;
$hr-height: 2px !default;
$hr-margin: 1.5rem 0 !default;
$strong-color: cv.getVar("text-strong") !default;
$strong-weight: cv.getVar("weight-semibold") !default;
$pre-font-size: 0.875em !default;
$pre-padding: 1.25rem 1.5rem !default;
$pre-code-font-size: 1em !default;
:root {
@include cv.register-vars(
(
"body-background-color": #{$body-background-color},
"body-size": #{$body-size},
"body-min-width": #{$body-min-width},
"body-rendering": #{$body-rendering},
"body-family": #{$body-family},
"body-overflow-x": #{$body-overflow-x},
"body-overflow-y": #{$body-overflow-y},
"body-color": #{$body-color},
"body-font-size": #{$body-font-size},
"body-weight": #{$body-weight},
"body-line-height": #{$body-line-height},
"code-family": #{$code-family},
"code-padding": #{$code-padding},
"code-weight": #{$code-weight},
"code-size": #{$code-size},
"small-font-size": #{$small-font-size},
"hr-background-color": #{$hr-background-color},
"hr-height": #{$hr-height},
"hr-margin": #{$hr-margin},
"strong-color": #{$strong-color},
"strong-weight": #{$strong-weight},
"pre-font-size": #{$pre-font-size},
"pre-padding": #{$pre-padding},
"pre-code-font-size": #{$pre-code-font-size},
)
);
}
html {
background-color: cv.getVar("body-background-color");
font-size: cv.getVar("body-size");
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: cv.getVar("body-min-width");
overflow-x: cv.getVar("body-overflow-x");
overflow-y: cv.getVar("body-overflow-y");
text-rendering: cv.getVar("body-rendering");
text-size-adjust: 100%;
}
article,
aside,
figure,
footer,
header,
hgroup,
section {
display: block;
}
body,
button,
input,
optgroup,
select,
textarea {
font-family: cv.getVar("body-family");
}
code,
pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: cv.getVar("code-family");
}
body {
color: cv.getVar("body-color");
font-size: cv.getVar("body-font-size");
font-weight: cv.getVar("body-weight");
line-height: cv.getVar("body-line-height");
}
// Inline
a,
button {
cursor: pointer;
&:focus-visible {
outline-color: hsl(
cv.getVar("focus-h"),
cv.getVar("focus-s"),
cv.getVar("focus-l")
);
outline-offset: cv.getVar("focus-offset");
outline-style: cv.getVar("focus-style");
outline-width: cv.getVar("focus-width");
&:active {
outline-width: 1px;
}
}
&:active {
outline-width: 1px;
}
}
a {
color: cv.getVar("link-text");
cursor: pointer;
text-decoration: none;
transition-duration: cv.getVar("duration");
transition-property: background-color, border-color, color;
strong {
color: currentColor;
}
}
button {
@include mx.reset;
transition-duration: cv.getVar("duration");
transition-property: background-color, border-color, color;
}
code {
background-color: cv.getVar("code-background");
border-radius: 0.5em;
color: cv.getVar("code");
font-size: cv.getVar("code-size");
font-weight: cv.getVar("code-weight");
padding: cv.getVar("code-padding");
}
hr {
background-color: cv.getVar("hr-background-color");
border: none;
display: block;
height: cv.getVar("hr-height");
margin: cv.getVar("hr-margin");
}
img {
height: auto;
max-width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: baseline;
}
small {
font-size: cv.getVar("small-font-size");
}
span {
font-style: inherit;
font-weight: inherit;
}
strong {
color: cv.getVar("strong-color");
font-weight: cv.getVar("strong-weight");
}
svg {
height: auto;
width: auto;
}
// Block
fieldset {
border: none;
}
pre {
@include mx.overflow-touch;
background-color: cv.getVar("pre-background");
color: cv.getVar("pre");
font-size: cv.getVar("pre-font-size");
overflow-x: auto;
padding: cv.getVar("pre-padding");
white-space: pre;
word-wrap: normal;
code {
background-color: transparent;
color: currentColor;
font-size: cv.getVar("pre-code-font-size");
padding: 0;
}
}
table {
td,
th {
vertical-align: top;
&:not([align]) {
text-align: inherit;
}
}
th {
color: cv.getVar("text-strong");
}
}

View File

@ -0,0 +1,92 @@
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
// List
ul {
list-style: none;
}
// Form
button,
input,
select,
textarea {
margin: 0;
}
// Box sizing
html {
box-sizing: border-box;
}
* {
&,
&::before,
&::after {
box-sizing: inherit;
}
}
// Media
img,
video {
height: auto;
max-width: 100%;
}
// Iframe
iframe {
border: 0;
}
// Table
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
&:not([align]) {
text-align: inherit;
}
}

126
style/bulma/sass/base/skeleton.scss vendored Normal file
View File

@ -0,0 +1,126 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
@use "../utilities/extends";
$skeleton-background: cv.getVar("border") !default;
$skeleton-radius: cv.getVar("radius-small") !default;
$skeleton-block-min-height: 4.5em !default;
$skeleton-lines-gap: 0.75em !default;
$skeleton-line-height: 0.75em !default;
:root {
@include cv.register-vars(
(
"skeleton-background": #{$skeleton-background},
"skeleton-radius": #{$skeleton-radius},
"skeleton-block-min-height": #{$skeleton-block-min-height},
"skeleton-lines-gap": #{$skeleton-lines-gap},
"skeleton-line-height": #{$skeleton-line-height},
)
);
}
%skeleton-pulsation {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: pulsate;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
background-color: cv.getVar("skeleton-background");
border-radius: cv.getVar("skeleton-radius");
box-shadow: none;
pointer-events: none;
}
.#{iv.$class-prefix}is-skeleton {
@extend %skeleton-pulsation;
color: transparent !important;
em,
strong {
color: inherit;
}
img {
visibility: hidden;
}
&.#{iv.$class-prefix}checkbox {
input {
opacity: 0;
}
}
&.#{iv.$class-prefix}delete {
border-radius: cv.getVar("radius-rounded");
&::before,
&::after {
display: none;
}
}
}
input.#{iv.$class-prefix}is-skeleton,
textarea.#{iv.$class-prefix}is-skeleton {
resize: none;
@include mx.placeholder {
color: transparent !important;
}
}
.#{iv.$class-prefix}has-skeleton {
color: transparent !important;
position: relative;
&::after {
@extend %skeleton-pulsation;
content: "";
display: block;
height: 100%;
left: 0;
max-width: 100%;
min-width: 10%;
position: absolute;
top: 0;
width: 7em;
}
}
.#{iv.$class-prefix}skeleton-block {
@extend %block;
@extend %skeleton-pulsation;
color: transparent !important;
min-height: cv.getVar("skeleton-block-min-height");
}
.#{iv.$class-prefix}skeleton-lines {
color: transparent !important;
display: flex;
flex-direction: column;
gap: cv.getVar("skeleton-lines-gap");
position: relative;
> div {
@extend %skeleton-pulsation;
height: cv.getVar("skeleton-line-height");
&:last-child {
min-width: 4em;
width: 30%;
}
}
}
.#{iv.$class-prefix}skeleton {
background-image: linear-gradient(
0deg,
transparent 0%,
transparent 50%,
#f60 50%,
#f60 100%
);
background-position: top left;
background-size: 1.5em;
}