Archive old start page
This commit is contained in:
parent
b3894ec8d6
commit
943ac76859
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<div class="start-page">
|
||||
<header-bar class="start-page__header"/>
|
||||
|
||||
<div class="start-page__sections start-sections">
|
||||
|
||||
<section-block
|
||||
:link-text="moduleText"
|
||||
:route="moduleRoute"
|
||||
class="start-sections__section"
|
||||
title="Inhalte"
|
||||
subtitle="Neues Wissen erwerben"
|
||||
data-cy="current-module-link"
|
||||
>
|
||||
<contents-illustration/>
|
||||
</section-block>
|
||||
<section-block
|
||||
class="start-sections__section"
|
||||
title="Räume"
|
||||
subtitle="Beiträge mit der Klasse teilen"
|
||||
data-cy="rooms-link"
|
||||
link-text="Alle Räume anzeigen"
|
||||
route="/rooms"
|
||||
>
|
||||
<rooms-illustration/>
|
||||
</section-block>
|
||||
<section-block
|
||||
class="start-sections__section"
|
||||
title="Portfolio"
|
||||
subtitle="Projekt dokumentieren und reflektieren"
|
||||
link-text="Portfolio anzeigen"
|
||||
route="/portfolio"
|
||||
>
|
||||
<portfolio-illustration/>
|
||||
</section-block>
|
||||
</div>
|
||||
<div class="start-page__news news">
|
||||
<h2 class="news__title">News</h2>
|
||||
<news-teaser
|
||||
date="27. Mai 2020"
|
||||
title="Lockdown"
|
||||
url="https://myskillbox-abu-news.webflow.io/lockdown"/>
|
||||
<news-teaser
|
||||
date="11. März 2020"
|
||||
title="Brexit"
|
||||
url="https://myskillbox-abu-news.webflow.io/brexit"/>
|
||||
<news-teaser
|
||||
date="20. Dezember 2019"
|
||||
title="Blockchain"
|
||||
url="https://myskillbox-abu-news.webflow.io/blockchain"/>
|
||||
<!--<news-teaser date="31. Oktober 2018" title="Sommerzeit - Festivalzeit"-->
|
||||
<!--url="https://abunews.webflow.io/"></news-teaser>-->
|
||||
<div class="news__more">Mehr...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SectionBlock from '@/components/SectionBlock.vue';
|
||||
import NewsTeaser from '@/components/NewsTeaser.vue';
|
||||
import HeaderBar from '@/components/HeaderBar';
|
||||
|
||||
import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
|
||||
import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
|
||||
import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
|
||||
|
||||
import MobileHeader from '@/components/MobileHeader';
|
||||
|
||||
import meMixin from '@/mixins/me';
|
||||
|
||||
export default {
|
||||
|
||||
mixins: [meMixin],
|
||||
components: {
|
||||
MobileHeader,
|
||||
HeaderBar,
|
||||
SectionBlock,
|
||||
NewsTeaser,
|
||||
ContentsIllustration,
|
||||
PortfolioIllustration,
|
||||
RoomsIllustration
|
||||
},
|
||||
|
||||
computed: {
|
||||
moduleRoute() {
|
||||
if (this.me.lastModule && this.me.lastModule.slug) {
|
||||
return `/module/${this.me.lastModule.slug}`;
|
||||
}
|
||||
return '/book/topic/berufliche-grundbildung';
|
||||
},
|
||||
moduleText() {
|
||||
if (this.me.lastModule && this.me.lastModule.slug) {
|
||||
return 'Aktuelles Modul anzeigen';
|
||||
}
|
||||
return 'Alle Inhalte anzeigen'
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.start-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
}
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__header {
|
||||
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $color-brand;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $color-silver-light;
|
||||
padding-bottom: 30px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__my {
|
||||
color: $color-white;
|
||||
/*font-size: 2rem;*/
|
||||
font-weight: 800;
|
||||
-webkit-text-stroke: 1px $color-brand;
|
||||
/*text-shadow: -1px -1px 0 $color-brand,
|
||||
1px -1px 0 $color-brand,
|
||||
-1px 1px 0 $color-brand,
|
||||
1px 1px 0 $color-brand;*/
|
||||
}
|
||||
}
|
||||
|
||||
.start-sections {
|
||||
margin: 0 30px;
|
||||
@include desktop {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
display: -ms-grid;
|
||||
-ms-grid-column-align: center;
|
||||
-ms-grid-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 90px;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
@include desktop {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
grid-row-gap: 15px;
|
||||
grid-column-gap: 50px;
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
*/
|
||||
& > :nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 2;
|
||||
}
|
||||
|
||||
& > :nth-child(3) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.news {
|
||||
background-color: $color-charcoal-dark;
|
||||
color: $color-white;
|
||||
padding-top: $large-spacing;
|
||||
padding-bottom: $large-spacing;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
-ms-grid-columns: 1fr 1fr 1fr;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
grid-row-gap: $large-spacing;
|
||||
|
||||
@include desktop {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
*/
|
||||
& > :nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 2;
|
||||
}
|
||||
|
||||
& > :nth-child(3) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 3;
|
||||
}
|
||||
|
||||
& > :nth-child(4) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 4;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
/*padding-left: 120px;*/
|
||||
/*padding-right: 120px;*/
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 2.1875rem;
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__more {
|
||||
color: $color-white;
|
||||
font-family: $sans-serif-font-family;
|
||||
line-height: $default-line-height;
|
||||
padding-left: $medium-spacing;
|
||||
font-weight: $font-weight-bold;
|
||||
text-align: center;
|
||||
|
||||
@include desktop {
|
||||
text-align: left;
|
||||
border-left: 1px solid $color-silver-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue