Deprecate bulma in favor of normalize and milligram
Deprecate the bulma css framework in favor of normalize and milligram. Adapt the templates to work with the new css libraries.
This commit is contained in:
parent
be9da23070
commit
4aff0378ac
27 changed files with 408 additions and 334 deletions
1
sass/normalize.scss
vendored
Normal file
1
sass/normalize.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "../vendor/normalize.css/normalize";
|
||||
22
sass/onders.org.scss
Normal file
22
sass/onders.org.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
@import "onders.org/color";
|
||||
|
||||
@import "../vendor/milligram/src/Base";
|
||||
@import "../vendor/milligram/src/Blockquote";
|
||||
@import "../vendor/milligram/src/Button";
|
||||
@import "../vendor/milligram/src/Code";
|
||||
@import "../vendor/milligram/src/Divider";
|
||||
@import "../vendor/milligram/src/Form";
|
||||
@import "../vendor/milligram/src/Grid";
|
||||
@import "../vendor/milligram/src/Image";
|
||||
@import "../vendor/milligram/src/Link";
|
||||
@import "../vendor/milligram/src/List";
|
||||
@import "../vendor/milligram/src/Spacing";
|
||||
@import "../vendor/milligram/src/Table";
|
||||
@import "../vendor/milligram/src/Typography";
|
||||
@import "../vendor/milligram/src/Utility";
|
||||
|
||||
@import "onders.org/layout";
|
||||
@import "onders.org/modal";
|
||||
@import "onders.org/gallery";
|
||||
@import "onders.org/util";
|
||||
@import "onders.org/dark";
|
||||
13
sass/onders.org/_color.scss
Normal file
13
sass/onders.org/_color.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
$color-initial: #eee !default;
|
||||
$color-primary: #4d4dff !default;
|
||||
$color-secondary: #606c76 !default;
|
||||
$color-tertiary: #f4f5f6 !default;
|
||||
$color-quaternary: #9b4dca !default;
|
||||
$color-quinary: #505a62 !default;
|
||||
$color-black: #000 !default;
|
||||
|
||||
$color-dark-initial: #333 !default;
|
||||
$color-dark-primary: #7777ff !default;
|
||||
$color-dark-secondary: #d5d9dd !default;
|
||||
$color-dark-tertiary: #5c6670 !default;
|
||||
$color-dark-quaternary: #a662d0 !default;
|
||||
18
sass/onders.org/_dark.scss
Normal file
18
sass/onders.org/_dark.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
html, body {
|
||||
background-color: $color-dark-initial;
|
||||
color: $color-dark-secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-dark-primary;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $color-dark-quaternary;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $color-dark-tertiary;
|
||||
}
|
||||
}
|
||||
131
sass/onders.org/_gallery.scss
Normal file
131
sass/onders.org/_gallery.scss
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
div.gallery {
|
||||
width: calc(100% + 10px);
|
||||
margin-left: -5px;
|
||||
line-height: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
div.gallery img.thumbnail {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.gallery a img.thumbnail:hover {
|
||||
box-shadow: 0 0 0px $color-tertiary !important;
|
||||
transform: scale(1.1);
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
div.lightbox {
|
||||
opacity: 0;
|
||||
z-index: 700;
|
||||
transition: opacity 0.2s linear;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba($color-black, 0.7);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
div.lightbox:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
div.lightbox a.full {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.lightbox span {
|
||||
font-size: 2em;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
color: $color-tertiary;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.lightbox span:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
|
||||
div.lightbox span.close {
|
||||
z-index: 900;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .7em 1em;
|
||||
}
|
||||
|
||||
div.lightbox span.close:before {
|
||||
content: "✖";
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
div.lightbox span.prev {
|
||||
z-index: 800;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 6em;
|
||||
height: 100%;
|
||||
padding: 0 .3em;
|
||||
}
|
||||
|
||||
div.lightbox span.prev:before {
|
||||
content: "‹";
|
||||
}
|
||||
|
||||
div.lightbox span.end:before {
|
||||
content: "⟳";
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
div.lightbox span.next {
|
||||
z-index: 800;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 6em;
|
||||
height: 100%;
|
||||
padding: 0 .3em;
|
||||
}
|
||||
|
||||
div.lightbox span.next:before {
|
||||
content: "›";
|
||||
}
|
||||
|
||||
div.lightbox span.start:before {
|
||||
content: "⟲";
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
div.lightbox div.image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
div.lightbox div.image img {
|
||||
filter: drop-shadow(0 0 10px $color-black);
|
||||
object-fit: contain;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
30
sass/onders.org/_layout.scss
Normal file
30
sass/onders.org/_layout.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
html {
|
||||
background-color: $color-initial;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: 2rem
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
line-height: 1rem
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $color-quaternary;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $color-quinary;
|
||||
}
|
||||
46
sass/onders.org/_modal.scss
Normal file
46
sass/onders.org/_modal.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
div.modal-thumbnail {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
div.modal {
|
||||
opacity: 0;
|
||||
z-index: 900;
|
||||
position: fixed;
|
||||
transition: opacity 0.2s linear;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba($color-black, 0.5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
div.modal a {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.modal a img {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 20px $color-black;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.spacer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
div.modal:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
3
sass/onders.org/_util.scss
Normal file
3
sass/onders.org/_util.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
147
sass/style.scss
147
sass/style.scss
|
|
@ -1,147 +0,0 @@
|
|||
@charset "utf-8";
|
||||
@import "../vendor/bulma/bulma.sass";
|
||||
|
||||
html, .navbar, .footer {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: hsl(280, 100%, 50%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html, .navbar, .footer, p, strong, .title, li {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.subtitle, a:hover {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
a {
|
||||
color: hsl(217, 71%, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
opacity: 0;
|
||||
z-index: 900;
|
||||
position: fixed;
|
||||
transition: opacity 0.2s linear;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba($black, 0.5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox span.spacer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lightbox img {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 20px $black;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
@include touch {
|
||||
margin-top: 35px;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox a {
|
||||
font-size: $size-1;
|
||||
color: $light;
|
||||
z-index: 900;
|
||||
@include touch {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
font-size: $size-3;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox a.lightbox-nav-previous {
|
||||
z-index: 900;
|
||||
@include touch {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
font-size: $size-3;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox a.lightbox-nav-next {
|
||||
z-index: 900;
|
||||
@include touch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox a.close {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.lightbox a.delete {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 1%;
|
||||
right: 1%;
|
||||
}
|
||||
|
||||
.lightbox:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.lightbox-previous {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.lightbox-next {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
gap: $gap / 4;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
vertical-align: middle;
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.isso-postbox .form-wrapper .textarea-wrapper .textarea {
|
||||
overflow-y: auto;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue