diff --git a/README.md b/README.md index b65a8d201a1d7359f0941f059be8daaa09bce163..5d817696334f45804531e56581c3220aa9646eb9 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ # elixir-theme -Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`. +## Release history -To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site! +### version 0.2.0 +Added responsiveness -TODO: Delete this and the text above, and describe your gem +### version 0.1.0 +Initial theme ## Installation @@ -29,13 +31,6 @@ Or install it yourself as: $ gem install elixir-theme -## Usage - -TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets. - -## Contributing - -Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. ## Development @@ -47,6 +42,4 @@ When your theme is released, only the files in `_layouts`, `_includes`, `_sass` To add a custom directory to your theme-gem, please edit the regexp in `elixir-theme.gemspec` accordingly. ## License - -The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT). - +Apache2 diff --git a/_includes/footer.html b/_includes/footer.html index 26afccd130c3b37d5bb2dc0672ed5f5185f6144c..119c10c0ad8cf5ef229a7ead41e81f53756aba91 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,51 +1,64 @@ - diff --git a/_includes/header.html b/_includes/header.html index 4fae10d0c6c4ef35971f0cd99248261c8bbbef18..96d83114e4ea29fdc65fd33dd3284344bec075a7 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,13 +1,21 @@ diff --git a/_layouts/article.html b/_layouts/article.html new file mode 100644 index 0000000000000000000000000000000000000000..04a8bf54589be8d7732a021b75ac2cc2fe8af46d --- /dev/null +++ b/_layouts/article.html @@ -0,0 +1,17 @@ +--- +layout: default +--- + +
+
+ +
+
+

+ {{ page.title | escape }} +

+
+ + {{ content }} +
+
diff --git a/_layouts/default.html b/_layouts/default.html index 16664048fb59ee1a806b1384280eb3f5aac68182..3cae08c0e7d9712742636546f01178c162907aff 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,23 +6,19 @@ + - + + {{ site.title }}{% if page.title %} - {{ page.title }}{% endif %} + {%- include header.html -%} -
- - {% if page.content_title %} -

- {{ page.content_title }} -

- {% endif %} - +
{{ content }}
{%- include footer.html -%} - \ No newline at end of file + diff --git a/_layouts/index.html b/_layouts/index.html new file mode 100644 index 0000000000000000000000000000000000000000..7450994d8ed1f5e48f864e07f4b84133b92b6020 --- /dev/null +++ b/_layouts/index.html @@ -0,0 +1,76 @@ +--- +layout: default +--- + +
+ +
+ +
+
+

+ {{ page.title | escape }} +

+
+ +
+ {% if page.introduction %} +
+ {{ page.introduction }} +
+ {% endif %} + +
+ Elixir Luxembourg +
+
+ + {{ content | markdownify }} + +
+
+ Events image +
+ Events +
+
+ +
+ Job vacancies image +
+ Job vacancies +
+
+ +
+ Flyer image +
+ Download flyer +
+
+
+
+ +
+ {% if paginator.posts %} +

Our news

+ + {% for post in paginator.posts %} +
+ {{ post.title }} +
+ Published on: {{ post.date | date: '%B %d, %Y' }} + +
+ {{ post.content | truncate: 220 }} (read more) +
+
+ {% endfor %} + +

See more news...

+ + {% endif %} + + +
+
diff --git a/_layouts/left_col.html b/_layouts/left_col.html new file mode 100644 index 0000000000000000000000000000000000000000..c8acb6a7816ac5e5db7eb4737af9fb1e04846af8 --- /dev/null +++ b/_layouts/left_col.html @@ -0,0 +1,25 @@ +--- +layout: default +--- + +
+ +
+

{{ page.section }}

+ +
+ +
+
+

+ {{ page.title | escape }} +

+
+ + {{ content }} +
+
diff --git a/_layouts/page.html b/_layouts/page.html deleted file mode 100644 index 5e7112684af455284afbddb3a0b289ee21b8db69..0000000000000000000000000000000000000000 --- a/_layouts/page.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: default ---- - -{{ content }} diff --git a/_layouts/paginated.html b/_layouts/paginated.html new file mode 100644 index 0000000000000000000000000000000000000000..efcb64d538aaf38b4cdd96425bb45713fb6f7cf9 --- /dev/null +++ b/_layouts/paginated.html @@ -0,0 +1,46 @@ +--- +layout: default +--- + +
+ +
+
+ +
+
+

+ ELIXIR.LU news +

