...
 
Commits (4)
@import 'variables';
body {
font-family: monospace;
font-family: $font-base;
font-size: 1.2rem;
margin: 0;
}
......@@ -7,18 +10,20 @@ h1,
h2,
h3,
h4 {
color: rgb(28, 102, 17);
color: $color-headlines;
font-family: monospace;
font-weight: bold;
text-transform: uppercase;
}
a {
color: #666;
color: $color-links;
font-weight: bold;
text-decoration: none;
&:hover {
color:rgb(28, 102, 17);
color: $color-links-hover;
text-decoration: underline;
}
}
......@@ -26,13 +31,16 @@ a {
padding: 70px 0;
li {
@media (max-width: 939px) {
padding: 5px 0;
padding: 5px 0;
@media (min-width: $breakpoint) {
padding: 3px 0;
}
}
.uk-article-meta {
color: #666;
img {
height: auto;
max-width: 100%;
}
}
......@@ -40,4 +48,17 @@ a {
content: '//';
display: inline-block;
padding-right: 8px;
}
.text-strong {
font-weight: bold;
}
.text-uppercase {
text-transform: uppercase;
}
.text-normal {
font-weight: normal;
text-transform: inherit;
}
\ No newline at end of file
$breakpoint: 640px;
$font-base: monospace;
$color-font: rgb(0, 0, 0);
$color-links: #666;
$color-links-hover: rgb(28, 102, 17);
$color-headlines: $color-links-hover;
\ No newline at end of file
<template>
<footer class="page-footer uk-text-uppercase">
<span class="uk-text-bold">&copy; {{ copyright }}</span>
<footer class="page-footer text-uppercase">
<span class="text-bold">&copy; {{ copyright }}</span>
<nuxt-link to="/impressum" class="slashes">Impressum</nuxt-link>
<nuxt-link to="/datenschutz" class="slashes">Datenschutz</nuxt-link>
</footer>
......@@ -19,14 +19,17 @@ export default {
</script>
<style lang="scss" scoped>
.page-footer {
span, a {
display: block;
margin-top: 10px;
@import '~/assets/scss/variables';
@media (min-width: 640px) {
display: inline-block;
}
.page-footer {
span, a {
display: block;
margin-top: 10px;
padding: 6px 0;
@media (min-width: $breakpoint) {
display: inline-block;
}
}
}
</style>
\ No newline at end of file
<template>
<header class="page-header uk-text-bold uk-text-uppercase" data-uk-grid>
<div class="page-header_logo [email protected]">
<nuxt-link to="/">{{ title }}</nuxt-link> <span class="uk-text-normal slashes">Stephan Plöhn</span>
<header class="page-header text-bold text-uppercase">
<div class="page-header_logo">
<nuxt-link to="/">{{ title }}</nuxt-link> <span class="text-normal slashes">Stephan Plöhn</span>
</div>
<nav class="page-header_navigation [email protected]">
<nav class="page-header_navigation">
<ul>
<li>
<nuxt-link to="/" aria-label="Zur Startseite">Home</nuxt-link>
......@@ -17,36 +17,49 @@
</template>
<style lang="scss" scoped>
.page-header {
&_navigation {
ul {
margin: 0;
padding: 0;
list-style: none;
@media (min-width: 640px) {
text-align: right;
}
@import '~/assets/scss/variables';
.page-header {
@media (min-width: $breakpoint) {
display: flex;
flex-wrap: wrap;
}
&_navigation {
margin-top: 30px;
@media (min-width: $breakpoint) {
margin-top: 0;
flex-grow: 1;
}
ul {
margin: 0;
padding: 0;
list-style: none;
@media (min-width: $breakpoint) {
text-align: right;
}
li {
display: inline-block;
margin-right: 20px;
@media (min-width: 640px) {
margin: 0 0 0 20px;
}
}
li {
display: inline-block;
margin-right: 20px;
@media (min-width: $breakpoint) {
margin: 0 0 0 20px;
}
}
.nuxt-link-exact-active {
color:rgb(28, 102, 17);
text-decoration: underline;
}
.nuxt-link-exact-active {
color:rgb(28, 102, 17);
text-decoration: underline;
}
}
}
</style>
<script>
export default {
data () {
return {
......
<template>
<div class="posts"
data-uk-scrollspy="cls: uk-animation-slide-bottom-small; target: .posts-article; delay: 300">
<article v-for="post in posts" v-bind:key="post.slug" class="posts-article" data-uk-grid>
<div class="posts-article_image [email protected]">
<nuxt-link v-if="post.image" :to="{ path: 'posts/' + post.slug }" :aria-label="'Beitragsbild ' + post.title">
<img :alt="'Bild zum Beitrag ' + post.title"
data-uk-img :data-src="post.image.data.thumbnails[6].url" />
<div class="posts">
<article v-for="post in posts" v-bind:key="post.slug" class="posts-article">
<div class="posts-article_image">
<nuxt-link v-if="post.image" :to="{ path: '/posts/' + post.slug }" :aria-label="'Beitragsbild ' + post.title">
<img :alt="'Bild zum Beitrag ' + post.title" :src="post.image.data.thumbnails[6].url" />
</nuxt-link>
</div>
<div class="posts-article_intro [email protected]">
<div class="posts-article_intro">
<nuxt-link :to="{ path: '/posts/' + post.slug }">
<h3 class="posts_title">{{ post.title }}</h3>
<h3 class="posts-article_intro__title">{{ post.title }}</h3>
</nuxt-link>
<time :datetime="post.published_on" class="uk-display-block">{{ post.published_on | moment }}</time>
<time :datetime="post.published_on">{{ post.published_on | moment }}</time>
<div v-if="post.intro" v-html="post.intro">
</div>
<div class="uk-text-uppercase uk-text-bold">
<div class="text-uppercase text-strong">
<nuxt-link :to="{ path: '/posts/' + post.slug}" class="slashes">Mehr</nuxt-link>
</div>
</div>
......@@ -45,15 +43,40 @@ export default {
</script>
<style lang="scss" scoped>
.posts {
&-article {
margin-bottom: 100px;
@import '~/assets/scss/variables';
&_image {
img {
width: 100%;
.posts {
&-article {
margin-bottom: 100px;
@media (min-width: $breakpoint) {
display: flex;
transition: all ease 300ms;
&:hover {
transform: scale(1.01);
}
}
&_image {
@media (min-width: $breakpoint) {
flex-shrink: 0;
margin-right: 20px;
width: 34%;
}
img {
width: 100%;
}
}
&_intro {
&__title {
@media (min-width: $breakpoint) {
margin-top: 0;
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -36,7 +36,6 @@ export default {
** Global CSS
*/
css: [
'uikit/dist/css/uikit.css',
'@/assets/scss/base.scss'
],
/*
......@@ -44,7 +43,6 @@ export default {
*/
plugins: [
'~/plugins/repository',
{ src: '~/plugins/uikit.js', ssr: false }
],
/*
** Nuxt.js dev-modules
......
......@@ -9353,11 +9353,6 @@
}
}
},
"uikit": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/uikit/-/uikit-3.3.2.tgz",
"integrity": "sha512-j0pk0VmUJxOQQkZDLtVVq5YZLVx4HgPoB6MYlxPJpucr2rdNVVS/3CBEjq97TdBWo82IsbdGopkVq4bfXJYqjw=="
},
"unfetch": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz",
......
......@@ -13,8 +13,7 @@
"dependencies": {
"@nuxtjs/axios": "^5.9.5",
"moment": "^2.24.0",
"nuxt": "^2.0.0",
"uikit": "^3.3.2"
"nuxt": "^2.0.0"
},
"devDependencies": {
"node-sass": "^4.13.1",
......
<template>
<main class="content">
<article class="uk-article post">
<h1 class="uk-article-title">{{ post.title }}</h1>
<article class="post">
<h1>{{ post.title }}</h1>
<div class="uk-article-meta uk-text-uppercase">
<div class="text-uppercase text-strong post-meta">
<time :datetime="post.published_on">{{ post.published_on | moment }}</time>
<nuxt-link v-for="tag in post.tags" v-bind:key="tag" :to="{ path: '/posts/tag/' + tag}">#{{ tag }} </nuxt-link>
<nav>
<ul>
<li v-for="tag in post.tags" v-bind:key="tag">
<nuxt-link :to="{ path: '/posts/tag/' + tag}">#{{ tag }}</nuxt-link>
</li>
</ul>
</nav>
</div>
<div class="uk-text-lead" v-html="post.intro"></div>
<div v-html="post.intro"></div>
<div v-html="post.text"></div>
<div v-if="post.images" class="[email protected] uk-margin-bottom" data-uk-grid uk-lightbox="animation: scale"
data-uk-scrollspy="cls: uk-animation-slide-bottom-small; target: .post_gallery__item; delay: 300">
<div v-if="post.images" class="post-gallery">
<a v-for="image in post.images" v-bind:key="image.id" :href="image.directus_files_id.data.thumbnails[7].url"
:title="image.directus_files_id.title" :data-caption="image.directus_files_id.title" data-type="image"
class="post-gallery_item">
:title="image.directus_files_id.title" class="post-gallery_item">
<img :alt="'Bild zum Beitrag ' + post.title"
data-uk-img :data-src="image.directus_files_id.data.thumbnails[6].url" />
:src="image.directus_files_id.data.thumbnails[6].url" />
</a>
</div>
</article>
<div class="uk-text-uppercase uk-text-bold">
<div class="text-uppercase text-strong">
<nuxt-link to="/posts" class="slashes">Zurück</nuxt-link>
</div>
</main>
......@@ -62,13 +66,54 @@ export default {
</script>
<style lang="scss" scoped>
.post {
&-gallery {
&_item {
img {
width: 100%;
@import '~/assets/scss/variables';
.post {
&-meta {
display: flex;
ul {
display: flex;
list-style: none;
margin: 0;
}
li {
margin-right: 10px;
padding: 0;
}
}
&-gallery {
margin-bottom: 15px;
@media (min-width: $breakpoint) {
display: flex;
flex-wrap: wrap;
}
&_item {
display: block;
margin: 15px 0;
@media (min-width: $breakpoint) {
flex-basis: 256px;
flex-grow: 1;
margin: 15px;
}
img {
width: 100%;
@media (min-width: $breakpoint) {
transition: all ease 300ms;
&:hover {
box-shadow: 0 40px 40px -20px rgba(51,51,51,0.3);
transform: scale(1.01);
}
}
}
}
}
}
</style>
\ No newline at end of file
import Vue from 'vue'
import UIkit from 'uikit/dist/js/uikit'
import Icons from 'uikit/dist/js/uikit-icons'
UIkit.use(Icons)
UIkit.container = '#__nuxt'
Vue.prototype.$uikit = UIkit
\ No newline at end of file