Merged the new version of template

.gitignore

@@ -3,3 +3,4 @@
 .sass-cache
 _site
 Gemfile.lock
+.DS_Store
\ No newline at end of file

.gitlab-ci.yml

@@ -24,5 +24,5 @@ pages:
     paths:
     - public
   only:
-  - master
+  - frozen-jl
 

README.md

 # jekyll-theme-lcsb-default
 
-Welcome to our LCSB Jekyll theme!
+Welcome to our LCSB Jekyll theme! 
 
 To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
 
@@ -30,6 +30,10 @@ Or install it yourself as:
 
 ## Usage
 
+### Custom images in the header
+Create a folder in `assets/banners` directory, with `banner.svg`, `logos.svg` and `motto.svg` files (for reference, consult `assets/banners/frozen` directory. Do not exceed image dimensions). Update `_config.yml` file with the name of directory you created for the images. 
+In case `logos.svg` file is wide, change `logo: small` to `logo: big` in `_config.yml` file.
+
 ### Enabling Google Analytics
 
 To enable Google Anaytics, add the following lines to your Jekyll site:

_config.yml

@@ -15,7 +15,8 @@
 # in the templates via {{ site.myvariable }}.
 title: LCSB Jekyll default theme
 email: lcsb-sysadmins@uni.lu
-banner: minerva
+banner: frozen  # When you have custom images, change this setting's value to the name of the folder containing them
+logo: small  # Change to "big" (without quotas) in case of having broad logo
 date: "2018"
 description: >- # this means to ignore newlines until "baseurl:"
   This is a default LCSB Jekyll template.
@@ -23,6 +24,7 @@ baseurl: "/jekyll-theme-lcsb-default" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: uni_lu
 facebook_username: uni.lu
+linkedin_schoolname: university-of-luxembourg
 
 # Build settings
 markdown: kramdown
@@ -40,3 +42,14 @@ plugins:
 #   - vendor/cache/
 #   - vendor/gems/
 #   - vendor/ruby/
+
+kramdown:
+  auto_ids:      true
+  entity_output: as_char
+  toc_levels:    1..6
+  smart_quotes:  lsquo,rsquo,ldquo,rdquo
+  input:         GFM
+  hard_wrap:     false
+  footnote_nr:   1
+  show_warnings: true
+  parse_block_html: true
\ No newline at end of file

_includes/footer.html

@@ -2,11 +2,14 @@
   <div class="wrapper footer-wrapper">
     <data class="u-url" href="{{ "/" | relative_url }}"></data>
 
-      <div>
+      {% comment %}<div>
         {%- include social.html -%}
-      </div>
+      </div>{% endcomment %}
       <br/>
-      <div class="footer-cp">Copyright © <a href="https://wwwen.uni.lu/">Université du Luxembourg</a> {{ site.date | escape }}. All rights reserved.</div>
+      <div class="footer-cp">
+          <p>© <a href="https://wwwen.uni.lu/">Université du Luxembourg</a> {{ site.date | escape }}. All rights reserved.</p>
+        {%- include social.html -%}
+      </div>
     </div>
 
 

_includes/head.html

@@ -5,6 +5,8 @@
   {%- seo -%}
   <link rel="shortcut icon" type="image/png" href="{{ '/assets/favicon.png' | relative_url }}"/>
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">
+
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}

_includes/header.html

@@ -3,8 +3,25 @@
     <div>
       {%- assign default_paths = site.pages | map: "path" -%}
       {%- assign page_paths = site.header_pages | default: default_paths -%}
-      <img src="{{ '/assets/banners/banner-' | relative_url }}{{site.banner}}.svg" type="image/svg+xml"></img>
 
+      <div class="custom-header">
+        <a href="{{ '/' | relative_url }}"><img class="img-uni-lu"
+             src="{{ '/assets/banners/uni-logo.svg' | relative_url }}"
+             type="image/svg+xml"
+        /></a>
+        <img class="img-banner img-banner-main"
+             src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/banner.svg"
+             type="image/svg+xml"
+        />
+        <img class="img-banner img-banner-motto"
+             src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/motto.svg"
+             type="image/svg+xml"
+        />
+        <img class="img-lcsb img-logo-{{ site.logo }}"
+             src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/logos.svg"
+             type="image/svg+xml"
+        />
+      </div>
 
       {%- if page_paths -%}
         <nav class="site-nav">
@@ -19,17 +36,24 @@
             </span>
           </label>
 
-          <div class="wrapper trigger">
+          <div class="wrapper trigger page-tabs">
             {%- assign my_pages = site.pages | sort:"order" -%}
 
             {%- for my_page in my_pages -%}
               {%- if my_page.title -%}