+
+
+ + {% for post in paginator.posts %} +
+ {{ post.title }} + + Published on: {{ post.date | date: '%B %d, %Y' }} + +
+ {{ post.content | truncate: 220 }} +
+
+ {% endfor %} + + +
+
diff --git a/_layouts/paginated_left_col.html b/_layouts/paginated_left_col.html new file mode 100644 index 0000000000000000000000000000000000000000..36e51bca61e2f02efa708bdf002134df70e2db1f --- /dev/null +++ b/_layouts/paginated_left_col.html @@ -0,0 +1,52 @@ +--- +layout: default +--- + +
+ +
+

{{ page.section }}

+ +
+ +
+
+

+ ELIXIR.LU news +

+
+
+ + {% for post in paginator.posts %} +
+ {{ post.title }} + + Published on: {{ post.date | date: '%B %d, %Y' }} + +
+ {{ post.content | truncate: 220 }} +
+
+ {% endfor %} + + +
+
diff --git a/_layouts/post.html b/_layouts/post.html index 5e7112684af455284afbddb3a0b289ee21b8db69..0d5f5048d9f77d6105d453887ad1806452a17b1a 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,4 +2,28 @@ layout: default --- -{{ content }} +
+
+

{{ page.section }}

+ +
+ +
+
+

+ {{ page.title | escape }}
+ {{ page.date | date: '%B %d, %Y' }} +

+
+ + {{ content }} + + + Go back to the news + +
+
diff --git a/_layouts/search.html b/_layouts/search.html new file mode 100644 index 0000000000000000000000000000000000000000..aedc3621f8c3b0c6eb7073d266a75819e1860adf --- /dev/null +++ b/_layouts/search.html @@ -0,0 +1,34 @@ +--- +layout: default +--- + +
+ +
+ +
+
+

+ {{ page.title | escape }} +

