keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Compare commits

base: keb:7d945f2bf4b37154d1ddbe14be779178453346d6
Branches Tags
keb:dev
keb:other-works
keb:v1
..
compare: keb:79413bb01af5edc70a66397ac95639518ea37be0
Branches Tags
keb:dev
keb:other-works
keb:v1

No commits in common. "7d945f2bf4b37154d1ddbe14be779178453346d6" and "79413bb01af5edc70a66397ac95639518ea37be0" have entirely different histories.
7d945f2bf4 ... 79413bb01a

17 changed files with 743 additions and 159 deletions
Show Stats Expand all files Collapse all files

649
data.json
View File

File diff suppressed because one or more lines are too long

4
divers.html
View File

@ -128,10 +128,10 @@
<canvas id="month" width="400" height="200"></canvas>
</div>
<div id="stat">
<canvas id="year" width="400" height="200"></canvas>
<canvas id="month2" width="400" height="200"></canvas>
</div>
<div id="stat">
<canvas id="dimension" width="400" height="200"></canvas>
<canvas id="month3" width="400" height="200"></canvas>
</div>
</div>
</article>

43
explorer.html
View File

@ -103,33 +103,6 @@
<div class="item-cont">
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="dimensions">Toutes</label></span>
<span><input type="checkbox" id="18" name="dimension" value="18">
<label for="18">< 20cm</label></span>
<span><input type="checkbox" id="20" name="dimension" value="20">
<label for="20">20cm - 29cm</label></span>
<span><input type="checkbox" id="30" name="dimension" value="30">
<label for="30">30cm - 39cm</label></span>
<span><input type="checkbox" id="40" name="dimension" value="40">
<label for="40">40cm - 49cm</label></span>
<span><input type="checkbox" id="50" name="dimension" value="50">
<label for="50">50cm - 59cm</label></span>
<span><input type="checkbox" id="60" name="dimension" value="60">
<label for="60">60cm - 69cm</label></span>
<span><input type="checkbox" id="70" name="dimension" value="70">
<label for="70">70cm - 79cm</label></span>
<span><input type="checkbox" id="80" name="dimension" value="80">
<label for="80">80cm - 89cm</label></span>
<span><input type="checkbox" id="90" name="dimension" value="90">
<label for="90">90cm - 99cm</label></span>
<span><input type="checkbox" id="100" name="dimension" value="100">
<label for="100">>= 100cm</label></span>
</div>
</div>
<div class="box genres">
<h3>Genres&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="genres" name="genres" value="all">
<label for="genres">Tous</label></span>
</div>
</div>
<div class="box themes">
@ -139,13 +112,18 @@
<label for="themes">Tous</label></span>
</div>
</div>
<div class="box categories">
<h3>Catégories&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="categories" name="categories" value="all">
<label for="categories">Toutes</label></span>
</div>
</div>
<div class="box places">
<h3>Lieux&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span>
<!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
</div>
</div>
<div class="box tags">
@ -153,8 +131,6 @@
<div class="item-cont">
<span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span>
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
</div>
</div>
<div class="box photos">
@ -164,8 +140,6 @@
<label for="photos">Tout état</label></span>
<span><input type="checkbox" id="none" name="photo" value="none">
<label for="none">&#x2606; aucune</label></span>
<!--<span><input type="checkbox" id="exist" name="photo" value="exist">
<label for="exist">Existante</label></span>-->
<span><input type="checkbox" id="bad" name="photo" value="bad">
<label for="bad">&#x2605; mauvaise</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok">
@ -197,8 +171,8 @@
<th>Titre</th>
<th>Année</th>
<th>Dimension</th>
<th>Genre</th>
<th>Thème</th>
<th>Catégorie</th>
<th>Lieu</th>
<th>Tags</th>
<th>Photo</th>
@ -207,7 +181,6 @@
</tr>
</thead>
</table>
<p class="result" style="text-align:center;"></p>
</article>
</body>
</html>

2
informations.html
View File

@ -56,7 +56,7 @@
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
<p>Dernière mise à jour en février 2021.</p>
<p>Dernière mise à jour en janvier 2021.</p>
</article>
</body>
</html>

2
painting.html
View File

