From 4f04075d165dd79dd2e60288e482e9d0b680ee17 Mon Sep 17 00:00:00 2001
From: yahiko <yahiko012000@gmail.com>
Date: Mon, 27 Jan 2025 19:50:11 +0100
Subject: [PATCH] Rename style.css to main.css. Add tabs, edit categories and
details
---
simple-erreur503/static/css/categories.css | 7 ++
.../static/css/{style.css => main.css} | 112 ++++++++++++++++--
.../templates/category-display.html | 2 +-
3 files changed, 108 insertions(+), 13 deletions(-)
rename simple-erreur503/static/css/{style.css => main.css} (81%)
diff --git a/simple-erreur503/static/css/categories.css b/simple-erreur503/static/css/categories.css
index 8a8d193..af3ca92 100644
--- a/simple-erreur503/static/css/categories.css
+++ b/simple-erreur503/static/css/categories.css
@@ -15,6 +15,13 @@
margin-left: -5px;
}
+/* cinéma & séries */
+.cat-cinema-series::before {
+ content: "🎬";
+ letter-spacing: 10px;
+ margin-left: -5px;
+}
+
/* musique */
.cat-musique::before {
content: "🎵";
diff --git a/simple-erreur503/static/css/style.css b/simple-erreur503/static/css/main.css
similarity index 81%
rename from simple-erreur503/static/css/style.css
rename to simple-erreur503/static/css/main.css
index 58946dd..868d787 100644
--- a/simple-erreur503/static/css/style.css
+++ b/simple-erreur503/static/css/main.css
@@ -349,7 +349,7 @@ pre {
pre::before {
position: absolute;
- top: 10px;
+ top: 5px;
left: 10px;
content: "{";
color: var(--croisillon-color);
@@ -358,7 +358,7 @@ pre::before {
pre::after {
position: absolute;
- bottom: 10px;
+ bottom: 5px;
right: 10px;
content: "}";
color: var(--croisillon-color);
@@ -369,26 +369,29 @@ pre::after {
/* blockquote */
blockquote {
position: relative;
+ font-style: italic;
background-color: var(--bg-quote-color);
padding: 1em 4em 1em 4em;
max-width: 80%;
- margin: 0px auto;
+ margin: 0 auto;
}
blockquote::before {
position: absolute;
- top: 10px;
+ top: 5px;
left: 10px;
content: "«";
+ font-style: normal;
color: var(--croisillon-color);
font-size: 30px;
}
blockquote::after {
position: absolute;
- bottom: 10px;
+ bottom: 5px;
right: 10px;
content: "»";
+ font-style: normal;
color: var(--croisillon-color);
font-size: 30px;
}
@@ -412,14 +415,16 @@ details[open] summary {
margin-bottom: 0.5em;
}
-details:first-of-type summary::marker {
+details summary::marker {
content: "+ ";
letter-spacing: 2px;
+ color: var(--croisillon-color);
}
-details[open]:first-of-type summary::marker {
+details[open] summary::marker {
content: "− ";
letter-spacing: 2px;
+ color: var(--croisillon-color);
}
/* details style */
@@ -437,7 +442,14 @@ details.beer::before {
top: 5px;
left: 10px;
content: "ðŸº";
- color: var(--croisillon-color);
+ font-size: 30px;
+}
+
+details.summary::before {
+ position: absolute;
+ top: 5px;
+ left: 10px;
+ content: "📃";
font-size: 30px;
}
@@ -446,7 +458,6 @@ details.warning::before {
top: 5px;
left: 10px;
content: "âš ï¸";
- color: var(--croisillon-color);
font-size: 30px;
}
@@ -455,7 +466,7 @@ details.warning::before {
position: relative;
background-color: var(--bg-quote-color);
padding: 0.5em 4em 0.5em 4em;
- max-width: 50%;
+ max-width: 80%;
margin: 0px auto;
border-radius: 15px;
}
@@ -469,6 +480,25 @@ details.warning::before {
font-size: 30px;
}
+/* modified */
+.modified {
+ position: relative;
+ background-color: var(--bg-quote-color);
+ padding: 0.5em 4em 0.5em 4em;
+ max-width: 80%;
+ margin: 0px auto;
+ border-radius: 15px;
+}
+
+.modified::before {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ vertical-align: middle;
+ content: "ðŸ“";
+ color: var(--croisillon-color);
+ font-size: 30px;
+}
/* Footnotes - Generated by simple-footnotes plugin */
.footnote {
@@ -488,9 +518,67 @@ details.warning::before {
font-size: 30px;
}
-/* figcaption generated by https://git.sr.ht/~ferruck/yafg */
+/* figcaption */
figcaption {
text-align: center;
font-style: italic;
margin: 1ch 0 2ch 0;
-}
\ No newline at end of file
+}
+
+/* Tab */
+/* See PyMdown documentaion https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#styling-with-css*/
+.tabbed-set {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ margin: 1em 0;
+ /* border-radius: 0.1rem; */
+ border: 0;
+}
+
+ .tabbed-set > input {
+ display: none;
+ }
+
+ .tabbed-set label {
+ width: auto;
+ margin: 0.5em 0 0.5em 2em;
+ padding: 0 0.5em 0 0.5em;
+ white-space: nowrap;
+ border-bottom: 0.15rem solid transparent;
+ cursor: pointer;
+ }
+
+ .tabbed-set label::before {
+ content: '⤷';
+ color: var(--croisillon-color);
+ letter-spacing: 5px;
+ margin-left: -5px;
+ }
+
+ .tabbed-set label:hover {
+ color: var(--txt-hover);
+ }
+
+ .tabbed-set .tabbed-content {
+ /* width: 100%; */
+ display: none;
+ }
+
+ .tabbed-set input {
+ position: absolute;
+ opacity: 0;
+ }
+
+ /* Selected tab */
+ .tabbed-set input:checked:nth-child(n+1) + label {
+ color: var(--croisillon-color);
+ border-color: var(--txt-color);
+ }
+
+ @media screen {
+ .tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
+ order: 99;
+ display: block;
+ }
+ }
\ No newline at end of file
diff --git a/simple-erreur503/templates/category-display.html b/simple-erreur503/templates/category-display.html
index 965070f..1e78060 100644
--- a/simple-erreur503/templates/category-display.html
+++ b/simple-erreur503/templates/category-display.html
@@ -7,7 +7,7 @@
{% for article in articles_page.object_list %}
<article class="index">
- <header><h1 class="art-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
+ <header><h2 class="art-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
<p class="art-desc">Publié le : <time datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time> dans la catégorie <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>.</p>
</header>
</article>
--
GitLab