Update website design and content

- Changed the main background color
- Added a quote background color
- Changed the color of the citation in bold
- Added a background image to the body that repeats
- Increased the maximum width of the body
- Made layout adjustments for mobile phones
- Added padding to blockquotes and made visual enhancement with quotes
- Adjusted the footer style
- Fixed an issue with the weight attribute of the feed icon img, it should be height
- Added a content div to wrap main body content
- Appended a version parameter to the css file in html to force browser cache refresh
- Updated menu and category descriptions in the website configuration file
- Updated styling of blockquote element and added open-end quotes
- Added new image file white-waves.webp and integrated it to the background design
- Tweaked the main body's max-width and font-size for better accessibility and readability on mobile devices
- Optimized placements for blockquote contents
- Adjusted fontSize of blockquote's open-quote and close-quote
- Updated categories description in pelicanconf.py file
- Removed unnecessary padding-right from 'time' style

mnmlist/static/css/main.css

@@ -11,15 +11,16 @@
 @import url("pygment.css");
 
 :root {
-  --main-bg-color: #f5f2e9;
+  --main-bg-color: #ffffff;
   --border-color: #ACACAC;
   --code-bg-color: #e5e5e2;
+  --quote-bg-color: #f6f6f6;
   --link-color:  #BB7DD4;
   --text-color: #2d2d2d;
   --menu-color:  #7971D0;
   --link-color-menu:  #36194D;
   --headers-color: #000;
-  --citation-bold-color: #bb7dd49a;
+  --citation-bold-color: #f5ff889a;
   --highlight: #8f9fa926;
   --highlight-hover: #84a59d;
   --gray: #ACACAC;
@@ -39,15 +40,27 @@ body {
   background: var(--main-bg-color);
   color: var(--text-color);
   font-family: "Bricolage Grotesque",Arial,sans-serif;
+  background-image: url(/theme/white-waves.webp);
+  background-repeat: repeat;
 
   margin-left: auto;
   margin-right: auto;
   padding: 16px;
 
-  max-width: 35em;
+  max-width: 45em;
   font-size: 20px;
 }
 
+@media only screen and (max-width: 768px) {
+  /* For mobile phones: */
+  body {
+    padding: 5px;
+  
+    max-width: 100%;
+    font-size: 20px;
+  }
+}
+
 .section {
 	margin-top: 40px;
 }
@@ -87,7 +100,6 @@ time {
   font-weight: bold;
   border-bottom: 1px solid;
   padding-bottom: 10px;
-  padding-right: 5em;
 }
 
 img {
@@ -122,8 +134,12 @@ img {
 
 blockquote {
   position: relative;
-  margin: 1.5em 2ch 1.5em 2ch;
+  margin: 1em 2ch 1em 2ch;
-  padding: 0;
+  background-color: var(--quote-bg-color);
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
 }
 
 blockquote strong {
@@ -132,19 +148,30 @@ blockquote strong {
   
 }
 
-blockquote::before {
+blockquote::before, blockquote::after {
+  font-size: 2em;
   position: absolute;
-  top: 0;
-  left: -2ch;
-  bottom: 0;
-  width: 1ch;
   overflow: hidden;
   white-space: pre;
   line-height: 30px;
-  content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a";
   cursor: default;
 }
 
+blockquote::before {
+  top: 0;
+  left: -1ch;
+  bottom: 0;
+  width: 1ch;
+  content: "«";
+}
+
+blockquote::after {
+  bottom: 0;
+  right: -1.2ch;
+  width: 1ch;
+  content: "»";
+}
+
 
 p {
   line-height: 30px;
@@ -315,7 +342,6 @@ footer {
     color: var(--headers-color);
     font-size: 13px;
     letter-spacing:4px;
-    margin-left: 20px;
 }
 
   footer li {
@@ -415,7 +441,7 @@ a[data-size='5'] {
 }
 
 #feed img {
-  weight: 25px;
+  height: 25px;
   width: 25px;
 }
 
@@ -426,6 +452,13 @@ a[data-size='5'] {
   max-height: 192px;
 }
 
+
+
 dd {
   padding-bottom: 1em;
 }
+
+#content {
+  background-color: var(--main-bg-color);
+  padding: 0.5em 1em;
+}

mnmlist/templates/base.html

@@ -5,7 +5,7 @@
     <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}?v2" type="text/css" />
     <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate"
         title="{{ SITENAME }} ATOM Feed" />
     {% if FEED_RSS %}
@@ -15,6 +15,7 @@
 </head>
 
 <body>
+    <div id="content">
     <section id="links">
     <ul>
         {% for (title, url, selected) in MENU %}
@@ -36,7 +37,7 @@
     <footer>
     <a id="feed" href="/feeds/all.atom.xml"><img src="/theme/rss.svg" /></a>
     </footer>
-
+</div>
 </body>
 
 </html>

pelicanconf.py

@@ -50,7 +50,7 @@ CATEGORIES_DESCRIPTION = {
     ),
     "journal": (
         "Journal",
-        "Quelques pensées partagées, bien souvent sur le monde du travail ou de la technologie.",
+        "Quelques réfléxions, bien souvent autour du monde du travail ou de la technologie.",
     ),
     "notes": (
         "Carnet de notes",