From e159790e4024b64f2086d05bfafc25ab56295647 Mon Sep 17 00:00:00 2001 From: Nikita Lvov Date: Wed, 17 Jun 2020 08:24:29 +0200 Subject: [PATCH 1/3] Applied new font to the body, fixed search icon hover --- .../less/invenio_theme_tugraz/header.less | 387 +++++++++--------- .../less/invenio_theme_tugraz/overrides.less | 17 +- .../invenio_theme_tugraz/header.html | 30 +- 3 files changed, 229 insertions(+), 205 deletions(-) diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less index 6be0bee..84668b6 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less @@ -6,232 +6,247 @@ * under the terms of the MIT License; see LICENSE file for more details. */ - #int-menu-q-home-icon { - width: 18px; - height: 18px; - vertical-align: top; - fill: red; +#int-menu-q-home-icon { + width: 18px; + height: 18px; + vertical-align: top; + fill: red; +} - } +/*****logo section******/ +.affiliation-spacer { + display: table-cell; + vertical-align: middle; + width: 100%; +} - /*****logo section******/ - .affiliation-spacer{ - display: table-cell; - vertical-align: middle; - width: 100%; - } - - .affiliation-logo { - display: table-cell; - padding: 0 50px 0 0; - vertical-align: middle; - white-space: nowrap; - } - .affiliation { - background-color: white; - display: table; - margin: 0 auto 80px; - max-width: 1060px; - width: 100%; - text-decoration: none; - - } - - .affiliation-text { - display: table-cell; - font-size: 17px; - padding: 0 0 0 50px; - vertical-align: middle; - white-space: nowrap; - } - - .affiliation-logo-claim { - display: inline-block; - font-size: 12px; - letter-spacing: 2px; - line-height: 17px; - padding: 0 17px 0 0; - text-align: right; - vertical-align: top; - } - - a { - color: inherit; - text-decoration: none; - transition: background-color 0.15s ease 0s, color 0.15s ease 0s; - } - /*****END logo section******/ - - - - .short-menu { - display: table; - height: 49px; - width: 100%; - } - .short-menu-left { - border-right: 1px solid black; - display: table-cell; - text-align: right; - width: 50%; - } - .short-menu-right { - display: table-cell; - vertical-align: top; - width: 50%; - color:#000000; - } - .short-menu-left-search { - display: inline-block; - margin: 12px 9px 6px 0; - color:#000000; - } - .short-menu-right-h { - cursor: pointer; - display: inline-block; - margin: 12px 0 6px 9px; - padding: 5px; - } - - .short-menu-right-main-menu { - display: inline-block; - margin-right: 3px; - vertical-align: top; - width: 21px; - } - svg:not(:root) { - overflow: hidden; - } - - - - /***********MAIN menu*************/ - .header { - min-width: 0; - - position: relative; - width: 100%; - //height: 100%; - } - - .main-menu-box { - box-sizing: border-box; - display: table; - margin: 0 auto; - max-width: 1060px; - padding: 9px 50px 8px; - text-align: left; - width: 100%; - } - - .main-menu-entry { - display: table-cell; - text-align: center; - } - .main-menu-entry a { - box-decoration-break: clone; - padding: 5px 8px; - } - - .main-menu-entry a:hover{ - background-color: #000000; - color: #ffffff; - text-decoration: none; - } - - .affiliation-text a:hover{ - background-color: #000000; - color: #ffffff; - text-decoration : none; - } - - .affiliation-logo :hover{ +.affiliation-logo { + display: table-cell; + padding: 0 50px 0 0; + vertical-align: middle; + white-space: nowrap; +} +.affiliation { + background-color: white; + display: table; + margin: 0 auto 80px; + max-width: 1060px; + width: 100%; text-decoration: none; - } +} - .short-menu-right :hover{ - background-color: #000000; - color: #ffffff; - } +.affiliation-text { + display: table-cell; + font-size: 17px; + padding: 0 0 0 50px; + vertical-align: middle; + white-space: nowrap; +} - .main-menu { - border-bottom: 1px solid #000; - box-sizing: border-box; - height: 39px; - margin-top: -1px; - overflow: hidden; - transition: height 0.3s linear 0s; - } +.affiliation-logo-claim { + display: inline-block; + font-size: 12px; + letter-spacing: 2px; + line-height: 17px; + padding: 0 17px 0 0; + text-align: right; + vertical-align: top; +} - @media (max-width: 767.9px){ +a { + color: inherit; + text-decoration: none; + transition: background-color 0.15s ease 0s, color 0.15s ease 0s; +} +/*****END logo section******/ + +.short-menu { + display: table; + height: 49px; + width: 100%; +} +.short-menu-left { + border-right: 1px solid black; + display: table-cell; + text-align: right; + width: 50%; +} +.short-menu-right { + display: table-cell; + vertical-align: top; + width: 50%; + color: #000000; +} +.search-icon-header { + display: inline-block; +} + +.search-icon-header { + background-color: transparent; + & a svg g { + stroke: #e4154b; + } +} + +.search-icon-header:hover { + background-color: #000; + & a { + & svg { + & g { + stroke: #fff !important; + } + } + } +} + +.short-menu-left-search { + display: inline-block; + margin: 12px 9px 6px 0; + color: #000000; +} +.short-menu-right-h { + cursor: pointer; + display: inline-block; + margin: 12px 0 6px 9px; + padding: 5px; +} + +.short-menu-right-main-menu { + display: inline-block; + margin-right: 3px; + vertical-align: top; + width: 21px; +} +svg:not(:root) { + overflow: hidden; +} + +/***********MAIN menu*************/ +.header { + min-width: 0; + + position: relative; + width: 100%; + //height: 100%; +} + +.main-menu-box { + box-sizing: border-box; + display: table; + margin: 0 auto; + max-width: 1060px; + padding: 9px 50px 8px; + text-align: left; + width: 100%; +} + +.main-menu-entry { + display: table-cell; + text-align: center; +} +.main-menu-entry a { + box-decoration-break: clone; + padding: 5px 8px; +} + +.main-menu-entry a:hover { + background-color: #000000; + color: #ffffff; + text-decoration: none; +} + +.affiliation-text a:hover { + background-color: #000000; + color: #ffffff; + text-decoration: none; +} + +.affiliation-logo :hover { + text-decoration: none; +} + +.short-menu-right :hover { + background-color: #000000; + color: #ffffff; +} + +.main-menu { + border-bottom: 1px solid #000; + box-sizing: border-box; + height: 39px; + margin-top: -1px; + overflow: hidden; + transition: height 0.3s linear 0s; +} + +@media (max-width: 767.9px) { .main-menu { height: auto; } - } +} - @media (max-width: 767.9px){ +@media (max-width: 767.9px) { .main-menu-entry { display: table-row; line-height: 1.9em; } - } +} - @media screen and (max-width: 767.9px){ +@media screen and (max-width: 767.9px) { #int-header-logo-img { width: 200px; height: 75px; } - } +} - @media screen and (max-width: 767.9px){ +@media screen and (max-width: 767.9px) { #int-header-logo { padding: 50px 0; text-align: center; - }} + } +} - @media screen and (max-width: 767.9px){ - .affiliation{ +@media screen and (max-width: 767.9px) { + .affiliation { margin: 0; text-align: center; - } - .affiliation-text{ + .affiliation-text { display: none; } - .affiliation-logo-claim{ + .affiliation-logo-claim { display: none; } - .affiliation-spacer{ + .affiliation-spacer { display: none; } +} - } - - @media (max-width: 767.9px){ +@media (max-width: 767.9px) { .main-menu-box { - margin-top:15px; + margin-top: 15px; width: 100%; text-align: center; } - } +} - .int-menu-q-open-icon { - width: 14px; - vertical-align: middle; - margin-left: 5px; - } +.int-menu-q-open-icon { + width: 14px; + vertical-align: middle; + margin-left: 5px; +} - /*********************Custom overrides**********************/ - /** Login with SAML**/ - .col a{ - cursor: pointer; - } +/*********************Custom overrides**********************/ +/** Login with SAML**/ +.col a { + cursor: pointer; +} - /**** hyperlink hover color ****/ - a:focus, - a:hover { - color:#E4154B; - text-decoration:underline - } +/**** hyperlink hover color ****/ +a:focus, +a:hover { + color: #e4154b; + text-decoration: underline; +} diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less index f1bcd5a..8d7efb1 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less @@ -5,7 +5,7 @@ * invenio-theme-tugraz is free software; you can redistribute it and/or modify it * under the terms of the MIT License; see LICENSE file for more details. */ - + /* On hover color changed * from #0377cd * to #E4154B @@ -16,7 +16,7 @@ .section-content-light-bg a:focus, .hp-blog-section a:hover, .hp-blog-section a:focus { - color: #E4154B; + color: #e4154b; } /* @@ -28,13 +28,13 @@ background-color: #ffffff; } - /* +/* * section title. * from #0377cd * to #000000 */ .section-title { -color: #000000; + color: #000000; } /*** @@ -55,3 +55,12 @@ To #000000 .panel-free-title { color: #000000; } + +/*** +forcing the font changes +*/ +body { + font-family: "Source Sans Pro"; + font-weight: 300; + font-size: 16px; +} diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html index ce8fa5f..45d008a 100644 --- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html +++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html @@ -102,21 +102,21 @@ {%- endfor %} {%- endif %} - - - - - - - - - - +
+ + + + + + + + +
From a067e25c6aa05815b864435d9e4d8d11ff2cf8a1 Mon Sep 17 00:00:00 2001 From: Nikita Lvov Date: Wed, 17 Jun 2020 15:32:58 +0200 Subject: [PATCH 2/3] Highilighing the language hover, changing search icon to semantic ui one --- .../less/invenio_theme_tugraz/header.less | 31 ++++++++++++------- .../less/invenio_theme_tugraz/overrides.less | 2 -- .../invenio_theme_tugraz/header.html | 30 +++--------------- 3 files changed, 24 insertions(+), 39 deletions(-) diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less index 84668b6..5f102be 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less @@ -73,29 +73,37 @@ a { } .short-menu-right { display: table-cell; - vertical-align: top; width: 50%; color: #000000; } -.search-icon-header { - display: inline-block; + +.short-menu-left-lang { + background-color: transparent; + & a { + color: #000; + } +} + +.short-menu-left-lang:hover { + background-color: #000; + & a { + color: #fff; + text-decoration: none; + } } .search-icon-header { + display: inline-block; background-color: transparent; - & a svg g { - stroke: #e4154b; - } } .search-icon-header:hover { background-color: #000; + & i { + color: #fff; + } & a { - & svg { - & g { - stroke: #fff !important; - } - } + text-decoration: none; } } @@ -104,6 +112,7 @@ a { margin: 12px 9px 6px 0; color: #000000; } + .short-menu-right-h { cursor: pointer; display: inline-block; diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less index 8d7efb1..f7826a5 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less @@ -61,6 +61,4 @@ forcing the font changes */ body { font-family: "Source Sans Pro"; - font-weight: 300; - font-size: 16px; } diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html index 45d008a..a8d79d2 100644 --- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html +++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html @@ -81,47 +81,25 @@
- -
-
- - -
-
{%- if config.I18N_LANGUAGES %} - + {%- for l in current_i18n.get_locales() %} {%- if current_i18n.language != l.language %} {{ l.get_display_name() [0:2]}} - {% else %} - {{ l.get_display_name() [0:2] }} {%- endif %} {%- endfor %} {%- endif %} -
+ - - - - - - + -
+
-
- -
From 06540d5addd0ad5271f276cc5792efc34300596f Mon Sep 17 00:00:00 2001 From: Nikita Lvov Date: Fri, 19 Jun 2020 18:38:16 +0200 Subject: [PATCH 3/3] fixing the padding on the hovering; adding the Source Sans Pro font; fixing the font size; adding the SVG icon to Menu button --- .../less/invenio_theme_tugraz/header.less | 70 +++++++++++++++---- .../less/invenio_theme_tugraz/theme.less | 6 +- .../invenio_theme_tugraz/header.html | 27 ++++--- 3 files changed, 80 insertions(+), 23 deletions(-) diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less index 5f102be..f39a2b3 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less @@ -65,28 +65,56 @@ a { height: 49px; width: 100%; } + .short-menu-left { border-right: 1px solid black; display: table-cell; text-align: right; width: 50%; } + .short-menu-right { display: table-cell; width: 50%; color: #000000; + & div { + & svg { + & g { + stroke: #000; + stroke-linecap: round; + stroke-width: 2; + fill: none; + } + } + } +} + +.short-menu-right :hover { + background-color: #000000; + color: #ffffff; + & svg { + & g { + stroke: #fff; + } + } } .short-menu-left-lang { - background-color: transparent; + display: inline-block; + margin-right: 10px; + font-size: 17px !important; + font-weight: 300; & a { + padding: 5px; + background-color: transparent; color: #000; + text-decoration: none; } } .short-menu-left-lang:hover { - background-color: #000; & a { + background-color: #000; color: #fff; text-decoration: none; } @@ -94,16 +122,31 @@ a { .search-icon-header { display: inline-block; - background-color: transparent; + & a { + background-color: transparent; + padding: 5px; + text-decoration: none; + & svg { + & g { + stroke-linejoin: round; + stroke: #000; + stroke-miterlimit: 10; + stroke-width: 2; + fill: none; + } + } + } } .search-icon-header:hover { - background-color: #000; - & i { - color: #fff; - } & a { + background-color: #000; text-decoration: none; + & svg { + & g { + stroke: #fff; + } + } } } @@ -126,6 +169,13 @@ a { vertical-align: top; width: 21px; } + +.short-menu-icon { + vertical-align: top; + width: 20px; + height: 19px; +} + svg:not(:root) { overflow: hidden; } @@ -140,6 +190,7 @@ svg:not(:root) { } .main-menu-box { + font-size: 16px; box-sizing: border-box; display: table; margin: 0 auto; @@ -174,11 +225,6 @@ svg:not(:root) { text-decoration: none; } -.short-menu-right :hover { - background-color: #000000; - color: #ffffff; -} - .main-menu { border-bottom: 1px solid #000; box-sizing: border-box; diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less index eff8101..dae2560 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less @@ -5,11 +5,11 @@ * invenio-theme-tugraz is free software; you can redistribute it and/or modify it * under the terms of the MIT License; see LICENSE file for more details. */ - + @import "header"; @import "footer"; @import "overrides"; - +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"); /*** **TODO: @@ -17,4 +17,4 @@ ***/ //@import "../invenio_app_rdm/theme"; -//@import "variables"; \ No newline at end of file +//@import "variables"; diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html index a8d79d2..c12b7fd 100644 --- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html +++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html @@ -84,28 +84,39 @@
{%- if config.I18N_LANGUAGES %} - +
{%- for l in current_i18n.get_locales() %} {%- if current_i18n.language != l.language %} {{ l.get_display_name() [0:2]}} + href="{{ url_for('invenio_i18n.set_lang', lang_code=l.language) }}">{{ l.get_display_name().upper() [0:2]}} {%- endif %} {%- endfor %} - +
{%- endif %} - +
- + + + + + + - +
- - Menu + + + + + + + + Main Menu