+
+ +
+ + +
+ + Note: you will be redirected to Google.com website +
+
+ + diff --git a/_sass/elixir.scss b/_sass/elixir.scss index 0a5fb53a242f6a9ad3873f5b735ad44df0bd35ee..b7f3920ab5a8b838b70c98925bb4421decaad352 100644 --- a/_sass/elixir.scss +++ b/_sass/elixir.scss @@ -1,4 +1,10 @@ @import + "elixir/accordion", "elixir/base", - "elixir/layout" -; \ No newline at end of file + "elixir/cards", + "elixir/footer", + "elixir/header", + "elixir/helpers", + "elixir/layout", + "elixir/responsive" +; diff --git a/_sass/elixir/_accordion.scss b/_sass/elixir/_accordion.scss new file mode 100644 index 0000000000000000000000000000000000000000..a076ba1b5be9ac7321017cc2ed10ae678f0f5e7f --- /dev/null +++ b/_sass/elixir/_accordion.scss @@ -0,0 +1,62 @@ +.accordion { + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5); + + .accordion-item { + width: 100%; + color: #f3efef; + overflow: hidden; + + label { + display: flex; + padding: 1em; + background: #2c3e50; + justify-content: space-between; + font-weight: bold; + cursor: pointer; + border-bottom: solid 1px white; + + &:hover { + background: #1a252f; + } + + &:after { + content: "\276F"; + width: 1em; + height: 1em; + text-align: center; + transition: all .35s; + } + } + + input { + position: absolute; + opacity: 0; + z-index: -1; + + &:checked + label { + background: #1a252f; + } + + &:checked + label:after { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + &:checked ~ .accordion-content { + max-height: 100vh; + padding: 1em; + } + } + + .accordion-content { + max-height: 0; + padding: 0 1em; + color: #2c3e50; + background: white; + transition: all .35s; + font-size: larger; + } + } +} diff --git a/_sass/elixir/_base.scss b/_sass/elixir/_base.scss index da4c25dddf8a039559f6d6ad06c6c5af1488e08f..4b7f397ca232c093710bbcdf406a3bbe5d768d23 100644 --- a/_sass/elixir/_base.scss +++ b/_sass/elixir/_base.scss @@ -1,15 +1,41 @@ -$COLOR_LINK_ELIXIR: #f47d21; +// VARIABLES $COLOR_BACKGROUND_HEADER: #023452; +$COLOR_LINK_ELIXIR: #f47d21; +$COLOR_TEXT: #222; $FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif; -$PADDING_PAGE_LEFT: 13%; +$HEADER_RESPONSIVENESS_THRESHOLD: 1025px; +$FOOTER_RESPONSIVENESS_THRESHOLD: 600px; -$WIDTH_CONTENT: 74%; +// GENERIC +html { + overflow-x: hidden; + overflow-y: scroll; +} body { -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; font-family: $FONT_DEFAULT; font-variant-ligatures: none; - font-size: 13px; -} \ No newline at end of file + font-size: 16px; + margin: 0px; + overflow-x: hidden; +} + +main { + overflow-x: auto; +} + +a { + color: $COLOR_BACKGROUND_HEADER; +} + +a:hover { + color: $COLOR_LINK_ELIXIR; +} + +p { + color: $COLOR_TEXT; +} diff --git a/_sass/elixir/_cards.scss b/_sass/elixir/_cards.scss new file mode 100644 index 0000000000000000000000000000000000000000..8e3e679744360f46f5a9f0bb8d4e156c4b935f35 --- /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 0000000000000000000000000000000000000000..05f76bcadc1911a45ab521edefcddddb6342049c --- /dev/null +++ b/_sass/elixir/_footer.scss @@ -0,0 +1,120 @@ +#site-footer-primary { + #site-footer-primary-wrapper { + background: #3e3e3e; + font-size: 0.875rem; + + div { + margin-left: 15px; + margin-right: 15px; + min-width: 15%; + + .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; + flex-wrap: wrap-reverse; + + div { + margin-left: 15px; + } + + ul { + list-style: none; + padding-inline-start: 0; + padding-right: 100px; + @media only screen and (min-width: $FOOTER_RESPONSIVENESS_THRESHOLD) { + li { + display: inline-block; + } + } + @media only screen and (max-width: $FOOTER_RESPONSIVENESS_THRESHOLD) { + 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: $FOOTER_RESPONSIVENESS_THRESHOLD) { + width: 90%; + } + } + } +} diff --git a/_sass/elixir/_header.scss b/_sass/elixir/_header.scss new file mode 100644 index 0000000000000000000000000000000000000000..a6fc792dbce96cb7ac7303bee0f1f87a4ac29ec9 --- /dev/null +++ b/_sass/elixir/_header.scss @@ -0,0 +1,131 @@ +#site-header { + background: $COLOR_BACKGROUND_HEADER; + height: 93px; + margin-top: -15px; + margin-bottom: 37px; + + #site-header-wrapper { + ul { + @media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) { + padding-inline-start: 5px; + } + @media only screen and (min-width: $HEADER_RESPONSIVENESS_THRESHOLD) { + padding-inline-start: 250px; + } + } + + .elixir-image { + position: relative; + top: 26px; + float: left; + width: 220px; + margin-right: 20px; + + img { + width: 150px; + padding-left: 10px; + } + } + + .hamburger { + background: none; + + input { + display: none; + } + @media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) { + 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; + + li { + list-style: none; + float: left; + margin: 0; + padding: 0; + + a { + display: block; + white-space: nowrap; + @media only screen and (max-width: $HEADER_RESPONSIVENESS_THRESHOLD) { + 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/_helpers.scss b/_sass/elixir/_helpers.scss new file mode 100644 index 0000000000000000000000000000000000000000..5ffed3bb66b054873216fb9e61b2c75d9c95b616 --- /dev/null +++ b/_sass/elixir/_helpers.scss @@ -0,0 +1,12 @@ +.pull-right { + float: right; + color: orange; + font-weight: 700; + font-size: larger; +} + +.flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} diff --git a/_sass/elixir/_layout.scss b/_sass/elixir/_layout.scss index 7f8ddb97a32b0240dcb0227b75523d07454e40ef..90cc3337090245b82bfdd25f1f20f33076e9afb6 100644 --- a/_sass/elixir/_layout.scss +++ b/_sass/elixir/_layout.scss @@ -1,156 +1,202 @@ -#site-header { - background: $COLOR_BACKGROUND_HEADER; - height: 93px; - margin-top: -15px; - - #site-header-wrapper { - padding-left: $PADDING_PAGE_LEFT; - - ul { - margin-left: 0px; - position: relative; - top: 66px; - - li { - list-style: none; - float: left; - margin: 0; - padding: 0; - - img { - width: 150px; - position: relative; - bottom: 46px; - padding-left: 10px; - } - - a { - display: block; - white-space: nowrap; - padding: 2px 12px; - margin-left: 0; - color: #fefefe; - transition: color 0.25s; - text-transform: uppercase; - font-size: 0.875rem; - text-decoration: none; - } - - a:hover { - color: $COLOR_LINK_ELIXIR; - border-color: $COLOR_LINK_ELIXIR; - text-decoration: none; - } +#site-content { + h1.title { + font-size: 37px; + color: #005472; + line-height: 1.1; + font-weight: 300; + margin: 0 0 12px; + } + + article.one_column { + display: block; + } + + article { + padding-bottom: 50px; + min-height: 400px; + padding-right: 10px; + margin: 0; + display: flex; + + hr { + border-top: solid 1px #f7f7f7; + } + + div.narrower-article-div { + .index-flex { + .index-gray-box { + padding: 20px; + border-radius: 6px; + background: #efefef; + border: 1px solid #ebebeb; + width: auto; + margin-right: 2%; + margin-bottom: 15px; + } + + .index-photo { + border: solid 0 black; + flex-grow: 1; + margin-right: 2%; + + img { + width: -webkit-fill-available; + max-width: 100%; + min-width: 200px; + } + } + + .index-box { + flex-grow: 1; + margin-right: 2%; + margin-bottom: 2%; + border-radius: 0 0 12px 12px; + background: #efefef; + border: 1px solid #ebebeb; + + img { + width: 100%; + } + + .index-box-caption { + color: #262626; + font-size: 1rem; + padding: 12px 5px 12px 12px; + + a { + text-decoration: none; + font-weight: bolder; } + } } + } } -} -#site-content { - div { - padding-left: $PADDING_PAGE_LEFT; - width: $WIDTH_CONTENT; - padding-right: 10px; - margin: 0px; - } - - h1.title { - font-size: 37px; - color: #005472; - line-height: 1.1; - font-weight: 300; - margin: 0 0 12px 0; - } -} + img.fit-width { + display: -webkit-box; + width: -webkit-fill-available; + max-width: 600px; + } -#site-footer-primary { - #site-footer-primary-wrapper { - display: flex; - flex-direction: row; - - background: #3e3e3e; - font-size: 0.875rem; - padding-left: 13%; - - div { - margin-left: 15px; - margin-right: 15px; - - h3 { - border-bottom: 1px solid #848484; - font-size: 1rem; - color: #ebebeb; - transition: color 0.15s; - } + #right-column { + padding-left: 20px; + min-width: 220px; + margin-top: 23px; + } - ul { - margin-left: 10px; - - li { - list-style: none; - width: auto; - float: none; - min-width: 0; - - a { - display: inline-block; - zoom: 1; - font-size: 11px; - line-height: 1.1; - color: #ebebeb; - transition: color 0.15s; - padding: 1px 4px 2px 0; - border-bottom: none; - margin-bottom: 0; - text-decoration: none; - } - - a:hover { - text-decoration: none; - color: #f47d21; - text-decoration: underline; - } - } - } + #left-column { + margin-left: 10px; + padding-top: 20px; + padding-right: 20px; + width: 220px; + min-width: 220px; + + h2 { + color: #005472; + font-size: 25px; + line-height: 1.2; + font-weight: 300; + margin: 0; + border-bottom: 1px solid #ccc; + } + + ul { + width: 200px; + padding-inline-start: 20px; + list-style: none; + margin: 0; + + li { + padding: 0; + margin: 0; + + a { + color: #222; + line-height: 1.2; + text-decoration: none; + display: block; + border-bottom: 1px solid #efefef; + padding: 10px 5px 10px 15px; + } + + a.active { + font-weight: 800; + color: $COLOR_LINK_ELIXIR !important; + } + + a:hover { + color: #060606; + text-decoration: underline; + } } + } } + } } -#site-footer-secondary { - #site-footer-secondary-wrapper { - background: #023452; - border-top: 1px solid #333; - padding-left: 13%; - color: #ebebeb; - font-size: 0.875rem; - display: flex; - - ul { - list-style: none; - padding-right: 100px; - - li { - display: inline-block; - } +table { + margin-top: 10px; + border: solid 1px #ffdfdf; + border-collapse: collapse; - a { - display: inline-block; - color: #ffffff; - font-weight: 800; - transition: color 0.15s; - padding-left: 15px; - padding-right: 15px; - } + thead tr { + font-weight: 700; - a:hover { - color: orange; - text-decoration: none; - } - } + th { + background: $COLOR_BACKGROUND_HEADER; + padding: 7px 12px; + color: #f6f6f6; + border-bottom: 0; + text-align: left; + } + } - #address { - color: #888; - font-size: 11px; - } + tbody tr { + padding: 9px 2px; + border: solid 1px #d6d6d6; + + td { + padding: 5px 20px 5px 10px; } -} \ No newline at end of file + } +} + +div.post { + width: 80%; + border-left: solid 5px #f4f4f4; + border-bottom: solid 2px #f4f4f4; + padding-left: 10px; + margin-top: 20px; + margin-bottom: 30px; + + .post-title { + font-size: 23px; + text-decoration: none; + font-weight: 600; + } + + .post-date { + font-size: smaller; + } +} + +div header h1 { + font-size: xx-large; + font-weight: 100; + text-transform: uppercase; +} + +input.search { + width: 330px; + height: 35px; + font-size: 20px; + padding: 5px 5px 5px 10px; + border-radius: 5px; + border: solid 3px #f47d21; +} + +button.search { + margin-left: 8px; + height: 50px; + font-size: 20px; +} diff --git a/_sass/elixir/_responsive.scss b/_sass/elixir/_responsive.scss new file mode 100644 index 0000000000000000000000000000000000000000..3d5ffe39793ba33a3b1cc3bcf15da62827c2950b --- /dev/null +++ b/_sass/elixir/_responsive.scss @@ -0,0 +1,91 @@ +// RESPONSIVENESS OF LAYOUT + +$MOBILE_DEVICES: 600px; +$TABLET_DEVICES: 1225px; +$LOW_RES: 1605px; +$HD_RES: 1930px; + +@media only screen and (max-width: $MOBILE_DEVICES) { + .index-flex { + display: block; + } + #right-column { + padding-left: 5px; + .post { + width: calc(100% - 20px); + border-right: solid 1px #eee; + border-top: solid 1px #eee; + border-radius: 20px 20px 0px 0px; + padding-top: 10px; + } + h3 { + text-align: center; + margin-bottom: 50px; + } + } +} + +@media only screen and (max-width: $LOW_RES) { + .body-wrapper { + padding-left: 2%; + } +} + + +@media only screen and (min-width: $MOBILE_DEVICES) { + .index-flex { + display: flex; + } + #site-content article div.narrower-article-div .index-flex .index-gray-box { + min-width: 300px; + width: 400px; + } +} + +@media only screen and (max-width: $TABLET_DEVICES) { + .margin-wrapper { + padding-left: 2%; + } + + #site-header #site-header-wrapper .elixir-image { + left: 20px; + } + + #site-content { + article { + display: block; + div#left-column { + padding-top: 0px; + width: calc(98% - 20px); + ul { + width: calc(96% - 20px); + } + } + div.narrower-article-div .index-flex .index-gray-box { + padding: 5px; + p { + margin-block-start: 5px; + } + } + } + } +} + +@media only screen and (min-width: $TABLET_DEVICES) and (max-width: $HD_RES) { + .margin-wrapper { + padding-left: calc(2% + 200px); + } + .body-wrapper.margin-wrapper { + padding-left: 2%; + } +} + +@media only screen and (min-width: $HD_RES) { + .margin-wrapper { + padding-left: 20%; + } + .body-wrapper { + padding-left: calc(20% - 220px); + width: calc(85% - 200px); + } +} diff --git a/_sass/reset.scss b/_sass/reset.scss new file mode 100644 index 0000000000000000000000000000000000000000..ed11813c4e691793cebd51002408e510d8e2a691 --- /dev/null +++ b/_sass/reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/assets/ELIXIR_EU.png b/assets/ELIXIR_EU.png new file mode 100644 index 0000000000000000000000000000000000000000..4ab5f84477a00a439d7875691e4eab12e181ddfb Binary files /dev/null and b/assets/ELIXIR_EU.png differ diff --git a/assets/ELIXIR_LU.png b/assets/ELIXIR_LU.png new file mode 100644 index 0000000000000000000000000000000000000000..c28475ab6c42d4e19454c6fd8859bbc0b38adccc Binary files /dev/null and b/assets/ELIXIR_LU.png differ diff --git a/assets/baguettebox.min.css b/assets/baguettebox.min.css new file mode 100644 index 0000000000000000000000000000000000000000..e947fa65fbfee5c3c5052a33c9d1bcae87b0ea78 --- /dev/null +++ b/assets/baguettebox.min.css @@ -0,0 +1,6 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.0 + * @url https://github.com/feimosi/baguetteBox.js + */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}} diff --git a/assets/baguettebox.min.js b/assets/baguettebox.min.js new file mode 100644 index 0000000000000000000000000000000000000000..72003728959b7ed9c59d26dca5531e0bfe614817 --- /dev/null +++ b/assets/baguettebox.min.js @@ -0,0 +1,7 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.0 + * @url https://github.com/feimosi/baguetteBox.js + */ +!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.baguetteBox=t()}(this,function(){"use strict";var s,l,u,c,d,f='',g='',p='',b={},m={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},v={},h=[],o=0,n=!1,i={},a=!1,y=/.+\.(gif|jpe?g|png|webp)/i,w={},k=[],r=null,x=function(e){-1!==e.target.id.indexOf("baguette-img")&&j()},C=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,D()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,X()},B=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},T=function(e){i.count++,1