103 lines
1.7 KiB
SCSS
103 lines
1.7 KiB
SCSS
|
$accent-color: greenyellow;
|
||
|
|
$green: green;
|
||
|
|
$grey: grey;
|
||
|
|
$light-grey: lightgrey;
|
||
|
|
$dark-grey: darkgrey;
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 100vw;
|
||
|
|
margin: 0;
|
||
|
|
background-color: black;
|
||
|
|
color: $green;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: $accent-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: .5em auto;
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
nav {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
li {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 1em 2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#gallery {
|
||
|
|
width: 90%;
|
||
|
|
height: 72vh;
|
||
|
|
background-color: $light-grey;
|
||
|
|
margin: auto;
|
||
|
|
padding: 1em;
|
||
|
|
|
||
|
|
#screen {
|
||
|
|
position: relative;
|
||
|
|
width: 90%;
|
||
|
|
height: calc(90% - 2em);
|
||
|
|
margin: auto;
|
||
|
|
|
||
|
|
#screen-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 1em;
|
||
|
|
overflow: scroll;
|
||
|
|
background-color: #111;
|
||
|
|
border: 2px solid $dark-grey;
|
||
|
|
border-radius: 5px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
max-width: 90%;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// this has been done thanks to this :
|
||
|
|
// https://stackoverflow.com/questions/13188828/inset-box-shadow-beneath-content
|
||
|
|
#screen::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: calc(1em + 2px); // padding + border of #screen-content
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 0 3em 0 black inset;
|
||
|
|
background-image: radial-gradient(rgba(70,70,70,0.5),rgba(0,0,0,0));
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#brand {
|
||
|
|
position: relative;
|
||
|
|
color: dimgray;
|
||
|
|
margin: auto;
|
||
|
|
width: fit-content;
|
||
|
|
bottom: -3em;
|
||
|
|
font-weight: 900;
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
}
|