Commit b43b87af authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Merged the new version of template

parents 495c1be7 27523dc6
......@@ -3,3 +3,4 @@
.sass-cache
_site
Gemfile.lock
.DS_Store
\ No newline at end of file
......@@ -24,5 +24,5 @@ pages:
paths:
- public
only:
- master
- frozen-jl
# 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:
......
......@@ -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
......@@ -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>
......
......@@ -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 -%}
......
......@@ -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>
......
{% 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
<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 -%}
......
......@@ -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>
<!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>
......@@ -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"
;
......@@ -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 {
......
.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
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 @@
}
}
}
.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 ====================================================================================