You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
1.8 KiB
SCSS
163 lines
1.8 KiB
SCSS
// fixing font path
|
|
@font-face {
|
|
font-family: 'DOS';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local('☺'), url('./fonts/fixedsys.woff') format('woff');
|
|
}
|
|
|
|
:root {
|
|
font: 20px / 1.1 DOS;
|
|
background-color: #190084;
|
|
color: #BBB;
|
|
}
|
|
|
|
body {
|
|
visibility: shown;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body>nav {
|
|
background-color: #BBB;
|
|
color: #000;
|
|
}
|
|
|
|
body>nav>.container {
|
|
display: flex;
|
|
}
|
|
|
|
body>nav h1 {
|
|
margin: 0 1rem;
|
|
color: inherit;
|
|
}
|
|
|
|
body>nav a {
|
|
color: inherit;
|
|
display: inline-block;
|
|
padding: 0 .5em;
|
|
}
|
|
|
|
body>nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body>nav li {
|
|
display: inline-block;
|
|
}
|
|
|
|
body>nav li:hover,
|
|
body>nav li.active {
|
|
background-color: #000;
|
|
color: #BBB;
|
|
}
|
|
|
|
.container {
|
|
margin: auto;
|
|
max-width: 980px;
|
|
}
|
|
|
|
body>main>header {
|
|
padding: 1rem 1rem;
|
|
margin: 1rem 0 1rem;
|
|
background: #0AA;
|
|
}
|
|
|
|
body>main>header>h1 {
|
|
color: #000;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1rem;
|
|
color: #FFF;
|
|
font-weight: 300;
|
|
margin: 0;
|
|
}
|
|
|
|
h1>small {
|
|
font-size: 1rem;
|
|
color: #DDD;
|
|
}
|
|
|
|
a {
|
|
color: #fefe54;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
|
|
.gap {
|
|
gap: 2rem;
|
|
}
|
|
|
|
.w-1\/4 {
|
|
flex: auto;
|
|
width: 25%;
|
|
}
|
|
|
|
.w-2\/4 {
|
|
flex: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.w-3\/4 {
|
|
flex: auto;
|
|
width: 75%;
|
|
}
|
|
|
|
.w-4\/4 {
|
|
flex: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.box {
|
|
border: 2px solid black;
|
|
box-shadow: 0 0 0 5px, 11px 13px 0 4px black;
|
|
}
|
|
|
|
nav {
|
|
background: #BBB;
|
|
margin: 0 0 2rem;
|
|
}
|
|
|
|
nav>header {
|
|
background: black;
|
|
color: #BBB;
|
|
margin: .5rem .5rem 0;
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
nav>menu {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: black;
|
|
margin: 0 .5rem .5rem;
|
|
}
|
|
|
|
nav>menu>li>a {
|
|
display: inline-block;
|
|
width: calc(100% - 1rem);
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
nav>menu>li>a {
|
|
color: black;
|
|
}
|
|
|
|
nav>menu>li>a:hover,
|
|
nav>menu>li>a.active {
|
|
color: #BBB;
|
|
background: black;
|
|
} |