2017-10-01 21:55:29 +02:00
|
|
|
|
@charset "UTF-8";
|
|
|
|
|
|
|
|
|
|
$default-black: rgb(0, 0, 0);
|
|
|
|
|
$default-white: rgb(201, 201, 201);
|
|
|
|
|
$default-blue: rgb(23, 28, 148);
|
|
|
|
|
|
|
|
|
|
$em-height: 16px;
|
|
|
|
|
$line-overflow: 5px;
|
|
|
|
|
$line-height: $em-height + $line-overflow;
|
|
|
|
|
|
|
|
|
|
$box-border: 2px;
|
2017-10-01 22:26:57 +02:00
|
|
|
|
$box-double-border: 4px;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@mixin whiteOnBlue {
|
|
|
|
|
background-color: $default-blue;
|
|
|
|
|
color: $default-white;
|
|
|
|
|
border-color: $default-white;
|
|
|
|
|
}
|
|
|
|
|
@mixin blueOnWhite {
|
|
|
|
|
background-color: $default-white;
|
|
|
|
|
color: $default-blue;
|
|
|
|
|
border-color: $default-blue;
|
|
|
|
|
}
|
|
|
|
|
@mixin whiteOnBlack {
|
|
|
|
|
background-color: $default-black;
|
|
|
|
|
color: $default-white;
|
|
|
|
|
border-color: $default-white;
|
|
|
|
|
}
|
|
|
|
|
@mixin blackOnWhite {
|
|
|
|
|
background-color: $default-white;
|
|
|
|
|
color: $default-black;
|
|
|
|
|
border-color: $default-black;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-04 01:12:15 +02:00
|
|
|
|
@mixin hoverable($hoverFg, $hoverBg) {
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: $hoverFg;
|
|
|
|
|
background-color: $hoverBg;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-29 19:23:00 +02:00
|
|
|
|
@font-face {
|
|
|
|
|
font-family: "Iosevka Slab Regular";
|
|
|
|
|
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 21:55:29 +02:00
|
|
|
|
:root { // Styles applying to everyting
|
2020-09-29 19:23:00 +02:00
|
|
|
|
font-family: "Iosevka Slab Regular", "monospace";
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include whiteOnBlack;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
font-size: $em-height;
|
|
|
|
|
line-height: $line-height;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
/* General styles for elements */
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
* { // Remove margin and padding from everything by default
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b { // Bolded text
|
|
|
|
|
font-weight: 1000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
padding-left: 1ch;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: $default-white;
|
2017-10-04 01:12:15 +02:00
|
|
|
|
@include hoverable($default-white, $default-blue);
|
2017-10-01 21:55:29 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
nav ul > li > ul:hover a {
|
|
|
|
|
color: $default-white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
height: $line-height / 2;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-bottom: 1px solid $default-white;
|
2017-10-06 19:31:01 +02:00
|
|
|
|
margin-bottom: $em-height - 1px;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
}
|
|
|
|
|
nav li hr, li.button-list > ul a hr, .white hr {
|
|
|
|
|
border-color: $default-black;
|
|
|
|
|
}
|
|
|
|
|
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
|
|
|
|
|
border-color: $default-white;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
/* Lists */
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
&:not(.button-list) > ul::before {
|
|
|
|
|
content: "- ";
|
|
|
|
|
}
|
2017-10-01 22:31:58 +02:00
|
|
|
|
&.button-list > ul {
|
2017-10-01 21:55:29 +02:00
|
|
|
|
width: calc(100% - 1ch);
|
2017-10-04 01:12:15 +02:00
|
|
|
|
text-decoration: underline;
|
2017-10-06 19:31:01 +02:00
|
|
|
|
@include hoverable($default-white, $default-blue);
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
& > li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
/* Navbars */
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
@keyframes hide {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
left: inherit;
|
|
|
|
|
}
|
|
|
|
|
1% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
left: -9999px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
nav {
|
2017-10-06 19:31:01 +02:00
|
|
|
|
|
2017-10-01 21:55:29 +02:00
|
|
|
|
a {
|
|
|
|
|
color: $default-black;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul::before {
|
|
|
|
|
content: "" !important;
|
|
|
|
|
}
|
2017-10-01 22:20:12 +02:00
|
|
|
|
|
2017-10-01 21:55:29 +02:00
|
|
|
|
& > li { // Navbar
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blackOnWhite;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
|
|
|
|
& > ul { // Navbar items
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2017-10-06 19:31:01 +02:00
|
|
|
|
display: table-cell;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
padding-left: 1ch;
|
|
|
|
|
padding-right: 1ch;
|
2017-10-04 01:12:15 +02:00
|
|
|
|
@include hoverable($default-white, $default-blue);
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
&:focus {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include whiteOnBlue;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
li { // Display inner items on focus
|
|
|
|
|
display: block;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
left: inherit;
|
|
|
|
|
animation-name: hide;
|
|
|
|
|
|
|
|
|
|
animation-name: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > li { // Navbar inner lists
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blackOnWhite;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
position: absolute;
|
2017-10-01 22:51:43 +02:00
|
|
|
|
border: 2px solid;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
box-shadow: 0 0 0 0.25ch $default-white;
|
|
|
|
|
margin-left: calc(2px - 1ch);
|
|
|
|
|
margin-right: calc(2px - 1ch);
|
|
|
|
|
margin-top: $line-height / 2;
|
|
|
|
|
margin-bottom: $line-height / 2;
|
|
|
|
|
padding: calc(0.25ch + 2px);
|
|
|
|
|
padding-top: $line-height / 2;
|
|
|
|
|
padding-bottom: $line-height / 2;
|
|
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
left: -9999px;
|
|
|
|
|
|
|
|
|
|
animation-name: hide;
|
|
|
|
|
animation-duration: 0.5s;
|
|
|
|
|
|
|
|
|
|
& > ul { // Inner Items
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blackOnWhite;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
padding-left: 1ch;
|
|
|
|
|
padding-right: 1ch;
|
|
|
|
|
min-height: $line-height;
|
|
|
|
|
|
|
|
|
|
&:hover { // Navbar inner items hover
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include whiteOnBlue;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
/* Miscallaneous Classes */
|
2017-10-01 21:55:29 +02:00
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
border: $box-border solid $default-white;
|
|
|
|
|
margin: 0.5ch;
|
2017-10-01 22:26:57 +02:00
|
|
|
|
padding: calc(0.5ch - #{$box-border});
|
2017-10-01 21:55:29 +02:00
|
|
|
|
width: auto;
|
|
|
|
|
margin-top: $line-height / 2;
|
|
|
|
|
margin-bottom: $line-height / 2 ;
|
|
|
|
|
padding-top: $line-height / 2 - $box-border;
|
|
|
|
|
padding-bottom: $line-height / 2 - $box-border;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
|
2017-10-06 19:31:01 +02:00
|
|
|
|
&.inline {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 21:55:29 +02:00
|
|
|
|
&.double {
|
|
|
|
|
border-style: double;
|
|
|
|
|
border-width: $box-double-border;
|
2017-10-01 22:26:57 +02:00
|
|
|
|
margin: calc(0.5ch);
|
|
|
|
|
padding: calc(0.5ch - (#{$box-double-border}));
|
2017-10-01 21:55:29 +02:00
|
|
|
|
margin-top: $line-height / 2 ;
|
|
|
|
|
margin-bottom: $line-height / 2 ;
|
|
|
|
|
padding-top: $line-height / 2 - $box-double-border;
|
|
|
|
|
padding-bottom: $line-height / 2 - $box-double-border;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.black {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include whiteOnBlack;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
box-shadow: 0 0 0 0.25ch $default-black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.white {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blackOnWhite;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
box-shadow: 0 0 0 0.25ch $default-white;
|
2017-10-01 22:31:58 +02:00
|
|
|
|
|
|
|
|
|
a {
|
2017-10-04 01:12:15 +02:00
|
|
|
|
color: $default-black;
|
|
|
|
|
&:hover {
|
|
|
|
|
@include whiteOnBlue;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-10-01 21:55:29 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.blue {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include whiteOnBlue;
|
2017-10-01 21:55:29 +02:00
|
|
|
|
box-shadow: 0 0 0 0.25ch $default-blue;
|
2017-10-01 22:31:58 +02:00
|
|
|
|
|
|
|
|
|
li.button-list > ul:hover {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blackOnWhite;
|
2017-10-01 22:31:58 +02:00
|
|
|
|
}
|
|
|
|
|
li.button-list > ul:hover > a {
|
|
|
|
|
color: $default-black;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
2017-10-01 22:51:43 +02:00
|
|
|
|
@include blueOnWhite;
|
2017-10-01 22:31:58 +02:00
|
|
|
|
}
|
|
|
|
|
hr {
|
|
|
|
|
border-color: $default-white;
|
|
|
|
|
}
|
2017-10-04 01:12:15 +02:00
|
|
|
|
button {
|
|
|
|
|
&:hover {
|
|
|
|
|
@include blueOnWhite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.checkbox-right, .checkbox-left, .radio-right, .radio-left {
|
|
|
|
|
&:hover {
|
|
|
|
|
@include blueOnWhite;
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-10-01 21:55:29 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-symbol::after {
|
|
|
|
|
content: " ▼";
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-04 01:12:15 +02:00
|
|
|
|
.no-select {
|
|
|
|
|
user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-04 01:13:57 +02:00
|
|
|
|
/* How to add pages:
|
2017-10-04 01:22:51 +02:00
|
|
|
|
*
|
|
|
|
|
* (at)for (dollar)i from 1 through 20 {
|
|
|
|
|
* .page-#{(dollar)i} {
|
|
|
|
|
* display: none;
|
|
|
|
|
* }
|
|
|
|
|
* #radio-page-#{(dollar)i}:checked ~ .page-#{(dollar)i} {
|
|
|
|
|
* display: block;
|
|
|
|
|
* }
|
|
|
|
|
* }
|
2017-10-04 01:13:57 +02:00
|
|
|
|
*/
|
2017-10-04 01:12:15 +02:00
|
|
|
|
|
|
|
|
|
/* Form styles */
|
|
|
|
|
|
|
|
|
|
input[type=checkbox], input[type=radio] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox-right, .checkbox-left, .radio-right, .radio-left {
|
|
|
|
|
@include hoverable($default-white, $default-blue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checkbox-right {
|
|
|
|
|
&::after {
|
|
|
|
|
content: "[ ]";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.checkbox-left {
|
|
|
|
|
&::before {
|
|
|
|
|
content: "[ ]";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.radio-right {
|
|
|
|
|
&::after {
|
|
|
|
|
content: "( )";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.radio-left {
|
|
|
|
|
&::before {
|
|
|
|
|
content: "( )";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=checkbox]:checked {
|
|
|
|
|
& + .checkbox-right::after {
|
|
|
|
|
content: "[x]";
|
|
|
|
|
}
|
|
|
|
|
& + .checkbox-left::before {
|
|
|
|
|
content: "[x]";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=radio]:checked {
|
|
|
|
|
& + .radio-right::after {
|
|
|
|
|
content: "(x)";
|
|
|
|
|
}
|
|
|
|
|
& + .radio-left::before {
|
|
|
|
|
content: "(x)";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=text], button {
|
|
|
|
|
background-color: inherit;
|
|
|
|
|
border: none;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
color: inherit;
|
|
|
|
|
|
|
|
|
|
@include hoverable($default-white, $default-blue);
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-06 20:35:51 +02:00
|
|
|
|
label:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-04 01:12:15 +02:00
|
|
|
|
button {
|
|
|
|
|
&:focus, &:hover, &:active, &::-moz-focus-inner {
|
|
|
|
|
border: none;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::before { content: "[ "; }
|
|
|
|
|
&::after { content: " ]"; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.textinput {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
@include hoverable($default-white, $default-blue);
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: "[";
|
|
|
|
|
}
|
|
|
|
|
&::after {
|
|
|
|
|
content: "]";
|
|
|
|
|
}
|
|
|
|
|
&:hover > input[type=text] {
|
|
|
|
|
@include whiteOnBlue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=text] {
|
|
|
|
|
@include blackOnWhite;
|
|
|
|
|
width: 15ch;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-01 22:51:43 +02:00
|
|
|
|
/* Style helpers, like space-takers */
|
2017-10-01 22:20:12 +02:00
|
|
|
|
|
|
|
|
|
@for $i from 1 through 5 {
|
2017-10-06 19:31:01 +02:00
|
|
|
|
.space-#{$i} { min-height: $line-height * $i; }
|
2017-10-01 22:20:12 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@for $width from 1 through 5 {
|
|
|
|
|
.width-#{$width * 5} { width: $width * 5ch; }
|
|
|
|
|
}
|
|
|
|
|
@for $width from 1 through 5 {
|
|
|
|
|
.width-#{$width * 50} { width: $width * 50ch - 2ch; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@for $i from 1 through 5 {
|
|
|
|
|
.padding-#{$i} { padding: $i * 1ch; padding-top: $line-height * $i; padding-bottom: $line-height * $i; }
|
|
|
|
|
}
|