From 2ead46baad4c7b7a36ca456ccab2c18eaa8a8461 Mon Sep 17 00:00:00 2001 From: Jacek Lebioda Date: Thu, 1 Aug 2019 10:48:18 +0200 Subject: [PATCH] Decomposition of scss styles into components --- _sass/elixir.scss | 5 +- _sass/elixir/_base.scss | 4 +- _sass/elixir/_cards.scss | 38 +++++ _sass/elixir/_footer.scss | 136 ++++++++++++++++ _sass/elixir/_header.scss | 133 +++++++++++++++ _sass/elixir/_layout.scss | 333 +------------------------------------- elixir-theme.gemspec | 2 +- index.md | 2 + 8 files changed, 323 insertions(+), 330 deletions(-) create mode 100644 _sass/elixir/_cards.scss create mode 100644 _sass/elixir/_footer.scss create mode 100644 _sass/elixir/_header.scss diff --git a/_sass/elixir.scss b/_sass/elixir.scss index 0a5fb53..8eca7db 100644 --- a/_sass/elixir.scss +++ b/_sass/elixir.scss @@ -1,4 +1,7 @@ @import "elixir/base", + "elixir/cards", + "elixir/footer", + "elixir/header", "elixir/layout" -; \ No newline at end of file +; diff --git a/_sass/elixir/_base.scss b/_sass/elixir/_base.scss index 524a330..0a0d505 100644 --- a/_sass/elixir/_base.scss +++ b/_sass/elixir/_base.scss @@ -5,9 +5,9 @@ $COLOR_BACKGROUND_HEADER: #023452; $FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif; $PADDING_PAGE_LEFT: 13%; -$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%; - $WIDTH_CONTENT: 67%; + +$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%; $WIDTH_CONTENT_NO_COLUMN: 58%; html { diff --git a/_sass/elixir/_cards.scss b/_sass/elixir/_cards.scss new file mode 100644 index 0000000..8e3e679 --- /dev/null +++ b/_sass/elixir/_cards.scss @@ -0,0 +1,38 @@ +.cards { + display: flex; + flex-wrap: wrap; + + .card-id.smaller { + height: 175px; + } + + .card-id { + width: 185px; + height: 350px; + border: solid 2px #e6e6e6; + border-radius: 7px 7px 0px 0px; + padding: 8px; + margin: 10px; + + .card-id-smallphoto img { + width: auto; + padding-left: 4px; + padding-bottom: 8px; + } + + .card-id-photo img { + width: 120px; + padding-left: 4px; + padding-bottom: 8px; + } + + .card-id-name { + font-weight: 600; + font-size: 18px; + } + + .card-id-description { + font-size: 14px; + } + } +} diff --git a/_sass/elixir/_footer.scss b/_sass/elixir/_footer.scss new file mode 100644 index 0000000..18ea02a --- /dev/null +++ b/_sass/elixir/_footer.scss @@ -0,0 +1,136 @@ +#site-footer-primary { + #site-footer-primary-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background: #3e3e3e; + font-size: 0.875rem; + @media only screen and (min-width: 600px) { + padding-left: 22%; + } + @media only screen and (max-width: 600px) { + padding-left: 2%; + } + + div { + margin-left: 15px; + margin-right: 15px; + min-width: 200px; + + .site-footer-primary-logo { + padding-top: 10px; + padding-bottom: 5px; + } + + h3 { + border-bottom: 1px solid #848484; + font-size: 1.15rem; + color: #ebebeb; + transition: color 0.15s; + margin-bottom: 5px; + + a { + color: #ebebeb; + text-decoration: none; + } + + a:hover { + text-decoration: none; + color: $COLOR_LINK_ELIXIR; + } + } + + ul { + padding-inline-start: 0; + margin-block-start: 0; + + li { + list-style: none; + width: auto; + float: none; + min-width: 0; + + a { + display: inline-block; + zoom: 1; + font-size: 14px; + line-height: 1.1; + color: #ebebeb; + padding: 1px 4px 2px 0; + border-bottom: none; + margin-bottom: 0; + text-decoration: none; + } + + a:hover { + text-decoration: none; + transition: color 0.25s; + color: $COLOR_LINK_ELIXIR; + } + } + } + } + } +} + +#site-footer-secondary { + #site-footer-secondary-wrapper { + background: #023452; + border-top: 1px solid #333; + color: #ebebeb; + font-size: 0.875rem; + display: flex; + flex-wrap: wrap-reverse; + @media only screen and (min-width: 600px) { + padding-left: 22%; + } + @media only screen and (max-width: 600px) { + padding-left: 2%; + } + + div { + margin-left: 15px; + } + + ul { + list-style: none; + padding-inline-start: 0; + padding-right: 100px; + @media only screen and (min-width: 600px) { + li { + display: inline-block; + } + } + @media only screen and (max-width: 600px) { + li { + display: list-item; + margin-top: 7px; + } + } + + a { + display: inline-block; + text-decoration: none; + color: #ffffff; + font-weight: 800; + padding-left: 15px; + padding-right: 15px; + } + + a:hover { + transition: color 0.25s; + color: orange; + text-decoration: none; + } + } + + #address { + color: #888; + font-size: 14px; + padding-top: 14px; + @media only screen and (max-width: 600px) { + width: 90%; + } + } + } +} diff --git a/_sass/elixir/_header.scss b/_sass/elixir/_header.scss new file mode 100644 index 0000000..4745f55 --- /dev/null +++ b/_sass/elixir/_header.scss @@ -0,0 +1,133 @@ +#site-header { + background: $COLOR_BACKGROUND_HEADER; + height: 93px; + margin-top: -15px; + margin-bottom: 37px; + + #site-header-wrapper { + @media only screen and (min-width: 1025px) { + padding-left: $PADDING_PAGE_LEFT; + } + @media only screen and (max-width: 1025px) { + padding-left: 5px; + + ul { + padding-inline-start: 5px; + } + } + + .elixir-image { + position: relative; + top: 26px; + float: left; + margin-right: 82px; + + img { + width: 150px; + padding-left: 10px; + } + } + + .hamburger { + background: none; + + input { + display: none; + } + @media only screen and (max-width: 1025px) { + width: 50px; + height: 50px; + border: solid 2px #e6e6e6; + border-radius: 12px; + float: right; + position: relative; + top: 30px; + right: 20px; + z-index: 1; + background-color: #023452; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg=="); + background-size: contain; + + input { + opacity: 0; + display: block; + width: 50px; + height: 50px; + margin: 0; + z-index: 10; + cursor: pointer; + -webkit-touch-callout: none; + } + + input ~ ul { + display: none; + height: 0; + } + + input:checked ~ ul { + display: block; + float: left; + background-color: #023452; + width: 150px; + position: relative; + left: -88px; + top: -6px; + padding-bottom: 9px; + height: auto; + padding-right: 5px; + + li { + display: contents; + } + } + } + } + + ul { + margin-left: 0; + position: relative; + top: 66px; + left: -16px; + + li { + list-style: none; + float: left; + margin: 0; + padding: 0; + + a { + display: block; + white-space: nowrap; + @media only screen and (max-width: 1025px) { + padding: 12px 16px; + } + padding: 5px 16px; + margin-left: 0; + color: #fefefe; + text-transform: uppercase; + font-size: 0.875rem; + text-decoration: none; + } + + a.active { + border-radius: 5px 5px 0 0; + color: #fefefe; + background: $COLOR_LINK_ELIXIR; + } + + a.active:hover { + color: #222; + background: #d46d11; + transition: color 0.25s; + } + + a:hover { + color: $COLOR_LINK_ELIXIR; + border-color: $COLOR_LINK_ELIXIR; + text-decoration: none; + transition: color 0.25s, background 0.25s; + } + } + } + } +} diff --git a/_sass/elixir/_layout.scss b/_sass/elixir/_layout.scss index 9147d8c..799a8be 100644 --- a/_sass/elixir/_layout.scss +++ b/_sass/elixir/_layout.scss @@ -1,137 +1,3 @@ -#site-header { - background: $COLOR_BACKGROUND_HEADER; - height: 93px; - margin-top: -15px; - margin-bottom: 37px; - - #site-header-wrapper { - @media only screen and (min-width: 1025px) { - padding-left: $PADDING_PAGE_LEFT; - } - @media only screen and (max-width: 1025px) { - padding-left: 5px; - ul { - padding-inline-start: 5px; - } - } - - .elixir-image { - position: relative; - top: 26px; - float: left; - margin-right: 82px; - - img { - width: 150px; - padding-left: 10px; - } - } - - .hamburger { - background: none; - - input { - display: none; - } - - @media only screen and (max-width: 1025px) { - width: 50px; - height: 50px; - border: solid 2px #e6e6e6; - border-radius: 12px; - float: right; - position: relative; - top: 30px; - right: 20px; - z-index: 1; - background-color: #023452; - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg=='); - background-size: contain; - - input { - opacity: 0; - display: block; - width: 50px; - height: 50px; - margin: 0; - z-index: 10; - cursor: pointer; - -webkit-touch-callout: none; - } - - input ~ ul { - display: none; - height: 0px; - } - - input:checked ~ ul { - display: block; - float: left; - background-color: #023452; - width: 150px; - position: relative; - left: -88px; - top: -6px; - padding-bottom: 9px; - height: auto; - padding-right: 5px; - - li { - display: contents; - } - } - } - } - - ul { - margin-left: 0; - position: relative; - top: 66px; - left: -16px; - - li { - list-style: none; - float: left; - margin: 0; - padding: 0; - - a { - display: block; - white-space: nowrap; - @media only screen and (max-width: 1025px) { - padding: 12px 16px; - } - padding: 5px 16px; - margin-left: 0; - color: #fefefe; - text-transform: uppercase; - font-size: 0.875rem; - text-decoration: none; - } - - a.active { - border-radius: 5px 5px 0 0; - color: #fefefe; - background: $COLOR_LINK_ELIXIR; - } - - a.active:hover { - color: #222; - background: #d46d11; - transition: color 0.25s; - } - - a:hover { - color: $COLOR_LINK_ELIXIR; - border-color: $COLOR_LINK_ELIXIR; - text-decoration: none; - transition: color 0.25s, background 0.25s; - } - } - } - } -} - #site-content { h1.title { font-size: 37px; @@ -148,23 +14,20 @@ } article { - hr { - border-top: solid 1px #f7f7f7; - } - + hr { + border-top: solid 1px #f7f7f7; + } @media screen and (orientation: landscape) and (max-width: 820px) { article { font-size: 12px; } } - @media only screen and (min-width: 1025px) { padding-left: $PADDING_PAGE_LEFT; width: $WIDTH_CONTENT; flex-direction: row; min-width: 400px; } - @media only screen and (max-width: 1025px) { padding-left: 4%; padding-right: 4%; @@ -174,6 +37,7 @@ #left-column { border-bottom: solid 1px #e6e6e6; min-width: 92% !important; + ul { min-width: 92% !important; } @@ -213,7 +77,7 @@ } .index-photo { - border: solid 0px black; + border: solid 0 black; flex-grow: 1; margin-right: 2%; @@ -303,150 +167,6 @@ } } -#site-footer-primary { - #site-footer-primary-wrapper { - display: flex; - flex-direction: row; - flex-wrap: wrap; - background: #3e3e3e; - font-size: 0.875rem; - - @media only screen and (min-width: 600px) { - padding-left: 22%; - } - - @media only screen and (max-width: 600px) { - padding-left: 2%; - } - - div { - margin-left: 15px; - margin-right: 15px; - min-width: 200px; - - .site-footer-primary-logo { - padding-top: 10px; - padding-bottom: 5px; - } - - h3 { - border-bottom: 1px solid #848484; - font-size: 1.15rem; - color: #ebebeb; - transition: color 0.15s; - margin-bottom: 5px; - - a { - color: #ebebeb; - text-decoration: none; - } - - a:hover { - text-decoration: none; - color: $COLOR_LINK_ELIXIR; - } - } - - ul { - padding-inline-start: 0px; - margin-block-start: 0px; - - li { - list-style: none; - width: auto; - float: none; - min-width: 0; - - a { - display: inline-block; - zoom: 1; - font-size: 14px; - line-height: 1.1; - color: #ebebeb; - padding: 1px 4px 2px 0; - border-bottom: none; - margin-bottom: 0; - text-decoration: none; - } - - a:hover { - text-decoration: none; - transition: color 0.25s; - color: $COLOR_LINK_ELIXIR; - } - } - } - } - } -} - -#site-footer-secondary { - #site-footer-secondary-wrapper { - background: #023452; - border-top: 1px solid #333; - color: #ebebeb; - font-size: 0.875rem; - display: flex; - flex-wrap: wrap-reverse; - - @media only screen and (min-width: 600px) { - padding-left: 22%; - } - - @media only screen and (max-width: 600px) { - padding-left: 2%; - } - - div { - margin-left: 15px; - } - - ul { - list-style: none; - padding-inline-start: 0px; - padding-right: 100px; - - @media only screen and (min-width: 600px) { - li { - display: inline-block; - } - } - - @media only screen and (max-width: 600px) { - li { - display: list-item; - margin-top: 7px; - } - } - - a { - display: inline-block; - text-decoration: none; - color: #ffffff; - font-weight: 800; - padding-left: 15px; - padding-right: 15px; - } - - a:hover { - transition: color 0.25s; - color: orange; - text-decoration: none; - } - } - - #address { - color: #888; - font-size: 14px; - padding-top: 14px; - - @media only screen and (max-width: 600px) { - width: 90%; - } - } - } -} - table { margin-top: 10px; border: solid 1px #ffdfdf; @@ -467,6 +187,7 @@ table { tbody tr { padding: 9px 2px; border: solid 1px #d6d6d6; + td { padding: 5px 20px 5px 10px; } @@ -493,45 +214,6 @@ div.post { } } -.cards { - display: flex; - flex-wrap: wrap; - - .card-id.smaller { - height: 175px; - } - - .card-id { - width: 185px; - height: 350px; - border: solid 2px #e6e6e6; - border-radius: 7px 7px 0px 0px; - padding: 8px; - margin: 10px; - - .card-id-smallphoto img { - width: auto; - padding-left: 4px; - padding-bottom: 8px; - } - - .card-id-photo img { - width: 120px; - padding-left: 4px; - padding-bottom: 8px; - } - - .card-id-name { - font-weight: 600; - font-size: 18px; - } - - .card-id-description { - font-size: 14px; - } - } -} - div header h1 { font-size: xx-large; font-weight: 100; @@ -542,8 +224,7 @@ input.search { width: 330px; height: 35px; font-size: 20px; - padding: 5px; - padding-left: 10px; + padding: 5px 5px 5px 10px; border-radius: 5px; border: solid 3px #f47d21; } diff --git a/elixir-theme.gemspec b/elixir-theme.gemspec index 305664d..e166b32 100644 --- a/elixir-theme.gemspec +++ b/elixir-theme.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "jekyll-elixir-theme" - spec.version = "0.5.2" + spec.version = "0.5.3" spec.authors = ["jacek.lebioda"] spec.email = ["jacek.lebioda@uni.lu"] diff --git a/index.md b/index.md index e1e233b..d2219b0 100644 --- a/index.md +++ b/index.md @@ -29,6 +29,8 @@ Sustainable access management according to well-defined criteria, in order to me Workshops and courses on data management, curation, analytics and visualisation. Continuous education of software developers, data managers and researchers. +--- + [![Data Catalog]({{site.baseurl}}/assets/buttons/data_catalog.jpg){:width="155px"}]({{site.baseurl}}/sustainability-data/) [![Tools Registry]({{site.baseurl}}/assets/buttons/tools_registry.jpg){:width="155px"}]({{site.baseurl}}/sustainability-tools/) [![GDPR activities]({{site.baseurl}}/assets/buttons/gdpr.jpg){:width="155px"}]({{site.baseurl}}/gdpr-activities/) -- GitLab