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