You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.5 KiB
81 lines
1.5 KiB
@font-face {
|
|
font-family: 'Lato', sans-serif;
|
|
src: url('fonts/Lato-Thin.ttf') format('truetype');
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
}
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
:root{
|
|
--top_padding:5px;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-weight:500;
|
|
}
|
|
|
|
#top-nav {
|
|
grid-area: top-bar;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
#main-nav {
|
|
grid-area: main-bar;
|
|
}
|
|
|
|
|
|
#content {
|
|
grid-area: main;
|
|
}
|
|
|
|
#footer {
|
|
grid-area:footer;
|
|
}
|
|
|
|
/* Adjust Media Queries ! */
|
|
|
|
@media screen and (min-width:1024px){
|
|
|
|
.global-wrapper {
|
|
display:grid;
|
|
height:100vh;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 10% 22% auto 40%;
|
|
grid-template-areas:
|
|
"top-bar top-bar top-bar top-bar"
|
|
"main-bar main-bar main-bar main-bar"
|
|
"main main main main"
|
|
"footer footer footer footer";
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
|
|
}
|
|
|
|
/* Adjust Media Queries ! */
|
|
|
|
@media screen and (max-width:480px) {
|
|
|
|
.global-wrapper {
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-areas:
|
|
"main-bar"
|
|
"main"
|
|
"footer";
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight:500;
|
|
display:grid;
|
|
}
|
|
}
|