+
+
+
-
-
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index e3da0b86..974a8d0f 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -1,7 +1,9 @@
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
-.skillbox {
+.layout {
+ $footer-height: 287px;
+
margin: 0 auto;
width: 100%;
/*
@@ -12,17 +14,17 @@
@supports (display: grid) {
display: grid;
}
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto 1fr auto;
+ grid-template-areas: "h" "c" "f";
min-height: 100vh;
grid-auto-rows: 1fr;
- grid-template-areas: "h" "c";
- padding-bottom: 50px;
+
&--show-filter {
- grid-template-rows: auto auto 1fr;
- -ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
- grid-template-areas: "h" "." "c";
+ grid-template-rows: auto auto 1fr $footer-height;
+ -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
+ grid-template-areas: "h" "." "c" "f";
}
/*
@@ -48,6 +50,5 @@
&__footer {
grid-area: f;
- display: none;
}
}
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 0a3d80f3..1df1b9eb 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -117,6 +117,16 @@
font-size: toRem(16px);
}
+@mixin aside-text {
+ @include regular-text;
+ font-size: toRem(14px);
+}
+
+@mixin aside-with-cheese {
+ @include aside-text;
+ font-weight: 600;
+}
+
@mixin meta-title {
color: $color-silver-dark;
font-size: toRem(36px);
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index ecfe5766..2f6e5e7b 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -159,7 +159,6 @@
}
.question {
-
$question: &;
&--error #{$question}__input {
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index d8a3f2a4..dbc9d725 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -75,3 +75,5 @@ $default-heading-line-height: 1.2;
// popover
$popover-default-bottom: -110px;
+
+$footer-width: 800px;