150 lines
2.4 KiB
CSS
150 lines
2.4 KiB
CSS
body {
|
|
margin: 0;
|
|
background-image: url("../assets/images/background.jpg");
|
|
background-size: cover;
|
|
font-family: body;
|
|
|
|
display: grid;
|
|
grid-template-columns: 20% 40% 40%;
|
|
grid-template-rows: 20% 60% 20%;
|
|
grid-template-areas:
|
|
"nav nav nav"
|
|
"main main aside"
|
|
"footer footer footer";
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
main {
|
|
grid-area: main;
|
|
}
|
|
|
|
.navigation {
|
|
top: 0em;
|
|
margin: 0;
|
|
margin-right: -24em;
|
|
display: grid;
|
|
grid-template-columns: 20% 20% 20% 20% 20%;
|
|
grid-template-areas: "home port blog contact arrow";
|
|
position: sticky;
|
|
transform: translate(-95%,0);
|
|
transition: transform 1s;
|
|
}
|
|
|
|
.navigation:hover {
|
|
transform: translate(0,0);
|
|
}
|
|
|
|
.navigation:hover .arrow {
|
|
opacity: 0;
|
|
}
|
|
|
|
.link {
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
.nav.link {
|
|
margin: 0;
|
|
opacity: 90%;
|
|
font-family: headers;
|
|
font-size: x-large;
|
|
background-color: #000000;
|
|
color: #f29602;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
border-bottom: 0.1em solid #000000;
|
|
}
|
|
|
|
.link > h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
nav > .link:hover {
|
|
border-bottom: 0.1em solid #32cd32;
|
|
}
|
|
|
|
#home:hover {
|
|
border-bottom: 0.1em solid #000000;
|
|
}
|
|
|
|
#home {
|
|
grid-area: home;
|
|
}
|
|
|
|
#port {
|
|
grid-area: port;
|
|
}
|
|
|
|
#blog {
|
|
grid-area: blog;
|
|
}
|
|
|
|
#contact {
|
|
grid-area: contact;
|
|
border-top-right-radius: 10em;
|
|
border-bottom-right-radius: 10em;
|
|
}
|
|
|
|
#arrow {
|
|
|
|
grid-area: arrow;
|
|
}
|
|
|
|
.arrow {
|
|
margin-left: 6em;
|
|
margin-top: 1em;
|
|
border:0.5em solid #f29602;
|
|
border-width: 0em 0.5em 0.5em 0em;
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
display: inline-block;
|
|
padding: 0.5em;
|
|
opacity: 1;
|
|
transition: opacity 1s ease-in;
|
|
}
|
|
|
|
.right {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.moreInfo {
|
|
position: relative;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.moreInfo:hover .extraInfo {
|
|
display:inline-block;
|
|
}
|
|
|
|
.extraInfo {
|
|
white-space: nowrap;
|
|
padding: 0.2em;
|
|
margin-top: -1.6em;
|
|
margin-left: -2em;
|
|
background-color: #e5e5e5;
|
|
color: #000000;
|
|
display: none;
|
|
z-index: 1000;
|
|
border-radius: 10em;
|
|
position: absolute;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: headers;
|
|
src: url(../assets/fonts/game_over.woff);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: headings;
|
|
src: url("../assets/fonts/AmaticSC-Regular.woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: body;
|
|
src: url("../assets/fonts/Yomogi-Regular.woff");
|
|
} |