+                {%- if page.url == my_page.url -%}
+              <a class="page-link active" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+                {% else %}
               <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+                {%- endif -%}
               {%- endif -%}
             {%- endfor -%}
           </div>
         </nav>
       {%- endif -%}
+
+      {%- if page_paths -%}
+        {%- endif -%}
     </div>
   </header>
 

_includes/scripts.html

+{% comment %}
+Uncomment those if needed
+{% endcomment %}
+{% comment %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+{% endcomment %}
\ No newline at end of file

_includes/social.html

 <ul class="social-media-list">
+  {%- if site.twitter_username -%}<li><a href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}"><svg class="svg-icon svg-icon-twitter"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg></a></li>{%- endif -%}
+    {%- if site.facebook_username -%}<li><a href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}"><svg class="svg-icon svg-icon-fb"><use xlink:href="{{ '/assets/minima-social-icons.svg#facebook' | relative_url }}"></use></svg></a></li>{%- endif -%}
+  {%- if site.linkedin_schoolname -%}<li><a href="https://www.linkedin.com/school/{{ site.linkedin_schoolname| cgi_escape | escape }}"><svg class="svg-icon svg-icon-linkedin"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg></a></li>{%- endif -%}
+
   {%- if site.dribbble_username -%}<li><a href="https://dribbble.com/{{ site.dribbble_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#dribbble' | relative_url }}"></use></svg> <span class="username">{{ site.dribbble_username| escape }}</span></a></li>{%- endif -%}
