teascade
/
botsym-css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add width-percentage

This commit is contained in:
Sofia 2023-12-27 17:32:10 +02:00
parent 02dfc857af
commit a193260e75
6 changed files with 512 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/custom.css
View File

@ -1,19 +1,25 @@
.page-1 { .page-1 {
display: none; } display: none;
}
#radio-page-1:checked ~ .page-1 { #radio-page-1:checked ~ .page-1 {
display: block; } display: block;
}
.page-2 { .page-2 {
display: none; } display: none;
}
#radio-page-2:checked ~ .page-2 { #radio-page-2:checked ~ .page-2 {
display: block; } display: block;
}
.page-3 { .page-3 {
display: none; } display: none;
}
#radio-page-3:checked ~ .page-3 { #radio-page-3:checked ~ .page-3 {
display: block; } display: block;
}
/*# sourceMappingURL=custom.css.map */ /*# sourceMappingURL=custom.css.map */

8
css/custom.css.map
View File

@ -1,7 +1 @@
{ {"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"AACC;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE","file":"custom.css"}
"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"
}

604
css/style.css
View File

@ -1,149 +1,181 @@
@charset "UTF-8"; @charset "UTF-8";
@font-face { @font-face {
font-family: "Iosevka Slab Regular"; font-family: "Iosevka Slab Regular";
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); } src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
}
:root { :root {
font-family: "Iosevka Slab Regular", "monospace"; font-family: "Iosevka Slab Regular", "monospace";
background-color: black; background-color: rgb(0, 0, 0);
color: #c9c9c9; color: rgb(201, 201, 201);
border-color: #c9c9c9; border-color: rgb(201, 201, 201);
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 21px; } line-height: 21px;
}
/* General styles for elements */ /* General styles for elements */
* { * {
margin: 0; margin: 0;
padding: 0; } padding: 0;
}
p { p {
width: auto; } width: auto;
}
b { b {
font-weight: 1000; } font-weight: 1000;
}
li { li {
list-style: none; } list-style: none;
}
ul { ul {
padding-left: 1ch; } padding-left: 1ch;
}
a { a {
color: #c9c9c9; } color: rgb(201, 201, 201);
a:hover { }
cursor: pointer; a:hover {
color: #c9c9c9; cursor: pointer;
background-color: #171c94; } color: rgb(201, 201, 201);
background-color: rgb(23, 28, 148);
}
nav ul > li > ul:hover a { nav ul > li > ul:hover a {
color: #c9c9c9; } color: rgb(201, 201, 201);
}
hr { hr {
height: 10.5px; height: 10.5px;
border: 0; border: 0;
border-bottom: 1px solid #c9c9c9; border-bottom: 1px solid rgb(201, 201, 201);
margin-bottom: 9.5px; } margin-bottom: 9.5px;
}
nav li hr, nav li hr,
li.button-list > ul a hr, li.button-list > ul a hr,
.white hr { .white hr {
border-color: black; } border-color: rgb(0, 0, 0);
}
nav > li > ul li > ul:hover > hr, nav > li > ul li > ul:hover > hr,
li.button-list > ul:hover a hr { li.button-list > ul:hover a hr {
border-color: #c9c9c9; } border-color: rgb(201, 201, 201);
}
/* Lists */ /* Lists */
li:not(.button-list) > ul::before { li:not(.button-list) > ul::before {
content: "- "; } content: "- ";
}
li.button-list > ul { li.button-list > ul {
width: calc(100% - 1ch); width: calc(100% - 1ch);
text-decoration: underline; } text-decoration: underline;
li.button-list > ul:hover { }
cursor: pointer; li.button-list > ul:hover {
color: #c9c9c9; cursor: pointer;
background-color: #171c94; } color: rgb(201, 201, 201);
li.button-list > ul > li { background-color: rgb(23, 28, 148);
width: 100%; } }
li.button-list > ul a { li.button-list > ul > li {
display: block; width: 100%;
width: 100%; } }
li.button-list > ul a {
display: block;
width: 100%;
}
/* Navbars */ /* Navbars */
@keyframes hide { @keyframes hide {
0% { 0% {
opacity: 0; opacity: 0;
left: inherit; } left: inherit;
}
1% { 1% {
opacity: 0; } opacity: 0;
}
100% { 100% {
opacity: 0; opacity: 0;
left: -9999px; } } left: -9999px;
}
}
nav a { nav a {
color: black; color: rgb(0, 0, 0);
display: block; display: block;
width: 100%; width: 100%;
text-decoration: none; } text-decoration: none;
}
nav ul::before { nav ul::before {
content: "" !important; } content: "" !important;
}
nav > li { nav > li {
background-color: #c9c9c9; background-color: rgb(201, 201, 201);
color: black; color: rgb(0, 0, 0);
border-color: black; border-color: rgb(0, 0, 0);
margin-left: 0; } margin-left: 0;
nav > li > ul { }
margin: 0; nav > li > ul {
padding: 0; margin: 0;
display: table-cell; padding: 0;
padding-left: 1ch; display: table-cell;
padding-right: 1ch; } padding-left: 1ch;
nav > li > ul:hover { padding-right: 1ch;
cursor: pointer; }
color: #c9c9c9; nav > li > ul:hover {
background-color: #171c94; } cursor: pointer;
nav > li > ul:focus { color: rgb(201, 201, 201);
background-color: #171c94; background-color: rgb(23, 28, 148);
color: #c9c9c9; }
border-color: #c9c9c9; } nav > li > ul:focus {
nav > li > ul:focus li { background-color: rgb(23, 28, 148);
display: block; color: rgb(201, 201, 201);
opacity: 1; border-color: rgb(201, 201, 201);
left: inherit; }
animation-name: hide; nav > li > ul:focus li {
animation-name: none; } display: block;
nav > li > ul > li { opacity: 1;
background-color: #c9c9c9; left: inherit;
color: black; animation-name: hide;
border-color: black; animation-name: none;
position: absolute; }
border: 2px solid; nav > li > ul > li {
box-shadow: 0 0 0 0.25ch #c9c9c9; background-color: rgb(201, 201, 201);
margin-left: calc(2px - 1ch); color: rgb(0, 0, 0);
margin-right: calc(2px - 1ch); border-color: rgb(0, 0, 0);
margin-top: 10.5px; position: absolute;
margin-bottom: 10.5px; border: 2px solid;
padding: calc(0.25ch + 2px); box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
padding-top: 10.5px; margin-left: calc(2px - 1ch);
padding-bottom: 10.5px; margin-right: calc(2px - 1ch);
opacity: 0; margin-top: 10.5px;
left: -9999px; margin-bottom: 10.5px;
animation-name: hide; padding: calc(0.25ch + 2px);
animation-duration: 0.5s; } padding-top: 10.5px;
nav > li > ul > li > ul { padding-bottom: 10.5px;
background-color: #c9c9c9; opacity: 0;
color: black; left: -9999px;
border-color: black; animation-name: hide;
padding-left: 1ch; animation-duration: 0.5s;
padding-right: 1ch; }
min-height: 21px; } nav > li > ul > li > ul {
nav > li > ul > li > ul:hover { background-color: rgb(201, 201, 201);
background-color: #171c94; color: rgb(0, 0, 0);
color: #c9c9c9; border-color: rgb(0, 0, 0);
border-color: #c9c9c9; } 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 */ /* Miscallaneous Classes */
.box { .box {
border: 2px solid #c9c9c9; border: 2px solid rgb(201, 201, 201);
margin: 0.5ch; margin: 0.5ch;
padding: calc(0.5ch - 2px); padding: calc(0.5ch - 2px);
width: auto; width: auto;
@ -151,70 +183,86 @@ nav > li {
margin-bottom: 10.5px; margin-bottom: 10.5px;
padding-top: 8.5px; padding-top: 8.5px;
padding-bottom: 8.5px; padding-bottom: 8.5px;
vertical-align: top; } vertical-align: top;
.box.inline { }
display: inline-block; } .box.inline {
.box.double { display: inline-block;
border-style: double; }
border-width: 4px; .box.double {
margin: calc(0.5ch); border-style: double;
padding: calc(0.5ch - (4px)); border-width: 4px;
margin-top: 10.5px; margin: 0.5ch;
margin-bottom: 10.5px; padding: calc(0.5ch - (4px));
padding-top: 6.5px; margin-top: 10.5px;
padding-bottom: 6.5px; } margin-bottom: 10.5px;
.box.black { padding-top: 6.5px;
background-color: black; padding-bottom: 6.5px;
color: #c9c9c9; }
border-color: #c9c9c9; .box.black {
box-shadow: 0 0 0 0.25ch black; } background-color: rgb(0, 0, 0);
.box.white { color: rgb(201, 201, 201);
background-color: #c9c9c9; border-color: rgb(201, 201, 201);
color: black; box-shadow: 0 0 0 0.25ch rgb(0, 0, 0);
border-color: black; }
box-shadow: 0 0 0 0.25ch #c9c9c9; } .box.white {
.box.white a { background-color: rgb(201, 201, 201);
color: black; } color: rgb(0, 0, 0);
.box.white a:hover { border-color: rgb(0, 0, 0);
background-color: #171c94; box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
color: #c9c9c9; }
border-color: #c9c9c9; } .box.white a {
.box.blue { color: rgb(0, 0, 0);
background-color: #171c94; }
color: #c9c9c9; .box.white a:hover {
border-color: #c9c9c9; background-color: rgb(23, 28, 148);
box-shadow: 0 0 0 0.25ch #171c94; } color: rgb(201, 201, 201);
.box.blue li.button-list > ul:hover { border-color: rgb(201, 201, 201);
background-color: #c9c9c9; }
color: black; .box.blue {
border-color: black; } background-color: rgb(23, 28, 148);
.box.blue li.button-list > ul:hover > a { color: rgb(201, 201, 201);
color: black; } border-color: rgb(201, 201, 201);
.box.blue a:hover { box-shadow: 0 0 0 0.25ch rgb(23, 28, 148);
background-color: #c9c9c9; }
color: #171c94; .box.blue li.button-list > ul:hover {
border-color: #171c94; } background-color: rgb(201, 201, 201);
.box.blue hr { color: rgb(0, 0, 0);
border-color: #c9c9c9; } border-color: rgb(0, 0, 0);
.box.blue button:hover { }
background-color: #c9c9c9; .box.blue li.button-list > ul:hover > a {
color: #171c94; color: rgb(0, 0, 0);
border-color: #171c94; } }
.box.blue .checkbox-right:hover, .box.blue a:hover {
.box.blue .checkbox-left:hover, background-color: rgb(201, 201, 201);
.box.blue .radio-right:hover, color: rgb(23, 28, 148);
.box.blue .radio-left:hover { border-color: rgb(23, 28, 148);
background-color: #c9c9c9; }
color: #171c94; .box.blue hr {
border-color: #171c94; } 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 { .list-symbol::after {
content: " ▼"; } content: " ▼";
}
.no-select { .no-select {
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; } -webkit-user-select: none;
}
/* How to add pages: /* How to add pages:
* *
@ -230,37 +278,47 @@ nav > li {
/* Form styles */ /* Form styles */
input[type=checkbox], input[type=checkbox],
input[type=radio] { input[type=radio] {
display: none; } display: none;
}
.checkbox-right:hover, .checkbox-right:hover,
.checkbox-left:hover, .checkbox-left:hover,
.radio-right:hover, .radio-right:hover,
.radio-left:hover { .radio-left:hover {
cursor: pointer; cursor: pointer;
color: #c9c9c9; color: rgb(201, 201, 201);
background-color: #171c94; } background-color: rgb(23, 28, 148);
}
.checkbox-right::after { .checkbox-right::after {
content: "[ ]"; } content: "[ ]";
}
.checkbox-left::before { .checkbox-left::before {
content: "[ ]"; } content: "[ ]";
}
.radio-right::after { .radio-right::after {
content: "( )"; } content: "( )";
}
.radio-left::before { .radio-left::before {
content: "( )"; } content: "( )";
}
input[type=checkbox]:checked + .checkbox-right::after { input[type=checkbox]:checked + .checkbox-right::after {
content: "[x]"; } content: "[x]";
}
input[type=checkbox]:checked + .checkbox-left::before { input[type=checkbox]:checked + .checkbox-left::before {
content: "[x]"; } content: "[x]";
}
input[type=radio]:checked + .radio-right::after { input[type=radio]:checked + .radio-right::after {
content: "(x)"; } content: "(x)";
}
input[type=radio]:checked + .radio-left::before { input[type=radio]:checked + .radio-left::before {
content: "(x)"; } content: "(x)";
}
input[type=text], input[type=text],
button { button {
@ -268,114 +326,246 @@ button {
border: none; border: none;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
color: inherit; } color: inherit;
input[type=text]:hover, }
button:hover { input[type=text]:hover,
cursor: pointer; button:hover {
color: #c9c9c9; cursor: pointer;
background-color: #171c94; } color: rgb(201, 201, 201);
background-color: rgb(23, 28, 148);
}
label:hover { label:hover {
cursor: pointer; } cursor: pointer;
}
button:focus, button:hover, button:active, button::-moz-focus-inner { button:focus, button:hover, button:active, button::-moz-focus-inner {
border: none; border: none;
text-decoration: none; } text-decoration: none;
}
button::before { button::before {
content: "[ "; } content: "[ ";
}
button::after { button::after {
content: " ]"; } content: " ]";
}
.textinput { .textinput {
display: inline-block; } display: inline-block;
.textinput:hover { }
cursor: pointer; .textinput:hover {
color: #c9c9c9; cursor: pointer;
background-color: #171c94; } color: rgb(201, 201, 201);
.textinput::before { background-color: rgb(23, 28, 148);
content: "["; } }
.textinput::after { .textinput::before {
content: "]"; } content: "[";
.textinput:hover > input[type=text] { }
background-color: #171c94; .textinput::after {
color: #c9c9c9; content: "]";
border-color: #c9c9c9; } }
.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] { input[type=text] {
background-color: #c9c9c9; background-color: rgb(201, 201, 201);
color: black; color: rgb(0, 0, 0);
border-color: black; border-color: rgb(0, 0, 0);
width: 15ch; } width: 15ch;
}
/* Style helpers, like space-takers */ /* Style helpers, like space-takers */
.space-1 { .space-1 {
min-height: 21px; } min-height: 21px;
}
.space-2 { .space-2 {
min-height: 42px; } min-height: 42px;
}
.space-3 { .space-3 {
min-height: 63px; } min-height: 63px;
}
.space-4 { .space-4 {
min-height: 84px; } min-height: 84px;
}
.space-5 { .space-5 {
min-height: 105px; } min-height: 105px;
}
.width-5 { .width-5 {
width: 5ch; } width: 5ch;
}
.width-10 { .width-10 {
width: 10ch; } width: 10ch;
}
.width-15 { .width-15 {
width: 15ch; } width: 15ch;
}
.width-20 { .width-20 {
width: 20ch; } width: 20ch;
}
.width-25 { .width-25 {
width: 25ch; } width: 25ch;
}
.width-50 { .width-50 {
width: 48ch; } width: 48ch;
}
.width-100 { .width-100 {
width: 98ch; } width: 98ch;
}
.width-150 { .width-150 {
width: 148ch; } width: 148ch;
}
.width-200 { .width-200 {
width: 198ch; } width: 198ch;
}
.width-250 { .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-1 {
padding: 1ch; padding: 1ch;
padding-top: 21px; padding-top: 21px;
padding-bottom: 21px; } padding-bottom: 21px;
}
.padding-2 { .padding-2 {
padding: 2ch; padding: 2ch;
padding-top: 42px; padding-top: 42px;
padding-bottom: 42px; } padding-bottom: 42px;
}
.padding-3 { .padding-3 {
padding: 3ch; padding: 3ch;
padding-top: 63px; padding-top: 63px;
padding-bottom: 63px; } padding-bottom: 63px;
}
.padding-4 { .padding-4 {
padding: 4ch; padding: 4ch;
padding-top: 84px; padding-top: 84px;
padding-bottom: 84px; } padding-bottom: 84px;
}
.padding-5 { .padding-5 {
padding: 5ch; padding: 5ch;
padding-top: 105px; padding-top: 105px;
padding-bottom: 105px; } padding-bottom: 105px;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

8
css/style.css.map
View File

File diff suppressed because one or more lines are too long

59
index.html
View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS example</title> <title>CSS example</title>
<link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/custom.css" /> <link type="text/css" rel="stylesheet" href="css/custom.css" />
</head> </head>
<body> <body>
<input type="radio" id="radio-page-1" name="pages"> <input type="radio" id="radio-page-1" name="pages">
<input type="radio" id="radio-page-2" name="pages"> <input type="radio" id="radio-page-2" name="pages">
@ -31,7 +33,8 @@
<ul>Style</ul> <ul>Style</ul>
<ul>Another style</ul> <ul>Another style</ul>
</li> </li>
</ul><ul tabindex="0" class="list-symbol">Pages </ul>
<ul tabindex="0" class="list-symbol">Pages
<li> <li>
<ul><label for="radio-page-1">Page 1</label></ul> <ul><label for="radio-page-1">Page 1</label></ul>
<ul><label for="radio-page-2">Page 2</label></ul> <ul><label for="radio-page-2">Page 2</label></ul>
@ -42,7 +45,9 @@
<li> <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">What is this?</a></ul>
<ul><a href="https://git.teasca.de/teascade/botsym-css/issues">Oh no</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> <ul>A thing under hr</ul>
</li> </li>
</ul> </ul>
@ -53,9 +58,12 @@
<div class="padding-1"> <div class="padding-1">
<b>A test form!</b> <b>A test form!</b>
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p> <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="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p> </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="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> <p><button name="button" label="button">Button</button></p>
</div> </div>
</div> </div>
@ -72,9 +80,9 @@
</li> </li>
<hr> <hr>
<p>Stuff under the hr!</p> <p>Stuff under the hr!</p>
</li> </li>
</div </div>
><div class="box inline double white width-50"> <div class="box inline double white width-50">
<p>Welcome to a thing! This is a list, hello!</p> <p>Welcome to a thing! This is a list, hello!</p>
<p>The list:</p> <p>The list:</p>
<li> <li>
@ -88,7 +96,9 @@
<div class="box blue width-100"> <div class="box blue width-100">
<div class="padding-1"> <div class="padding-1">
<div class=""> <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> <div class="space-1"></div>
<p><b>Some stuff</b></p> <p><b>Some stuff</b></p>
<div class="space-1"></div> <div class="space-1"></div>
@ -104,9 +114,12 @@
<div class="padding-1"> <div class="padding-1">
<b>A test form!</b> <b>A test form!</b>
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p> <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="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p> </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="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> <p><button name="button" label="button">Button</button></p>
</div> </div>
</div> </div>
@ -114,6 +127,26 @@
</div> </div>
<div class="page-2"> <div class="page-2">
<p>Hello! Welcome to <b>Page 2</b></p> <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> </div>
</body> </body>
</html>
</html>

67
scss/style.scss
View File

@ -1,4 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
@use "sass:math";
$default-black: rgb(0, 0, 0); $default-black: rgb(0, 0, 0);
$default-white: rgb(201, 201, 201); $default-white: rgb(201, 201, 201);
$default-blue: rgb(23, 28, 148); $default-blue: rgb(23, 28, 148);
@ -7,6 +8,7 @@ $line-overflow: 5px;
$line-height: $em-height+$line-overflow; $line-height: $em-height+$line-overflow;
$box-border: 2px; $box-border: 2px;
$box-double-border: 4px; $box-double-border: 4px;
@mixin whiteOnBlue { @mixin whiteOnBlue {
background-color: $default-blue; background-color: $default-blue;
color: $default-white; color: $default-white;
@ -82,7 +84,7 @@ ul {
a { a {
color: $default-white; color: $default-white;
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
} }
nav ul>li>ul:hover a { nav ul>li>ul:hover a {
@ -90,10 +92,10 @@ nav ul>li>ul:hover a {
} }
hr { hr {
height: $line-height / 2; height: math.div($line-height, 2);
border: 0; border: 0;
border-bottom: 1px solid $default-white; border-bottom: 1px solid $default-white;
margin-bottom: $line-height / 2 - 1px; margin-bottom: math.div($line-height, 2) - 1px;
} }
nav li hr, nav li hr,
@ -114,14 +116,17 @@ li {
&:not(.button-list)>ul::before { &:not(.button-list)>ul::before {
content: "- "; content: "- ";
} }
&.button-list>ul { &.button-list>ul {
width: calc(100% - 1ch); width: calc(100% - 1ch);
text-decoration: underline; text-decoration: underline;
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
&>li { &>li {
width: 100%; width: 100%;
} }
a { a {
display: block; display: block;
width: 100%; width: 100%;
@ -137,9 +142,11 @@ li {
opacity: 0; opacity: 0;
left: inherit; left: inherit;
} }
1% { 1% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 0; opacity: 0;
left: -9999px; left: -9999px;
@ -153,13 +160,16 @@ nav {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
} }
ul::before { ul::before {
content: "" !important; content: "" !important;
} }
&>li { &>li {
// Navbar // Navbar
@include blackOnWhite; @include blackOnWhite;
margin-left: 0; margin-left: 0;
&>ul { &>ul {
// Navbar items // Navbar items
margin: 0; margin: 0;
@ -168,9 +178,11 @@ nav {
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
&:focus { &:focus {
@include whiteOnBlue; @include whiteOnBlue;
li { li {
// Display inner items on focus // Display inner items on focus
display: block; display: block;
@ -180,6 +192,7 @@ nav {
animation-name: none; animation-name: none;
} }
} }
&>li { &>li {
// Navbar inner lists // Navbar inner lists
@include blackOnWhite; @include blackOnWhite;
@ -188,21 +201,23 @@ nav {
box-shadow: 0 0 0 0.25ch $default-white; box-shadow: 0 0 0 0.25ch $default-white;
margin-left: calc(2px - 1ch); margin-left: calc(2px - 1ch);
margin-right: calc(2px - 1ch); margin-right: calc(2px - 1ch);
margin-top: $line-height / 2; margin-top: math.div($line-height, 2);
margin-bottom: $line-height / 2; margin-bottom: math.div($line-height, 2);
padding: calc(0.25ch + 2px); padding: calc(0.25ch + 2px);
padding-top: $line-height / 2; padding-top: math.div($line-height, 2);
padding-bottom: $line-height / 2; padding-bottom: math.div($line-height, 2);
opacity: 0; opacity: 0;
left: -9999px; left: -9999px;
animation-name: hide; animation-name: hide;
animation-duration: 0.5s; animation-duration: 0.5s;
&>ul { &>ul {
// Inner Items // Inner Items
@include blackOnWhite; @include blackOnWhite;
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
min-height: $line-height; min-height: $line-height;
&:hover { &:hover {
// Navbar inner items hover // Navbar inner items hover
@include whiteOnBlue; @include whiteOnBlue;
@ -226,9 +241,11 @@ nav {
padding-top: $line-height / 2 - $box-border; padding-top: $line-height / 2 - $box-border;
padding-bottom: $line-height / 2 - $box-border; padding-bottom: $line-height / 2 - $box-border;
vertical-align: top; vertical-align: top;
&.inline { &.inline {
display: inline-block; display: inline-block;
} }
&.double { &.double {
border-style: double; border-style: double;
border-width: $box-double-border; border-width: $box-double-border;
@ -239,40 +256,51 @@ nav {
padding-top: $line-height / 2 - $box-double-border; padding-top: $line-height / 2 - $box-double-border;
padding-bottom: $line-height / 2 - $box-double-border; padding-bottom: $line-height / 2 - $box-double-border;
} }
&.black { &.black {
@include whiteOnBlack; @include whiteOnBlack;
box-shadow: 0 0 0 0.25ch $default-black; box-shadow: 0 0 0 0.25ch $default-black;
} }
&.white { &.white {
@include blackOnWhite; @include blackOnWhite;
box-shadow: 0 0 0 0.25ch $default-white; box-shadow: 0 0 0 0.25ch $default-white;
a { a {
color: $default-black; color: $default-black;
&:hover { &:hover {
@include whiteOnBlue; @include whiteOnBlue;
} }
} }
} }
&.blue { &.blue {
@include whiteOnBlue; @include whiteOnBlue;
box-shadow: 0 0 0 0.25ch $default-blue; box-shadow: 0 0 0 0.25ch $default-blue;
li.button-list>ul:hover { li.button-list>ul:hover {
@include blackOnWhite; @include blackOnWhite;
} }
li.button-list>ul:hover>a { li.button-list>ul:hover>a {
color: $default-black; color: $default-black;
} }
a:hover { a:hover {
@include blueOnWhite; @include blueOnWhite;
} }
hr { hr {
border-color: $default-white; border-color: $default-white;
} }
button { button {
&:hover { &:hover {
@include blueOnWhite; @include blueOnWhite;
} }
} }
.checkbox-right, .checkbox-right,
.checkbox-left, .checkbox-left,
.radio-right, .radio-right,
@ -320,7 +348,7 @@ input[type=radio] {
.radio-right, .radio-right,
.radio-left { .radio-left {
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
} }
.checkbox-right { .checkbox-right {
@ -351,6 +379,7 @@ input[type=checkbox]:checked {
&+.checkbox-right::after { &+.checkbox-right::after {
content: "[x]"; content: "[x]";
} }
&+.checkbox-left::before { &+.checkbox-left::before {
content: "[x]"; content: "[x]";
} }
@ -360,6 +389,7 @@ input[type=radio]:checked {
&+.radio-right::after { &+.radio-right::after {
content: "(x)"; content: "(x)";
} }
&+.radio-left::before { &+.radio-left::before {
content: "(x)"; content: "(x)";
} }
@ -373,7 +403,7 @@ button {
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
} }
label:hover { label:hover {
@ -381,6 +411,7 @@ label:hover {
} }
button { button {
&:focus, &:focus,
&:hover, &:hover,
&:active, &:active,
@ -388,9 +419,11 @@ button {
border: none; border: none;
text-decoration: none; text-decoration: none;
} }
&::before { &::before {
content: "[ "; content: "[ ";
} }
&::after { &::after {
content: " ]"; content: " ]";
} }
@ -399,13 +432,16 @@ button {
.textinput { .textinput {
display: inline-block; display: inline-block;
@include hoverable($default-white, @include hoverable($default-white,
$default-blue); $default-blue);
&::before { &::before {
content: "["; content: "[";
} }
&::after { &::after {
content: "]"; content: "]";
} }
&:hover>input[type=text] { &:hover>input[type=text] {
@include whiteOnBlue; @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 { @for $i from 1 through 5 {
.padding-#{$i} { .padding-#{$i} {
padding: $i * 1ch; padding: $i * 1ch;