tilde-site/sass/buttons.scss

99 lines
1.6 KiB
SCSS
Raw Normal View History

2023-01-25 08:55:24 +00:00
$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;
}
}