Skip to content
Snippets Groups Projects
Commit ca75a1cf authored by Allan Blanchard's avatar Allan Blanchard
Browse files

Generalize tiles and use it for plugins

parent 678f4d0d
No related branches found
No related tags found
1 merge request!44Creates a CSS for tiles and removes old stuff
......@@ -14,9 +14,12 @@
color: inherit;
position: relative;
background-color: var(--tile-color);
padding: 30px 35px;
padding: 40px 45px;
box-sizing: border-box;
}
.tileWrapper[size="small"] .tile {
padding: 30px 35px;
}
.nonTouch .tile {
transition: 0.35s ease-out;
}
......@@ -68,7 +71,14 @@
margin-bottom: 35px;
}
@media (min-width: 600px) {
.tileWrapper {
.tileWrapper[size="small"] {
display: flex;
flex-wrap: wrap;
padding: 0;
}
}
@media (min-width: 768px) {
.tileWrapper[size="big"] {
display: flex;
flex-wrap: wrap;
padding: 0;
......@@ -114,18 +124,47 @@
}
/* Tile: width: (100 - N * margin) / N (with N = number of tiles) */
/* SMALL TILES */
@media (min-width: 600px) { /* 2 Tiles */
.tileWrapper > div {
.tileWrapper[size="small"] > div,
.tileWrapper[size="small"] .tile,
.tileWrapper[size="small"] > div.tileTitle,
.tileWrapper[size="small"] .tile.tileWrapperTitle {
width: 49%;
}
}
@media (min-width: 768px){ /* 3 Tiles */
.tileWrapper > div {
.tileWrapper[size="small"] > div,
.tileWrapper[size="small"] .tile,
.tileWrapper[size="small"] > div.tileTitle,
.tileWrapper[size="small"] .tile.tileWrapperTitle {
width: 32.33%;
}
}
@media (min-width: 900px) { /* 4 Tiles */
.tileWrapper > div {
width: 24%;
@media (min-width: 1260px) { /* 4 Tiles */
.tileWrapper[size="small"] > div,
.tileWrapper[size="small"] > .tile,
.tileWrapper[size="small"] > div.tileTitle,
.tileWrapper[size="small"] > .tile.tileWrapperTitle {
width: 24%;
}
}
/* BIG TILES */
@media (min-width: 768px) { /* 2 Tiles */
.tileWrapper[size="big"] > div,
.tileWrapper[size="big"] .tile,
.tileWrapper[size="big"] > div.tileTitle,
.tileWrapper[size="big"] .tile.tileWrapperTitle {
width: 49%;
}
}
@media (min-width: 1260px){ /* 3 Tiles */
.tileWrapper[size="big"] > div,
.tileWrapper[size="big"] .tile,
.tileWrapper[size="big"] > div.tileTitle,
.tileWrapper[size="big"] .tile.tileWrapperTitle {
width: 32.33%;
}
}
\ No newline at end of file
......@@ -22,7 +22,7 @@ title: Documentation - Frama-C
<p>The Frama-C kernel and plug-ins have <a href="/html/kernel-plugin.html">a detailed documentation page</a>.
</p>
<div class="tileWrapper">
<div class="tileWrapper" size="small">
<div class="tileWrapperTitle">
<span>Frama-C and ACSL</span>
</div>
......@@ -65,7 +65,7 @@ title: Documentation - Frama-C
</div>
</div>
<div class="tileWrapper">
<div class="tileWrapper" size="small">
<div class="tileWrapperTitle">
<span>Plug-ins Manuals</span>
</div>
......
......@@ -6,27 +6,23 @@ active: 1
---
<div class="pluginListwrap">
{% for category in site.data.plugins_categories %}
<section>
<div class="pluginListTitle">
<div class="tileWrapper" size="big">
<div class="tileWrapperTitle">
<span>{{ category.name }}</span>
</div>
{% for distrib in site.data.plugins_distrib_mode %}
{% for plugin in site.fc-plugins %}
{% if plugin.key == category.key and plugin.distrib_mode == distrib.key %}
<a role="link" href="{{ plugin.url }}" class="listItem">
<div>
<h4 class="listItemTitle"><span>{{ plugin.title }}</span></h4>
<p>{{ plugin.description }}</p>
<p>{{ distrib.name }}</p>
</div>
<a role="link" href="{{ plugin.url }}" class="tile">
<h4 class="tileTitle"><span>{{ plugin.title }}</span></h4>
<p>{{ plugin.description }}</p>
<p>{{ distrib.name }}</p>
</a>
{% endif %}
{% endfor %}
{% endfor %}
</section>
{% endfor %}
</div>
{% endfor %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment