Verified Commit 26ebbae8 authored by Roberto Bochet's avatar Roberto Bochet
Browse files

Coding gym styling code reviewed

parent 0b0017e9
.codinggym-info {
img {
max-height: 200px;
margin-bottom: 50px;
}
}
.codinggym-sessions {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 20px;
justify-content: center;
padding-left: 50px;
padding-right: 50px;
.session {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 200px;
height: 200px;
flex-shrink: 0;
overflow: hidden;
font-size: 1em;
padding: 20px;
line-height: 1;
font-family: sans-serif;
text-align: center;
> div {
display: flex;
flex-direction: column;
align-items: center;
> div {
margin: 0;
}
}
> hr {
width: 70%;
height: 2px;
border: 0;
margin: 0;
color: #fff;
background-color: #fff;
}
a {
font-size: 0.8em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
}
.year {
font-size: 0.8em;
}
.room_caption {
font-size: 0.7em;
}
&.new {
background: #47c1c7;
}
.time, .room, .registration_url {
display: none;
}
&.new .contest_url, &.new .coding_gym_url {
display: none;
}
&.new .time, &.new .room, &.new .registration_url {
display: flex;
}
}
}
\ No newline at end of file
......@@ -36,6 +36,7 @@
// Pages
@import "modules/courses";
@import "pages/coding_gym";
// Mobile up base styles
@import "breakpoints/mobileup";
......
#page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#coding_gym_logo {
max-height: 200px;
margin-bottom: 50px;
}
.sessions-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 20px;
justify-content: center;
}
.sessions-section {
padding: 100px 0;
}
.sessions-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 20px;
justify-content: center;
}
.session {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 200px;
height: 200px;
flex-shrink: 0;
overflow: hidden;
font-size: 1em;
padding: 20px;
line-height: 1;
font-family: sans-serif;
text-align: center;
}
.session > div {
display: flex;
flex-direction: column;
align-items: center;
}
.session > div > div {
margin: 0;
}
.session > hr {
width: 70%;
height: 2px;
border: 0;
margin: 0;
color: #fff;
background-color: #fff;
}
.session a {
font-size: 0.8em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
}
.session .year {
font-size: 0.8em;
}
.session .room_caption {
font-size: 0.7em;
}
.session.new {
background: #47c1c7;
}
.session .time, .session .room, .session .registration_url {
display: none;
}
.session.new .contest_url, .session.new .coding_gym_url {
display: none;
}
.session.new .time, .session.new .room, .session.new .registration_url {
display: flex;
}
\ No newline at end of file
......@@ -2,9 +2,6 @@
layout: default
title: Coding Gym
---
<link rel="stylesheet" href="{{ '/coding_gym/coding_gym.css' | relative_url }}"/>
<script>
(() => {
"use strict";
......@@ -17,48 +14,42 @@ title: Coding Gym
})();
</script>
<div>
<div class="codinggym-info">
<div class="container">
<img id="coding_gym_logo" src="{{ '/coding_gym/coding_gym_logo.svg' | relative_url }}" alt="Coding Gym logo"/>
<img src="{{ '/assets/img/coding_gym_logo.svg' | relative_url }}" alt="Coding Gym logo"/>
<p id="coding_gym_about">&#171;Coding Gym is a non-competitive programming lab format open to any language and
developed
for self-led improvement in technical and communication skills.&#187;</p>
<p>&#171;Coding Gym is a non-competitive programming lab format open to any language and
developed for self-led improvement in technical and communication skills.&#187;</p>
<P>In 2019 the POuL begins a collaboration with the association <a href="https://coding-gym.org/">Coding Gym</a>
to
bring this interesting format inside Politecnico walls.</P>
to bring this interesting format inside Politecnico walls.</P>
<p>During the lab sessions, the attendees will organize in couples and they will try to solve a programming
problem
in less than 30 minutes. At the end of the time there will be a comparison between the couples moderated by
trainers. This will be repeated for three problems.</p>
problem in less than 30 minutes. At the end of the time there will be a comparison between the couples
moderated by trainers. This will be repeated for three problems.</p>
<p>Below, you will find the past and future Coding Gym sessions, you can register to the next ones and tackle
again the past challenges.</p>
</div>
</div>
<div class="bg-blueish-gray sessions-section">
<h3>Sessions</h3>
<div class="sessions-list">
{% assign sessions = site.data.coding_gym | values | sort: "date" | reverse %}
{% for session in sessions %}
<div class="session bg-darker" data-date="{{ session.date }}">
<div class="date">
<div>{{ session.date | date: "%b %d" | upcase }}</div>
<div class="year">{{ session.date | date: "%Y" }}</div>
</div>
<div class="time">{{ session.date | date: "%H:%M" }}</div>
<div class="room">
<div class="room_caption">Room</div>
<div>{{ session.room }}</div>
</div>
<hr/>
<a class="registration_url" href="{{ session.registration_url }}">registration</a>
<a class="contest_url" href="{{ session.contest_url }}">HackerRank contest</a>
<a class="coding_gym_url" href="{{ session.coding_gym_url }}">Coding Gym site</a>
<div class="codinggym-sessions bg-blueish-gray">
{% assign sessions = site.data.coding_gym | values | sort: "date" | reverse %}
{% for session in sessions %}
<div class="session bg-darker" data-date="{{ session.date }}">
<div class="date">
<div>{{ session.date | date: "%b %d" | upcase }}</div>
<div class="year">{{ session.date | date: "%Y" }}</div>
</div>
<div class="time">{{ session.date | date: "%H:%M" }}</div>
<div class="room">
<div class="room_caption">Room</div>
<div>{{ session.room }}</div>
</div>
{% endfor %}
<hr/>
<a class="registration_url" href="{{ session.registration_url }}">registration</a>
<a class="contest_url" href="{{ session.contest_url }}">HackerRank contest</a>
<a class="coding_gym_url" href="{{ session.coding_gym_url }}">Coding Gym site</a>
</div>
{% endfor %}
</div>
\ No newline at end of file
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