diff --git a/css/custom.css b/css/custom.css index 0d4f9e6..e2fc704 100644 --- a/css/custom.css +++ b/css/custom.css @@ -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 */ diff --git a/css/custom.css.map b/css/custom.css.map index 92c6be9..5cf6d1b 100644 --- a/css/custom.css.map +++ b/css/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" -} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"AACC;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE","file":"custom.css"} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 09f99d3..ebc3f24 100644 --- a/css/style.css +++ b/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 */ diff --git a/css/style.css.map b/css/style.css.map index ac96f50..3365a12 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["../scss/style.scss"], -"names": [], -"file": "style.css" -} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":";AA2CA;EACE;EACA;;AAGF;EAEE;EA1BA,kBAtBc;EAuBd,OAtBc;EAuBd,cAvBc;EAiDd;EACA,WAhDU;EAiDV,aA/CY;;;AAmDd;AAEA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,OAjFc;;AAiCd;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;;AAqFf;EACE,OAvFc;;;AA0FhB;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,cArGc;;;AAwGhB;AAAA;EAEE,cAzGc;;;AA6GhB;AAGE;EACE;;AAGF;EACE;EACA;;AArFF;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;AAyHX;EACE;;AAGF;EACE;EACA;;;AAMN;AAEA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;;AAKF;EACE,OA3JY;EA4JZ;EACA;EACA;;AAGF;EACE;;AAGF;EAzIA,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;EAwKZ;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AA9IJ;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;AAkLT;EA1KJ,kBARa;EASb,OAVc;EAWd,cAXc;;AAsLR;EAEE;EACA;EACA;EACA;EACA;;AAIJ;EArKJ,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;EAoMR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAvLN,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;EAsNN;EACA;EACA,YAnNI;;AAqNJ;EAhNR,kBARa;EASb,OAVc;EAWd,cAXc;;;AAoOhB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA,cAjPgB;EAkPhB;EACA;EACA;EACA;EACA;EACA;;AAGF;EA3OA,kBAtBc;EAuBd,OAtBc;EAuBd,cAvBc;EAkQZ;;AAGF;EA1OA,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;EAwQZ;;AAEA;EACE,OA3QU;;AA6QV;EAnQJ,kBARa;EASb,OAVc;EAWd,cAXc;;AAkRd;EAzQA,kBARa;EASb,OAVc;EAWd,cAXc;EAoRZ;;AAEA;EA3PF,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;;AA2RZ;EACE,OA5RU;;AA+RZ;EA/QF,kBAfc;EAgBd,OAfa;EAgBb,cAhBa;;AAiSX;EACE,cAnSU;;AAuSV;EAxRJ,kBAfc;EAgBd,OAfa;EAgBb,cAhBa;;AA+ST;AAAA;AAAA;AAAA;EAjSJ,kBAfc;EAgBd,OAfa;EAgBb,cAhBa;;;AAsTf;EACE;;;AAGF;EACE;EACA;EACA;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;AAEA;AAAA;EAEE;;;AAlTA;AAAA;AAAA;AAAA;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;;AA8Vb;EACE;;;AAKF;EACE;;;AAKF;EACE;;;AAKF;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AA/WA;AAAA;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;;AAoZf;EACE;;;AAKA;EAIE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AA5YA;EACE;EACA,OAnCY;EAoCZ,kBAnCW;;AAgbb;EACE;;AAGF;EACE;;AAGF;EAhbA,kBARa;EASb,OAVc;EAWd,cAXc;;;AA8bhB;EAnaE,kBA3Bc;EA4Bd,OA7Bc;EA8Bd,cA9Bc;EAicd;;;AAIF;AAGE;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/index.html b/index.html index 7dd7b68..e4a2c8d 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,13 @@ + CSS example + @@ -31,7 +33,8 @@ - + @@ -53,9 +58,12 @@
A test form!

Name:

-

-

-

+

+

+

@@ -72,9 +80,9 @@

Stuff under the hr!

- -
+ +
+

Welcome to a thing! This is a list, hello!

The list:

  • @@ -88,7 +96,9 @@
    -

    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.

    +

    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.

    Some stuff

    @@ -104,9 +114,12 @@
    A test form!

    Name:

    -

    -

    -

    +

    +

    +

    @@ -114,6 +127,26 @@

    Hello! Welcome to Page 2

    + +
    +
    + A test form! +

    Hello there

    +

    Some text here!

    +

    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.

    +
    +
    +
    +
    + A test form! +

    Hello there

    +

    Some text here!

    +
    +
    - + + \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss index 5819965..415aaed 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -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;