diff --git a/css/style.css b/css/style.css index 2a8703c..e23f494 100644 --- a/css/style.css +++ b/css/style.css @@ -1,144 +1,203 @@ @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"; + font-family: "Iosevka Slab Regular", "Iosevka Slab", "Consolas", "monospace"; background-color: black; color: #c9c9c9; border-color: #c9c9c9; 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: #c9c9c9; +} -nav ul > li > ul:hover a { - color: #c9c9c9; } +a:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; +} + +nav ul>li>ul:hover a { + color: #c9c9c9; +} hr { height: 10.5px; border: 0; border-bottom: 1px solid #c9c9c9; - margin-bottom: 15px; } + margin-bottom: 15px; +} -nav li hr, li.button-list > ul a hr, .white hr { - border-color: black; } +nav li hr, +li.button-list>ul a hr, +.white hr { + border-color: black; +} + +nav>li>ul li>ul:hover>hr, +li.button-list>ul:hover a hr { + border-color: #c9c9c9; +} -nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr { - border-color: #c9c9c9; } /* Lists */ -li:not(.button-list) > ul::before { - content: "- "; } -li.button-list > ul { + +li:not(.button-list)>ul::before { + 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: #c9c9c9; + background-color: #171c94; +} + +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; display: block; width: 100%; - text-decoration: none; } + text-decoration: none; +} + nav ul::before { - content: "" !important; } -nav > li { + 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; } + 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; +} + /* Miscallaneous Classes */ + .box { border: 2px solid #c9c9c9; margin: 0.5ch; @@ -148,67 +207,100 @@ 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: 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; +} .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: * @@ -221,149 +313,215 @@ nav > li { * } * } */ -/* Form styles */ -input[type=checkbox], input[type=radio] { - display: none; } -.checkbox-right:hover, .checkbox-left:hover, .radio-right:hover, .radio-left:hover { + +/* Form styles */ + +input[type=checkbox], +input[type=radio] { + display: none; +} + +.checkbox-right:hover, +.checkbox-left:hover, +.radio-right:hover, +.radio-left:hover { cursor: pointer; color: #c9c9c9; - background-color: #171c94; } + background-color: #171c94; +} .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]"; } -input[type=checkbox]:checked + .checkbox-left::before { - content: "[x]"; } +input[type=checkbox]:checked+.checkbox-right::after { + content: "[x]"; +} -input[type=radio]:checked + .radio-right::after { - content: "(x)"; } -input[type=radio]:checked + .radio-left::before { - content: "(x)"; } +input[type=checkbox]:checked+.checkbox-left::before { + content: "[x]"; +} -input[type=text], button { +input[type=radio]:checked+.radio-right::after { + content: "(x)"; +} + +input[type=radio]:checked+.radio-left::before { + content: "(x)"; +} + +input[type=text], +button { background-color: inherit; 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: #c9c9c9; + background-color: #171c94; +} 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; - 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: #c9c9c9; + background-color: #171c94; +} + +.textinput::before { + content: "["; +} + +.textinput::after { + content: "]"; +} + +.textinput:hover>input[type=text] { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; +} input[type=text] { background-color: #c9c9c9; color: black; border-color: black; - width: 15ch; } + 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; +} .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 */ + +/*# sourceMappingURL=style.css.map */ \ No newline at end of file