-  {%- if site.facebook_username -%}<li><a href="https://www.facebook.com/{{ site.facebook_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#facebook' | relative_url }}"></use></svg> <span class="username">{{ site.facebook_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.flickr_username -%}<li><a href="https://www.flickr.com/photos/{{ site.flickr_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#flickr' | relative_url }}"></use></svg> <span class="username">{{ site.flickr_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.github_username -%}<li><a href="https://github.com/{{ site.github_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#github' | relative_url }}"></use></svg> <span class="username">{{ site.github_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.instagram_username -%}<li><a href="https://instagram.com/{{ site.instagram_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#instagram' | relative_url }}"></use></svg> <span class="username">{{ site.instagram_username| escape }}</span></a></li>{%- endif -%}
-  {%- if site.linkedin_username -%}<li><a href="https://www.linkedin.com/in/{{ site.linkedin_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg> <span class="username">{{ site.linkedin_username| escape }}</span></a></li>{%- endif -%}
+  {%- if site.linkedin_username -%}<li><a href="https://www.linkedin.com/in/{{ site.linkedin_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg> <span class="username">{{ site.linkedin_schoolname| escape }}</span></a></li>{%- endif -%}
   {%- if site.pinterest_username -%}<li><a href="https://www.pinterest.com/{{ site.pinterest_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#pinterest' | relative_url }}"></use></svg> <span class="username">{{ site.pinterest_username| escape }}</span></a></li>{%- endif -%}
   {%- for mst in site.mastodon -%}{%- if mst.username and mst.instance -%}<li><a href="https://{{ mst.instance| cgi_escape | escape}}/@{{mst.username}}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#mastodon' | relative_url }}"></use></svg> <span class="username">{{ mst.username|escape }}</span></a></li>{%- endif -%}{%- endfor -%}
-  {%- if site.twitter_username -%}<li><a href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg> <span class="username">{{ site.twitter_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.youtube_username -%}<li><a href="https://youtube.com/{{ site.youtube_username| cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#youtube' | relative_url }}"></use></svg> <span class="username">{{ site.youtube_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.googleplus_username -%}<li><a href="https://plus.google.com/{{ site.googleplus_username| escape }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#googleplus' | relative_url }}"></use></svg> <span class="username">{{ site.googleplus_username| escape }}</span></a></li>{%- endif -%}
   {%- if site.rss -%}<li><a href="{{ 'feed.xml' | relative_url }}"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use></svg> <span>{{ site.rss | escape }}</span></a></li>{%- endif -%}

_layouts/default.html

@@ -3,18 +3,18 @@
 
   {%- include head.html -%}
 
-  <body>
-
-    <div class="main">
+<body>
+  <div class="main">
+    <div class="content-wrapper">
       {%- include header.html -%}
       <main class="page-content" aria-label="Content">
         <div class="wrapper">
           {{ content }}
         </div>
       </main>
-
-      {%- include footer.html -%}
     </div>
-  </body>
-
+    {%- include footer.html -%}
+  </div>
+</body>
+{%- include scripts.html -%}
 </html>

_layouts/frozen.html

+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+<body>
+  <div class="main">
+    <div class="content-wrapper">
+      {%- include header.html -%}
+      <main class="fpage-content" aria-label="Content">
+        <div class="wrapper">
+          {{ content }}
+        </div>
+      </main>
+    </div>
+  {%- include footer.html -%}
+</div>
+
+</body>
+{%- include scripts.html -%}
+</html>

_sass/minima.scss

@@ -14,20 +14,21 @@ $text-color:       #111 !default;
 $background-color: #fdfdfd !default;
 $brand-color:      #2a7ae2 !default;
 
-$grey-color:       #828282 !default;
+$grey-color:       #5c5c5c !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
 $grey-color-dark:  darken($grey-color, 25%) !default;
 
 $table-text-align: left !default;
 
 // Width of the content area
-$content-width:    960px !default;
+$content-width:    1080px !default;
 
-$on-palm:          600px !default;
-$on-laptop:        960px !default;
+$on-palm:          640px !default;
+$on-laptop:        1080px !default;
 
 // height of the banner
 $banner-height: 100px;
+$footer-height: 50px;
 
 // Use media queries like this:
 // @include media-query($on-palm) {
@@ -50,5 +51,7 @@ $banner-height: 100px;
 @import
   "minima/base",
   "minima/layout",
-  "minima/syntax-highlighting"
+  "minima/frozen",
+  "minima/syntax-highlighting",
+  "minima/lcsb"
 ;

_sass/minima/_base.scss

@@ -8,8 +8,8 @@ dl, dd, ol, ul, figure {
   padding: 0;
 }
 
-html, body {
-  height:100%;
+html, body{
+  height: 100%;
 }
 
 /**
@@ -24,7 +24,7 @@ body {
        -o-font-feature-settings: "kern" 1;
           font-feature-settings: "kern" 1;
   font-kerning: normal;
-  background: url('bg-overlay.svg')
+  background: url('bg-overlay.svg');
 }
 
 
@@ -171,10 +171,10 @@ pre {
 
 .main {
   max-width: $content-width;
+  min-width: 375px;
   margin-right: auto;
   margin-left: auto;
-  height: 100%;
-  @extend %clearfix;
+
   position: relative;
   background-color: $background-color;
   box-shadow: 0 10px 20px 0 #999999;
@@ -185,6 +185,9 @@ pre {
     padding-right: $spacing-unit / 2;
     padding-left: $spacing-unit / 2;
   }
+  display: flex;
+  flex-direction: column;
+  height: auto;
 }
 
 .wrapper {
@@ -192,6 +195,33 @@ pre {
   padding-left: $spacing-unit;
 }
 
+@media (max-width: 640px) {
+  .main {
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+
+  .site-header[role=banner] {
+    height: 126px;
+  }
+}
+
+@media (max-width: 500px) {
+  .wrapper {
+    padding-left: 2%;
+    padding-right: 1%;
+  }
+
+  .main {
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+
+  .site-header[role=banner] {
+    height: 70px;
+  }
+}
+
 /**
  * Clearfix
  */
@@ -214,6 +244,22 @@ pre {
     fill: #{$grey-color};
     padding-right: 5px;
     vertical-align: text-top;
+    transition: all .4s ease-in-out;
+}
+
+.svg-icon-fb:hover {
+  fill: #3b5998;
+  transform: scale(1.3);
+}
+
+.svg-icon-linkedin:hover {
+  fill: #0077b2;
+  transform: scale(1.3);
+}
+
+.svg-icon-twitter:hover {
+  fill: #00aced;
+  transform: scale(1.3);
 }
 
 .social-media-list {

_sass/minima/_frozen.scss

+.fpage-content {
+    margin-top: 30px;
+    @include media-query($on-palm) {
+      margin-top: 5px;
+      padding-top: 0px;
+    }
+    padding: $spacing-unit 0;
+    padding-bottom: $footer-height;
+  }
+
+.rtitle {
+    margin: 0px 20px 50px 20px;
+    padding: 30px;
+    border: 1px solid darkgrey;
+    p {
+        color: #666666;
+        @include relative-font-size(0.9);
+    }
+}
+
+
+.rblock {
+    margin: 0px 20px 50px 20px;
+    padding: 10px 30px 10px 30px;
+    outline: 1px solid darkgrey;
+    height: 330px;
+    width: $content-width / 5 + 24;
+    float: left;
+    p {
+        color: #666666;
+        @include relative-font-size(0.9);
+        display: inline-block;
+        vertical-align: middle;
+        float: none;
+        text-align: justify;
+        padding-top: 30px;
+    }
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
+}
\ No newline at end of file

_sass/minima/_layout.scss

+html {
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
+
 /**
  * Site header
  */
@@ -6,8 +11,15 @@
   height: $banner-height;
   // Positioning context for the mobile navigation icon
   position: relative;
+  margin-top: 30px;
+}
+
+
+.content-wrapper {
+  flex: 1 0 auto;
 }
 
+
 /**
 * SVG BANNER
 */
@@ -27,9 +39,14 @@
 }
 
 .site-nav {
+  margin-top: 10px;
   float: right;
   line-height: $base-line-height * $base-font-size * 2.25;
 
+  .page-tabs {
+    padding-right: 50px;
+  }
+
   .nav-trigger {
       display: none;
   }
@@ -38,19 +55,89 @@
     display: none;
   }
 
+  .page-link:hover {
+    text-decoration: none;
+  }
+
+  .page-link:hover:after {
+    border-color: #58595B;
+  }
+
+  @media (min-width: 640px) {
+    .page-link:after {
+      content: " ";
+      width: 22px;
+      border-bottom: solid 3px #cbcfda;
+      position: absolute;
+      top: 30px;
+      left: 18px;
+      float: left;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .page-link.active:before {
+      content: "\2022";
+      margin-right: 10px;
+      position: absolute;
+      left: 12%;
+      color: rgb(23, 168, 225);
+    }
+    .page-link.active {
+      font-weight: 600;
+      color: rgb(23, 168, 225);
+    }
+    .page-link {
+      color: #222;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .page-link:hover {
+      color: #222 !important;
+
+        &:not(.active) {
+          // padding-top: 20px;
+        }
+    }
+
+    .page-link {
+      min-width: 60px;
+      position: relative;
+
+      margin: 0 0 0 -1px;
+      padding: 2px 10px 4px 9px;
+
+      float: left;
+
+      -moz-transition: padding 0.8s ease;
+      -webkit-transition: padding 0.8s ease;
+      -o-transition: padding 0.8s ease;
+      transition: padding 0.8s ease;
+
+      z-index: 8;
+    }
+
+    .active:after {
+      border-color: #58595B;
+    }
+  }
+
   .page-link {
-    color: $text-color;
+    // color: $text-color;
     line-height: $base-line-height;
+    font-weight: 600;
+    text-align: center;
 
     // Gaps between nav items, but not on the last one
     &:not(:last-child) {
-      margin-right: 20px;
+      // margin-right: -6px;
     }
   }
 
   @include media-query($on-palm) {
     position: absolute;
-    top: 9px;
+    top: -25px;
     right: $spacing-unit / 2;
     background-color: $background-color;
     border: 1px solid $grey-color-light;
@@ -109,13 +196,15 @@
  */
 .site-footer {
   padding: $spacing-unit 0;
-  position: absolute;
   bottom: 0;
-  height: $spacing-unit * 2;
   display:flex;
   justify-content:center;
   align-items:center;
   width:100%;
+  margin-top: -$footer-height + $spacing-unit;
+  flex-shrink: 0;
+  height: $footer-height;
+  line-height: 15px
 }
 
 .footer-wrapper {
@@ -174,9 +263,15 @@
  * Page content
  */
 .page-content {
-  margin-top: 100px;
-  margin-left: 50px;
+  margin-top: 30px;
+  margin-left: 5%;
+  @include media-query($on-palm) {
+    margin-top: 5px;
+    padding-top: 0px;
+    margin-left: 1%;
+  }
   padding: $spacing-unit 0;
+  padding-bottom: $footer-height;
 }
 
 .page-heading {
@@ -252,5 +347,3 @@
     }
   }
 }
-
-

_sass/minima/_lcsb.scss

+.custom-header {
+  border-bottom: solid 1pt #777;
+  min-width: 375px;
+  margin-top: 3px;
+}
+
+// Normal (desktop) ========================================================
+.img-uni-lu {
+  bottom: -2px;
+  border: solid 1pt #777;
+  border-bottom: solid 2px white;
+  border-radius: 14% 14% 0 0;
+  margin-left: 8%;
+  padding: 20px 27px 0px 27px;
+  position: relative;
+  width: 77px;
+  height: 66px;
+}
+
+.img-banner {
+  bottom: -20px;
+  position: relative;
+}
+
+.img-banner-main {
+  margin-left: 2%;
+  height: 30px;
+}
+
+.img-banner-motto {
+  width: 256px;
+  margin-left: 10px;
+}
+
+.img-lcsb {
+  float: right;
+  width: 250px;
+  position: absolute;
+  right: 0px;
+}
+
+.social-media-list {
+  float: right;
+  padding-right: 2%;
+  position: relative;
+}
+
+.svg-icon {
+  margin: 0px;
+  padding: 0px;
+}
+
+// Big screen ====================================================================================