diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index dd508f3e0cc9a45b333c898ab5252c1e4ff9c0a9..2adc690f6ddb850060706867a46a3085d765b21d 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -334,9 +334,7 @@ $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;
+$screen-lg-wrapper-min: 1170px;
//// Maximum designed body width
$max-designed-body-width: 1926px;
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index c1d9befc31ad4d4eb7f7d55597faeba14010c61d..ce9cdfad9a92d301563594f38c317e4737c2568c 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -97,17 +97,41 @@ h1 {
// ++ h2
h2 {
- font-size: em(43px);
+ font-size: em(30px);
font-weight: 700;
letter-spacing: em(2.87px);
- line-height: em(53px);
+ line-height: em(30px);
+
+ @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ font-size: em(30px);
+ line-height: em(30px);
+ }
+
+ @media (min-width: $screen-lg-min) {
+ font-size: em(40px);
+ line-height: em(50px);
+ }
}
// ++ h3
h3 {
- font-size: em(30px);
+ font-size: em(24px);
font-weight: 700;
- line-height: em(34px);
+ line-height: em(24px);
+
+ @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ font-size: em(28px);
+ line-height: em(28px);
+ }
+
+ @media (min-width: $screen-lg-min) {
+ font-size: em(32px);
+ line-height: em(30px);
+ }
+
+ .title-toolbar & {
+ font-size: 24px;
+ }
}
// ++ h4
@@ -540,6 +564,11 @@ header,
width: 100%;
z-index: z-index(menubar, 0);
+ @media screen and (max-width: $screen-xs-max) {
+ background: $white;
+ padding-right: 0;
+ }
+
// ++++++ disable transitions for menu
.collapsed,
&.collapsed {
@@ -588,7 +617,7 @@ header,
}
@media (max-width: $screen-xs-max) {
- top: calc(#{$navbar-header-height} + 6 * #{$line-height-submenu} + #{$content-top-padding} + #{$navbar-default-padding});
+ top: calc(#{$navbar-header-height} + 6 * #{$line-height-submenu} + #{$content-top-padding});
}
@media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
@@ -634,7 +663,7 @@ header,
}
@media (max-width: $screen-xs-max) {
- top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding} + #{$navbar-default-padding});
+ top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding});
}
@media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
@@ -767,7 +796,7 @@ header.collapsing .text-open,
width: 100%;
z-index: z-index(banner, 0);
- @media screen and (max-width: $screen-xs-min) {
+ @media screen and (max-width: $screen-xs-max) {
margin-left: 0;
margin-right: 0;
}
@@ -785,11 +814,11 @@ header.collapsing .text-open,
// Menu toggler position
.navbar-toggle {
margin-right: em(5px);
- padding-left: em(15px);
- @media screen and (min-width: $screen-sm-min) {
+ padding-left: em(10px);
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
padding-left: em(25px);
}
- @media screen and (min-width: $screen-lg-min) {
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
padding-left: em(10px);
}
@media screen and (min-width: $screen-xl-min) {
@@ -809,7 +838,7 @@ header.collapsing .text-open,
background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
background-size: contain;
color: transparent;
- margin-left: $navbar-margin-left;
+ margin-left: calc(#{$navbar-margin-left} - 10px);
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
@@ -823,6 +852,7 @@ header.collapsing .text-open,
background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
background-size: contain;
display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
+ margin-left: $navbar-margin-left;
}
// 992px and up
@@ -953,9 +983,14 @@ body:not(.template-name-home) {
.affix-top {
position: relative; // ignore affix header on start page
.menubar {
+ padding-right: 10px;
+
+ @media screen and (max-width: $screen-xs-max) {
+ padding-right: 0;
+ }
+
@media screen and (max-width: $screen-md-max) {
background: $white;
- padding-right: 10px;
position: fixed; // but not for mobile devices
}
}
@@ -965,7 +1000,6 @@ body:not(.template-name-home) {
.menubar {
@media screen and (max-width: $screen-md-max) {
background: $white;
- padding-right: 10px;
position: fixed; // but not for mobile devices
}
}
@@ -1082,7 +1116,7 @@ body:not(.template-name-home) {
width: $seachbox-width-lg; // width is required to center the box!
}
- @media screen and (min-width: $screen-lg-test) {
+ @media screen and (min-width: $screen-lg-wrapper-min) {
max-width: 1284px;
min-width: 1170px;
}
@@ -1370,7 +1404,7 @@ input.searchForm_lookfor {
@include basic-dropdown-menu;
// parameter $is_collapsed, $is_mobile
@include search-filter-styles(true, false); // gear within search text input
- left: -180px;
+ left: -220px;
padding: 5px;
top: 84px;
@@ -1582,6 +1616,10 @@ input.searchForm_lookfor {
border-top: 3px solid $midnight-medium;
}
}
+
+ .record-icon {
+ padding-right: 30px;
+ }
}
.result-getitbox {
@@ -1598,6 +1636,21 @@ input.searchForm_lookfor {
}
}
+.title-toolbar > .result-body {
+
+ @media screen and (max-width: $screen-xs-max) {
+ padding-top: 20px;
+ }
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ width: 85%;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ width: 90%;
+ }
+}
+
.result-links {
.save-record, #toolbar-menu {
color: $violet;
@@ -1796,12 +1849,14 @@ input.searchForm_lookfor {
// ++ GENERAL CONTENT PAGE
.main {
+ padding-bottom: 20px;
+ padding-top: 20px;
+
.container,
.footer {
background: transparent;
max-width: 1284px;
border: 0;
- padding-right: 0;
}
&.collapsing {
@@ -1809,6 +1864,7 @@ input.searchForm_lookfor {
min-height: 0;
transition: none !important;
}
+
.record {
.mainbody {
padding-bottom: 2em;
@@ -1837,27 +1893,47 @@ input.searchForm_lookfor {
}
}
}
+
.media {
+ overflow: visible;
padding-bottom: 2em;
+
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
padding-bottom: 4em;
padding-left: 0;
padding-right: 0;
}
+
@media screen and (min-width: $screen-lg-min) {
padding-bottom: 7em;
}
}
+
.media-left {
display: inline-block;
padding-left: 15px;
+
@media screen and (max-width: $screen-md-max) {
position: absolute; /* FIXME: better solution to switch order between div title elements ? */
}
+
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
+ position: absolute;
+ padding-top: em(20px);
+ }
+
@media screen and (min-width: $screen-lg-min) {
display: table-cell;
}
}
+
+ .media-right-details {
+ @media screen and (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
+ position: relative;
+ top: -6em;
+ }
+ }
+
.record-tabs {
@media screen and (max-width: $screen-md-max) {
padding-left: 0;
@@ -1917,16 +1993,24 @@ input.searchForm_lookfor {
.container {
border: 0;
+
@media screen and (min-width: $screen-lg-min) {
min-width: $main-content-container-min-width-lg;
.mainbody {
padding-right: 80px;
}
}
+
@media screen and (min-width: $screen-xl-min) {
max-width: $main-content-container-max-width-xl;
width: 70%;
}
+
+ .mainbody {
+ @media screen and (max-width: $screen-xs-max) {
+ width: 100%;
+ }
+ }
}
}
// ++ GENERAL CONTENT PAGE - END
@@ -2007,23 +2091,29 @@ input.searchForm_lookfor {
display: flex;
flex-direction: column-reverse;
}
- // FIXME: BITTE ALS SONDERFALL unter H3 definieren
- h3 {
- font-size: 24px;
- }
+
& > .toolbar-details {
+ padding-top: 12px;
+
@media screen and (max-width: $screen-xs-max) {
display: inline-flex;
flex-direction: row-reverse;
position: relative;
- top: -3em;
+ top: -2.5em;
}
+
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
display: inline-flex;
flex-direction: row-reverse;
- padding-top: em(3px);
+ position: absolute;
+ top: em(-100px);
+ width: 15%;
}
- padding-top: 12px;
+
+ @media screen and (min-width: $screen-lg-min) {
+ width: 10%;
+ }
+
// FIXME: SCHACHTELUNG NOETIG?
& > .toolbar-menu {
display: inline;
@@ -2033,6 +2123,7 @@ input.searchForm_lookfor {
}
}
}
+
.favorite {
display: inline-block;
padding-left: 1em;
@@ -2096,9 +2187,15 @@ div[class$="-tab"] {
background-color: $midnight;
margin-bottom: 2em;
padding: 12px;
- @media screen and (max-width: $screen-sm-max) {
+
+ @media screen and (max-width: $screen-xs-max) {
margin-top: 2em;
}
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ margin-top: 5em;
+ }
+
button:focus {
outline: none;
}
@@ -2488,10 +2585,6 @@ div[class$="-tab"] {
// +++++ Footer - START
// styling follows mobile first principles
-.main footer .container{
- margin-right: 15px;
-}
-
.main footer,
footer {
// general footer styles
diff --git a/themes/fid_adlr/templates/RecordDriver/DefaultRecord/core.phtml b/themes/fid_adlr/templates/RecordDriver/DefaultRecord/core.phtml
index 1b2ba60736009f44553b3fe218e0a8aa6aaaab42..2d357eb2f6678699f1221e70fabcb5959b4dfb14 100644
--- a/themes/fid_adlr/templates/RecordDriver/DefaultRecord/core.phtml
+++ b/themes/fid_adlr/templates/RecordDriver/DefaultRecord/core.phtml
@@ -105,7 +105,7 @@
<?php endif; ?>
<?php /* End Main Details */ ?>
</div>
- <div class="record col-md-4">
+ <div class="record col-md-4 media-right-details">
<?php /* finc-specific: add toolbar to sidebar - CK */ ?>
<?//=$this->record($this->driver)->getToolbar()?>
diff --git a/themes/fid_adlr/templates/RecordDriver/SolrAI/core.phtml b/themes/fid_adlr/templates/RecordDriver/SolrAI/core.phtml
index abc96d971399b60ac3213cba647b6a94da7d2324..0535452a3416538eb96b10ec96e87bcf28eb3bed 100644
--- a/themes/fid_adlr/templates/RecordDriver/SolrAI/core.phtml
+++ b/themes/fid_adlr/templates/RecordDriver/SolrAI/core.phtml
@@ -108,7 +108,7 @@
<?php endif; ?>
<?php /* End Main Details */?>
</div>
- <div class="record col-md-4">
+ <div class="record col-md-4 media-right-details">
<?php /* finc-specific: add toolbar to sidebar - CK */ ?>
<?//=$this->record($this->driver)->getToolbar()?>
diff --git a/themes/fid_adlr/templates/RecordDriver/SolrMarc/core.phtml b/themes/fid_adlr/templates/RecordDriver/SolrMarc/core.phtml
index 387f5e60b367a58122ad3d01125f3e6a72421d78..62ae05e2d9633fc67e31424d82e4f5e3ba7c9538 100644
--- a/themes/fid_adlr/templates/RecordDriver/SolrMarc/core.phtml
+++ b/themes/fid_adlr/templates/RecordDriver/SolrMarc/core.phtml
@@ -111,7 +111,7 @@
<?php endif; ?>
<?php /* End Main Details */?>
</div>
- <div class="record col-md-4">
+ <div class="record col-md-4 media-right-details">
<?php /* finc-specific: add toolbar to sidebar - CK */ ?>
<?//=$this->record($this->driver)->getToolbar()?>