epiphany/style/v2/index.scss

148 lines
No EOL
1.8 KiB
SCSS

@import "vars";
html {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
body {
background: $bg;
background-repeat: repeat;
font-family: $font;
font-size: $fsize;
letter-spacing: $lspacing;
width: 80%;
height: 60%;
display: grid;
gap: 0 10px; grid-gap: 0 10px;
grid-template-columns: 5fr 1fr 230px;
grid-template-rows: 1fr 300px 1fr;
grid-template-areas:
"banner banner banner"
"main nav cbox"
"foot foot foot";
& > div { height: 100%; }
.scroll { overflow-y: auto; }
}
div#banner {
grid-area: banner;
display: grid;
gap: 0; grid-gap: 0;
grid-template-columns: 60% 40%;
grid-template-rows: 100%;
grid-template-areas: "title nav";
align-items: end;
div#title {
grid-area: title;
z-index: 1;
position: relative;
img {
position: absolute;
bottom: -10px;
right: 0;
}
}
div#site-nav {
grid-area: nav;
margin-bottom: 10px;
}
}
#main {
grid-area: main;
position: relative;
& > div {
width: 100%;
height: 100%;
}
}
#corner-left {
position: absolute;
top: 0;
left: 0;
}
#corner-left-01 {
position: absolute;
top: 0;
left: 0;
}
#corner-left-02 {
position: absolute;
top: 0;
left: 49px;
}
#corner-left-03 {
position: absolute;
top: 20px;
left: 0;
}
#nav {
grid-area: nav;
}
#cbox {
grid-area: cbox;
position: relative;
}
#cbox-inner {
position: absolute;
bottom: 7px;
left: 10px;
}
#corner-right-01 {
position: absolute;
top: 0;
right: 54px;
}
#corner-right-02 {
position: absolute;
top: 0;
right: 0;
}
#corner-right-03 {
position: absolute;
top: 36px;
right: 0;
}
#footer {
grid-area: foot;
text-align: center;
}
.transparent {
background: rgba(255,255,255,0.70);
}
a {
text-decoration: none;
color: $accent1;
&:hover {
text-decoration: underline;
color: $accent2;
}
}