ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Move styles

This commit is contained in:
Ramon Wenger 2018-08-16 16:31:17 +02:00
parent f30fbaa43f
commit 1f6d497d02
2 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/App.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="container"> <div class="container skillbox">
<header class="header"> <header class="header skillbox__header">
<router-link to="/" class="header__logo">skillBOX</router-link> <router-link to="/" class="header__logo">skillBOX</router-link>
</header> </header>
<router-view></router-view> <router-view></router-view>
<footer>Footer</footer> <footer skillbox__footer>Footer</footer>
</div> </div>
</template> </template>
@ -23,4 +23,41 @@
<style lang="scss"> <style lang="scss">
@import "styles/main.scss"; @import "styles/main.scss";
.skillbox {
&__header {
display: grid;
}
}
//todo: move
.container {
margin: 0 auto;
width: 100%;
//max-width: 1440px;
display: grid;
grid-template-rows: 72px auto 50px;
grid-row-gap: 32px;
min-height: 100vh;
grid-template-areas: "h" "c" "f";
.header {
grid-area: h;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
}
}
footer {
grid-area: f;
display: none;
}
}
</style> </style>

30
client/src/styles/main.scss
View File

@ -8,36 +8,6 @@
@import "variables"; @import "variables";
//todo: move
.container {
margin: 0 auto;
width: 100%;
//max-width: 1440px;
display: grid;
grid-template-rows: 72px auto 50px;
grid-row-gap: 32px;
min-height: 100vh;
grid-template-areas: "h" "c" "f";
.header {
grid-area: h;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
}
}
footer {
grid-area: f;
display: none;
}
}