From 7d4a374d3e0d36a5f56272e18fe19b90f429f751 Mon Sep 17 00:00:00 2001 From: kitoy Date: Mon, 22 Dec 2025 17:51:43 +0100 Subject: [PATCH] rework blog theme --- static/blog-blanc&noir.css | 39 ++++++++++++++++++--------- static/blog-noir&blanc.css | 44 +++++++++++++++++++----------- static/blog-orange&noir.css | 51 ++++++++++++++++++++++------------- static/blog-orangina.css | 53 ++++++++++++++++++++++-------------- static/blog.css | 54 ++++++++++++++++++++++--------------- templates/blog.html | 20 ++++++++------ 6 files changed, 166 insertions(+), 95 deletions(-) diff --git a/static/blog-blanc&noir.css b/static/blog-blanc&noir.css index 911cd14..ddc0df4 100644 --- a/static/blog-blanc&noir.css +++ b/static/blog-blanc&noir.css @@ -2,8 +2,10 @@ :root { - --color-text: #010101; --color-background: #fefefe; + --color-title: #010101; + --color-text: #0f0f0f; + --color-link: #010101; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; } @@ -23,7 +25,10 @@ font-weight: 400; } - + h1, h2, h3, h4, h5{ + color: var(--color-title); + } + hr { color: var(--color-text); } @@ -32,7 +37,7 @@ a { box-shadow: inset 0 0 0 0 var(--color-text); - color: --color-text; + color: --color-link; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; @@ -46,7 +51,7 @@ a:hover { } a { - color: var(--color-text); + color: var(--color-link); text-decoration: underline 2px; font-weight: 700; line-height: 1.5; @@ -68,12 +73,6 @@ a { } - .copyleft { - display:inline-block; - transform: rotate(180deg); - padding-bottom: -15px; - } - pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ @@ -114,17 +113,28 @@ a { } - -.titre { +.head-article { text-align: center; } +.text-article p { + padding-left: 2vw; + padding-right:2vw; +} + +.text-article h2, h3, h4, h5 { + padding-left: 1vw; + padding-right:1vw; + +} + + .index { text-align: left; } - .articles img { +.articles img { display: block; margin-left: auto; margin-right: auto; @@ -142,6 +152,7 @@ a { } + .pagination a { border: 1px solid; border-color: $color_title; @@ -164,8 +175,10 @@ a { bottom:0px; width: 100%; text-align:center; + padding-bottom:1vw; } + @media only screen and (max-width: 980px) { diff --git a/static/blog-noir&blanc.css b/static/blog-noir&blanc.css index ed57555..0c69d87 100644 --- a/static/blog-noir&blanc.css +++ b/static/blog-noir&blanc.css @@ -2,8 +2,10 @@ :root { - --color-text: #fefefe; --color-background: #010101; + --color-title: #fefefe; + --color-text: #fdfdfd; + --color-link: #fefefe; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; } @@ -23,7 +25,10 @@ font-weight: 400; } - + h1, h2, h3, h4, h5{ + color: var(--color-title); + } + hr { color: var(--color-text); } @@ -32,7 +37,7 @@ a { box-shadow: inset 0 0 0 0 var(--color-text); - color: --color-text; + color: --color-link; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; @@ -46,12 +51,13 @@ a:hover { } a { - color: var(--color-text); + color: var(--color-link); text-decoration: underline 2px; font-weight: 700; - line-height: 1.5; + line-height: 1.5; } + .date { margin-bottom: 0; } @@ -67,13 +73,6 @@ a { } - - .copyleft { - display:inline-block; - transform: rotate(180deg); - padding-bottom: -15px; - } - pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ @@ -113,17 +112,29 @@ a { padding-left: 1.5vw; } - -.titre { + +.head-article { text-align: center; } +.text-article p { + padding-left: 2vw; + padding-right:2vw; +} + +.text-article h2, h3, h4, h5 { + padding-left: 1vw; + padding-right:1vw; + +} + + .index { text-align: left; } - .articles img { +.articles img { display: block; margin-left: auto; margin-right: auto; @@ -141,6 +152,7 @@ a { } + .pagination a { border: 1px solid; border-color: $color_title; @@ -163,8 +175,10 @@ a { bottom:0px; width: 100%; text-align:center; + padding-bottom:1vw; } + @media only screen and (max-width: 980px) { diff --git a/static/blog-orange&noir.css b/static/blog-orange&noir.css index 9958ec5..aa7269f 100644 --- a/static/blog-orange&noir.css +++ b/static/blog-orange&noir.css @@ -2,8 +2,10 @@ :root { - --color-text: #ee794c; --color-background: #010101; + --color-title: #ee794c; + --color-text: #fdfdfd; + --color-link: #ee794c; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; } @@ -19,38 +21,43 @@ body { color: var(--color-text); background-color: var(--color-background); + font-family: var(--font-basic); + font-weight: 400; } - + h1, h2, h3, h4, h5{ + color: var(--color-title); + } + hr { color: var(--color-text); } * {-moz-box-sizing: border-box; box-sizing: border-box;} - -.articles a { +a { box-shadow: inset 0 0 0 0 var(--color-text); - color: --color-text; + color: --color-link; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; } -.articles a:hover { +a:hover { color: var(--color-background); box-shadow: inset 300px 0 0 0 var(--color-text); text-decoration: none; } -.articles a { - color: var(--color-text); +a { + color: var(--color-link); text-decoration: underline 2px; font-weight: 700; line-height: 1.5; } + .date { margin-bottom: 0; } @@ -66,13 +73,6 @@ } - - .copyleft { - display:inline-block; - transform: rotate(180deg); - padding-bottom: -15px; - } - pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ @@ -112,17 +112,29 @@ padding-left: 1.5vw; } - -.titre { + +.head-article { text-align: center; } +.text-article p { + padding-left: 2vw; + padding-right:2vw; +} + +.text-article h2, h3, h4, h5 { + padding-left: 1vw; + padding-right:1vw; + +} + + .index { text-align: left; } - .articles img { +.articles img { display: block; margin-left: auto; margin-right: auto; @@ -140,6 +152,7 @@ } + .pagination a { border: 1px solid; border-color: $color_title; @@ -162,8 +175,10 @@ bottom:0px; width: 100%; text-align:center; + padding-bottom:1vw; } + @media only screen and (max-width: 980px) { diff --git a/static/blog-orangina.css b/static/blog-orangina.css index 6fe10cf..2d299f8 100644 --- a/static/blog-orangina.css +++ b/static/blog-orangina.css @@ -2,8 +2,10 @@ :root { - --color-text: #e9d43a; --color-background: #1e227b; + --color-title: #e9d43a; + --color-text: #fdfdfd; + --color-link: #e9d43a; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; } @@ -23,17 +25,19 @@ font-weight: 400; } - + h1, h2, h3, h4, h5{ + color: var(--color-title); + } + hr { color: var(--color-text); } * {-moz-box-sizing: border-box; box-sizing: border-box;} - a { box-shadow: inset 0 0 0 0 var(--color-text); - color: --color-text; + color: --color-link; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; @@ -46,13 +50,14 @@ a:hover { text-decoration: none; } - a { - color: var(--color-text); - text-decoration: underline 2px; - font-weight: 700; - line-height: 1.5; - } +a { + color: var(--color-link); + text-decoration: underline 2px; + font-weight: 700; + line-height: 1.5; +} + .date { margin-bottom: 0; } @@ -68,13 +73,6 @@ a:hover { } - - .copyleft { - display:inline-block; - transform: rotate(180deg); - padding-bottom: -15px; - } - pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ @@ -114,17 +112,29 @@ a:hover { padding-left: 1.5vw; } - -.titre { + +.head-article { text-align: center; } +.text-article p { + padding-left: 2vw; + padding-right:2vw; +} + +.text-article h2, h3, h4, h5 { + padding-left: 1vw; + padding-right:1vw; + +} + + .index { text-align: left; } - .articles img { +.articles img { display: block; margin-left: auto; margin-right: auto; @@ -142,6 +152,7 @@ a:hover { } + .pagination a { border: 1px solid; border-color: $color_title; @@ -164,8 +175,10 @@ a:hover { bottom:0px; width: 100%; text-align:center; + padding-bottom:1vw; } + @media only screen and (max-width: 980px) { diff --git a/static/blog.css b/static/blog.css index 7cbe2f1..2be5c70 100644 --- a/static/blog.css +++ b/static/blog.css @@ -2,18 +2,20 @@ :root { - --color-text: #fdfdfddd; + --color-background: #202020; + --color-title: #fdfdfd; + --color-text: #dddddd; + --color-link: #fdfdfd; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; - } html{ height: 100%; width: 80%; margin-left: 10%; - + } @@ -24,17 +26,19 @@ font-weight: 400; } - + h1, h2, h3, h4, h5{ + color: var(--color-title); + } + hr { color: var(--color-text); } * {-moz-box-sizing: border-box; box-sizing: border-box;} - a { box-shadow: inset 0 0 0 0 var(--color-text); - color: --color-text; + color: --color-link; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; @@ -48,11 +52,11 @@ a:hover { } a { - color: var(--color-text); - text-decoration: underline 2px; - font-weight: 700; - line-height: 1.5; - } + color: var(--color-link); + text-decoration: underline 2px; + font-weight: 700; + line-height: 1.5; +} .date { @@ -70,13 +74,6 @@ a { } - - .copyleft { - display:inline-block; - transform: rotate(180deg); - padding-bottom: -15px; - } - pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ @@ -116,17 +113,29 @@ a { padding-left: 1.5vw; } - -.titre { + +.head-article { text-align: center; } +.text-article p { + padding-left: 2vw; + padding-right:2vw; +} + +.text-article h2, h3, h4, h5 { + padding-left: 1vw; + padding-right:1vw; + +} + + .index { text-align: left; } - .articles img { +.articles img { display: block; margin-left: auto; margin-right: auto; @@ -144,6 +153,7 @@ a { } + .pagination a { border: 1px solid; border-color: $color_title; @@ -166,8 +176,10 @@ a { bottom:0px; width: 100%; text-align:center; + padding-bottom:1vw; } + @media only screen and (max-width: 980px) { diff --git a/templates/blog.html b/templates/blog.html index 5816fb2..9788ba8 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -12,18 +12,22 @@
- -

{{ post_info.title }}

+
+

{{ post_info.title }}

-
Publié le : {{ post_info.creation_date }} par {{ post_info.author }}
+
Publié le : {{ post_info.creation_date }} par {{ post_info.author }}
{% if post_info.last_updated %} -
Mis à jour le : {{ post_info.last_updated }}
+
Mis à jour le : {{ post_info.last_updated }}
{% endif %} -

{{ post_info.subtitle }}

-
+

{{ post_info.subtitle }}

+
+
+ +
{{ content|safe }} - - +
+
+