diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.html b/apps/mina-sidor-fa/src/app/pages/start/start.component.html index c720603..e066b87 100644 --- a/apps/mina-sidor-fa/src/app/pages/start/start.component.html +++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.html @@ -1,8 +1,21 @@ - +
-

Välkommen {{ userFullName$ | async }}

+
+

Välkommen {{ userFullName$ | async }}

+ +

Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer, här kommer du bland annat kunna diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.scss b/apps/mina-sidor-fa/src/app/pages/start/start.component.scss index 223e1ad..615973e 100644 --- a/apps/mina-sidor-fa/src/app/pages/start/start.component.scss +++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.scss @@ -1,2 +1,20 @@ +@import 'variables/colors'; +@import 'variables/gutters'; + .start { + &__image-wrapper { + position: relative; + margin-bottom: $digi--layout--gutter--l; + } + + &__heading { + position: absolute; + margin: 0; + bottom: $digi--layout--gutter--l; + left: calc(#{$digi--layout--gutter} * -1); + background-color: var(--digi--ui--color--complementary-alt); + color: var(--digi--typography--color--text--light); + padding: $digi--layout--gutter--s $digi--layout--gutter--l; + z-index: 1; + } } diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.scss index cba6a55..f18e31e 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.scss @@ -14,10 +14,6 @@ padding: 0 var(--digi--layout--gutter); height: $msfa__navigation-height; - @media (min-width: $digi--layout--breakpoint--m) { - height: $msfa__navigation-height-large; - } - &__logo-wrapper { height: 100%; display: flex; @@ -32,15 +28,6 @@ } } - &__logo { - height: $msfa__navigation-height / 2.5; - vertical-align: middle; - - @media (min-width: $digi--layout--breakpoint--m) { - height: $msfa__navigation-height-large / 2.5; - } - } - &__list { @include msfa__reset-list; display: flex; diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss index 744e435..5cc5d08 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss @@ -7,7 +7,7 @@ display: flex; flex-direction: column; position: sticky; - top: $msfa__navigation-height-large; + top: $msfa__navigation-height; &__list { @include msfa__reset-list; diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss index 2b1075a..daeff68 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss @@ -12,10 +12,6 @@ 'sidebar content' 'footer footer'; - // @media (min-width: $digi--layout--breakpoint--m) { - // grid-template-rows: $msfa__navigation-height-large 1fr auto; - // } - &__header { grid-area: header; position: sticky; @@ -32,12 +28,12 @@ &__content { grid-area: content; max-width: $digi--layout--breakpoint--l; - padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl; + padding: $digi--layout--gutter--l $digi--layout--gutter--l $digi--layout--gutter--xxl; } &__breadcrumbs { display: block; - margin-bottom: var(--digi--layout--gutter); + margin-bottom: $digi--layout--gutter; } &__footer { diff --git a/apps/mina-sidor-fa/src/assets/images/start_1000w.jpg b/apps/mina-sidor-fa/src/assets/images/start_1000w.jpg new file mode 100644 index 0000000..0583195 Binary files /dev/null and b/apps/mina-sidor-fa/src/assets/images/start_1000w.jpg differ diff --git a/apps/mina-sidor-fa/src/assets/images/start_600w.jpg b/apps/mina-sidor-fa/src/assets/images/start_600w.jpg new file mode 100644 index 0000000..4d0792d Binary files /dev/null and b/apps/mina-sidor-fa/src/assets/images/start_600w.jpg differ diff --git a/apps/mina-sidor-fa/src/assets/images/start_800w.jpg b/apps/mina-sidor-fa/src/assets/images/start_800w.jpg new file mode 100644 index 0000000..bacc062 Binary files /dev/null and b/apps/mina-sidor-fa/src/assets/images/start_800w.jpg differ diff --git a/apps/mina-sidor-fa/src/assets/images/start_original.jpg b/apps/mina-sidor-fa/src/assets/images/start_original.jpg new file mode 100644 index 0000000..4050e21 Binary files /dev/null and b/apps/mina-sidor-fa/src/assets/images/start_original.jpg differ diff --git a/apps/mina-sidor-fa/src/styles/variables/_navigation.scss b/apps/mina-sidor-fa/src/styles/variables/_navigation.scss index a7f850e..bd883a9 100644 --- a/apps/mina-sidor-fa/src/styles/variables/_navigation.scss +++ b/apps/mina-sidor-fa/src/styles/variables/_navigation.scss @@ -1,2 +1 @@ -$msfa__navigation-height: 2.5rem; -$msfa__navigation-height-large: 4rem; +$msfa__navigation-height: 4rem;