Add width-percentage
This commit is contained in:
parent
02dfc857af
commit
a193260e75
|
|
@ -1,19 +1,25 @@
|
|||
.page-1 {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
#radio-page-1:checked ~ .page-1 {
|
||||
display: block; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-2 {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
#radio-page-2:checked ~ .page-2 {
|
||||
display: block; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-3 {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
#radio-page-3:checked ~ .page-3 {
|
||||
display: block; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=custom.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AACC,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK",
|
||||
"sources": ["../scss/custom.scss"],
|
||||
"names": [],
|
||||
"file": "custom.css"
|
||||
}
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"AACC;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE","file":"custom.css"}
|
||||
604
css/style.css
604
css/style.css
|
|
@ -1,149 +1,181 @@
|
|||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: "Iosevka Slab Regular";
|
||||
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); }
|
||||
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
|
||||
}
|
||||
:root {
|
||||
font-family: "Iosevka Slab Regular", "monospace";
|
||||
background-color: black;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9;
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 21px; }
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
/* General styles for elements */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
width: auto; }
|
||||
width: auto;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 1000; }
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none; }
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1ch; }
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c9c9c9; }
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
color: rgb(201, 201, 201);
|
||||
}
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
|
||||
nav ul > li > ul:hover a {
|
||||
color: #c9c9c9; }
|
||||
color: rgb(201, 201, 201);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 10.5px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
margin-bottom: 9.5px; }
|
||||
border-bottom: 1px solid rgb(201, 201, 201);
|
||||
margin-bottom: 9.5px;
|
||||
}
|
||||
|
||||
nav li hr,
|
||||
li.button-list > ul a hr,
|
||||
.white hr {
|
||||
border-color: black; }
|
||||
border-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
nav > li > ul li > ul:hover > hr,
|
||||
li.button-list > ul:hover a hr {
|
||||
border-color: #c9c9c9; }
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
li:not(.button-list) > ul::before {
|
||||
content: "- "; }
|
||||
content: "- ";
|
||||
}
|
||||
li.button-list > ul {
|
||||
width: calc(100% - 1ch);
|
||||
text-decoration: underline; }
|
||||
li.button-list > ul:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
li.button-list > ul > li {
|
||||
width: 100%; }
|
||||
li.button-list > ul a {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
text-decoration: underline;
|
||||
}
|
||||
li.button-list > ul:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
li.button-list > ul > li {
|
||||
width: 100%;
|
||||
}
|
||||
li.button-list > ul a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Navbars */
|
||||
@keyframes hide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: inherit; }
|
||||
left: inherit;
|
||||
}
|
||||
1% {
|
||||
opacity: 0; }
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: -9999px; } }
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
nav a {
|
||||
color: black;
|
||||
color: rgb(0, 0, 0);
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul::before {
|
||||
content: "" !important; }
|
||||
content: "" !important;
|
||||
}
|
||||
nav > li {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black;
|
||||
margin-left: 0; }
|
||||
nav > li > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table-cell;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch; }
|
||||
nav > li > ul:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
nav > li > ul:focus {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
nav > li > ul:focus li {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
left: inherit;
|
||||
animation-name: hide;
|
||||
animation-name: none; }
|
||||
nav > li > ul > li {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
box-shadow: 0 0 0 0.25ch #c9c9c9;
|
||||
margin-left: calc(2px - 1ch);
|
||||
margin-right: calc(2px - 1ch);
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
padding: calc(0.25ch + 2px);
|
||||
padding-top: 10.5px;
|
||||
padding-bottom: 10.5px;
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
animation-name: hide;
|
||||
animation-duration: 0.5s; }
|
||||
nav > li > ul > li > ul {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
min-height: 21px; }
|
||||
nav > li > ul > li > ul:hover {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
margin-left: 0;
|
||||
}
|
||||
nav > li > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: table-cell;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
nav > li > ul:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
nav > li > ul:focus {
|
||||
background-color: rgb(23, 28, 148);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
nav > li > ul:focus li {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
left: inherit;
|
||||
animation-name: hide;
|
||||
animation-name: none;
|
||||
}
|
||||
nav > li > ul > li {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
|
||||
margin-left: calc(2px - 1ch);
|
||||
margin-right: calc(2px - 1ch);
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
padding: calc(0.25ch + 2px);
|
||||
padding-top: 10.5px;
|
||||
padding-bottom: 10.5px;
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
animation-name: hide;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
nav > li > ul > li > ul {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
min-height: 21px;
|
||||
}
|
||||
nav > li > ul > li > ul:hover {
|
||||
background-color: rgb(23, 28, 148);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
|
||||
/* Miscallaneous Classes */
|
||||
.box {
|
||||
border: 2px solid #c9c9c9;
|
||||
border: 2px solid rgb(201, 201, 201);
|
||||
margin: 0.5ch;
|
||||
padding: calc(0.5ch - 2px);
|
||||
width: auto;
|
||||
|
|
@ -151,70 +183,86 @@ nav > li {
|
|||
margin-bottom: 10.5px;
|
||||
padding-top: 8.5px;
|
||||
padding-bottom: 8.5px;
|
||||
vertical-align: top; }
|
||||
.box.inline {
|
||||
display: inline-block; }
|
||||
.box.double {
|
||||
border-style: double;
|
||||
border-width: 4px;
|
||||
margin: calc(0.5ch);
|
||||
padding: calc(0.5ch - (4px));
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
padding-top: 6.5px;
|
||||
padding-bottom: 6.5px; }
|
||||
.box.black {
|
||||
background-color: black;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9;
|
||||
box-shadow: 0 0 0 0.25ch black; }
|
||||
.box.white {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black;
|
||||
box-shadow: 0 0 0 0.25ch #c9c9c9; }
|
||||
.box.white a {
|
||||
color: black; }
|
||||
.box.white a:hover {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
.box.blue {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9;
|
||||
box-shadow: 0 0 0 0.25ch #171c94; }
|
||||
.box.blue li.button-list > ul:hover {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black; }
|
||||
.box.blue li.button-list > ul:hover > a {
|
||||
color: black; }
|
||||
.box.blue a:hover {
|
||||
background-color: #c9c9c9;
|
||||
color: #171c94;
|
||||
border-color: #171c94; }
|
||||
.box.blue hr {
|
||||
border-color: #c9c9c9; }
|
||||
.box.blue button:hover {
|
||||
background-color: #c9c9c9;
|
||||
color: #171c94;
|
||||
border-color: #171c94; }
|
||||
.box.blue .checkbox-right:hover,
|
||||
.box.blue .checkbox-left:hover,
|
||||
.box.blue .radio-right:hover,
|
||||
.box.blue .radio-left:hover {
|
||||
background-color: #c9c9c9;
|
||||
color: #171c94;
|
||||
border-color: #171c94; }
|
||||
vertical-align: top;
|
||||
}
|
||||
.box.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
.box.double {
|
||||
border-style: double;
|
||||
border-width: 4px;
|
||||
margin: 0.5ch;
|
||||
padding: calc(0.5ch - (4px));
|
||||
margin-top: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
padding-top: 6.5px;
|
||||
padding-bottom: 6.5px;
|
||||
}
|
||||
.box.black {
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
box-shadow: 0 0 0 0.25ch rgb(0, 0, 0);
|
||||
}
|
||||
.box.white {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
|
||||
}
|
||||
.box.white a {
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
.box.white a:hover {
|
||||
background-color: rgb(23, 28, 148);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
.box.blue {
|
||||
background-color: rgb(23, 28, 148);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
box-shadow: 0 0 0 0.25ch rgb(23, 28, 148);
|
||||
}
|
||||
.box.blue li.button-list > ul:hover {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
}
|
||||
.box.blue li.button-list > ul:hover > a {
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
.box.blue a:hover {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(23, 28, 148);
|
||||
border-color: rgb(23, 28, 148);
|
||||
}
|
||||
.box.blue hr {
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
.box.blue button:hover {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(23, 28, 148);
|
||||
border-color: rgb(23, 28, 148);
|
||||
}
|
||||
.box.blue .checkbox-right:hover,
|
||||
.box.blue .checkbox-left:hover,
|
||||
.box.blue .radio-right:hover,
|
||||
.box.blue .radio-left:hover {
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(23, 28, 148);
|
||||
border-color: rgb(23, 28, 148);
|
||||
}
|
||||
|
||||
.list-symbol::after {
|
||||
content: " ▼"; }
|
||||
content: " ▼";
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* How to add pages:
|
||||
*
|
||||
|
|
@ -230,37 +278,47 @@ nav > li {
|
|||
/* Form styles */
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-right:hover,
|
||||
.checkbox-left:hover,
|
||||
.radio-right:hover,
|
||||
.radio-left:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
|
||||
.checkbox-right::after {
|
||||
content: "[ ]"; }
|
||||
content: "[ ]";
|
||||
}
|
||||
|
||||
.checkbox-left::before {
|
||||
content: "[ ]"; }
|
||||
content: "[ ]";
|
||||
}
|
||||
|
||||
.radio-right::after {
|
||||
content: "( )"; }
|
||||
content: "( )";
|
||||
}
|
||||
|
||||
.radio-left::before {
|
||||
content: "( )"; }
|
||||
content: "( )";
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + .checkbox-right::after {
|
||||
content: "[x]"; }
|
||||
content: "[x]";
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-left::before {
|
||||
content: "[x]"; }
|
||||
content: "[x]";
|
||||
}
|
||||
|
||||
input[type=radio]:checked + .radio-right::after {
|
||||
content: "(x)"; }
|
||||
content: "(x)";
|
||||
}
|
||||
input[type=radio]:checked + .radio-left::before {
|
||||
content: "(x)"; }
|
||||
content: "(x)";
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
button {
|
||||
|
|
@ -268,114 +326,246 @@ button {
|
|||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit; }
|
||||
input[type=text]:hover,
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
color: inherit;
|
||||
}
|
||||
input[type=text]:hover,
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
|
||||
label:hover {
|
||||
cursor: pointer; }
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus, button:hover, button:active, button::-moz-focus-inner {
|
||||
border: none;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
}
|
||||
button::before {
|
||||
content: "[ "; }
|
||||
content: "[ ";
|
||||
}
|
||||
button::after {
|
||||
content: " ]"; }
|
||||
content: " ]";
|
||||
}
|
||||
|
||||
.textinput {
|
||||
display: inline-block; }
|
||||
.textinput:hover {
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
background-color: #171c94; }
|
||||
.textinput::before {
|
||||
content: "["; }
|
||||
.textinput::after {
|
||||
content: "]"; }
|
||||
.textinput:hover > input[type=text] {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
display: inline-block;
|
||||
}
|
||||
.textinput:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(201, 201, 201);
|
||||
background-color: rgb(23, 28, 148);
|
||||
}
|
||||
.textinput::before {
|
||||
content: "[";
|
||||
}
|
||||
.textinput::after {
|
||||
content: "]";
|
||||
}
|
||||
.textinput:hover > input[type=text] {
|
||||
background-color: rgb(23, 28, 148);
|
||||
color: rgb(201, 201, 201);
|
||||
border-color: rgb(201, 201, 201);
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
background-color: #c9c9c9;
|
||||
color: black;
|
||||
border-color: black;
|
||||
width: 15ch; }
|
||||
background-color: rgb(201, 201, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
border-color: rgb(0, 0, 0);
|
||||
width: 15ch;
|
||||
}
|
||||
|
||||
/* Style helpers, like space-takers */
|
||||
.space-1 {
|
||||
min-height: 21px; }
|
||||
min-height: 21px;
|
||||
}
|
||||
|
||||
.space-2 {
|
||||
min-height: 42px; }
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.space-3 {
|
||||
min-height: 63px; }
|
||||
min-height: 63px;
|
||||
}
|
||||
|
||||
.space-4 {
|
||||
min-height: 84px; }
|
||||
min-height: 84px;
|
||||
}
|
||||
|
||||
.space-5 {
|
||||
min-height: 105px; }
|
||||
min-height: 105px;
|
||||
}
|
||||
|
||||
.width-5 {
|
||||
width: 5ch; }
|
||||
width: 5ch;
|
||||
}
|
||||
|
||||
.width-10 {
|
||||
width: 10ch; }
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
.width-15 {
|
||||
width: 15ch; }
|
||||
width: 15ch;
|
||||
}
|
||||
|
||||
.width-20 {
|
||||
width: 20ch; }
|
||||
width: 20ch;
|
||||
}
|
||||
|
||||
.width-25 {
|
||||
width: 25ch; }
|
||||
width: 25ch;
|
||||
}
|
||||
|
||||
.width-50 {
|
||||
width: 48ch; }
|
||||
width: 48ch;
|
||||
}
|
||||
|
||||
.width-100 {
|
||||
width: 98ch; }
|
||||
width: 98ch;
|
||||
}
|
||||
|
||||
.width-150 {
|
||||
width: 148ch; }
|
||||
width: 148ch;
|
||||
}
|
||||
|
||||
.width-200 {
|
||||
width: 198ch; }
|
||||
width: 198ch;
|
||||
}
|
||||
|
||||
.width-250 {
|
||||
width: 248ch; }
|
||||
width: 248ch;
|
||||
}
|
||||
|
||||
.width-percentage-5 {
|
||||
width: 5%;
|
||||
width: round(5%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-10 {
|
||||
width: 10%;
|
||||
width: round(10%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-15 {
|
||||
width: 15%;
|
||||
width: round(15%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-20 {
|
||||
width: 20%;
|
||||
width: round(20%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-25 {
|
||||
width: 25%;
|
||||
width: round(25%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-30 {
|
||||
width: 30%;
|
||||
width: round(30%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-35 {
|
||||
width: 35%;
|
||||
width: round(35%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-40 {
|
||||
width: 40%;
|
||||
width: round(40%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-45 {
|
||||
width: 45%;
|
||||
width: round(45%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-50 {
|
||||
width: 50%;
|
||||
width: round(50%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-55 {
|
||||
width: 55%;
|
||||
width: round(55%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-60 {
|
||||
width: 60%;
|
||||
width: round(60%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-65 {
|
||||
width: 65%;
|
||||
width: round(65%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-70 {
|
||||
width: 70%;
|
||||
width: round(70%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-75 {
|
||||
width: 75%;
|
||||
width: round(75%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-80 {
|
||||
width: 80%;
|
||||
width: round(80%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-85 {
|
||||
width: 85%;
|
||||
width: round(85%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-90 {
|
||||
width: 90%;
|
||||
width: round(90%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-95 {
|
||||
width: 95%;
|
||||
width: round(95%, 1ch);
|
||||
}
|
||||
|
||||
.width-percentage-100 {
|
||||
width: 100%;
|
||||
width: round(100%, 1ch);
|
||||
}
|
||||
|
||||
.padding-1 {
|
||||
padding: 1ch;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px; }
|
||||
padding-bottom: 21px;
|
||||
}
|
||||
|
||||
.padding-2 {
|
||||
padding: 2ch;
|
||||
padding-top: 42px;
|
||||
padding-bottom: 42px; }
|
||||
padding-bottom: 42px;
|
||||
}
|
||||
|
||||
.padding-3 {
|
||||
padding: 3ch;
|
||||
padding-top: 63px;
|
||||
padding-bottom: 63px; }
|
||||
padding-bottom: 63px;
|
||||
}
|
||||
|
||||
.padding-4 {
|
||||
padding: 4ch;
|
||||
padding-top: 84px;
|
||||
padding-bottom: 84px; }
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.padding-5 {
|
||||
padding: 5ch;
|
||||
padding-top: 105px;
|
||||
padding-bottom: 105px; }
|
||||
padding-bottom: 105px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
59
index.html
59
index.html
|
|
@ -1,11 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS example</title>
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/custom.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="radio" id="radio-page-1" name="pages">
|
||||
<input type="radio" id="radio-page-2" name="pages">
|
||||
|
|
@ -31,7 +33,8 @@
|
|||
<ul>Style</ul>
|
||||
<ul>Another style</ul>
|
||||
</li>
|
||||
</ul><ul tabindex="0" class="list-symbol">Pages
|
||||
</ul>
|
||||
<ul tabindex="0" class="list-symbol">Pages
|
||||
<li>
|
||||
<ul><label for="radio-page-1">Page 1</label></ul>
|
||||
<ul><label for="radio-page-2">Page 2</label></ul>
|
||||
|
|
@ -42,7 +45,9 @@
|
|||
<li>
|
||||
<ul><a href="https://git.teasca.de/teascade/botsym-css">What is this?</a></ul>
|
||||
<ul><a href="https://git.teasca.de/teascade/botsym-css/issues">Oh no</a></ul>
|
||||
<ul><hr></ul>
|
||||
<ul>
|
||||
<hr>
|
||||
</ul>
|
||||
<ul>A thing under hr</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -53,9 +58,12 @@
|
|||
<div class="padding-1">
|
||||
<b>A test form!</b>
|
||||
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no? </label></p>
|
||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p>
|
||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2 </label></p>
|
||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
||||
</label></p>
|
||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1
|
||||
</label></p>
|
||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2
|
||||
</label></p>
|
||||
<p><button name="button" label="button">Button</button></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,9 +80,9 @@
|
|||
</li>
|
||||
<hr>
|
||||
<p>Stuff under the hr!</p>
|
||||
</li>
|
||||
</div
|
||||
><div class="box inline double white width-50">
|
||||
</li>
|
||||
</div>
|
||||
<div class="box inline double white width-50">
|
||||
<p>Welcome to a thing! This is a list, hello!</p>
|
||||
<p>The list:</p>
|
||||
<li>
|
||||
|
|
@ -88,7 +96,9 @@
|
|||
<div class="box blue width-100">
|
||||
<div class="padding-1">
|
||||
<div class="">
|
||||
<p>Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque autem dicta quasi commodi nihil qui.</p>
|
||||
<p>Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto
|
||||
sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque
|
||||
autem dicta quasi commodi nihil qui.</p>
|
||||
<div class="space-1"></div>
|
||||
<p><b>Some stuff</b></p>
|
||||
<div class="space-1"></div>
|
||||
|
|
@ -104,9 +114,12 @@
|
|||
<div class="padding-1">
|
||||
<b>A test form!</b>
|
||||
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no? </label></p>
|
||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p>
|
||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2 </label></p>
|
||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
||||
</label></p>
|
||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton
|
||||
1 </label></p>
|
||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton
|
||||
2 </label></p>
|
||||
<p><button name="button" label="button">Button</button></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,6 +127,26 @@
|
|||
</div>
|
||||
<div class="page-2">
|
||||
<p>Hello! Welcome to <b>Page 2</b></p>
|
||||
|
||||
<div class="box white inline width-percentage-50">
|
||||
<div class="padding-1">
|
||||
<b>A test form!</b>
|
||||
<p>Hello there</p>
|
||||
<p>Some text here!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non porta odio. Nam ac pretium felis. Fusce erat
|
||||
purus, tempus in finibus non, vestibulum eu diam. Vivamus neque ligula, ornare vitae mi sit amet, cursus
|
||||
lobortis nunc. Cras augue enim, tincidunt sit amet fringilla eu, pretium in tellus. Vivamus vitae vehicula
|
||||
nisl, a tristique mi. Fusce varius pretium gravida. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box white inline width-percentage-45">
|
||||
<div class="padding-1">
|
||||
<b>A test form!</b>
|
||||
<p>Hello there</p>
|
||||
<p>Some text here!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
@use "sass:math";
|
||||
$default-black: rgb(0, 0, 0);
|
||||
$default-white: rgb(201, 201, 201);
|
||||
$default-blue: rgb(23, 28, 148);
|
||||
|
|
@ -7,6 +8,7 @@ $line-overflow: 5px;
|
|||
$line-height: $em-height+$line-overflow;
|
||||
$box-border: 2px;
|
||||
$box-double-border: 4px;
|
||||
|
||||
@mixin whiteOnBlue {
|
||||
background-color: $default-blue;
|
||||
color: $default-white;
|
||||
|
|
@ -82,7 +84,7 @@ ul {
|
|||
a {
|
||||
color: $default-white;
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
}
|
||||
|
||||
nav ul>li>ul:hover a {
|
||||
|
|
@ -90,10 +92,10 @@ nav ul>li>ul:hover a {
|
|||
}
|
||||
|
||||
hr {
|
||||
height: $line-height / 2;
|
||||
height: math.div($line-height, 2);
|
||||
border: 0;
|
||||
border-bottom: 1px solid $default-white;
|
||||
margin-bottom: $line-height / 2 - 1px;
|
||||
margin-bottom: math.div($line-height, 2) - 1px;
|
||||
}
|
||||
|
||||
nav li hr,
|
||||
|
|
@ -114,14 +116,17 @@ li {
|
|||
&:not(.button-list)>ul::before {
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
&.button-list>ul {
|
||||
width: calc(100% - 1ch);
|
||||
text-decoration: underline;
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
|
||||
&>li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -137,9 +142,11 @@ li {
|
|||
opacity: 0;
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
1% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
|
|
@ -153,13 +160,16 @@ nav {
|
|||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul::before {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
&>li {
|
||||
// Navbar
|
||||
@include blackOnWhite;
|
||||
margin-left: 0;
|
||||
|
||||
&>ul {
|
||||
// Navbar items
|
||||
margin: 0;
|
||||
|
|
@ -168,9 +178,11 @@ nav {
|
|||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
|
||||
&:focus {
|
||||
@include whiteOnBlue;
|
||||
|
||||
li {
|
||||
// Display inner items on focus
|
||||
display: block;
|
||||
|
|
@ -180,6 +192,7 @@ nav {
|
|||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
&>li {
|
||||
// Navbar inner lists
|
||||
@include blackOnWhite;
|
||||
|
|
@ -188,21 +201,23 @@ nav {
|
|||
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;
|
||||
margin-top: math.div($line-height, 2);
|
||||
margin-bottom: math.div($line-height, 2);
|
||||
padding: calc(0.25ch + 2px);
|
||||
padding-top: $line-height / 2;
|
||||
padding-bottom: $line-height / 2;
|
||||
padding-top: math.div($line-height, 2);
|
||||
padding-bottom: math.div($line-height, 2);
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
animation-name: hide;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&>ul {
|
||||
// Inner Items
|
||||
@include blackOnWhite;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
min-height: $line-height;
|
||||
|
||||
&:hover {
|
||||
// Navbar inner items hover
|
||||
@include whiteOnBlue;
|
||||
|
|
@ -226,9 +241,11 @@ nav {
|
|||
padding-top: $line-height / 2 - $box-border;
|
||||
padding-bottom: $line-height / 2 - $box-border;
|
||||
vertical-align: top;
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.double {
|
||||
border-style: double;
|
||||
border-width: $box-double-border;
|
||||
|
|
@ -239,40 +256,51 @@ nav {
|
|||
padding-top: $line-height / 2 - $box-double-border;
|
||||
padding-bottom: $line-height / 2 - $box-double-border;
|
||||
}
|
||||
|
||||
&.black {
|
||||
@include whiteOnBlack;
|
||||
box-shadow: 0 0 0 0.25ch $default-black;
|
||||
}
|
||||
|
||||
&.white {
|
||||
@include blackOnWhite;
|
||||
box-shadow: 0 0 0 0.25ch $default-white;
|
||||
|
||||
a {
|
||||
color: $default-black;
|
||||
|
||||
&:hover {
|
||||
@include whiteOnBlue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
@include whiteOnBlue;
|
||||
box-shadow: 0 0 0 0.25ch $default-blue;
|
||||
|
||||
li.button-list>ul:hover {
|
||||
@include blackOnWhite;
|
||||
}
|
||||
|
||||
li.button-list>ul:hover>a {
|
||||
color: $default-black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@include blueOnWhite;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $default-white;
|
||||
}
|
||||
|
||||
button {
|
||||
&:hover {
|
||||
@include blueOnWhite;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-right,
|
||||
.checkbox-left,
|
||||
.radio-right,
|
||||
|
|
@ -320,7 +348,7 @@ input[type=radio] {
|
|||
.radio-right,
|
||||
.radio-left {
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
}
|
||||
|
||||
.checkbox-right {
|
||||
|
|
@ -351,6 +379,7 @@ input[type=checkbox]:checked {
|
|||
&+.checkbox-right::after {
|
||||
content: "[x]";
|
||||
}
|
||||
|
||||
&+.checkbox-left::before {
|
||||
content: "[x]";
|
||||
}
|
||||
|
|
@ -360,6 +389,7 @@ input[type=radio]:checked {
|
|||
&+.radio-right::after {
|
||||
content: "(x)";
|
||||
}
|
||||
|
||||
&+.radio-left::before {
|
||||
content: "(x)";
|
||||
}
|
||||
|
|
@ -373,7 +403,7 @@ button {
|
|||
font-size: inherit;
|
||||
color: inherit;
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
}
|
||||
|
||||
label:hover {
|
||||
|
|
@ -381,6 +411,7 @@ label:hover {
|
|||
}
|
||||
|
||||
button {
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -388,9 +419,11 @@ button {
|
|||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "[ ";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ]";
|
||||
}
|
||||
|
|
@ -399,13 +432,16 @@ button {
|
|||
.textinput {
|
||||
display: inline-block;
|
||||
@include hoverable($default-white,
|
||||
$default-blue);
|
||||
$default-blue);
|
||||
|
||||
&::before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
&:hover>input[type=text] {
|
||||
@include whiteOnBlue;
|
||||
}
|
||||
|
|
@ -437,6 +473,13 @@ input[type=text] {
|
|||
}
|
||||
}
|
||||
|
||||
@for $width from 1 through 20 {
|
||||
.width-percentage-#{$width * 5} {
|
||||
width: #{$width * 5 * 1%};
|
||||
width: round(#{$width * 5 * 1%}, 1ch);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.padding-#{$i} {
|
||||
padding: $i * 1ch;
|
||||
|
|
|
|||
Loading…
Reference in New Issue