@ -46,9 +46,9 @@
<li><span class="title">date :</span><span class="content date">&nbsp;</span></li>
<li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li>
<li><span class="title">support :</span><span class="content support">&nbsp;</span></li>
<li><span class="title">genre :</span><span class="content genre">&nbsp;</span></li>
<li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li>
<li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li>
<li><span class="title">catégorie :</span><span class="content category">&nbsp;</span></li>
<li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li>
<li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
<li><span class="title">commentaire :</span><span class="content comment"> </span></li>

2
photos

@ -1 +1 @@
Subproject commit a6563802c6e46310e7c54034fa13c6f4d46bbc1b
Subproject commit 76435953fc3c39694d81a3c77c1f8ee93809719b

110
scripts/explorer.js
View File

@ -5,8 +5,8 @@ jQuery(document).ready(function($)
paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
paramCategory = (urlParams.get('categories') == null ? urlParams.getAll('category') : urlParams.getAll('categories'));
paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
@ -19,9 +19,9 @@ jQuery(document).ready(function($)
/** MENU **/
/**********/
//var dimensions = [];
var genres = [];
var dimensions = [];
var themes = [];
var categories = [];
var places = [];
var tags = [];
@ -29,12 +29,12 @@ jQuery(document).ready(function($)
{
for (i of data)
{
/*if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
dimensions.push(i.dimension);*/
if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
genres.push(i.genre);
if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
dimensions.push(i.dimension);
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
themes.push(i.theme);
if (categories.indexOf(i.category) === -1 && i.category != "" && i.category != "—")
categories.push(i.category);
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
places.push(i.place);
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
@ -49,23 +49,17 @@ jQuery(document).ready(function($)
}
}
//dimensions.sort();
genres.sort();
dimensions.sort();
themes.sort();
categories.sort();
places.sort();
tags.sort();
/*for (dimension of dimensions)
for (dimension of dimensions)
{
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
html += '<label for="' + dimension + '">' + dimension + '</label></span>';
$(".box.dimensions .item-cont").append(html);
}*/
for (genre of genres)
{
html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
html += '<label for="' + genre + '">' + genre + '</label></span>';
$(".box.genres .item-cont").append(html);
}
for (theme of themes)
{
@ -73,23 +67,23 @@ jQuery(document).ready(function($)
html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes .item-cont").append(html);
}
//$(".box.places select").append('<option value="none">Aucun</option');
for (category of categories)
{
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories .item-cont").append(html);
}
for (place of places)
{
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
html += '<label for="'+place+'">' + place + '</label></span>';
$(".box.places .item-cont").append(html);
//$(".box.places select").append('<option value="' + place + '">' + place + '</option');
}
//$(".box.tags select").append('<option value="none">Aucun</option');
for (tag of tags)
{
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
html += '<label for="'+tag+'">' + tag + '</label></span>';
$(".box.tags .item-cont").append(html);
//$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
}
// populate checkboxes depending on URL
@ -113,8 +107,8 @@ jQuery(document).ready(function($)
checkBoxSelector("years", "year", paramYear)
checkBoxSelector("months", "month", paramMonth);
checkBoxSelector("dimensions", "dimension", paramDimension);
checkBoxSelector("genres", "genre", paramGenre);
checkBoxSelector("themes", "theme", paramTheme);
checkBoxSelector("categories", "category", paramCategory);
checkBoxSelector("places", "place", paramPlace);
checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto);
@ -144,8 +138,8 @@ jQuery(document).ready(function($)
AllCheckBoxSelector("years", "year");
AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("genres", "genre");
AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("categories", "category");
AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
@ -205,42 +199,26 @@ jQuery(document).ready(function($)
function checkMonth(month)
{
if (paramMonth == "all") return true;
if (paramMonth.includes("01") && month == "Janvier") return true;
if (paramMonth.includes("02") && month == "Février") return true;
if (paramMonth.includes("03") && month == "Mars") return true;
if (paramMonth.includes("04") && month == "Avril") return true;
if (paramMonth.includes("05") && month == "Mai") return true;
if (paramMonth.includes("06") && month == "Juin") return true;
if (paramMonth.includes("07") && month == "Juillet") return true;
if (paramMonth.includes("08") && month == "Août") return true;
if (paramMonth.includes("09") && month == "Septembre") return true;
if (paramMonth.includes("10") && month == "Octobre") return true;
if (paramMonth.includes("11") && month == "Novembre") return true;
if (paramMonth.includes("12") && month == "Décembre") return true;
if (paramMonth.includes("01") && month == "janvier") return true;
if (paramMonth.includes("02") && month == "février") return true;
if (paramMonth.includes("03") && month == "mars") return true;
if (paramMonth.includes("04") && month == "avril") return true;
if (paramMonth.includes("05") && month == "mai") return true;
if (paramMonth.includes("06") && month == "juin") return true;
if (paramMonth.includes("07") && month == "juillet") return true;
if (paramMonth.includes("08") && month == "août") return true;
if (paramMonth.includes("09") && month == "septembre") return true;
if (paramMonth.includes("10") && month == "octobre") return true;
if (paramMonth.includes("11") && month == "novembre") return true;
if (paramMonth.includes("12") && month == "décembre") return true;
return false;
}
function checkDimension(dimension)
{
if (paramDimension == "all") return true;
if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19) return true;
if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29) return true;
if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39) return true;
if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49) return true;
if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59) return true;
if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69) return true;
if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79) return true;
if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89) return true;
if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99) return true;
if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109) return true;
return false;
}
function checkGenre(genre)
{
if (paramGenre == "all")
if (paramDimension == "all")
return true;
if (paramGenre.includes(genre))
if (paramDimension.includes(dimension))
return true;
return false;
}
@ -254,6 +232,15 @@ jQuery(document).ready(function($)
return false;
}
function checkCategory(category)
{
if (paramCategory == "all")
return true;
if (paramCategory.includes(category))
return true;
return false;
}
function checkPlace(place)
{
if (paramPlace == "all")
@ -298,7 +285,6 @@ jQuery(document).ready(function($)
function generateTable()
{
hasResult = false;
numberOfItem = 0;
for (i of data)
{
@ -311,8 +297,8 @@ jQuery(document).ready(function($)
if (paramYear != "") res &&= checkYear(i.year);
if (paramMonth != "") res &&= checkMonth(i.month);
if (paramDimension != "") res &&= checkDimension(i.dimension);
if (paramGenre != "") res &&= checkGenre(i.genre);
if (paramTheme != "") res &&= checkTheme(i.theme);
if (paramCategory != "") res &&= checkCategory(i.category);
if (paramPlace != "") res &&= checkPlace(i.place);
if (paramTag != "") res &&= checkTag(i.tags);
if (paramPhoto != "") res &&= checkPhoto(i.photo);
@ -322,7 +308,6 @@ jQuery(document).ready(function($)
continue;
hasResult = true;
numberOfItem++;
// table
$("table").css("display", "block");
@ -330,10 +315,10 @@ jQuery(document).ready(function($)
result = "<tr>";
result += "<td>" + i.number + "</td>";
result += "<td>" + i.title + "</td>";
result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
result += "<td>" + i.year + "</td>";
result += "<td>" + i.dimension + "</td>";
result += "<td>" + i.genre + "</td>";
result += "<td>" + i.theme + "</td>";
result += "<td>" + i.category + "</td>";
result += "<td>" + i.place + "</td>";
result += "<td>" + i.tags + "</td>";
@ -369,7 +354,6 @@ jQuery(document).ready(function($)
}
$("#gallery").append(paintingHtml);
}
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " éléments</strong>.");
return hasResult;
}
@ -384,13 +368,9 @@ jQuery(document).ready(function($)
$(".style-select").show();
$("article.explorer h2").removeClass("active")
$("form").slideUp(200);
$("article.explorer p.result").css("display", "block");
}
else
{
$("article.explorer p.no-result").css("display", "block");
$("article.explorer p.result").css("display", "none");
}
// on mobile, show only the first item slided down
if ($(window).width() <= 600)
@ -434,8 +414,6 @@ jQuery(document).ready(function($)
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\

5
scripts/exposition.js
View File

@ -28,14 +28,11 @@ jQuery(document).ready(function($)
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase() + ' (' + data[idx].dimension + ')</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\
</div>\
';

22
scripts/painting.js
View File

@ -17,15 +17,13 @@ jQuery(document).ready(function($)
// metadata
$(".metadata .content.number").append(data[i].number);
if (data[i].month != "—")
$(".metadata .content.date").append(data[i].month + " " + data[i].year);
else
$(".metadata .content.date").append(data[i].year);
if (data[i].month != "—") $(".metadata .content.date").append(data[i].month + " " + data[i].year);
else $(".metadata .content.date").append(data[i].year);
$(".metadata .content.dimension").append(data[i].dimension);
$(".metadata .content.support").append(data[i].support);
$(".metadata .content.genre").append(data[i].genre);
$(".metadata .content.theme").append(data[i].theme);
$(".metadata .content.place").append(data[i].place);
$(".metadata .content.category").append(data[i].category);
if (data[i].photo == "none") photoState = "aucune";
if (data[i].photo == "bad") photoState = "mauvais";
@ -33,10 +31,8 @@ jQuery(document).ready(function($)
if (data[i].photo == "good") photoState = "bon";
$(".metadata .content.photo").append(photoState);
if (data[i].help == "yes")
$(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else
$(".metadata .content.help").append("non");
if (data[i].help == "yes") $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else $(".metadata .content.help").append("non");
$(".metadata .content.comment").append(data[i].comment);
@ -47,11 +43,9 @@ jQuery(document).ready(function($)
// cartel
$("#info .title").append(data[i].title);
if (data[i].month != "—")
$("#info .year").append(data[i].month + " " + data[i].year);
else
$("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support.toLowerCase();
if (data[i].month != "—") $("#info .year").append(data[i].month + " " + data[i].year);
else $("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support;
format += " (" + data[i].dimension + ")";
$("#info .format").append(format);
$("#info .comment").prepend(data[i].comment);

18
scripts/stats.js
View File

@ -7,7 +7,7 @@ jQuery(document).ready(function($)
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
@ -38,14 +38,14 @@ jQuery(document).ready(function($)
}
});
var canvasYear = document.getElementById("year").getContext('2d');
var chartYear = new Chart(canvasYear, {
var canvasMonth2 = document.getElementById("month2").getContext('2d');
var chartMonth2 = new Chart(canvasMonth2, {
type: 'bar',
data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [24, 16, 7, 57, 117, 112, 52],
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
@ -76,14 +76,14 @@ jQuery(document).ready(function($)
}
});
var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
var canvasMonth3 = document.getElementById("month3").getContext('2d');
var chartMonth3 = new Chart(canvasMonth3, {
type: 'bar',
data: {
labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1

BIN
styles/fonts/Commissioner-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
styles/fonts/CommissionerFlair-Regular.ttf
View File

Binary file not shown.

BIN
styles/fonts/Rubik-Regular.woff
View File

Binary file not shown.

BIN
styles/fonts/Rubik-Regular.woff2
View File

Binary file not shown.

BIN
styles/fonts/Rubik-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
styles/fonts/newsgothicstd.otf Normal file
View File

Binary file not shown.

13
styles/main.css
View File

@ -1,7 +1,6 @@
@font-face {
font-family:Rubik;
src:url('fonts/Rubik-Regular.woff2') format("woff2"),
url('fonts/Rubik-Regular.woff') format("woff");
src:url('fonts/Rubik-VariableFont_wght.ttf');
}
@font-face {
@ -11,7 +10,7 @@
@font-face {
font-family:Commissioner;
Src:url('fonts/CommissionerFlair-Regular.ttf');
src:url('fonts/Commissioner-VariableFont_wght.ttf');
}
body {
@ -248,15 +247,11 @@ article #gallery img {
#info .info {
font-size:1.2rem;
position:absolute;
top:0.325rem;
top:0.4rem;
right:1rem;
font-family:monospace;
}
#info .year {
margin-right:1rem;
}
#info .title {
font-weight:bold;
font-style:italic;
@ -420,7 +415,7 @@ article.explorer form {
article.explorer form select {
display:block;
margin-left:0.2rem;
margin-right:0.75rem;
}
/* does not seem to work */