99 lines
1.6 KiB
SCSS
99 lines
1.6 KiB
SCSS
$colour-my-shadow: rgba(224, 196, 58, 0.5);
|
|
$accent-colour: chocolate;
|
|
$border-colour: grey;
|
|
$border-colour-light: silver;
|
|
$dark-blue: midnightblue;
|
|
|
|
body {
|
|
background-color: lavender;
|
|
margin: 0;
|
|
max-width: 100vw;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.me {
|
|
box-shadow: 0 0 .3em .1em $colour-my-shadow;
|
|
}
|
|
|
|
a {
|
|
color: $accent-colour;
|
|
}
|
|
|
|
header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: lightsteelblue;
|
|
box-shadow: 0 -4em 5em 2em rgba(25,25,112,0.5);
|
|
|
|
h1 {
|
|
margin-left: 4em;
|
|
}
|
|
|
|
nav {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-bottom: 1px solid $border-colour;
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
|
|
list-style-type: none;
|
|
border-top: 1px solid $border-colour;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
padding: 1em 2em;
|
|
border-left: 1px solid $border-colour;
|
|
//background-image: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.03));
|
|
box-shadow: 0 0 1em rgba(0,0,0,0.07) inset;
|
|
}
|
|
|
|
li:last-child {
|
|
border-right: 1px solid $border-colour;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#main {
|
|
width: 100%;
|
|
padding-top: 10em;
|
|
padding-bottom: 2em;
|
|
background-image: linear-gradient(thistle, lavender);
|
|
|
|
p {
|
|
margin: 0 1em 0;
|
|
}
|
|
|
|
section {
|
|
margin: 0 1em 0;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
background-color: $dark-blue;
|
|
color: cornsilk;
|
|
box-shadow: 0 1em 1em 1em $dark-blue;
|
|
padding: .5em 1em;
|
|
|
|
p {
|
|
margin: 1em;
|
|
}
|
|
|
|
#tilde_ring {
|
|
border: 1px dotted $border-colour-light !important;
|
|
margin-bottom: 2em;
|
|
}
|
|
}
|