chore: implement initial simple website
This commit is contained in:
6
style/bulma/sass/base/_index.scss
Normal file
6
style/bulma/sass/base/_index.scss
Normal file
@ -0,0 +1,6 @@
|
||||
/* Bulma Base */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "minireset";
|
||||
@forward "generic";
|
||||
@forward "animations";
|
15
style/bulma/sass/base/animations.scss
Normal file
15
style/bulma/sass/base/animations.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
239
style/bulma/sass/base/generic.scss
Normal file
239
style/bulma/sass/base/generic.scss
Normal 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");
|
||||
}
|
||||
}
|
92
style/bulma/sass/base/minireset.scss
Normal file
92
style/bulma/sass/base/minireset.scss
Normal 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
126
style/bulma/sass/base/skeleton.scss
vendored
Normal 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;
|
||||
}
|
Reference in New Issue
Block a user