From b506fd9e33bab0f7c20c869bc737f5d6caaace5c Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Wed, 30 Oct 2019 20:29:03 +0100
Subject: [PATCH] refs #16100 [fid_adlr] revision of viewport and containers
* fix home page
* fix default pages
---
themes/fid_adlr/scss/_customMixins.scss | 101 ++--
themes/fid_adlr/scss/_customVariables.scss | 15 +-
themes/fid_adlr/scss/compiled.scss | 619 +++++++++++++--------
themes/fid_adlr/templates/header.phtml | 39 +-
4 files changed, 491 insertions(+), 283 deletions(-)
diff --git a/themes/fid_adlr/scss/_customMixins.scss b/themes/fid_adlr/scss/_customMixins.scss
index 71f226d1f26..7a7acedabe6 100644
--- a/themes/fid_adlr/scss/_customMixins.scss
+++ b/themes/fid_adlr/scss/_customMixins.scss
@@ -1,4 +1,5 @@
// Custom Mixins for fid_adlr -- inherits from finc, which inherits from BS, which inherits from root
+// FIXME: DIE MIXINS ERSCHEINEN MIR UNNÖTIG KOMPLEX; Zum Teil werden Sie an anderer Stelle nochmal definiert -- bitte verschlanken und prüfen; Im Idealfall deckt ein Mixin einen Grund-Zustand/ein Grund-Element ab -- damit bleibt alles übersichtlicher
@mixin accordeon ($type) {
@include result-list-border($midnight-medium);
@@ -6,6 +7,7 @@
background-color: transparent;
color: $violet;
}
+
[data-toggle="collapse"]::before {
content: '\e927';
float: left;
@@ -17,43 +19,50 @@
padding-right: 10px;
}
}
+
[data-toggle="collapse"]::after {
content: unset;
}
+
.collapsed::before {
content: '\e92F';
float: left;
font-family: icomoon, sans-serif;
@if $type == 'get-it' {
- padding-left: 11px;
margin-left: -$get-it-button-offset-left;
+ padding-left: 11px;
} @else {
padding-right: 10px;
}
}
+
.collapsed::after {
content: unset;
}
+
.collapse,
.collapsing,
.facet {
border: 0;
}
- .checkbox, .facet {
+
+ .checkbox,
+ .facet {
border: 0;
//padding: 10px 15px;
padding: .75em 1em;
width: 100%;
}
+
.title {
- border: none;
+ border: 0;
color: $azure;
font-family: $font-family-monospace;
text-transform: uppercase;
}
}
-@mixin default-background{
+@mixin default-background {
background-image: url('../images/background-shape-small.png'); /* fallback */
background-image: url('../images/background-shape-small-mirrored.svg'), linear-gradient($midnight, $midnight); /* W3C */
background-position: 100% 20%;
@@ -102,6 +111,7 @@
display: inline-block;
margin-right: 2rem;
padding-top: 0;
+
&:active,
&:hover,
&:focus {
@@ -110,6 +120,7 @@
outline: 0;
text-decoration: none;
}
+
&.small {
font-size: 18px;
font-weight: bold;
@@ -146,11 +157,12 @@
@media screen and (max-width: $screen-md-max) {
height: 100%;
+ padding-top: $navbar-default-padding;
width: 9999px;
}
@media screen and (min-width: $screen-sm-min) {
- padding-top: $navbar-default-padding;
+ padding-top: $navbar-extended-padding;
}
@media screen and (min-width: $screen-lg-min) {
@@ -174,12 +186,14 @@
position: relative;
text-decoration: none;
transition: none !important;
+
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
font-size: $font-size-menu-sm;
left: calc(#{$logo-max-width} / 2);
letter-spacing: 2.87px;
line-height: em($font-size-menu-sm);
}
+
@media screen and (min-width: $mobile-navigation-menu-breakpoint + 1px) {
color: $black;
font-size: $font-size-menu-lg;
@@ -190,6 +204,7 @@
transition: none !important;
}
}
+
li {
line-height: $line-height-submenu;
list-style: none;
@@ -214,13 +229,16 @@
li {
background: transparent;
display: inline-block;
- > a, a:active, a:focus {
+ > a,
+ a:active,
+ a:focus {
background: transparent;
border: 0;
color: $black;
outline: none;
text-transform: uppercase;
}
+
&.active > a{
font-weight: bolder;
}
@@ -228,8 +246,7 @@
}
@mixin fixed-navbar-search {
- position: fixed;
- top: 0;
+
z-index: z-index(search affix, 0);
@media screen and (max-width: $screen-xs-max) {
@@ -249,7 +266,7 @@
top: $navbar-header-height;
width: 100%;
- // Make DD-Button and inputs full wide
+ // Make DD-Button and inputs full width
.sbox-dd .dropdown-toggle:not(.button-quickfilter-format) {
@include default-btn-font($font-family-monospace);
background: $azure;
@@ -280,12 +297,13 @@
background: transparent;
border: 0;
height: em($navbar-header-height-affix-sm);
- left: calc(#{$logo-max-width});
+ left: calc(#{$logo-max-width} + #{$navbar-extended-padding});
padding: 0;
+ position: relative;
.adv-srch-btn {
font-size: medium;
- left: 162px;
+ left: 189px;
position: absolute;
top: 71px;
}
@@ -322,34 +340,27 @@
}
}
- @media screen and (min-width: $screen-lg-min) {
- position: fixed;
- right: 35%;
- width: 40%;
- .sbox-dd-menu {
- width: 100%;
- }
- }
-
@media screen and (min-width: $screen-xl-min) {
- right: 35%;
+ left: calc(#{$logo-max-width} + 2 * #{$navbar-extended-padding});
}
.searchbox {
@media screen and (min-width: $screen-sm-min) {
width: $search-form-width-affix-sm;
}
+
@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
width: $search-form-width-affix-md;
}
+
@media screen and (min-width: $screen-lg-min) {
background: transparent;
height: $navbar-header-height-affix-sm;
- padding-left: 25px;
padding-right: 25px;
padding-top: 18px;
width: $search-form-width-affix-lg;
}
+
@media screen and (min-width: $screen-xl-min) {
max-width: $search-form-width-max;
width: $search-form-width-xl;
@@ -358,11 +369,13 @@
.searchForm {
width: 100%;
+
@media screen and (min-width: $screen-lg-min) {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: -webkit-box;
display: inline-flex;
+
.list-unstyled > li.quickfilter {
padding-top: calc(#{$search-filter-padding-top} + (#{$search-input-height-fixed} - #{$search-input-height-default}) / 2);
}
@@ -371,14 +384,17 @@
.searchForm_lookfor {
max-width: $search-form-width-max;
+
@media screen and (min-width: $screen-sm-min) {
height: $search-input-height-affix-sm;
width: $search-input-width-affix-sm;
}
+
@media screen and (min-width: $screen-md-min) {
height: $search-input-height-affix-md;
width: $search-input-width-affix-md;
}
+
@media screen and (min-width: $screen-lg-min) {
height: $search-input-height-affix-lg;
width: $search-input-width-affix-lg;
@@ -441,7 +457,7 @@
outline: none;
width: 100%;
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max){
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
width: em(126px);
}
@@ -462,20 +478,16 @@
font-weight: bold;
}
}
-
- a:hover, .dropdown-menu span.filter-option:hover {
-
- }
}
// Template to disable text selection highlighting
@mixin noselect {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
// SEARCH BOX MIXINS
@@ -492,30 +504,38 @@
font-family: $font-family-monospace;
font-size: $font-size-base;
font-weight: bolder;
+
@if $screen-border == 'mobile' {
height: 40px;
} @else {
height: $search-input-height-fixed;
}
+
letter-spacing: 2px;
+
@if $screen-border == 'mobile' {
line-height: 35px;
} @else {
line-height: 18px;
}
+
min-width: $search-filter-width-lg;
+
@if $screen-border != 'mobile' {
padding-left: 5px;
padding-top: $navbar-default-padding;
}
+
position: relative;
text-decoration: none;
text-transform: uppercase;
+
@if $screen-border == 'mobile' {
width: 118px;
} @else {
width: 120px;
}
+
@if $screen-border == 'mobile' {
.icon {
font-size: $imo-font-size-base;
@@ -524,7 +544,9 @@
position: absolute;
}
}
- &:hover, &:focus {
+
+ &:hover,
+ &:focus {
border-color: $white;
}
}
@@ -566,6 +588,7 @@
.nav.nav-tabs .dropdown-menu {
// show select for hidden filters as "tabs"
all: unset;
+
span:hover {
background: transparent;
}
@@ -580,17 +603,19 @@
@mixin search-filter-styles($is_collapsed, $is_mobile) {
@if $is_collapsed {
- input[type="radio"]{
+ input[type="radio"] {
box-sizing: border-box;
line-height: normal;
margin: 10px 0 0;
}
+
label {
font: $font-family-sans-serif;
min-width: 90%;
padding: .25em .5em;
vertical-align: middle;
}
+
.dropdown-menu {
border-radius: 0;
display: grid;
@@ -606,11 +631,13 @@
width: $search-input-width-affix-sm;
z-index: z-index(filter-dropdown, 0);
}
+
.filter-option {
display: block;
padding: 0 2.5px;
width: 100%;
}
+
} @else if $is_mobile == false {
display: table;
font-family: $font-family-monospace;
@@ -627,11 +654,11 @@
}
label {
+ @include search-filter-details(transparent, transparent, transparent, $font-family-monospace);
color: $white;
cursor: pointer;
text-align: center;
vertical-align: middle;
- @include search-filter-details(transparent, transparent, transparent, $font-family-monospace);
}
.filter-option {
@@ -654,7 +681,7 @@
border-right-color: $border-right-color;
border-top-color: $border-top-color;
color: $white;
- padding: 5px 5px 5px 5px;
+ padding: 5px;
&:hover,
&:focus {
diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index 6abca9a2113..20d478f6511 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -1,6 +1,8 @@
// Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root
// see Bootstrap's _variables.scss for default values
+// Fixme bitte bereinigen, was nicht gebraucht wird, raus!
+
// FONTS
// ubuntu-mono-regular - latin
@font-face {
@@ -287,12 +289,12 @@ $search-form-width-affix-sm: 100%;
$search-form-width-affix-md: 100%;
// ++ Height and width of the search box - LARGE DESKTOP
-$search-form-width-affix-lg: 600px;
+$search-form-width-affix-lg: 590px;
$search-form-width-home-lg: 1000px;
// ++ Height and width of the search box - EXTRA LARGE DESKTOP
$search-form-width-max: 1000px;
-$search-form-width-xl: 99%;
+$search-form-width-xl: 690px;
$search-form-width-home-xl: $search-form-width-home-lg;
// ++ Height and width of the default search input field
@@ -315,6 +317,7 @@ $search-filter-width-lg: 100px;
$search-panel-width-xs-md: 100%;
$search-toggle-padding-bottom-top: 40px;
$search-padding-sm-md: 40px;
+$seachbox-width-lg: 710px;
// ++ Height of textbox with adlr claim in header (home page)
$home-text-top-padding-xs: 100px;
@@ -326,10 +329,16 @@ $home-text-box-height-lg: 470px;
$home-text-bottom-padding-xs: 500px;
$home-text-bottom-padding-sm: 400px;
$home-text-bottom-padding-lg: 700px;
+$home-text-left-margin-sm: 25px;
$home-text-left-margin-lg: 0;
+$home-text-left-margin-xl: 50px;
$home-services-sub-headline-offset: 50px;
+//// FIXME TEST width
+$screen-lg-test: 1170px;
+//// Maximum designed body width
+$max-designed-body-width: 1926px;
//// Breadcrumbs
//$breadcrumb-bg: $brand-primary !default;
@@ -454,7 +463,7 @@ $z-index: (
}
// FUNCTIONS - END
-$screen-xl: 1450px !default;
+$screen-xl: 1600px !default; // FIXME EXPERIMENTAL
$screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default;
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index 38bb8e5bae5..2eda77643c6 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -66,8 +66,13 @@
// BODY
body {
background-color: $white;
- // set default to OPEN SANS
+ // set default font to OPEN SANS
font-family: $font-family-sans-serif;
+ // give central position
+ margin: 0 auto;
+ // Make sure, outer container doesn't spill over max designed content width
+ max-width: $max-designed-body-width;
+
overflow: hidden;
}
@@ -85,7 +90,7 @@ h5 {
// ++ h1
h1 {
font-size: em(63px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(4.2px);
line-height: em(69px);
}
@@ -93,7 +98,7 @@ h1 {
// ++ h2
h2 {
font-size: em(43px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(2.87px);
line-height: em(53px);
}
@@ -101,14 +106,14 @@ h2 {
// ++ h3
h3 {
font-size: em(30px);
- font-weight: bold;
+ font-weight: 700;
line-height: em(34px);
}
// ++ h4
h4 {
font-size: em(24px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(1px);
text-transform: uppercase;
}
@@ -116,7 +121,7 @@ h4 {
// ++ h5
h5 {
font-size: em(18px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(2px);
text-transform: uppercase;
}
@@ -132,10 +137,12 @@ h5 {
ul {
list-style-type: none;
padding-left: 0;
+
li {
color: $asphalt;
}
}
+
// ++ ol {}
// ++ li {}
// ++ dl {}
@@ -166,6 +173,7 @@ select {
height: 60px;
min-width: 100px;
}
+
// ++ textarea {}
input,
textarea {
@@ -177,6 +185,7 @@ form input:invalid, form textarea:invalid {
margin-right: 0;
}
+// FIXME -- ggf. UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen
.hidden-lg-only {
@media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
display: none !important;
@@ -204,9 +213,11 @@ a {
color: $black;
outline: none;
text-decoration: none;
+
&:focus {
outline: none;
}
+
&:hover {
text-decoration: none;
}
@@ -223,27 +234,33 @@ a {
.flex-box-20 {
flex-basis: $pagination-flexbox-basis-20-percent;
}
+
.flex-box-40 {
flex-basis: calc(2 * #{$pagination-flexbox-basis-20-percent});
}
+
.flex-box-60 {
flex-basis: calc(3 * #{$pagination-flexbox-basis-20-percent});
}
+
.flex-box-80 {
flex-basis: calc(4 * #{$pagination-flexbox-basis-20-percent});
}
+
.flex-column-default {
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
+
.flex-column-reverse {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
+
// Sizing - END
@@ -252,10 +269,9 @@ a {
.large-text {
font-size: em(24px);
line-height: em(45px);
-}
-
-.large-text.light {
- color: $asphalt;
+ &.light {
+ color: $asphalt;
+ }
}
.small-text {
@@ -264,6 +280,7 @@ a {
}
// FIXME: Check for more elegant way to apply colors
+// FIXME -- UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen -- die meisten Farben sollten korrekt ueber BS definierbar sein (primary, secondary ...) -- siehe customVariables.scss
.error-color {
color: $brand-danger;
}
@@ -317,6 +334,7 @@ a {
// ++ BUTTONS
.btn-lg {
@include large-btn;
+
&:hover,
&:focus {
outline: none;
@@ -336,10 +354,6 @@ a {
.btn-getitbox {
@include result-list-btn-getitbox;
padding: 17px;
-
- @media screen and (max-width: $screen-xs-max) {
-
- }
}
// ++ BUTTONS - END
@@ -348,20 +362,23 @@ a {
.icon {
min-width: 30px;
vertical-align: bottom;
+
@media screen and (max-width: $screen-md-max) {
font-size: $font-size-h3;
font-weight: 500;
min-width: 35px;
}
-}
-.icon.icon-settings {
- font-size: $font-size-large;
-}
-.btn-primary .icon {
- float: right;
- font-size: calc(#{$font-size-base} * 1.5);
+ &.icon-settings {
+ font-size: $font-size-large;
+ }
+
+ .btn-primary {
+ float: right;
+ font-size: calc(#{$font-size-base} * 1.5);
+ }
}
+
// ICONS - END
// ++ BRANDING (branding for origin source ids / specific facets and mega_collections etc.)
@@ -370,7 +387,7 @@ a {
color: transparent;
display: none;
font-size: 16px;
- font-weight: bold;
+ font-weight: 700;
line-height: 22px;
margin-left: .5em;
margin-top: 4px;
@@ -443,18 +460,18 @@ a {
.dropdown-menu-parent {
// needed for nested dropdown - hack for js of bootstrap 3
@extend .dropdown-menu;
+
@media screen and (max-width: $screen-xs-max) {
width: 100%;
- .searchForm {
+ // FIXME; Pruefen, ob form-control einfach aus dem phtml-Template entfernt werden könnte
+ .searchForm,
+ .searchForm .form-control {
max-width: $screen-md-max;
width: 100%;
- .form-control {
- max-width: $screen-md-max;
- width: 100%;
- }
}
}
}
+
// ++ DROPDOWNS - END
// ++ MODALS
@@ -467,7 +484,8 @@ header {
background-position: right top;
background-repeat: no-repeat;
- &.collapse:not(.in), &.collapsing {
+ &.collapse:not(.in),
+ &.collapsing {
display: block;
}
@@ -476,7 +494,8 @@ header {
}
@media screen and (max-width: $screen-md-max) {
- &.collapse:not(.in), &.collapsing {
+ &.collapse:not(.in),
+ &.collapsing {
min-height: $navbar-header-height;
}
}
@@ -494,125 +513,146 @@ header,
// FIXME: REMOVE, when 15639 has been merged to finc
width: auto;
- .menubar {
- @include noselect;
- box-sizing: border-box;
+ // override finc display block
+ // Fixme: Bitte in den "allgemeinen" Block verschieben, also, wo body, dropdown usw. definiert werden
+ .collapse.in {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: -webkit-box;
display: inline-flex;
- justify-content: flex-end;
- padding-right: 10px;
- width: 100%;
- z-index: z-index(menubar, 0);
+ }
+ .collapsing, &.collapsing {
+ transition-duration: $transition-duration !important;
+ transition: unset !important;
+ }
+}
- // ++++++ disable transitions for menu
- .collapsed, &.collapsed {
- transition: none !important;
- transition-delay: $transition-delay !important;
- transition-duration: $transition-duration !important;
- }
+// Fixme: Muss nicht geschachtelt werden, es gibt sie nur einmal
+.menubar {
+ @include noselect;
+ box-sizing: border-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: -webkit-box;
+ display: inline-flex;
+ justify-content: flex-end;
+ padding-right: 10px;
+ width: 100%;
+ z-index: z-index(menubar, 0);
+
+ // ++++++ disable transitions for menu
+ .collapsed,
+ &.collapsed {
+ transition: none !important;
+ transition-delay: $transition-delay !important;
+ transition-duration: $transition-duration !important;
+ }
+
+ .collapsing,
+ &.collapsing {
+ background: transparent;
+ height: auto !important;
+ transition: none !important;
+ transition-delay: $transition-delay !important;
+ transition-duration: $transition-duration !important;
+ }
+
+ .collapse,
+ &.collapse {
+ transition: none !important;
+ transition-delay: $transition-delay !important;
+ transition-duration: $transition-duration !important;
+ }
+
+ .collapse.in,
+ &.collapse.in {
+ transition: none !important;
+ transition-delay: $transition-delay !important;
+ transition-duration: $transition-duration !important;
+ }
+
+ .fill-flex {
+ flex-grow: 2;
+ flex-shrink: 1;
+ }
+}
- .collapsing, &.collapsing {
- background: transparent;
- height: auto !important;
- transition: none !important;
- transition-delay: $transition-delay !important;
- transition-duration: $transition-duration !important;
+#language-dropdown {
+ .dropdown-menu {
+ @include basic-dropdown-menu;
+ left: 10px;
+ min-width: 100px;
+
+ @media (max-width: $mobile-navigation-menu-breakpoint) {
+ @include shift-main-menu-entries-to-navigation-overlay;
}
- .collapse, &.collapse {
- transition: none !important;
- transition-delay: $transition-delay !important;
- transition-duration: $transition-duration !important;
+ @media (max-width: $screen-xs-max) {
+ top: calc(#{$navbar-header-height} + 6 * #{$line-height-submenu} + #{$content-top-padding} + #{$navbar-default-padding});
}
- .collapse.in, &.collapse.in {
- transition: none !important;
- transition-delay: $transition-delay !important;
- transition-duration: $transition-duration !important;
+ @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
+ top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + 8 * #{$navbar-default-padding});
+ .btn {
+ font-size: calc(#{$font-size-menu-sm} - 15px);
+ }
}
- .fill-flex {
- flex-grow: 2;
- flex-shrink: 1;
+ @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
+ border: 2px solid $asphalt;
+ left: 0;
+ letter-spacing: 2.87px;
+ top: 64px;
}
- .language {
- .dropdown-menu {
- @include basic-dropdown-menu;
- left: 10px;
- min-width: 100px;
- @media (max-width: $mobile-navigation-menu-breakpoint) {
- @include shift-main-menu-entries-to-navigation-overlay;
- top: calc(#{$navbar-header-height} + 6 * #{$line-height-submenu} + 2 * #{$content-top-padding});
- }
- @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
- left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
- top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + 8 * #{$navbar-default-padding});
- .btn {
- font-size: calc(#{$font-size-menu-sm} - 15px);
- }
- }
- @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
- border: 2px solid $asphalt;
- left: 0;
- letter-spacing: 2.87px;
- top: 64px;
- }
- li > a {
- line-height: $line-height-submenu;
- padding: 3px 5px;
- text-align: left;
- &:hover {
- background: initial;
- }
- @media (max-width: $mobile-navigation-menu-breakpoint) {
- padding: 0;
- }
- @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
- font-family: $font-family-monospace;
- font-size: $font-size-menu-lg;
- padding: 0 $navbar-extended-padding;
- }
- }
+
+ li > a {
+ line-height: $line-height-submenu;
+ padding: 3px 5px;
+ text-align: left;
+
+ &:hover {
+ background: initial;
}
- }
- .register .navbar-header-link {
+
@media (max-width: $mobile-navigation-menu-breakpoint) {
- @include shift-main-menu-entries-to-navigation-overlay;
- top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding});
- :hover {
- background: $seafoam;
- }
+ padding: 0;
}
- @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
- font-size: calc(#{$font-size-menu-sm} - 15px);
- left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
- top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + 8 * #{$navbar-default-padding});
+
+ @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
+ font-family: $font-family-monospace;
+ font-size: $font-size-menu-lg;
+ padding: 0 $navbar-extended-padding;
}
}
}
+}
- // override finc display block
- .collapse.in {
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: -webkit-box;
- display: inline-flex;
+.menubar #register-menu .navbar-header-link {
+ @media (max-width: $mobile-navigation-menu-breakpoint) {
+ @include shift-main-menu-entries-to-navigation-overlay;
}
- .collapsing, &.collapsing {
- transition-duration: $transition-duration !important;
- transition: unset !important;
+
+ @media (max-width: $screen-xs-max) {
+ top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding} + #{$navbar-default-padding});
+ }
+
+ @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ font-size: calc(#{$font-size-menu-sm} - 15px);
+ left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
+ top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + 9 * #{$navbar-default-padding});
}
}
.header-menu-collapse {
@extend .navbar-header;
+
@media (min-width: $screen-lg-min) {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: -webkit-box;
display: inline-flex;
+
&.collapse.in {
&#submenu {
position: absolute;
@@ -635,7 +675,8 @@ header,
}
}
- &.collapse.in, &.collapsing {
+ &.collapse.in,
+ &.collapsing {
.submenu-collapse {
@include navigation-overlay;
@media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
@@ -658,29 +699,35 @@ header,
}
//// Display different icons after open or close of submenues
-header.collapse.in .menubar .text-close, .dropdown.sbox-dd:not(.open) .text-close, .language:not(.open) .icon.icon-chevron-up {
+header.collapse.in .menubar .text-close,
+.dropdown.sbox-dd:not(.open) .text-close,
+.language:not(.open) .icon.icon-chevron-up {
display: none;
}
-header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dropdown.sbox-dd.open .text-open, .language.open .icon.icon-chevron-down {
+header.collapse:not(.in) .menubar .text-open,
+header.collapsing .text-open,
+.dropdown.sbox-dd.open .text-open,
+.language.open .icon.icon-chevron-down {
display: none;
}
#submenuToggler {
@media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
- min-width: 125px;
+ min-width: 100px;
}
}
.navbar-header {
flex-shrink: 0;
+
// position of navbar-brand Logo on top left
.navbar-brand {
border: 0;
left: 0;
outline: none;
position: absolute;
- top: 31px;
+ top: 31px; // Fixme: mglst Variable nutzen
z-index: z-index(navbar-brand, 1);
}
@@ -709,6 +756,7 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
display: inherit;
margin-right: 0;
z-index: z-index(navbar-header-link, 0);
+
@media screen and (min-width: $screen-lg-min) {
@include default-navbar-link-font;
}
@@ -734,12 +782,6 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
padding-top: $navbar-default-padding;
}
- // Logo position
- .navbar-brand {
- margin-left: $navbar-margin-left;
- z-index: z-index(navbar-brand, 0);
- }
-
// Menu toggler position
.navbar-toggle {
margin-right: em(5px);
@@ -767,9 +809,11 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
background-size: contain;
color: transparent;
+ margin-left: $navbar-margin-left;
+ max-width: $logo-max-width;
min-height: em(56px); // FIX for Safari + Android Stock Browser
min-width: 180px; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
- max-width: $logo-max-width;
+ z-index: z-index(navbar-brand, 0);
// 768px and up
@media screen and (min-width: $screen-sm-min) {
@@ -804,6 +848,7 @@ header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dro
// ++++ Logo and home link - END
// ++++++ basic default (non start page)
+// Fixme: Ueberlegen, ob es klüger wäre, die Startseite als "Ausnahme" zu nehmen. Also den body standardmäßig für alle Seiten zu definieren und nur die Startseite dann extra zu stylen
body:not(.template-name-home) {
header {
@media screen and (max-width: $screen-md-max) {
@@ -840,28 +885,44 @@ body:not(.template-name-home) {
@include fixed-navbar-search;
&.affix-top {
+ @media screen and (min-width: $screen-lg-min) {
+ position: relative;
+ }
+
.searchbox {
@media screen and (min-width: $screen-sm-min) {
background: $azure;
}
- @media screen and (min-width: $screen-lg-min) {
+
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-min + 50px){
+ background: transparent;
+ }
+
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max){
height: 130px;
+ width: $search-form-width-affix-lg;
}
- @media screen and (min-width: 1200px) and (max-width: 1250px) {
- background: transparent;
+
+ @media screen and (min-width: $screen-xl-min) {
+ height: 130px;
+ max-width: $search-form-width-max;
+ width: $search-form-width-xl;
}
}
}
}
+
// search (box) and elements in affix mode - END
}
}
// ++++++ basic default - END
// ++++ Start Page
+// FIXME: Bitte prüfen, ob es wirklich so komplex sein muss
.template-name-home {
.main {
@include default-background;
+
@media screen and (max-width: $screen-xs-max) {
background-image: url('../images/header-bg-xs.png');
background-position: 100% 0px;
@@ -926,10 +987,15 @@ body:not(.template-name-home) {
}
&.container {
- margin-left: 0;
padding-left: 0;
+
@media screen and (max-width: $screen-xs-max) {
+ // Add correct data for font-size, letter-spacing, lineheight, texttransform
+ @include default-headings-font(26px, 1.7px, 36px, none);
height: $home-text-box-height-xs;
+ margin-right: 5%;
+ margin-left: 0;
+ max-width: calc(#{$screen-xs-max} / 2);
padding-bottom: $home-text-bottom-padding-xs;
padding-top: $home-text-top-padding-xs;
.home-links {
@@ -938,51 +1004,37 @@ body:not(.template-name-home) {
}
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ // $font-size, $letter-spacing, $lineheight, $texttransform
+ @include default-headings-font(40px, 3.27px, 50px, none);
height: $home-text-box-height-sm;
+ margin-bottom: 70px;
+ margin-left: $home-text-left-margin-sm;
+ margin-top: calc(#{$navbar-header-height} + 50px);
padding-bottom: $home-text-bottom-padding-sm;
+ padding-left: 0;
+ padding-right: 0;
padding-top: $home-text-top-padding-sm;
+ text-align: left;
+ width: 85%;
+
.home-links {
display: none;
}
}
@media screen and (min-width: $screen-lg-min) {
+ // $font-size, $letter-spacing, $lineheight, $texttransform
+ @include default-headings-font(63px, 4.27px, 69px, none);
height: $home-text-box-height-lg;
- margin-left: $home-text-left-margin-lg;
+ margin-top: $navbar-header-height;
padding-bottom: $home-text-bottom-padding-lg;
padding-top: $home-text-top-padding-lg;
+ text-align: right;
}
- }
- @media screen and (max-width: $screen-xs-max) {
- // Add correct data for font-size, letter-spacing, lineheight, texttransform
- @include default-headings-font(26px, 1.7px, 36px, none);
- margin-right: 5%;
- max-width: calc(#{$screen-xs-max} / 2);
- }
-
- @media screen and (min-width: $screen-sm-min) {
- // $font-size, $letter-spacing, $lineheight, $texttransform
- @include default-headings-font(40px, 3.27px, 50px, none);
- margin-bottom: 70px;
- margin-right: 0;
- margin-top: calc(#{$navbar-header-height} + 50px);
- padding-left: 0;
- padding-right: 0;
- text-align: left;
- width: 85%;
- }
-
- @media screen and (min-width: $screen-md-min) {
- // $font-size, $letter-spacing, $lineheight, $texttransform
- width: 80%;
- }
-
- @media screen and (min-width: $screen-lg-min) {
- // $font-size, $letter-spacing, $lineheight, $texttransform
- @include default-headings-font(63px, 4.27px, 69px, none);
- margin-top: $navbar-header-height;
- text-align: right;
+ @media screen and (min-width: $screen-xl-min) {
+ margin-left: $home-text-left-margin-xl;
+ }
}
}
@@ -1006,14 +1058,40 @@ body:not(.template-name-home) {
@media screen and (min-width: $screen-lg-min) {
// $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
@include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
- left: 15%;
- top: $home-text-box-height-lg;
+ top: calc(#{$home-text-box-height-lg} - 100px); // -100px for links only on lg sreens
}
}
}
// ++++ Start Page - END
// ++++ SEARCH BOX
+
+// FIXME WORKAROUND: MUSS AM ENDE UMBENANNT WERDEN
+.search-wrapper.container {
+ // background: #def7fa !important;
+ background: transparent;
+ padding: 0;
+ position: fixed;
+ top: 0;
+
+ // center on screen for displays 1200px to 1600px (this is where icons switch to icons + text)
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
+ left: 0;
+ margin: 0 auto; // center the box on smaller than very large screens
+ right: 0;
+ width: $seachbox-width-lg; // width is required to center the box!
+ }
+
+ @media screen and (min-width: $screen-lg-test) {
+ max-width: 1284px;
+ min-width: 1170px;
+ }
+}
+
+.template-name-home .search-wrapper.container {
+ position: relative;
+}
+
.search.container {
background-color: transparent;
border: 0;
@@ -1064,8 +1142,8 @@ body:not(.template-name-home) {
}
@media screen and (min-width: $screen-xl-min) {
- padding: 55px 20px 55px 50px;
- width: $search-form-width-home-xl;
+ //padding: 55px 20px 55px 50px;
+ //width: $search-form-width-home-xl;
}
// Outer Box - END
}
@@ -1095,6 +1173,8 @@ body:not(.template-name-home) {
}
// ++++ SEARCH TABS
+// FIXME: Bitte default definieren und dann nur template-name-home als Sonderfall
+// FIXME: nav-tabs-/nav-tabs-open-Definitionen sortieren, auflösen und zuordnen
.nav-tabs {
border-bottom: 0;
}
@@ -1103,6 +1183,7 @@ body:not(.template-name-home) {
.nav-tabs {
border-bottom: 0;
margin-bottom: 30px;
+
@media screen and (max-width: $screen-xs-max) {
// parameter $is_collapsed, $is_mobile
@include search-filter-styles(false, true);
@@ -1112,6 +1193,7 @@ body:not(.template-name-home) {
@include search-filter-styles(true, true);
}
}
+
@media screen and (min-width: $screen-sm-min) {
// parameter $is_collapsed, $is_mobile
@include search-filter-styles(false, false);
@@ -1120,7 +1202,7 @@ body:not(.template-name-home) {
}
body:not(.template-name-home) {
-
+ // FIXME: vereinheitlichen
.nav-tabs {
border-bottom: 0;
margin-bottom: 30px;
@@ -1161,9 +1243,7 @@ input.searchForm_lookfor {
&:placeholder-shown {
color: $white;
}
-}
-.searchForm_lookfor {
@include default-border-radius;
background-color: transparent;
height: $search-input-height-fixed;
@@ -1178,13 +1258,14 @@ input.searchForm_lookfor {
width: $search-input-width-lg;
}
+ // Fixme: Ueberlegen, ob es sinnvoll ist, form-control zu entfernen
&.form-control {
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
max-width: unset;
width: $search-input-width-sm;
}
- @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max){
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
max-width: unset;
width: $search-input-width-md;
}
@@ -1195,6 +1276,7 @@ input.searchForm_lookfor {
}
}
}
+
// ++++++ Search input field - END
// ++++++ Quick filter
@@ -1216,6 +1298,7 @@ input.searchForm_lookfor {
text-decoration: underline;
}
}
+
// ++++++ Quick filter - END
.searchForm .list-unstyled {
@@ -1238,7 +1321,8 @@ input.searchForm_lookfor {
// ++++++ Standard Search Button - END
- &.quickfilter { // gear within search input
+ &.quickfilter {
+ // gear within search input
height: $search-input-height-fixed;
margin-left: -3em;
padding-top: 12px;
@@ -1272,8 +1356,7 @@ input.searchForm_lookfor {
&:active,
&:focus,
- &:hover
- {
+ &:hover {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
@@ -1290,6 +1373,7 @@ input.searchForm_lookfor {
left: -180px;
padding: 5px;
top: 84px;
+
@media screen and (max-width: $screen-md-max) {
top: 80px;
}
@@ -1310,6 +1394,7 @@ input.searchForm_lookfor {
color: $white;
display: inline-block;
text-decoration: underline;
+
@media screen and (min-width: $screen-sm-min) {
margin-top: 1em;
}
@@ -1322,6 +1407,7 @@ input.searchForm_lookfor {
font-size: 16px;
}
}
+
// ++++++ Adv. Search Link - END
// ********************************************************
@@ -1404,12 +1490,13 @@ input.searchForm_lookfor {
.search-controls {
font-family: $font-family-monospace;
+
&.hidden-lg {
form {
min-width: 100%;
}
select {
- font-size: calc(#{$font-size-base} * 0.9);
+ font-size: calc(#{$font-size-base} * .9);
font-weight: 600;
text-transform: uppercase;
}
@@ -1421,10 +1508,12 @@ input.searchForm_lookfor {
font-family: $font-family-sans-serif;
max-width: unset;
padding-right: 20px;
+
&.hidden-xs {
font-weight: 600;
}
}
+
label {
font-weight: 700;
letter-spacing: 1.5px;
@@ -1432,6 +1521,7 @@ input.searchForm_lookfor {
position: absolute;
text-transform: uppercase;
}
+
.limit {
@media screen and (min-width: $screen-sm-min) {
margin-right: 30px;
@@ -1444,42 +1534,49 @@ input.searchForm_lookfor {
label {
padding-top: 6px;
}
+
select {
min-width: 10em;
}
}
+
.sort {
select {
max-width: unset;
}
}
- .mailsave {
- span {
- margin-left: 1em;
- @media screen and (min-width: $screen-sm-min) {
- position: relative;
- top: 15px;
- }
+}
+
+.mailsave {
+ span {
+ margin-left: 1em;
+ @media screen and (min-width: $screen-sm-min) {
+ position: relative;
+ top: 15px;
}
}
}
.result {
border-bottom: 3px solid $midnight-medium;
+
.format {
background-color: $white;
color: $asphalt;
}
+
@media screen and (max-width: $screen-xs-max) {
a {
text-decoration: none;
}
}
+
.title {
font-family: $font-family-monospace;
font-size: 24px;
- font-weight: bold;
+ font-weight: 700;
}
+
@media screen and (min-width: $screen-sm-min) {
&:first-of-type {
border-top: 3px solid $midnight-medium;
@@ -1513,7 +1610,6 @@ input.searchForm_lookfor {
}
}
-
.result:nth-of-type(2n) {
background-color: transparent;
}
@@ -1522,10 +1618,13 @@ input.searchForm_lookfor {
background-color: $midnight-medium;
}
+// ++ FACETTES, SIDEBAR
+
.sidebar {
hyphens: auto; // avoid ugly linebreaks with overlong words
// set colors for selected filters in sidebar
- .active-filters, .facet-group {
+ .active-filters,
+ .facet-group {
.facet {
-webkit-hyphens: auto;
-moz-hyphens: auto;
@@ -1533,12 +1632,15 @@ input.searchForm_lookfor {
-o-hyphens: auto;
hyphens: auto;
word-break: break-all; // fallback for hyphens: auto (Chrome on Desktop and bug on Mozilla for capitalized words)
+
&:hover {
background-color: transparent;
}
+
&.all-filters {
- border-bottom: 2px solid $violet;
+ border-bottom: 2px solid $violet;
}
+
.date-fields {
label {
font-family: $font-family-monospace;
@@ -1546,6 +1648,7 @@ input.searchForm_lookfor {
text-transform: uppercase;
}
}
+
.text{
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -1553,6 +1656,7 @@ input.searchForm_lookfor {
display: flex;
-ms-word-break: break-word;
word-break: break-word;
+
& > span {
display: inline-block;
}
@@ -1567,6 +1671,7 @@ input.searchForm_lookfor {
word-break: break-word;
}
}
+
.active-filters {
@include result-list-border($violet !important);
margin-top: 1em;
@@ -1577,7 +1682,7 @@ input.searchForm_lookfor {
}
.btn-default {
font-family: $font-family-monospace;
- font-weight: bold;
+ font-weight: 700;
text-transform: uppercase;
&:hover {
border-color: $iron;
@@ -1598,7 +1703,7 @@ input.searchForm_lookfor {
font-family: "Ubuntu Mono",Consolas,"Liberation Mono",Courier,monospace;
text-transform: uppercase;
padding: 0.75em 1em;
- font-weight: bold;
+ font-weight: 700;
line-height: 1.5rem;
display: flex
}
@@ -1655,13 +1760,16 @@ input.searchForm_lookfor {
.slider-container {
margin-bottom: 1.5em;
padding-right: ($content-l-r-padding / 2);
+
.slider-handle,
.slider-handle.round {
border-radius: 100%;
}
+
.slider-track {
background-color: $midnight-medium;
}
+
.slider-selection {
background-color: $azure;
}
@@ -1681,14 +1789,20 @@ input.searchForm_lookfor {
}
}
// DATE-RANGE slider - END
+// ++ FACETTES, SIDEBAR - END
// ++ SEARCH-RESULTS PAGE - END
+// FIXME: Bitte verschieben: Vom Allgemeinen zum Spezifischen; Am Besten direkt unter "breadcrumbs", daran die Sonderformen anschließen: Startseite, Search Results, Record View ...
+
// ++ GENERAL CONTENT PAGE
.main {
- .container {
+ .container,
+ .footer {
background: transparent;
- border: 0;
+ max-width: 1284px;
+ // FIXME EXPERIMENTAL width: 70%;
}
+
&.collapsing {
height: 0;
min-height: 0;
@@ -1730,7 +1844,7 @@ input.searchForm_lookfor {
color: $azure;
display: block;
font-family: $font-family-monospace;
- font-weight: bold;
+ font-weight: 700;
line-height: 1.5rem;
padding: .75em 1em;
text-align: inherit;
@@ -1759,6 +1873,7 @@ input.searchForm_lookfor {
// ++ GENERAL CONTENT PAGE - END
// ++ DETAILS/RECORD VIEW PAGE
+// FIXME: Table definitions bitte in den ganz allgemeinen Teil, wo auf Forms usw. definiert werden, Schachtelung weitgehend unnötig
.table {
border: 0;
& tr {
@@ -1786,16 +1901,24 @@ input.searchForm_lookfor {
}
.tab-content {
border: 0;
+
& > .active {
background-color: transparent;
}
+
+ // FIXME: Bitte als Sonderfall unter Table definieren , also
+ // FIXME: .table {
+ // FIXME: .tab-pane & {
+ // FIXME: color: $black; usw.
.tab-pane {
a {
color: $black;
}
+
.table {
tr {
border-bottom: 2px solid $midnight-medium;
+
@media screen and (min-width: $screen-lg-min) {
&:first-of-type {
border-top: 0;
@@ -1809,54 +1932,69 @@ input.searchForm_lookfor {
}
}
}
+
.toolbar-menu {
position: relative;
+
.dropdown-menu {
+ margin-left: -140px;
padding-left: 12px;
padding-right: 12px;
- margin-left: -140px;
}
}
+
.title-toolbar {
+ // FIXME: BITTE ALS SONDERFALL unter H3 definieren
h3 {
font-size: 24px;
}
& > .toolbar-details {
padding-top: 12px;
+ // FIXME: SCHACHTELUNG NOETIG?
& > .toolbar-menu {
padding-top: 26px;
}
}
}
+
+// FIXME: Bitte nach oben in den allgemeinen Teil bei UL als Sonderfall definieren
.openurls {
- ul {
- li {
- a {
- color: $asphalt;
- &:hover {
- color: #00359b;
- }
+ ul li {
+ a {
+ color: $asphalt;
+ &:hover {
+ color: #00359b;
}
}
}
}
+
+// FIXME: Bitte nach oben in den allgemeinen Teil bei UL als Sonderfall definieren
.worldcat .openurls {
ul {
padding-left: 1em;
}
}
+
+// FIXME: IST DER div NOETIG?
div[id^="side-panel-"] {
@include accordeon(false);
}
+
+// FIXME: IST DER div NOETIG?
div[id^="side-panel-links"] {
@include accordeon('get-it');
}
+
+// FIXME: IST DER div NOETIG?
div[class$="-tab"] {
+
.media-body {
strong {
color: $asphalt;
}
}
+
.media-left {
padding-right: 88px;
}
@@ -1893,7 +2031,9 @@ div[class$="-tab"] {
color: $white;
word-break: break-all;
word-wrap: break-word;
- &:active, &:focus, &:hover {
+ &:active,
+ &:focus,
+ &:hover {
color: $white;
text-decoration: none;
}
@@ -1903,16 +2043,20 @@ div[class$="-tab"] {
margin-left: -$get-it-link-offset-left;
padding-right: 5px;
vertical-align: unset;
+
@media screen and (max-width: $screen-md-max) {
font-size: $font-size-base;
}
}
}
+
.pda-button {
margin-bottom: 2em;
}
+
#side-panel-links-amber {
@include result-list-border($amber);
+
button {
background-color: $amber;
color: $midnight;
@@ -1921,6 +2065,7 @@ div[class$="-tab"] {
}
#side-panel-links-azure {
@include result-list-border($azure);
+
button {
background-color: $azure;
color: $midnight;
@@ -1936,16 +2081,18 @@ div[class$="-tab"] {
//
// Pagination (multiple pages)
// --------------------------------------------------
-ul.pagination {
+// FIXME: KOMPLEXITÄT NOETIG?
+.pagination {
display: flex;
font-family: $font-family-monospace;
- font-weight: bold;
+ font-weight: 700;
letter-spacing: 2px;
margin: 0;
text-transform: uppercase;
> li {
display: inline; // Remove list-style and block-level defaults
+
> a,
> span {
border: 0;
@@ -1998,9 +2145,11 @@ ul.pagination {
.page-next {
display: flex;
flex-direction: row-reverse;
+
.icon {
font-size: 30px;
}
+
> a {
margin-top: 15px;
}
@@ -2008,6 +2157,7 @@ ul.pagination {
.page-prev {
margin-top: 10px;
+
.icon {
font-size: 40px;
}
@@ -2028,6 +2178,7 @@ ul.pagination {
h1, h3 {
color: $azure;
@media screen and (max-width: $screen-xs-max) {
+ font-size: 26px;
letter-spacing: 1.7px;
line-height: 50px;
padding-bottom: 10px;
@@ -2102,7 +2253,7 @@ ul.pagination {
span {
// font-family: $font-family-monospace;
font-size: $font-size-base;
- font-weight: bold;
+ font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@@ -2124,7 +2275,8 @@ ul.pagination {
font-family: $font-family-sans-serif;
font-size: $font-size-large;
line-height: 45px;
- @media screen and (max-width: $screen-xs-max) {
+ @media screen and (max-width: $screen-sm-max) {
+ font-size: $font-size-base;
margin-top: 50px;
}
}
@@ -2206,55 +2358,62 @@ ul.pagination {
// +++++ Footer - START
// styling follows mobile first principles
-footer {
+footer,
+.main footer {
// general footer styles
all: inherit;
- color: white;
+ background-image: url('../images/footer-dummy-background.png');
background-repeat: no-repeat;
background-size: cover;
- background-image: url('../images/footer-dummy-background.png');
- a:hover, a:link, a:active, a:focus, a:visited {
- color: white;
+ a:hover,
+ a:link,
+ a:active,
+ a:focus,
+ a:visited {
+ color: $white;
}
#footer-links {
- font-family: "Ubuntu Mono";
+ font-family: $font-family-monospace;
font-size: em(18px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(2px);
line-height: em(42px);
text-transform: uppercase;
}
+
#footer-links ul {
list-style: none;
padding-left: 0;
}
#footer-contact-wrapper {
- background-color:$azure;
+ background-color: $azure;
+ color: $white;
}
#footer-contact div:first-child {
- font-family: "Ubuntu Mono";
+ font-family: $font-family-monospace;
font-size: em(20px);
- font-weight: bold;
+ font-weight: 700;
letter-spacing: em(0.8px);
line-height: em(20px);
}
#footer-contact div:nth-child(2) {
- font-family: "Open Sans";
+ font-family: $font-family-sans-serif;
font-size: em(18px);
line-height: em(33px);
}
#footer-contact .form {
- font-weight: bold;
+ font-weight: 700;
}
.footer-indent {
- margin: 35px 15px 25px 15px;
+ color: $white;
+ margin: 35px 15px 25px;
}
.logo-footer {
@@ -2262,38 +2421,43 @@ footer {
}
#footer-logos {
- font-family: "Open Sans";
+ font-family: $font-family-sans-serif;
font-size: em(14px);
line-height: em(19px);
}
#footer-copyright {
- font-family: "Open Sans";
+ font-family: $font-family-sans-serif;
font-size: em(16px);
line-height: em(22px);
}
// Small devices Tablets (<768px)
+ // FIXME: bei max-width wenn mgl. immer einen der vorgegebenen ...-max-Breakpoints nehmen
@media (max-width: $screen-xs-max) {
+ background-position-y: 60px;
+
#footer-contact {
margin-left: 20px;
margin-right: 20px;
}
+
#footer-contact-wrapper {
- padding: 35px 15px 20px 15px;
+ padding: 35px 15px 20px;
}
- background-position-y: 60px;
}
// Small devices Tablets (≥768px) .col-sm-
@media (min-width: $screen-sm-min) {
background-size: calc(100%/2 + #{$container-sm}/4) 100%;
+
#footer-links {
margin-top: 50px;
}
+
#footer-contact-wrapper {
- margin-top: 50px;
margin-right: 25px;
+ margin-top: 50px;
padding: 35px;
}
}
@@ -2308,7 +2472,7 @@ footer {
}
#footer-contact div:first-child {
font-size: em(30px);
- font-weight: bold;
+ font-weight: 700;
line-height: em(34px);
}
#footer-contact-wrapper {
@@ -2333,4 +2497,9 @@ footer {
padding: 12px;
}
+// FIXME WORKAROUND
+#main-navigation {
+ max-width: $max-designed-body-width;
+}
+
@import 'customForms';
\ No newline at end of file
diff --git a/themes/fid_adlr/templates/header.phtml b/themes/fid_adlr/templates/header.phtml
index d5c58f87892..cc87564c7ba 100644
--- a/themes/fid_adlr/templates/header.phtml
+++ b/themes/fid_adlr/templates/header.phtml
@@ -3,7 +3,7 @@
<?php /* This nav element is the sticky element in the header
- use affix and not navbar-fixed-top!
- affix is applied to ALL .navbar elements via JS in layout.phtml - CK */ ?>
-<?php $data_offset_top_affix = 104 ?>
+<?php $data_offset_top_affix = 85 ?>
<div role="navigation" class="banner container navbar affix-top" id="main-navigation" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>">
<!--div role="navigation" class="banner container navbar affix" id="main-navigation" -->
<!-- fid_adlr: navigation -->
@@ -192,25 +192,28 @@
<!-- fid_adlr: navigation - END -->
<?php /* adlr-specific header text on home page - END */ ?>
- <?php if ($this->layout()->searchbox !== false): ?>
- <div class="search container navbar collapse in affix-top" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>" id="searchbox">
- <div class="dropdown sbox-dd">
- <?php /* no data-toggle: .open dropdown-menu of sbox manually to prevent interdependence-bug with dropdown quickfilter(s) within sbox - RL */ ?>
- <button class="btn btn-primary dropdown-toggle" type="button" id="search-main-dropdown">
- <span class="text-open"><?= $this->transEsc("Open Search") ?><span class="icon icon-chevron-down"></span></span>
- <span class="text-close"><?= $this->transEsc("Close Search") ?><span
- class="icon icon-chevron-up"></span></span>
- </button>
- <ul class="dropdown-menu-parent sbox-dd-menu">
- <li>
- <nav class="nav searchbox hidden-print">
- <?= $this->layout()->searchbox ?>
- </nav>
- </li>
- </ul>
+
+ <?php if ($this->layout()->searchbox !== false): ?>
+ <div class="search-wrapper container">
+ <div id="searchbox" class="search container navbar collapse in affix-top" data-spy="affix" data-offset-top="<?= $data_offset_top_affix ?>">
+ <div class="dropdown sbox-dd">
+ <?php /* no data-toggle: .open dropdown-menu of sbox manually to prevent interdependence-bug with dropdown quickfilter(s) within sbox - RL */ ?>
+ <button class="btn btn-primary dropdown-toggle" type="button" id="search-main-dropdown">
+ <span class="text-open"><?= $this->transEsc("Open Search") ?><span class="icon icon-chevron-down"></span></span>
+ <span class="text-close"><?= $this->transEsc("Close Search") ?><span
+ class="icon icon-chevron-up"></span></span>
+ </button>
+ <ul class="dropdown-menu-parent sbox-dd-menu">
+ <li>
+ <nav class="nav searchbox hidden-print">
+ <?= $this->layout()->searchbox ?>
+ </nav>
+ </li>
+ </ul>
+ </div>
</div>
</div>
- <?php endif; ?>
+ <?php endif; ?>
</div>
<script type="text/javascript">
--
GitLab