Permalink
Browse files

creates the skeleton

  • Loading branch information...
onefriendaday committed Jan 6, 2018
1 parent a5865f4 commit ea143131aad0609de96685ea4060f90102542778
@@ -0,0 +1,16 @@
.util__flex {
display: flex;
}

.util__flex-col {
flex: 0 0 auto;
}

.util__container {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
@@ -0,0 +1,12 @@
article, aside, footer, header, hgroup, main, nav, section {
display: block;
}

body {
font-family: 'Zilla Slab', Helvetica, sans-serif;
line-height: 1;
font-size: 18px;
color: #000;
margin: 0;
padding: 0;
}
@@ -0,0 +1,12 @@
$brand-color: #357F8A;
$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 960px;
$breakpoint-xlarge: 1220px;
$breakpoint-mini-max: ($breakpoint-small - 1);
$breakpoint-small-max: ($breakpoint-medium - 1);
$breakpoint-medium-max: ($breakpoint-large - 1);
$breakpoint-large-max: ($breakpoint-xlarge - 1);

@import 'elements/body.scss';
@import 'components/util.scss';
@@ -0,0 +1,16 @@
<template>
<footer class="bottom-footer">
<div class="util__container">
<ul>
<li><nuxt-link class="nav__item" to="/en/imprint">Imprint</nuxt-link></li>
</ul>
</div>
</footer>
</template>

<style lang="scss">
.bottom-footer {
background: #e3f2ed;
padding: 40px 0 120px 0;
}
</style>
@@ -0,0 +1,52 @@
<template>
<header class="top-header util__flex util__container">
<nav class="top-header__col">
<ul class="nav">
<li>
<nuxt-link class="nav__item" to="/">Home</nuxt-link>
</li>
<li>
<nuxt-link class="nav__item" to="/en/blog">Blog</nuxt-link>
</li>
</ul>
</nav>
<a href="/" class="top-header__col top-header__logo">
<img src="//a.storyblok.com/f/42016/1096x313/0353bf6654/logo2.png">
</a>
<nav class="top-header__col top-header__second-navi">
<ul class="nav">
<li>
<nuxt-link class="nav__item" to="/en/">English</nuxt-link>
</li>
<li>
<nuxt-link class="nav__item" to="/en/">German</nuxt-link>
</li>
</ul>
</nav>
</header>
</template>

<style lang="scss">
.top-header {
justify-content: space-between;
padding-top: 30px;
padding-bottom: 30px;
}
.top-header__logo {
text-align: center;
position: absolute;
left: 50%;
img {
position: relative;
max-height: 60px;
left: -50%;
top: -15px;
}
}
.top-header__second-navi {
text-align: right;
}
</style>
@@ -1,52 +1,25 @@
<template>
<div>
<nuxt/>
<top-header/>
<main id="main" role="main">
<nuxt/>
</main>
<bottom-footer/>
</div>
</template>

<style>
html {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
<script>
import TopHeader from '~/components/TopHeader.vue'
import BottomFooter from '~/components/BottomFooter.vue'
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
export default {
components: {
TopHeader,
BottomFooter
}
}
</script>

.button--grey:hover {
color: #fff;
background-color: #35495e;
}
<style lang="scss">
@import '../assets/scss/styles.scss';
</style>
@@ -10,7 +10,8 @@ module.exports = {
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Zilla+Slab:400,700' }
]
},
/*
@@ -1,34 +1,26 @@
<template>
<section class="container">
<div>
<logo/>
<h1 class="title">
mywebsite
</h1>
<h2 class="subtitle">
Nuxt.js project
</h2>
<div class="links">
<a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
<a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
</div>
</div>
</section>
</template>

<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
}
}
</script>

<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;

0 comments on commit ea14313

Please sign in to comment.