|
|
|
@@ -2,7 +2,7 @@ |
|
|
|
@import url("../fonts/opensans/opensans.css"); |
|
|
|
|
|
|
|
html { |
|
|
|
scroll-margin-top: 4rem; |
|
|
|
scroll-margin-top: 3rem; |
|
|
|
} |
|
|
|
|
|
|
|
* { |
|
|
|
@@ -10,13 +10,6 @@ html { |
|
|
|
max-height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
*:hover, |
|
|
|
*:active { |
|
|
|
-webkit-box-shadow: unset; |
|
|
|
-moz-box-shadow: unset; |
|
|
|
box-shadow: unset; |
|
|
|
} |
|
|
|
|
|
|
|
*:focus { |
|
|
|
-webkit-box-shadow: inset 0 0 0 3px var(--bg3); |
|
|
|
-moz-box-shadow: inset 0 0 0 3px var(--bg3); |
|
|
|
@@ -34,9 +27,9 @@ html { |
|
|
|
* medium size - same as above, except that the element in question is contained in something else |
|
|
|
* small size - used in common text, borders |
|
|
|
*/ |
|
|
|
--unit-size: 0.5rem; |
|
|
|
--main-size: 1.5rem; |
|
|
|
--medium-size: 1.2rem; |
|
|
|
--unit-size: 0.62rem; |
|
|
|
--main-size: 1.62rem; |
|
|
|
--medium-size: 1.3rem; |
|
|
|
--small-size: 1rem; |
|
|
|
--smaller-size: 0.8rem; |
|
|
|
|
|
|
|
@@ -47,10 +40,6 @@ html { |
|
|
|
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); |
|
|
|
} |
|
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
|
font-family: var(--display-font); |
|
|
|
} |
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
|
|
:root { |
|
|
|
/* colours and shadows */ |
|
|
|
@@ -115,6 +104,11 @@ h1, h2, h3, h4, h5, h6 { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bg { |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
a, |
|
|
|
a:visited { |
|
|
|
@@ -139,26 +133,60 @@ hr { |
|
|
|
background: var(--bg2); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* CHECKERBOARD BACKGROUND FOR TRANSPARENT IMAGES */ |
|
|
|
.note img { |
|
|
|
.h-entry img { |
|
|
|
background: repeating-conic-gradient( |
|
|
|
#ffffff66 0deg 90deg, |
|
|
|
#ffffff33 0deg 180deg) 0 0/40px 40px round; |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
fill: var(--white); |
|
|
|
align-self: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* BACKGROUND IMG GRADIENT */ |
|
|
|
.bg { |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
.active { |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
/* ACCESSIBILITY MENU */ |
|
|
|
.anchor-hidden { |
|
|
|
display: none; |
|
|
|
width: 1px; |
|
|
|
height: 1px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
#accessibility-menu { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
z-index: 999; |
|
|
|
|
|
|
|
top: -90%; |
|
|
|
left: -90%; |
|
|
|
|
|
|
|
width: 30%; |
|
|
|
height: min-content; |
|
|
|
|
|
|
|
background-color: var(--bg1); |
|
|
|
padding: var(--unit-size); |
|
|
|
|
|
|
|
border: solid 2px var(--bg3); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
box-shadow: var(--shadow); |
|
|
|
} |
|
|
|
|
|
|
|
#accessibility-menu ul { |
|
|
|
list-style-type: disc; |
|
|
|
margin-left: var(--medium-size); |
|
|
|
} |
|
|
|
|
|
|
|
#accessibility-menu:focus-within:not(:active) { |
|
|
|
top: var(--unit-size); |
|
|
|
left: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
/* HEADER AND SIDEPANELS */ |
|
|
|
/* HEADER AND INSTANCE NAME */ |
|
|
|
#header { |
|
|
|
z-index: 1; |
|
|
|
font-family: var(--display-font); |
|
|
|
@@ -189,22 +217,10 @@ hr { |
|
|
|
margin: unset; |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
fill: var(--white); |
|
|
|
align-self: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* CURRENT PAGE LINK */ |
|
|
|
.active { |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
/* CONTAINS ALL ELEMENTS BESIDES HEADER */ |
|
|
|
.container { |
|
|
|
position: relative; |
|
|
|
top: 3rem; |
|
|
|
|
|
|
|
width: 48vw; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
|
|
|
|
@@ -271,7 +287,7 @@ hr { |
|
|
|
} |
|
|
|
|
|
|
|
.notes hr { |
|
|
|
margin-top: 5px; |
|
|
|
margin-top: 6.2px; |
|
|
|
} |
|
|
|
|
|
|
|
.note-wrapper { |
|
|
|
@@ -299,7 +315,7 @@ hr { |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.h-entry { |
|
|
|
.h-entry:not(:first-child) { |
|
|
|
margin-top: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
@@ -354,7 +370,7 @@ hr { |
|
|
|
|
|
|
|
background: linear-gradient(to left, var(--translucent), transparent); |
|
|
|
font-size: var(--medium-size); |
|
|
|
padding: 5px 10px 5px 0; |
|
|
|
padding: 6.2px 10px 6.2px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.note-author { |
|
|
|
@@ -380,8 +396,8 @@ hr { |
|
|
|
|
|
|
|
background-repeat: no-repeat !important; |
|
|
|
|
|
|
|
width: var(--medium-size) !important; |
|
|
|
height: var(--medium-size) !important; |
|
|
|
width: var(--small-size) !important; |
|
|
|
height: var(--small-size) !important; |
|
|
|
|
|
|
|
margin-left: var(--unit-size); |
|
|
|
text-indent: -9999em; |
|
|
|
@@ -459,7 +475,6 @@ hr { |
|
|
|
.section-widget { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: fit-content; |
|
|
|
|
|
|
|
background-color: var(--translucent); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
@@ -487,8 +502,8 @@ hr { |
|
|
|
border: 2px solid var(--bg2); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
background: var(--bg-button); |
|
|
|
padding: 5px 10px; |
|
|
|
margin-top: 5px; |
|
|
|
padding: 6.2px 10px; |
|
|
|
margin-top: 6.2px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
float: right; |
|
|
|
@@ -503,7 +518,7 @@ hr { |
|
|
|
font-weight: 700; |
|
|
|
|
|
|
|
border-radius: var(--unit-size); |
|
|
|
padding: 5px 10px 5px 10px; |
|
|
|
padding: 6.2px 10px 6.2px 10px; |
|
|
|
|
|
|
|
background-color: var(--translucent); |
|
|
|
} |
|
|
|
@@ -539,7 +554,7 @@ hr { |
|
|
|
} |
|
|
|
|
|
|
|
.section-form-label { |
|
|
|
margin-bottom: 5px; |
|
|
|
margin-bottom: 1.62px; |
|
|
|
} |
|
|
|
|
|
|
|
.form-group { |
|
|
|
@@ -547,19 +562,17 @@ hr { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 6.2px; |
|
|
|
} |
|
|
|
|
|
|
|
.help-block { |
|
|
|
margin-top: 5px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 6.2px; |
|
|
|
} |
|
|
|
|
|
|
|
.help-text { |
|
|
|
font-style: italic; |
|
|
|
font-size: var(--small-size); |
|
|
|
margin-top: 5px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 6.2px; |
|
|
|
} |
|
|
|
|
|
|
|
.help-block > .list-unstyled, |
|
|
|
@@ -594,220 +607,6 @@ hr { |
|
|
|
resize: vertical; |
|
|
|
} |
|
|
|
|
|
|
|
/* BUTTONS AND INPUT SHENANIGANS */ |
|
|
|
label, button { |
|
|
|
font-weight: bold !important; |
|
|
|
} |
|
|
|
|
|
|
|
select, |
|
|
|
button, |
|
|
|
textarea, |
|
|
|
input { |
|
|
|
font-size: inherit !important; |
|
|
|
color: var(--white); |
|
|
|
|
|
|
|
padding: 2px 8px; |
|
|
|
border: 2px solid var(--bg2); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
background-color: var(--translucent); |
|
|
|
} |
|
|
|
|
|
|
|
select, |
|
|
|
textarea { |
|
|
|
padding: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
button { |
|
|
|
background: var(--bg-button); |
|
|
|
padding: 4px 12px; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
|
|
|
|
select { |
|
|
|
-webkit-appearance: none !important; |
|
|
|
-moz-appearance: none !important; |
|
|
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 16px; |
|
|
|
background-position: center right 5px; |
|
|
|
|
|
|
|
color: var(--white) !important; |
|
|
|
border: 2px solid var(--bg2); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
input[type=radio] { |
|
|
|
border: solid 0.25em var(--bg2) !important; |
|
|
|
background-color: var(--bg1) !important; |
|
|
|
} |
|
|
|
|
|
|
|
input[type=checkbox] { |
|
|
|
all: unset; |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
width: var(--medium-size); |
|
|
|
height: var(--medium-size); |
|
|
|
vertical-align: middle; |
|
|
|
|
|
|
|
background-color: var(--bg2) !important; |
|
|
|
background-size: cover; |
|
|
|
margin-right: 2px; |
|
|
|
|
|
|
|
-webkit-mask-image: url("../icons/check-off.svg") !important; |
|
|
|
-o-mask-image: url("../icons/check-off.svg") !important; |
|
|
|
-moz-mask-image: url("../icons/check-off.svg") !important; |
|
|
|
mask-image: url("../icons/check-off.svg") !important; |
|
|
|
} |
|
|
|
|
|
|
|
input[type=color] { |
|
|
|
border: unset; |
|
|
|
padding: 2px; |
|
|
|
width: 100%; |
|
|
|
height: 3rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* DISABLED STATE TEXT COLOR */ |
|
|
|
:is(:disabled, :disabled:active)::file-selector-button, |
|
|
|
button:is(:disabled, :disabled:active), |
|
|
|
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active), |
|
|
|
select:is(:disabled, :disabled:active) > button { |
|
|
|
color: var(--white) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* HOVER AND FOCUS */ |
|
|
|
textarea:hover, |
|
|
|
textarea:focus, |
|
|
|
button:hover, |
|
|
|
button:focus, |
|
|
|
input:hover, |
|
|
|
input:focus, |
|
|
|
select:hover, |
|
|
|
select:focus { |
|
|
|
color: var(--white) !important; |
|
|
|
-webkit-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; |
|
|
|
-moz-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; |
|
|
|
box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* checkbox and radio */ |
|
|
|
input[type=radio]:hover, |
|
|
|
input[type=radio]:focus, |
|
|
|
input[type=checkbox]:hover, |
|
|
|
input[type=checkbox]:focus { |
|
|
|
color: var(--white) !important; |
|
|
|
background-color: var(--bg3) !important; |
|
|
|
} |
|
|
|
|
|
|
|
input[type=radio]:checked { |
|
|
|
background-color: var(--white) !important; |
|
|
|
} |
|
|
|
|
|
|
|
input[type=checkbox]:checked { |
|
|
|
background-color: var(--bg3) !important; |
|
|
|
-webkit-mask-image: url("../icons/check-on.svg") !important; |
|
|
|
-o-mask-image: url("../icons/check-on.svg") !important; |
|
|
|
-moz-mask-image: url("../icons/check-on.svg") !important; |
|
|
|
mask-image: url("../icons/check-on.svg") !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* file selector */ |
|
|
|
input[type=file] { |
|
|
|
font-family: var(--main-font) !important; |
|
|
|
font-weight: normal !important; |
|
|
|
padding: unset !important; |
|
|
|
|
|
|
|
background: var(--bg-button); |
|
|
|
border: 2px solid var(--bg2); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
/* button part of file selector */ |
|
|
|
::file-selector-button { |
|
|
|
font-family: var(--main-font) !important; |
|
|
|
font-weight: bold !important; |
|
|
|
color: var(--white) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* ACCESSIBILITY MENU */ |
|
|
|
#accessibility-menu { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
z-index: 999; |
|
|
|
|
|
|
|
top: -90%; |
|
|
|
left: -90%; |
|
|
|
|
|
|
|
width: 30%; |
|
|
|
height: min-content; |
|
|
|
|
|
|
|
background-color: var(--bg1); |
|
|
|
padding: var(--unit-size); |
|
|
|
|
|
|
|
border: solid 2px var(--bg3); |
|
|
|
border-radius: var(--unit-size); |
|
|
|
box-shadow: var(--shadow); |
|
|
|
} |
|
|
|
|
|
|
|
#accessibility-menu ul { |
|
|
|
list-style-type: disc; |
|
|
|
margin-left: var(--medium-size); |
|
|
|
} |
|
|
|
|
|
|
|
#accessibility-menu:focus-within:not(:active) { |
|
|
|
top: var(--unit-size); |
|
|
|
left: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
.anchor-hidden { |
|
|
|
width: 1px; |
|
|
|
height: 1px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* ANIMATIONS */ |
|
|
|
@keyframes fadeIn { |
|
|
|
0% { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(-10px); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: unset; |
|
|
|
transform: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeOut { |
|
|
|
100% { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(-10px); |
|
|
|
} |
|
|
|
|
|
|
|
0% { |
|
|
|
opacity: unset; |
|
|
|
transform: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes highlight { |
|
|
|
0% { |
|
|
|
box-shadow: initial; |
|
|
|
border-radius: var(--unit-size); |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
border-radius: var(--unit-size); |
|
|
|
box-shadow: inset 0 20px 40px var(--white); |
|
|
|
transition: box-shadow 0.3s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
box-shadow: initial; |
|
|
|
border-radius: var(--unit-size); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* PROFILE */ |
|
|
|
.profile { |
|
|
|
display: flex; |
|
|
|
@@ -857,6 +656,11 @@ input[type=file] { |
|
|
|
} |
|
|
|
|
|
|
|
/* MEDIA QUERIES */ |
|
|
|
.container { |
|
|
|
top: 3rem; |
|
|
|
width: 62vw; |
|
|
|
} |
|
|
|
|
|
|
|
/* sidepanels need to be shown by default on desktop, hidden on mobile */ |
|
|
|
.panel .panel-content { |
|
|
|
display: flex; |
|
|
|
@@ -879,7 +683,6 @@ input[type=file] { |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media only screen |
|
|
|
and (min-width: 1281px) { |
|
|
|
.content { |
|
|
|
@@ -887,7 +690,7 @@ and (min-width: 1281px) { |
|
|
|
} |
|
|
|
|
|
|
|
.panel .panel-content { |
|
|
|
width: 15vw; |
|
|
|
width: 19vw; |
|
|
|
} |
|
|
|
|
|
|
|
a[id|="anchor"]:target + .accessibility-target { |
|
|
|
|
