Improve responsiveness

parent d998f8e7
......@@ -14,6 +14,7 @@ in progress
- Upgrade instance running on production
- Add English PDFs to "resources" section. Split "collected translations" from "resources" section.
- Improve responsiveness
2018-01-12 0.2.0
----------------
......
......@@ -113,14 +113,14 @@
<div class="card">
<header class="card-header">
<div class="card-header-title">
<div class="columns" style="width: 100%">
<div class="column is-7">
<div class="full-width">
<div class="is-pulled-left">
<div class="tags has-addons">
<span class="tag is-medium is-primary">Language</span>
<span class="tag is-medium">French</span>
</div>
</div>
<div class="column is-5">
<div class="is-pulled-right">
<div class="tags has-addons">
<span class="tag is-medium is-link">Format</span>
<span class="tag is-medium">PDF</span>
......@@ -131,11 +131,9 @@
</header>
<div class="card-image">
<figure class="image">
<div style="width:100%;text-align:center;">
<a href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">
<img class="resource-card-image" src="static/img/gafam-french-card.gif"/>
</a>
</div>
</figure>
</div>
<div class="card-content">
......@@ -148,27 +146,33 @@
</div>
<div class="media-content">
<p class="title is-4">La Quadrature du Net</p>
<p class="subtitle is-6"><a href="https://twitter.com/laquadrature">@laquadrature</a>
<p class="subtitle is-6">
<a href="https://twitter.com/laquadrature">@laquadrature</a>
</p>
</div>
</div>
<div class="content resource-card-content">
<p class="resource-card-description">
<div class="content">
<p>
By popular demand, the PDFs of the campaign posters.
LQDN has already covered Paris and counts on you to cover the rest of the country and the
world!
The posters were printed on A3 colored paper, but do as you please! CC0
</p>
<a class="button is-link pull-right" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">
Download as PDF
</a>
<a class="button is-dark pull-left" href="https://twitter.com/laquadrature/status/942764007286591490">
<time datetime="2017-12-18">Source: 18 Dec 2017</time>
</a>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item" href="https://twitter.com/laquadrature/status/942764007286591490">
<time datetime="2017-12-18">Source: 18 Dec 2017</time>
</a>
<a class="card-footer-item" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
&nbsp;
Download as PDF
</a>
</footer>
</div>
</div>
......@@ -177,14 +181,14 @@
<div class="card">
<header class="card-header">
<div class="card-header-title">
<div class="columns" style="width: 100%">
<div class="column is-7">
<div class="full-width">
<div class="is-pulled-left">
<div class="tags has-addons">
<span class="tag is-medium is-primary">Language</span>
<span class="tag is-medium">English</span>
</div>
</div>
<div class="column is-5">
<div class="is-pulled-right">
<div class="tags has-addons">
<span class="tag is-medium is-link">Format</span>
<span class="tag is-medium">PDF</span>
......@@ -209,29 +213,34 @@
</div>
<div class="media-content">
<p class="title is-4">La Quadrature du Net</p>
<p class="subtitle is-6"><a href="https://twitter.com/laquadrature">@laquadrature</a>
<p class="subtitle is-6">
<a href="https://twitter.com/laquadrature">@laquadrature</a>
</p>
</div>
</div>
<div class="content resource-card-content">
<p class="resource-card-description">
<div class="content">
<p>
After 7 weeks of an intensive campaign, LQDN reached 66% of their goal.
Thanks to all of you who support LQDN and have shared their calls for donations.
The posters were shared on social networks so they translated them into English.
<br/>
Files in SVG format will be added soon! ;)
</p>
<a class="button is-link pull-right" href="https://wiki.laquadrature.net/images/f/f2/LQDNgafamEN.pdf">
Download as PDF
</a>
<a class="button is-dark pull-left" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">
<time datetime="2018-01-03">Source: 3 Jan 2018</time>
</a>
<div class="clearfix"></div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">
<time datetime="2018-01-03">Source: 3 Jan 2018</time>
</a>
<a class="card-footer-item" href="https://wiki.laquadrature.net/images/f/f2/LQDNgafamEN.pdf">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
&nbsp;
Download as PDF
</a>
</footer>
</div>
</div>
......@@ -339,8 +348,8 @@
<div class="card translations-details">
<header class="card-header">
<div class="card-header-title">
<div class="columns" style="width: 100%">
<div class="column is-7">
<div class="full-width">
<div class="is-pulled-left">
<div class="tags has-addons">
<span class="tag is-medium is-primary">Languages</span>
<span class="tag is-medium">French</span>
......@@ -348,7 +357,7 @@
<span class="tag is-medium">German</span>
</div>
</div>
<div class="column is-5">
<div class="is-pulled-right">
<div class="tags has-addons">
<span class="tag is-medium is-link">Format</span>
<span class="tag is-medium">gettext PO</span>
......
......@@ -18,32 +18,18 @@
}
.github-embed-container {
height: 100%;
height: 94%;
}
.github-gafam-poster-translations {
height: 90%;
}
.resource-card-image {
width: 75% !important;
margin-left: 3.7em;
.full-width {
width: 100%;
}
.resource-card-content {
height: 13em;
}
.resource-card-description {
height: 10em;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.clearfix {
clear: both;
.footer a {
color: black;
font-weight: bold;
}
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