Went pretty sassy
This commit is contained in:
parent
005dcf8043
commit
788ad8134e
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/.sass-cache/
|
||||||
@ -45,18 +45,21 @@
|
|||||||
<p>Stuff under the hr!</p>
|
<p>Stuff under the hr!</p>
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
<div class="box white width-50">
|
<div class="box 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>
|
||||||
<ul>Thing in a list </ul>
|
<ul>Thing in a list </ul>
|
||||||
<ul>Another thing</ul>
|
<ul>Another thing</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<p>new line</p>
|
||||||
|
<p>6th line</p>
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="box blue width-100 padding-2">
|
<div class="box blue width-100">
|
||||||
|
<div class="padding-2">
|
||||||
<div class="">
|
<div class="">
|
||||||
<p><b>Some stuff</b></p>
|
<p><b>Some stuff</b></p>
|
||||||
<div class="space-1em"></div>
|
<div class="space-1em"></div>
|
||||||
@ -64,7 +67,7 @@
|
|||||||
<div class="hr"><hr></div>
|
<div class="hr"><hr></div>
|
||||||
<p>Hello! I'm under hr!</p>
|
<p>Hello! I'm under hr!</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
399
style.css
399
style.css
@ -1,271 +1,236 @@
|
|||||||
:root { /* Styles applying to everyting */
|
@charset "UTF-8";
|
||||||
|
:root {
|
||||||
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
||||||
|
background-color: black;
|
||||||
--default-black: rgb(0, 0, 0);
|
color: #c9c9c9;
|
||||||
--default-white: rgb(201, 201, 201);
|
|
||||||
--default-blue: rgb(23, 28, 148);
|
|
||||||
|
|
||||||
background-color: var(--default-black);
|
|
||||||
color: var(--default-white);
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
font-size: 16px;
|
||||||
|
line-height: 21px; }
|
||||||
|
|
||||||
/* General styles for elements */
|
* {
|
||||||
|
|
||||||
* { /* Remove margin and padding from everything by default */
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0; }
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
width: auto;
|
width: auto; }
|
||||||
}
|
|
||||||
|
|
||||||
b { /* Bolded text */
|
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: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
|
||||||
a :hover {
|
a :hover {
|
||||||
background-color: var(--default-blue);
|
background-color: #171c94;
|
||||||
color: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
|
||||||
.white a {
|
.white a {
|
||||||
color: var(--default-black);
|
color: black; }
|
||||||
}
|
|
||||||
.white a:hover {
|
.white a:hover {
|
||||||
color: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
|
||||||
.blue a:hover {
|
.blue a:hover {
|
||||||
background-color: var(--default-white);
|
background-color: #c9c9c9;
|
||||||
color: var(--default-blue);
|
color: #171c94; }
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
color: var(--default-black);
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
nav ul > li > ul:hover a {
|
nav ul > li > ul:hover a {
|
||||||
color: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
|
||||||
|
|
||||||
.hr {
|
.hr {
|
||||||
height: calc(1em + 5px);
|
height: 21px; }
|
||||||
}
|
|
||||||
hr {
|
|
||||||
height: calc((1em + 4px) / 2);
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid var(--default-white);
|
|
||||||
}
|
|
||||||
.blue hr {
|
|
||||||
border-color: var(--default-white);
|
|
||||||
}
|
|
||||||
nav li hr, li.button-list > ul a hr, .white hr {
|
|
||||||
border-color: var(--default-black);
|
|
||||||
}
|
|
||||||
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
|
|
||||||
border-color: var(--default-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists */
|
hr {
|
||||||
|
height: 10.5px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid #c9c9c9; }
|
||||||
|
|
||||||
|
.blue hr {
|
||||||
|
border-color: #c9c9c9; }
|
||||||
|
|
||||||
|
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; }
|
||||||
|
|
||||||
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); }
|
||||||
}
|
|
||||||
|
|
||||||
li.button-list > ul > li {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.button-list a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
li .button-list > ul:hover {
|
li .button-list > ul:hover {
|
||||||
background-color: var(--default-blue);
|
background-color: #171c94;
|
||||||
color: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
|
||||||
.blue li.button-list > ul:hover {
|
|
||||||
background-color: var(--default-white);
|
|
||||||
color: var(--default-black);
|
|
||||||
}
|
|
||||||
|
|
||||||
li .button-list > ul:hover > a {
|
li .button-list > ul:hover > a {
|
||||||
color: var(--default-white);
|
color: #c9c9c9; }
|
||||||
}
|
li .button-list > ul > li {
|
||||||
|
width: 100%; }
|
||||||
|
li .button-list > ul a {
|
||||||
|
display: block;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.blue li.button-list > ul:hover {
|
||||||
|
background-color: #c9c9c9;
|
||||||
|
color: black; }
|
||||||
|
|
||||||
.blue li.button-list > ul:hover > a {
|
.blue li.button-list > ul:hover > a {
|
||||||
color: var(--default-black);
|
color: black; }
|
||||||
}
|
|
||||||
|
|
||||||
/* Navbars */
|
|
||||||
|
|
||||||
nav > li { /* Navbar */
|
|
||||||
background-color: var(--default-white);
|
|
||||||
color: var(--default-black);
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
nav > li > ul { /* Navbar items */
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: inline-block;
|
|
||||||
padding-left: 1ch;
|
|
||||||
padding-right: 1ch;
|
|
||||||
}
|
|
||||||
nav ul::before {
|
|
||||||
content: "" !important;
|
|
||||||
}
|
|
||||||
nav > li > ul:hover { /* Navbar items */
|
|
||||||
background-color: var(--default-blue);
|
|
||||||
color: var(--default-white);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
nav > li > ul:focus {
|
|
||||||
background-color: var(--default-blue);
|
|
||||||
color: var(--default-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 {
|
||||||
}
|
color: black;
|
||||||
|
display: block;
|
||||||
.submenu {
|
width: 100%;
|
||||||
|
text-decoration: none; }
|
||||||
|
nav ul::before {
|
||||||
|
content: "" !important; }
|
||||||
|
nav > li {
|
||||||
|
background-color: #c9c9c9;
|
||||||
|
color: black;
|
||||||
|
margin-left: 0; }
|
||||||
|
nav > li > ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
animation-name: show;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li { /* Navbar inner lists */
|
|
||||||
position: absolute;
|
|
||||||
border: 2px solid var(--default-white);
|
|
||||||
border-color: var(--default-black);
|
|
||||||
box-shadow: 0 0 0 0.25ch var(--default-white);
|
|
||||||
background-color: var(--default-white);
|
|
||||||
margin-left: calc(2px - 1ch);
|
|
||||||
margin-right: calc(2px - 1ch);
|
|
||||||
margin-top: calc(0.5em - 3px);
|
|
||||||
margin-bottom: calc(0.5em - 1px);
|
|
||||||
padding: calc(0.25ch + 2px);
|
|
||||||
padding-top: calc(0.5em + 3px - 0.25ch);
|
|
||||||
padding-bottom: calc(0.5em + 3px - 0.25ch);
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
left: -9999px;
|
|
||||||
|
|
||||||
animation-name: hide;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li ul { /* Inner Items */
|
|
||||||
background-color: var(--default-white);
|
|
||||||
color: var(--default-black);
|
|
||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch;
|
padding-right: 1ch; }
|
||||||
min-height: calc(1em + 5px);
|
nav > li > ul:hover {
|
||||||
}
|
background-color: #171c94;
|
||||||
nav ul:focus li { /* Display inner items on focus */
|
color: #c9c9c9;
|
||||||
|
cursor: pointer; }
|
||||||
|
nav > li > ul:focus {
|
||||||
|
background-color: #171c94;
|
||||||
|
color: #c9c9c9; }
|
||||||
|
nav > li > ul:focus li {
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
left: inherit;
|
left: inherit;
|
||||||
animation-name: hide;
|
animation-name: hide;
|
||||||
|
animation-name: none; }
|
||||||
animation-name: none;
|
nav > li > ul > li {
|
||||||
}
|
position: absolute;
|
||||||
nav ul li ul:hover { /* Navbar inner items hover */
|
border: 2px solid #c9c9c9;
|
||||||
background-color: var(--default-blue);
|
border-color: black;
|
||||||
color: var(--default-white);
|
box-shadow: 0 0 0 0.25ch #c9c9c9;
|
||||||
}
|
background-color: #c9c9c9;
|
||||||
|
margin-left: calc(2px - 1ch);
|
||||||
/* Classes */
|
margin-right: calc(2px - 1ch);
|
||||||
.main-flexbox {
|
margin-top: 10.5px;
|
||||||
}
|
margin-bottom: 10.5px;
|
||||||
.mainframe {
|
padding: calc(0.25ch + 2px);
|
||||||
text-align: left;
|
padding-top: 10.5px;
|
||||||
background: var(--default-black);
|
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;
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
min-height: 21px; }
|
||||||
|
nav > li > ul > li > ul:hover {
|
||||||
|
background-color: #171c94;
|
||||||
|
color: #c9c9c9; }
|
||||||
|
nav > li .submenu {
|
||||||
|
display: inline-block;
|
||||||
|
animation-name: show;
|
||||||
|
animation-duration: 0.5s; }
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid var(--default-white);
|
border: 2px solid #c9c9c9;
|
||||||
margin: calc(0.5ch - 1px);
|
margin: 0.5ch;
|
||||||
padding: calc(0.5ch - 1px);
|
padding: calc(0.5ch - 2px);
|
||||||
width: auto;
|
width: auto;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: calc(0.5em - 1px + 2.5px);
|
margin-top: 10.5px;
|
||||||
margin-bottom: calc(0.5em - 1px + 2.5px);
|
margin-bottom: 10.5px;
|
||||||
padding-top: calc(0.5em - 1px + 2.5px);
|
padding-top: 8.5px;
|
||||||
padding-bottom: calc(0.5em - 1px + 2.5px);
|
padding-bottom: 8.5px;
|
||||||
vertical-align: top;
|
vertical-align: top; }
|
||||||
}
|
|
||||||
.box.double {
|
.box.double {
|
||||||
border-style: double;
|
border-style: double;
|
||||||
border-width: 5px;
|
border-width: 6px;
|
||||||
margin: calc(0.5ch - 2.5px);
|
margin: calc(0.5ch - 2.5px);
|
||||||
padding: calc(0.5ch - 2.5px);
|
padding: calc(0.5ch - 2.5px);
|
||||||
margin-top: calc(0.5em - 2.5px + 2.5px);
|
margin-top: 10.5px;
|
||||||
margin-bottom: calc(0.5em - 2.5px + 2.5px);
|
margin-bottom: 10.5px;
|
||||||
padding-top: calc(0.5em - 2.5px + 2.5);
|
padding-top: 4.5px;
|
||||||
padding-bottom: calc(0.5em - 2.5px + 2.5);
|
padding-bottom: 4.5px; }
|
||||||
}
|
|
||||||
.box.black {
|
.box.black {
|
||||||
background-color: var(--default-black);
|
background-color: black;
|
||||||
color: var(--default-white);
|
color: #c9c9c9;
|
||||||
border-color: var(--default-white);
|
border-color: #c9c9c9;
|
||||||
box-shadow: 0 0 0 0.25ch var(--default-black);
|
box-shadow: 0 0 0 0.25ch black; }
|
||||||
}
|
|
||||||
.box.white {
|
.box.white {
|
||||||
background-color: var(--default-white);
|
background-color: #c9c9c9;
|
||||||
color: var(--default-black);
|
color: black;
|
||||||
border-color: var(--default-black);
|
border-color: black;
|
||||||
box-shadow: 0 0 0 0.25ch var(--default-white);
|
box-shadow: 0 0 0 0.25ch #c9c9c9; }
|
||||||
}
|
|
||||||
.box.blue {
|
.box.blue {
|
||||||
background-color: var(--default-blue);
|
background-color: #171c94;
|
||||||
color: var(--default-white);
|
color: #c9c9c9;
|
||||||
border-color: var(--default-white);
|
border-color: #c9c9c9;
|
||||||
box-shadow: 0 0 0 0.25ch var(--default-blue);
|
box-shadow: 0 0 0 0.25ch #171c94; }
|
||||||
}
|
|
||||||
|
|
||||||
.list-symbol::after {
|
.list-symbol::after {
|
||||||
content: " ▼";
|
content: " ▼"; }
|
||||||
}
|
|
||||||
|
|
||||||
/* Style helpers, like space-takers */
|
.space-1em {
|
||||||
.space-1em { min-height: calc(1em + 5px); }
|
min-height: 21px; }
|
||||||
.space-2em { min-height: calc(2em + 10px); }
|
|
||||||
|
|
||||||
.width-50 { min-width: 50ch; }
|
.space-2em {
|
||||||
.width-100 { min-width: 100ch; }
|
min-height: 42px; }
|
||||||
.width-150 { min-width: 150ch; }
|
|
||||||
.width-200 { min-width: 200ch; }
|
|
||||||
|
|
||||||
.padding-1 { padding: 1ch; padding-top: calc(1em + 5px); padding-bottom: calc(1em + 5px); }
|
.width-50 {
|
||||||
.padding-2 { padding: 2ch; padding-top: calc(2em + 10px); padding-bottom: calc(2em + 10px); }
|
min-width: 50ch; }
|
||||||
.padding-3 { padding: 3ch; padding-top: calc(3em + 15px); padding-bottom: calc(3em + 15px); }
|
|
||||||
.padding-4 { padding: 4ch; padding-top: calc(4em + 20px); padding-bottom: calc(4em + 20px); }
|
.width-100 {
|
||||||
.padding-5 { padding: 5ch; padding-top: calc(5em + 25px); padding-bottom: calc(5em + 25px); }
|
min-width: 100ch; }
|
||||||
|
|
||||||
|
.width-150 {
|
||||||
|
min-width: 150ch; }
|
||||||
|
|
||||||
|
.width-200 {
|
||||||
|
min-width: 200ch; }
|
||||||
|
|
||||||
|
.padding-1 {
|
||||||
|
padding: 1ch;
|
||||||
|
padding-top: 21px;
|
||||||
|
padding-bottom: 21px; }
|
||||||
|
|
||||||
|
.padding-2 {
|
||||||
|
padding: 2ch;
|
||||||
|
padding-top: 42px;
|
||||||
|
padding-bottom: 42px; }
|
||||||
|
|
||||||
|
.padding-3 {
|
||||||
|
padding: 3ch;
|
||||||
|
padding-top: 63px;
|
||||||
|
padding-bottom: 63px; }
|
||||||
|
|
||||||
|
.padding-4 {
|
||||||
|
padding: 4ch;
|
||||||
|
padding-top: 84px;
|
||||||
|
padding-bottom: 84px; }
|
||||||
|
|
||||||
|
.padding-5 {
|
||||||
|
padding: 5ch;
|
||||||
|
padding-top: 105px;
|
||||||
|
padding-bottom: 105px; }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|||||||
7
style.css.map
Normal file
7
style.css.map
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": ["style.scss"],
|
||||||
|
"names": [],
|
||||||
|
"file": "style.css"
|
||||||
|
}
|
||||||
291
style.scss
Normal file
291
style.scss
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
$default-black: rgb(0, 0, 0);
|
||||||
|
$default-white: rgb(201, 201, 201);
|
||||||
|
$default-blue: rgb(23, 28, 148);
|
||||||
|
|
||||||
|
$em-height: 16px;
|
||||||
|
$line-overflow: 5px;
|
||||||
|
$line-height: $em-height + $line-overflow;
|
||||||
|
|
||||||
|
$box-border: 2px;
|
||||||
|
$box-double-border: 6px;
|
||||||
|
|
||||||
|
:root { // Styles applying to everyting
|
||||||
|
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
||||||
|
|
||||||
|
background-color: $default-black;
|
||||||
|
color: $default-white;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
font-size: $em-height;
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// General styles for elements
|
||||||
|
|
||||||
|
* { // Remove margin and padding from everything by default
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
b { // Bolded text
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $default-white;
|
||||||
|
:hover {
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.white a {
|
||||||
|
color: $default-black;
|
||||||
|
}
|
||||||
|
.white a:hover {
|
||||||
|
color: $default-white;
|
||||||
|
}
|
||||||
|
.blue a:hover {
|
||||||
|
background-color: $default-white;
|
||||||
|
color: $default-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul > li > ul:hover a {
|
||||||
|
color: $default-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: $line-height;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
height: $line-height / 2;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid $default-white;
|
||||||
|
}
|
||||||
|
.blue hr {
|
||||||
|
border-color: $default-white;
|
||||||
|
}
|
||||||
|
nav li hr, li.button-list > ul a hr, .white hr {
|
||||||
|
border-color: $default-black;
|
||||||
|
}
|
||||||
|
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
|
||||||
|
border-color: $default-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
|
||||||
|
li {
|
||||||
|
&:not(.button-list) > ul::before {
|
||||||
|
content: "- ";
|
||||||
|
}
|
||||||
|
.button-list > ul {
|
||||||
|
width: calc(100% - 1ch);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
color: $default-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue li.button-list > ul:hover {
|
||||||
|
background-color: $default-white;
|
||||||
|
color: $default-black;
|
||||||
|
}
|
||||||
|
.blue li.button-list > ul:hover > a {
|
||||||
|
color: $default-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbars
|
||||||
|
|
||||||
|
@keyframes hide {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
left: inherit;
|
||||||
|
}
|
||||||
|
1% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
a {
|
||||||
|
color: $default-black;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul::before {
|
||||||
|
content: "" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > li { // Navbar
|
||||||
|
background-color: $default-white;
|
||||||
|
color: $default-black;
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
& > ul { // Navbar items
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
|
||||||
|
&:hover { // Navbar items
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
|
||||||
|
li { // Display inner items on focus
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
left: inherit;
|
||||||
|
animation-name: hide;
|
||||||
|
|
||||||
|
animation-name: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > li { // Navbar inner lists
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid $default-white;
|
||||||
|
border-color: $default-black;
|
||||||
|
box-shadow: 0 0 0 0.25ch $default-white;
|
||||||
|
background-color: $default-white;
|
||||||
|
margin-left: calc(2px - 1ch);
|
||||||
|
margin-right: calc(2px - 1ch);
|
||||||
|
margin-top: $line-height / 2;
|
||||||
|
margin-bottom: $line-height / 2;
|
||||||
|
padding: calc(0.25ch + 2px);
|
||||||
|
padding-top: $line-height / 2;
|
||||||
|
padding-bottom: $line-height / 2;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
left: -9999px;
|
||||||
|
|
||||||
|
animation-name: hide;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
|
||||||
|
& > ul { // Inner Items
|
||||||
|
background-color: $default-white;
|
||||||
|
color: $default-black;
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
min-height: $line-height;
|
||||||
|
|
||||||
|
&:hover { // Navbar inner items hover
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu {
|
||||||
|
display: inline-block;
|
||||||
|
animation-name: show;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border: $box-border solid $default-white;
|
||||||
|
margin: 0.5ch;
|
||||||
|
padding: calc(0.5ch - 2px);
|
||||||
|
width: auto;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: $line-height / 2;
|
||||||
|
margin-bottom: $line-height / 2 ;
|
||||||
|
padding-top: $line-height / 2 - $box-border;
|
||||||
|
padding-bottom: $line-height / 2 - $box-border;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&.double {
|
||||||
|
border-style: double;
|
||||||
|
border-width: $box-double-border;
|
||||||
|
margin: calc(0.5ch - 2.5px);
|
||||||
|
padding: calc(0.5ch - 2.5px);
|
||||||
|
margin-top: $line-height / 2 ;
|
||||||
|
margin-bottom: $line-height / 2 ;
|
||||||
|
padding-top: $line-height / 2 - $box-double-border;
|
||||||
|
padding-bottom: $line-height / 2 - $box-double-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.black {
|
||||||
|
background-color: $default-black;
|
||||||
|
color: $default-white;
|
||||||
|
border-color: $default-white;
|
||||||
|
box-shadow: 0 0 0 0.25ch $default-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.white {
|
||||||
|
background-color: $default-white;
|
||||||
|
color: $default-black;
|
||||||
|
border-color: $default-black;
|
||||||
|
box-shadow: 0 0 0 0.25ch $default-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
background-color: $default-blue;
|
||||||
|
color: $default-white;
|
||||||
|
border-color: $default-white;
|
||||||
|
box-shadow: 0 0 0 0.25ch $default-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-symbol::after {
|
||||||
|
content: " ▼";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style helpers, like space-takers
|
||||||
|
.space-1em { min-height: $line-height; }
|
||||||
|
.space-2em { min-height: $line-height * 2; }
|
||||||
|
|
||||||
|
.width-50 { min-width: 50ch; }
|
||||||
|
.width-100 { min-width: 100ch; }
|
||||||
|
.width-150 { min-width: 150ch; }
|
||||||
|
.width-200 { min-width: 200ch; }
|
||||||
|
|
||||||
|
.padding-1 { padding: 1ch; padding-top: $line-height; padding-bottom: $line-height; }
|
||||||
|
.padding-2 { padding: 2ch; padding-top: $line-height * 2; padding-bottom: $line-height * 2; }
|
||||||
|
.padding-3 { padding: 3ch; padding-top: $line-height * 3; padding-bottom: $line-height * 3; }
|
||||||
|
.padding-4 { padding: 4ch; padding-top: $line-height * 4; padding-bottom: $line-height * 4; }
|
||||||
|
.padding-5 { padding: 5ch; padding-top: $line-height * 5; padding-bottom: $line-height * 5; }
|
||||||
Loading…
Reference in New Issue
Block a user