|
|
- @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;
- }
-
- @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;
- }
-
- }
-
-
- @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;
- }
-
-
-
- }
|