Add large footer
Change-Id: I021b7c3b3adc2dbcc8d907a0182e833084eb57a8
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index c245cd9..d5b646d 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -32,12 +32,12 @@
}
html {
- height: 100%;
+ height: 100vh;
}
body {
position: relative;
- min-height: 100%;
+ min-height: 100vh;
font-size: 12pt;
margin: 0;
padding: 0;
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 244d1fe..2873ec7 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -18,6 +18,7 @@
$ids-pink-2: rgb(250, 243, 222); // Lexik
$black: #333;
+$darker-black: rgb(20,20,20); // official footer
/**
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
index d0aafd5..9dd307d 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -19,3 +19,4 @@
$right-distance: $standard-margin;
$right-view-distance: $standard-margin / 2;
$logo-left-distance: 230px;
+$footer-height: 100pt;
\ No newline at end of file
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 8c2675c..76f2846 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -7,15 +7,37 @@
footer {
background-color: $dark-grey;
position: absolute;
+
bottom: 0;
padding-bottom: 2px;
font-size: 70%;
width: 100%;
text-align: right;
+ display: flex;
+ align-items: center;
+ height: $footer-height;
+
+ nav {
+ margin-left: $button-width;
+ padding: $item-padding;
+ text-align: left;
+ flex-grow: 2;
+ a {
+ white-space: nowrap;
+ }
+ }
+
+ div.logos {
+ font-size: 0;
+ flex-grow: 1;
+ }
+
+
a {
+ font-size: 10pt;
&:link {
- margin: 0 .5em;
+ // margin: 0 .5em;
color: $light-grey;
}
&:visited {
@@ -29,10 +51,34 @@
content: none
}
}
+
span.separator {
&:after {
- content: "-";
- color: $light-grey;
+ font-size: bold;
+ content: " | ";
+ color: $dark-orange;
}
}
}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+ margin-right: $standard-margin;
+}
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+ display: inline-block;
+ width: (631 / 30) + em;
+ height: (200 / 30) + em;
+ background-image: url('#{$img-path}/ids-institute-for-the-german-language-white.svg');
+}
+
+aside.active ~ footer {
+ padding-left: $logo-left-distance;
+ transition: all .3s ease-in-out;
+}
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 40f42de..47adb78 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -23,40 +23,6 @@
}
/**
- * Logo table of the front page
- */
-#logos {
- position: relative;
- text-align: right;
- font-size: 85%;
- right: 0;
- width: 100%;
- margin-left: ($standard-margin / 2);
- padding-left: 60%;
-
- > div {
- border-top: 26px solid $dark-orange;
- padding-right: 2em;
- }
- p {
- text-align: left;
- display: inline-block;
- }
-}
-
-
-/**
- * Logo: Institute for German Language
- */
-#ids-logo {
- display: block;
- width: (631 / 30) + em;
- height: (200 / 30) + em;
- background-image: url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
-}
-
-
-/**
* Logo: KorAP
*/
h1 {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 1c1f5e0..85182dc 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -22,7 +22,7 @@
main {
- padding-bottom: 20pt;
+ padding-bottom: $footer-height;
margin: {
left: $standard-margin;
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index a03f107..910d1eb 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -205,6 +205,10 @@
main.page {
margin-right: 20px;
}
+
+ footer {
+ padding-left: 0 !important;
+ }
}