Added som basic functionality
This commit is contained in:
committed by
Erik Tiekstra
parent
dd743fd638
commit
bf66859f06
@@ -1,5 +1,3 @@
|
||||
<digi-ng-typography-base>
|
||||
<dafa-horizontal-center>
|
||||
<section class="start">Start funkar!</section>
|
||||
</dafa-horizontal-center>
|
||||
<section class="start">Start funkar!</section>
|
||||
</digi-ng-typography-base>
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
@import 'variables/breakpoints';
|
||||
@import 'variables/colors';
|
||||
@import 'variables/gutters';
|
||||
@import 'variables/typography';
|
||||
@import 'mixins/ie11';
|
||||
@import 'mixins/typography';
|
||||
|
||||
.start {
|
||||
&__header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: $af__gutter-goliath 0;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
bottom: $af__gutter-xxl;
|
||||
left: -$af__gutter-m;
|
||||
background-color: $af__color-primary;
|
||||
color: $af__color-text-light;
|
||||
padding: $af__gutter-m $af__gutter-xxl;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
&__subheading {
|
||||
font-size: $af__font-size-h1 !important;
|
||||
margin: $af__gutter-xxl 0 !important;
|
||||
@include dafa__typography-ornament;
|
||||
}
|
||||
|
||||
&__background-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
object-position: center 33%;
|
||||
|
||||
@media (min-width: $af__breakpoint-m) {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@media (min-width: $af__breakpoint-l) {
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
@media (min-width: $af__breakpoint-xl) {
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
&__cta-wrapper {
|
||||
background-color: $af__color-background-alt-tertiary;
|
||||
margin: $af__gutter-xxl 0;
|
||||
padding: $af__gutter-xxl;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
display: flex;
|
||||
gap: $af__gutter-xl;
|
||||
}
|
||||
|
||||
&__puff {
|
||||
width: calc(100% / 3);
|
||||
|
||||
@include ie11 {
|
||||
&:not(:first-child) {
|
||||
margin-left: $af__gutter-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: $af__gutter-goliath;
|
||||
background-color: $af__color-background-light-gray;
|
||||
padding: $af__gutter-xxl 0 $af__gutter-goliath;
|
||||
}
|
||||
|
||||
&__footer-heading {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: $af__gutter-l !important;
|
||||
}
|
||||
|
||||
&__card-wrapper {
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
gap: $af__gutter-xxl;
|
||||
}
|
||||
|
||||
&__card {
|
||||
max-width: 400px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
display: inline-block;
|
||||
margin-top: $af__gutter-l;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,16 +2,10 @@ import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-b
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
|
||||
import { StartComponent } from './start.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [StartComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([{ path: '', component: StartComponent }]),
|
||||
DigiNgTypographyBaseModule,
|
||||
HorizontalCenterModule,
|
||||
],
|
||||
imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule],
|
||||
})
|
||||
export class StartModule {}
|
||||
|
||||
Reference in New Issue
Block a user