diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 8abd323f5..16899cb35 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -7,11 +7,6 @@ a, a:focus, a:active { a:focus { -moz-outline-style: none; } -.btn--hollow { - background: red; - display: inline-block; - padding: 10px; } - body, html { position: relative; width: 100%; @@ -30,11 +25,7 @@ div.layout-container { box-sizing: border-box; z-index: 1; } -header[role="banner"] { - outline: 1px solid blue; } - main[role="main"] { - outline: 1px solid green; background-color: rgba(255, 255, 255, 0.9); } footer[role="contentinfo"] { @@ -42,11 +33,51 @@ footer[role="contentinfo"] { bottom: 0; width: 100%; } +#block-edlptheme-branding h1 { + margin: 0; + display: inline-block; + font-size: 1.5em; + text-transform: lowercase; } + #block-edlptheme-branding h1 a { + line-height: 0.93; + text-align: center; + color: inherit; + text-decoration: none; + display: inline-block; + -webkit-columns: 3.74em 2; + columns: 3.74em 2; + -webkit-column-gap: 2em; + column-gap: 2em; + word-break: break-all; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + position: relative; } + #block-edlptheme-branding h1 a:after, #block-edlptheme-branding h1 a:before { + content: ''; + position: absolute; + top: 50%; + height: 0; } + #block-edlptheme-branding h1 a:before { + left: 3.74em; + border-bottom: 0.08em solid #000; + width: 2.5em; + -webkit-transform: rotateZ(-45deg); + transform: rotateZ(-45deg); } + #block-edlptheme-branding h1 a:after { + top: 47%; + left: 4.74em; + border-top: 0.2em solid red; + width: 0.5em; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); } + footer { display: table; padding: 0 0 0.5em 0; } footer > .region { - display: table-cell; } + display: table-cell; + white-space: nowrap; } footer .region-footer-left { text-align: left; } footer .region-footer-center { @@ -104,151 +135,153 @@ footer { font-size: 0.756em; } footer .block-block-edlp-entrees { display: inline-block; } - footer .block-block-edlp-entrees ul li { - display: inline-block; - position: relative; - list-style: none; - margin: 0 1.5em 0 0; - padding: 0; - margin: 0; - white-space: nowrap; - pointer-events: none; } - footer .block-block-edlp-entrees ul li a { - position: absolute; - bottom: 0; - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotateZ(-45deg); - transform: rotateZ(-45deg); - color: #000; - text-decoration: none; - text-transform: uppercase; - font-size: 0.756em; - white-space: nowrap; } - footer .block-block-edlp-entrees ul li span.oblique-wrapper { + footer .block-block-edlp-entrees ul { + white-space: nowrap; } + footer .block-block-edlp-entrees ul li { display: inline-block; - vertical-align: bottom; position: relative; - width: 1.5em; } - footer .block-block-edlp-entrees ul li a.term-link { - pointer-events: all; - background-color: #fff; - padding-right: 0.4em; } - footer .block-block-edlp-entrees ul li a.term-link:before { - content: ""; + list-style: none; + margin: 0 1.5em 0 0; + padding: 0; + margin: 0; + white-space: nowrap; + pointer-events: none; } + footer .block-block-edlp-entrees ul li a { + position: absolute; + bottom: 0; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotateZ(-45deg); + transform: rotateZ(-45deg); + color: #000; + text-decoration: none; + text-transform: uppercase; + font-size: 0.756em; + white-space: nowrap; } + footer .block-block-edlp-entrees ul li span.oblique-wrapper { display: inline-block; - width: 7px; - height: 7px; - border: 1px solid #000; - margin-right: 0.5em; } - footer .block-block-edlp-entrees ul li .entree-content { - display: inline-block; - width: 0; - overflow: hidden; - opacity: 0; - -webkit-transition: all 300ms ease-in-out; - transition: all 300ms ease-in-out; - -webkit-transition-property: width,opacity; - transition-property: width,opacity; } - footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type { - margin-left: 0.5em; } - footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a { - text-transform: none; - pointer-events: auto; } - footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before { + vertical-align: bottom; + position: relative; + width: 1.5em; } + footer .block-block-edlp-entrees ul li a.term-link { + pointer-events: all; + background-color: #fff; + padding-right: 0.4em; } + footer .block-block-edlp-entrees ul li a.term-link:before { content: ""; display: inline-block; - width: 5px; - height: 5px; + width: 7px; + height: 7px; border: 1px solid #000; margin-right: 0.5em; } - footer .block-block-edlp-entrees ul li .entree-content .term-description { + footer .block-block-edlp-entrees ul li .entree-content { display: inline-block; - margin-left: 1.5em; - text-align: left; - width: 250px; - word-wrap: break-word; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - white-space: normal; - background-color: rgba(255, 255, 255, 0.9); - padding: 0.5em; - padding-bottom: 0; } - footer .block-block-edlp-entrees ul li .entree-content .term-description p { - font-size: 0.65em; - margin: 0; } - footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before { - border-color: #2b8f2f; - background-color: #2b8f2f; } - footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before { - border-color: #3a33b6; - background-color: #3a33b6; } - footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before { - border-color: #2c9f57; - background-color: #2c9f57; } - footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before { - border-color: #c48978; - background-color: #c48978; } - footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before { - border-color: #5270bb; - background-color: #5270bb; } - footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before { - border-color: #fb54d3; - background-color: #fb54d3; } - footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before { - border-color: #e07483; - background-color: #e07483; } - footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before { - border-color: #655845; - background-color: #655845; } - footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before { - border-color: #7e0868; - background-color: #7e0868; } - footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before { - border-color: #0e7121; - background-color: #0e7121; } - footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before { - border-color: #dabd42; - background-color: #dabd42; } - footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before { - border-color: #0399bb; - background-color: #0399bb; } - footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before { - border-color: #399a1c; - background-color: #399a1c; } - footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before { - border-color: #708540; - background-color: #708540; } - footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before { - border-color: #191bff; - background-color: #191bff; } - footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before { - border-color: #279d84; - background-color: #279d84; } - footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before { - border-color: #5219ab; - background-color: #5219ab; } - footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before { - border-color: #d49cb6; - background-color: #d49cb6; } - footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before { - border-color: #497715; - background-color: #497715; } - footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before { - background-color: #fff !important; } - footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before { - background-color: #fff !important; } - footer .block-block-edlp-entrees ul li.opened a.term-link:after { - content: ''; - position: absolute; - left: 15px; - right: 0; - bottom: -3px; - border-bottom: 1px solid grey; } - footer .block-block-edlp-entrees ul li.opened .entree-content { - width: 350px; - opacity: 1; } + width: 0; + overflow: hidden; + opacity: 0; + -webkit-transition: all 300ms ease-in-out; + transition: all 300ms ease-in-out; + -webkit-transition-property: width,opacity; + transition-property: width,opacity; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type { + margin-left: 0.5em; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a { + text-transform: none; + pointer-events: auto; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before { + content: ""; + display: inline-block; + width: 5px; + height: 5px; + border: 1px solid #000; + margin-right: 0.5em; } + footer .block-block-edlp-entrees ul li .entree-content .term-description { + display: inline-block; + margin-left: 1.5em; + text-align: left; + width: 250px; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + white-space: normal; + background-color: rgba(255, 255, 255, 0.9); + padding: 0.5em; + padding-bottom: 0; } + footer .block-block-edlp-entrees ul li .entree-content .term-description p { + font-size: 0.65em; + margin: 0; } + footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before { + border-color: #2b8f2f; + background-color: #2b8f2f; } + footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before { + border-color: #3a33b6; + background-color: #3a33b6; } + footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before { + border-color: #2c9f57; + background-color: #2c9f57; } + footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before { + border-color: #c48978; + background-color: #c48978; } + footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before { + border-color: #5270bb; + background-color: #5270bb; } + footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before { + border-color: #fb54d3; + background-color: #fb54d3; } + footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before { + border-color: #e07483; + background-color: #e07483; } + footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before { + border-color: #655845; + background-color: #655845; } + footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before { + border-color: #7e0868; + background-color: #7e0868; } + footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before { + border-color: #0e7121; + background-color: #0e7121; } + footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before { + border-color: #dabd42; + background-color: #dabd42; } + footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before { + border-color: #0399bb; + background-color: #0399bb; } + footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before { + border-color: #399a1c; + background-color: #399a1c; } + footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before { + border-color: #708540; + background-color: #708540; } + footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before { + border-color: #191bff; + background-color: #191bff; } + footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before { + border-color: #279d84; + background-color: #279d84; } + footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before { + border-color: #5219ab; + background-color: #5219ab; } + footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before { + border-color: #d49cb6; + background-color: #d49cb6; } + footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before { + border-color: #497715; + background-color: #497715; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before { + background-color: #fff !important; } + footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before { + background-color: #fff !important; } + footer .block-block-edlp-entrees ul li.opened a.term-link:after { + content: ''; + position: absolute; + left: 15px; + right: 0; + bottom: -3px; + border-bottom: 1px solid grey; } + footer .block-block-edlp-entrees ul li.opened .entree-content { + width: 350px; + opacity: 1; } footer #block-userlogin { position: relative; width: 20px; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index b5731ffa2..df478ee22 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -7,53 +7,54 @@ // @License: GPL-V3 @import 'base/reset'; - -@import 'base/vars'; -@import 'base/grid'; @import 'base/colors'; -@import 'base/buttons'; +@import 'base/layout'; - -body, html{ - position: relative; - width: 100%; - height:100%; - font-family: Georgia, serif; - font-style: normal; - margin:0; - padding:0; -} - -div.layout-container{ - position: relative; - width:100%; height:100%; - padding:1em; - box-sizing: border-box; - z-index: 1; -} - -header[role="banner"]{ - outline: 1px solid blue; +// header +#block-edlptheme-branding{ + h1{ + margin:0; display: inline-block; + font-size: 1.5em; + text-transform: lowercase; + a{ + $col_w:3.74em; + $col_gap:2em; + line-height: 0.93; + text-align: center; + color: inherit; + text-decoration: none; + display: inline-block; + columns:$col_w 2; + column-gap: $col_gap; + word-break:break-all; + hyphens:auto; + position: relative; + &:after, &:before{ + content: ''; + position: absolute; + top:50%; + height:0; + } + &:before{ + left:$col_w; + border-bottom:0.08em solid #000; + width:2.5em; + transform: rotateZ(-45deg); + } + &:after{ + $w:0.5em; + top:47%; + left:($col_w+$col_gap/2); + border-top:0.2em solid red; + width:$w; + transform: rotateZ(45deg); + } + } + } } -main[role="main"]{ - outline:1px solid green; - background-color: $transparent-bg; - // display: none; -} - -footer[role="contentinfo"]{ - // outline: 1px solid pink; - position: fixed; - bottom:0; - width:100%; -} - -canvas#edlp-map{ - // outline: 1px solid grey; -} - +// Footer @mixin oblique-list { display: inline-block; position: relative; @@ -80,6 +81,7 @@ footer{ padding: 0 0 0.5em 0; >.region{ display: table-cell; + white-space: nowrap; // outline: 1px dotted purple; // position: relative; } @@ -139,6 +141,7 @@ footer{ display: inline-block; // vertical-align: top; ul{ + white-space: nowrap; li{ @include oblique-list; margin:0; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_buttons.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_buttons.scss deleted file mode 100644 index 9368d0fe8..000000000 --- a/sites/all/themes/custom/edlptheme/assets/styles/base/_buttons.scss +++ /dev/null @@ -1,25 +0,0 @@ - -// Buttons -// -// Buttons -// -// Markup: -// Button -// -// .btn--hollow - Hollow button -// .btn--hollow-white - Hollow button -// .btn--blue - Blue button -// .btn--block - Block button -// .btn--small - Small button -// .btn--plain - Plain button -// -// Styleguide Common.Buttons - - -.btn { - &--hollow { - background: red; - display: inline-block; - padding: 10px; - } -} \ No newline at end of file diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss new file mode 100644 index 000000000..55d92b1b4 --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss @@ -0,0 +1,40 @@ + +body, html{ + position: relative; + width: 100%; + height:100%; + font-family: Georgia, serif; + font-style: normal; + margin:0; + padding:0; +} + +div.layout-container{ + position: relative; + width:100%; height:100%; + padding:1em; + box-sizing: border-box; + z-index: 1; +} + +header[role="banner"]{ + // outline: 1px solid blue; +} + + +main[role="main"]{ + // outline:1px solid green; + background-color: $transparent-bg; + // display: none; +} + +footer[role="contentinfo"]{ + // outline: 1px solid pink; + position: fixed; + bottom:0; + width:100%; +} + +canvas#edlp-map{ + // outline: 1px solid grey; +} diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_vars.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_vars.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/sites/all/themes/custom/edlptheme/gulpfile.js b/sites/all/themes/custom/edlptheme/gulpfile.js index 673ea7840..180067ce2 100644 --- a/sites/all/themes/custom/edlptheme/gulpfile.js +++ b/sites/all/themes/custom/edlptheme/gulpfile.js @@ -55,6 +55,6 @@ gulp.task('bower', function() { // default gulp task gulp.task('default', ['bower', 'scripts', 'styles'], function() { gulp.watch('./assets/styles/*.scss', ['styles']); - gulp.watch('./assets/styles/*/*.scss', ['styles']); + gulp.watch('./assets/styles/base/*.scss', ['styles']); gulp.watch('./assets/scripts/*.js', ['scripts']); }); diff --git a/sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig b/sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig index 7c3b7dea1..4cf23dee8 100644 --- a/sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig +++ b/sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig @@ -14,17 +14,19 @@ */ #} {% block content %} - {% if site_logo %} - - {% endif %} - {% if site_name %} -
- {{ site_name }} -
+ {% if site_logo or site_name %} +

+ {% if site_logo %} + + {% endif %} + {% if site_name %} + {{ site_name }} + {% endif %} +

{% endif %} {% if site_slogan %} -
{{ site_slogan }}
+

{{ site_slogan }}

{% endif %} {% endblock %}