Verified Commit 664b62b6 authored by Roberto Bochet's avatar Roberto Bochet
Browse files

Added css for the courses pages

parent 47ef6b94
{% if index == 1 %}
<div class="course-edition bg-blueish-gray">
{% else %}
<div class="course-edition">
{% endif %}
{% if page.layout == "course" %}
<h2>Next edition</h2>
{% endif %}
<h2 id="{{ edition.date | date: '%Y-%m' }}">{{ edition.date | date: "%b %Y" }}</h2>
{% if edition.description %}
<p class="description">{{ edition.description }}</p>
{% endif %}
<h3>Schedule</h3>
<div class="schedule">
{% for session in edition.schedule %}
<div class="session">
<div class="date">
{% if session.date %}
<div>{{ session.date | date: "%b %d" | upcase }}</div>
<div class="time">{{ session.date | date: "%H:%M" }}</div>
{% endif %}
</div>
<div class="room">
{% if session.room %}
<div class="caption">Room</div>
<div>{{ session.room }}</div>
{% endif %}
</div>
<div class="topics">
{% for topic in session.topics %}
<div>{{topic}}</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
\ No newline at end of file
---
layout: default
---
<div class="course-info">
<div class="container">
{% if page.title_image %}
<img src="{{ page.title_image }}" alt="title"/>
{% else %}
<h1 class="postTitle">{{ page.title }}</h1>
{% endif %}
{{content}}
<div class="disclaimer">Iniziativa realizzata con il contributo del Politecnico di Milano</div>
{% assign data = site.data.courses.courses[page.course] %}
<div class="bg-blueish-gray course-info">
<div class="container text-align-center">
<img src="{{ data.logo }}" alt="course logo"/>
<p>{{ data.short_description }}</p>
</div>
</div>
<div class="bg-blueish-gray course-schedule">
<h3>Schedule</h3>
<div class="schedule">
{% for session in page.schedule %}
<div class="session">
<div class="date">
{% if session.date %}
<div class="caption">Date</div>
<div>{{ session.date | date: "%b %d" | upcase }}</div>
<div class="time">{{ session.date | date: "%H:%M" }}</div>
{% endif %}
</div>
<div class="room">
{% if session.room %}
<div class="caption">Room</div>
<div>{{ session.room }}</div>
{% endif %}
</div>
<div class="topics">
{% for topic in session.topics %}
<div>{{topic}}</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% if data.description %}
<div class="bg-yellow">
<div class="container text-align-center">
<p>{{ data.description }}</p>
</div>
</div>
{% endif %}
{% assign editions = site.data.courses.editions | values | where: "course",page.course | order: "date" | reverse %}
{% assign edition = editions[0] %}
{% include course_edition.html %}
<div class="bg-blueish-gray material-kit course-past-sessions-btn">
<a class="btn btn-round btn-lg" href="./past/">See past editions</a>
</div>
\ No newline at end of file
---
layout: default
---
{% assign data = site.data.courses.courses[page.course] %}
<div class="bg-blueish-gray course-info">
<div class="container text-align-center">
<img src="{{ data.logo }}" alt="course logo"/>
<h2>Past editions</h2>
</div>
</div>
{% comment %}List all courses editions and remove the last one{% endcomment %}
{% assign editions = site.data.courses.editions | values | where: "course",page.course | order: "date" | reverse %}
{% assign count = editions | size | minus: 1 %}
{% assign editions = editions | slice: 1,count %}
{% assign index = 1 %}
{% for edition in editions %}
{% assign index = index | plus: 1 | modulo:2 %}
{% include course_edition.html %}
{% endfor %}
\ No newline at end of file
---
layout: default
---
<div class="course-info">
<div class="container">
{% if page.title_image %}
<img src="{{ page.title_image }}" alt="title"/>
{% else %}
<h1 class="postTitle">{{ page.title }}</h1>
{% endif %}
{{content}}
<div class="disclaimer">Iniziativa realizzata con il contributo del Politecnico di Milano</div>
</div>
</div>
<div class="bg-blueish-gray course-schedule">
<h3>Schedule</h3>
<div class="schedule">
{% for session in page.schedule %}
<div class="session">
<div class="date">
{% if session.date %}
<div class="caption">Date</div>
<div>{{ session.date | date: "%b %d" | upcase }}</div>
<div class="time">{{ session.date | date: "%H:%M" }}</div>
{% endif %}
</div>
<div class="room">
{% if session.room %}
<div class="caption">Room</div>
<div>{{ session.room }}</div>
{% endif %}
</div>
<div class="topics">
{% for topic in session.topics %}
<div>{{topic}}</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
......@@ -5,7 +5,11 @@ body > div {
100% calc(100% - 100vw * 0.0524),
0% 100%));
padding: calc(0.0524 * 50vw) 0;
margin-top: calc(-0.0524 * 100vw - 1px);/*1px improved the aliasing problem*/
margin-top: calc(-0.0524 * 100vw - 1px); /*1px improved the aliasing problem*/
.container {
margin: 75px auto;
}
}
body > div:first-of-type {
......@@ -19,5 +23,5 @@ body > footer {
100% 100%,
0% 100%));
padding: 150px 0 100px 0;
margin-top: calc(-0.0524 * 100vw - 1px);/*1px improved the aliasing problem*/
margin-top: calc(-0.0524 * 100vw - 2px); /*1px improved the aliasing problem*/
}
\ No newline at end of file
......@@ -9,11 +9,14 @@ body > div {
.container {
max-width: 800px;
margin: 75px auto;
padding: 0;
width: 100%;
margin: 25px auto;
padding: 0 10px;
h1, h2, h3 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
> img {
......
.course-info {
img {
max-width: 600px;
max-height: 200px;
}
.disclaimer {
font-size: 0.6em;
margin-top: 50px;
......@@ -7,14 +12,20 @@
}
}
.course-schedule {
.course-edition {
display: flex;
flex-direction: column;
h3 {
h2, h3 {
margin: 50px auto 25px auto;
}
.description {
max-width: 600px;
margin: 0 auto;
text-align: justify;
}
.schedule {
align-self: stretch;
display: flex;
......@@ -57,6 +68,18 @@
display: grid;
grid-gap: 10px;
text-align: right;
& > div:before {
content: "•";
margin-right: 5px;
}
}
}
}
.course-past-sessions-btn {
.btn {
margin: 50px auto;
text-transform: uppercase;
}
}
\ No newline at end of file
......@@ -15,6 +15,13 @@
@import "partials/typography";
@import "partials/mixins";
// Import Material Kit
.material-kit {
@import "material-kit/assets/scss/material-kit";
}
@import "material-tweaks";
// Modules
@import "modules/buttons";
@import "modules/forms";
......@@ -27,12 +34,6 @@
@import "layout/layout";
// Import Material Kit
.material-kit {
@import "material-kit/assets/scss/material-kit";
}
@import "material-tweaks";
// Mobile up base styles
@import "breakpoints/mobileup";
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment