rework blog theme

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 {
  }
 
 
- 
+.head-article {
-.titre {
      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)
  {
      

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)
  {
      

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;}
 
-
+a {
-.articles  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 {
+a {
-    color: var(--color-text);
+    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)
  {
      

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 {
+a {
-     color: var(--color-text);
+    color: var(--color-link);
-     text-decoration: underline 2px;
+    text-decoration: underline 2px;
-     font-weight: 700;
+    font-weight: 700;
-     line-height: 1.5;
+    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)
  {
      

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);
+    color: var(--color-link);
-     text-decoration: underline 2px;
+    text-decoration: underline 2px;
-     font-weight: 700;
+    font-weight: 700;
-     line-height: 1.5;
+    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)
  {
      

templates/blog.html

@@ -12,18 +12,22 @@
 
   <body>
     <div class="articles">
- 
+      <div class="head-article">
-	  <h2 class="titre"> {{ post_info.title }} </h2>
+	  <h2> {{ post_info.title }} </h2>
 	  
-          <h5 class="titre">Publié le : {{ post_info.creation_date }} par <a href="{{ url_for('blog.view') }}/{{ post_info.author }}"> {{ post_info.author }} </h5></a>
+          <h5>Publié le : {{ post_info.creation_date }} par <a href="{{ url_for('blog.view') }}/{{ post_info.author }}"> {{ post_info.author }} </h5></a>
 	  {% if post_info.last_updated %}
-	  <h5 class="titre">Mis à jour le : {{ post_info.last_updated }} </h5>
+	  <h5>Mis à jour le : {{ post_info.last_updated }} </h5>
 	  {% endif %}
-	  <h3 class="description titre"> {{ post_info.subtitle }} </h3>
+	  <h3 class="description"> {{ post_info.subtitle }} </h3>
-	  <hr/>
+      </div>
+      <hr/>
+      
+      <div class="text-article">
 	{{ content|safe }}
-       
+      </div>
-
+      
     </div>
+    <footer> <p> pywallter </p> </footer> 
   </body>
 </html>