add start page
This commit is contained in:
Christian Cueni
parent
2adfffd441
commit
e602cd8a8d
|
|
@ -37,3 +37,6 @@ server/images
|
|||
server/original_images
|
||||
original_images/
|
||||
server/media/
|
||||
|
||||
# pyenv
|
||||
.python-version
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="news-teaser">
|
||||
<div class="news-teaser__image">
|
||||
</div>
|
||||
<div class="news-teaser__text teaser-text">
|
||||
<h4 class="teaser__title small-emph">{{title}}</h4>
|
||||
<div class="teaser__date">
|
||||
<p>{{date}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['title', 'date', 'imageUrl']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.news-teaser {
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.teaser {
|
||||
&__date > p {
|
||||
color: $color-text-gray;
|
||||
font-family: $sans-serif-font-family;
|
||||
font-size: toRem(14px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="section-block">
|
||||
<div class="section-block__title block-title">
|
||||
<h2 class="block-title__title">{{title}}</h2>
|
||||
<h3 class="block-title__subtitle small-emph">{{subtitle}}</h3>
|
||||
</div>
|
||||
<div class="section-block__content section-content">
|
||||
<div class="section-content__subsection subsection">
|
||||
<h4 class="subsection__title small-emph">Zuletzt bearbeitet</h4>
|
||||
<p class="subsection__content small-emph">
|
||||
{{lastModified}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-content__subsection">
|
||||
<h4 class="subsection_title small-emph">Aktivität</h4>
|
||||
<p class="subsection__content small-emph">
|
||||
{{lastModified}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['title', 'subtitle', 'lastModified', 'activities']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.section-block {
|
||||
border-radius: $default-border-radius;
|
||||
width: 100%;
|
||||
border: solid 1px $color-lightgrey-2;
|
||||
box-shadow: 5px 5px 21px 0px rgba(219,219,219,1);
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
background-color: $color-brand;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
&__title, &__subtitle {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 60px 15px 15px;
|
||||
|
||||
&__subsection {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.subsection {
|
||||
&__content {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-weight: 600;
|
||||
color: $color-brand;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="start-page">
|
||||
<h1 class="start-page__title h1">skillbox</h1>
|
||||
<div class="start-page__sections start-sections">
|
||||
<section-block
|
||||
class="start-sections__section"
|
||||
title="Inhalte"
|
||||
subtitle="Lernen"
|
||||
lastModified="Modul 1: Mein neues Umfeld"
|
||||
activities="4 neue Ergebnisse"
|
||||
></section-block>
|
||||
<section-block
|
||||
class="start-sections__section"
|
||||
title="Räume"
|
||||
subtitle="Zusammenarbeiten"
|
||||
lastModified="Ein historisches Festival"
|
||||
activities="2 neue Beiträge"
|
||||
></section-block>
|
||||
<section-block
|
||||
class="start-sections__section"
|
||||
title="Portfolio"
|
||||
subtitle="Dokumentation & reflektieren"
|
||||
lastModified="Mein Projekt 1"
|
||||
activities="2 geteilte Portfolios"
|
||||
></section-block>
|
||||
</div>
|
||||
<div class="start-page__news news">
|
||||
<h2 class="news__title">News</h2>
|
||||
<div class="news__teasers news-teasers">
|
||||
<news-teaser
|
||||
title="Sommerzeit - Festivalzeit"
|
||||
date="3. Juli 2018"
|
||||
imageUrl="http"
|
||||
></news-teaser>
|
||||
<news-teaser
|
||||
title="Bitcoin - Hype um die Kryptowährung"
|
||||
date="23. April 2018"
|
||||
imageUrl="http"
|
||||
></news-teaser>
|
||||
<news-teaser
|
||||
title="Plastic Ocean - Plastikinseln im Meer"
|
||||
date="3. April 2018"
|
||||
imageUrl="http"
|
||||
></news-teaser>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import SectionBlock from '@/components/SectionBlock.vue';
|
||||
import NewsTeaser from '@/components/NewsTeaser.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SectionBlock,
|
||||
NewsTeaser
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.start-page {
|
||||
|
||||
margin: 0 30px;
|
||||
|
||||
&__title {
|
||||
color: $color-brand;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $color-lightgrey-2;
|
||||
padding-bottom: 30px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.start-sections {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
display: -ms-grid;
|
||||
margin-bottom: 90px;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column-gap: 50px;
|
||||
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.news {
|
||||
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
|
||||
&__title {
|
||||
font-family: $serif-font-family;
|
||||
text-transform: uppercase;
|
||||
font-size: 2.1875rem;
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $color-lightgrey-2;
|
||||
}
|
||||
|
||||
&__teasers {
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column-gap: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -13,9 +13,10 @@ import article from '@/pages/article'
|
|||
import basicknowledge from '@/pages/basicknowledge'
|
||||
import submissions from '@/pages/submissions'
|
||||
import p404 from '@/pages/p404'
|
||||
import start from '@/pages/start'
|
||||
|
||||
const routes = [
|
||||
{path: '/', redirect: '/book/topic'},
|
||||
{path: '/', component: start},
|
||||
{
|
||||
path: '/module/:slug',
|
||||
component: moduleBase,
|
||||
|
|
|
|||
|
|
@ -53,3 +53,9 @@ input, textarea, select, button {
|
|||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
.small-emph {
|
||||
font-size: toRem($base-font-size-pixels);
|
||||
margin-bottom: 7.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $color-grey: rgba(51, 51, 51, 0.5);
|
|||
$color-lightgrey-2: #dbdbdb;
|
||||
$color-lightgrey: #f3f3f3;
|
||||
$color-white: #ffffff;
|
||||
|
||||
$color-text-gray: rgb(161, 161, 161);
|
||||
|
||||
|
||||
$header-color: $color-darkgrey-1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue