// Universal
.container{
width: 60%; margin: auto; overflow: visible; z-index: 0;
}
html {
scroll-behavior: smooth;
}
body{
font-family: $font_normal; font-size: $normalsize; font-weight: 400; line-height: 1.6; margin: 0; @include color(background-color, --background-color, $background_color); @include color(color, --text-color, $text_color);
}
::selection{
color: $blue_hover
}
.header {
font-size: $huge; font-weight: 700;
}
h1{
font-size: $LARGE; font-weight: 700;
}
h2{
font-size: $Large; font-weight: 600;
}
h3{
font-size: $large; font-weight: 600;
}
h4{
font-size: $normalsize; font-weight: 400;
}
p {
padding-bottom: 10px;
}
a{
@include color(color, --text-color, $text_color); &:hover{ color: $blue_hover; }
}
ul {
list-style: square;
}
audio, canvas, iframe, img, svg, video {
vertical-align: middle; max-width: 100%;
}
// Preventing broken image symbol when using lazysizes img.lazyload:not() {
visibility: hidden;
}
figure {
margin-left: 0; margin-right: 0;
}
figure > img {
display: block; width: 60%; margin: auto; border-radius: 10px; }
figcaption {
@include color(color, --gray-text, $gray_text); font-size: $small; text-align: center; margin-top: 10px; }
table {
margin: auto; border-collapse: collapse; width: 90%;
}
th, td {
padding: 10px;
}
tbody tr:hover {
@include color(background-color, --float-color, $gray_light);
}
caption {
@extend figcaption;
}
hr {
border: 0; height: 2px; @include color(background-color, --gray-element, $gray_element);
}
.footnotes {
ol { font-size: $footnotesize; } p { margin: 5px 0; padding-bottom: 0; }
}
.reversefootnote {
color: $blue; text-decoration: none; &:hover { color: $blue_hover; }
}
// Adjustment for anchor tag positioning with fixed header :target {
&[id^="fn"]{ padding-top: 65px; margin-top: -65px; color: $blue; a { color: $blue; } } &:not(div):not([id^="fn"]):before{ content: ""; display: block; padding-top: 65px; margin-top: -65px; }
}
// Helper classes
.separator{
margin-top: 60px;
}
.no-select {
-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
// Hide visually and maintain layout, but not from screen readers .transparent {
opacity: 0;
}
// Hide visually and from screen readers, but maintain layout // .invisible { // visibility: hidden; // }
// Hide visually and from screen readers // .hidden, [hidden] { // display: none !important; // }
// Like display: none; but visible to screen readers // .visuallyhidden { // position: absolute; // overflow: hidden; // clip: rect(0 0 0 0); // height: 1px; width: 1px; // margin: -1px; padding: 0; border: 0; // }
// --------------------
—————------------------
// | Property | occupies space | consumes clicks | // --------------------
—————------------------
// | opacity: 0 | ✓ | ✓ | // --------------------
—————------------------
// | visibility: hidden | ✓ | ✗ | // --------------------
—————------------------
// | display: none | ✗ | ✗ | // --------------------
—————------------------
// Indented boxes
blockquote {
border-left-color: $gray_element; @include indented-box(var(--gray-element, $gray_element)); p { padding-bottom: 0; } &:not([class]) { @include color(color, --gray-text, $gray_text); @include gray-link; }
}
.hint {
border-left-color: $blue;
}
.danger {
border-left-color: $red;
}
// Main Header
main-header {
padding-top: 40px; padding-bottom: 10px; cursor: default; a{ text-decoration: none; font-family: 'Black Ops One', 'Source Code Pro', sans-serif; font-size: $Huge; margin: 0; @include color(color, --text-color, $text_color); }
}
// Navigation
navbar{
@include color(background-color, --background-color, $background_color); width: 100%; padding: 15px 0; z-index: 10; .container { display: flex; align-items: center; line-height: 1.5; } a{ color: $blue; text-decoration: none; font-weight: 600; border-radius: 5px; border: none; padding: 0px 6px; margin-right: 10px; transition: background-color 0.3s ease-in; display: inline-block; } a:not(.current):hover{ color: #fff; background-color: $blue_hover; } .current{ color: #fff; background-color: $blue; cursor: default; } .icon { display: block; }
}
.sticky {
position: sticky; top: 0; box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.5); box-shadow: 0 12px 12px -12px var(--dark-shadow1, rgba(0, 0, 0, 0.5));
}
dark-toggle-box {
display: none;
}
dark-toggle-label {
margin-left: auto; margin-right: 10px; transition: all 0.3s ease-in-out; transition-property: opacity, transform; cursor: pointer; display: none;
}
// Check support for CSS variable @supports ( (–a: 0)) {
#dark-toggle-label { display: block; }
}
dark-toggle-box:checked + dark-toggle-label {
transform: rotate(180deg);
}
navbar:hover dark-toggle-label{
opacity: 1;
}
// Footer
main-footer{
@include color(color, --gray-text, $gray_text); @include gray-link; margin-top: 60px; padding-bottom: 60px; font-size: $footnotesize; font-weight: 300; i, .icon { margin-right: 5px; }
}
copyleft{
transition: opacity 0.15s;
}
key:hover:after{
display: inline-block; content: attr(aria-label);
}
// Icons if not using Font Awesome Kit
.icon {
display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor;
}