A few CSS enhancements for markdown-displayed text

mainsite/static/css/screen.css

@@ -225,7 +225,7 @@ header {
 .main {
   background: #fff;
   flex-grow: 1;
-  padding: 20px;
+  padding: 20px 40px;
   width: 100%;
   border: 1px solid rgba(140, 14, 0, 0.7);
 }
@@ -249,31 +249,44 @@ header {
 .main .last-publication a:hover {
   box-shadow: 0 0 5px #8c0e00;
 }
+/* line 176, ../sass/screen.scss */
+.main .intro-text {
+  margin-bottom: 40px;
+}
+/* line 180, ../sass/screen.scss */
+.main p {
+  margin-bottom: 1em;
+}
+/* line 184, ../sass/screen.scss */
+.main .md-text {
+  text-align: justify;
+  font-size: 1.1em;
+}
 
-/* line 177, ../sass/screen.scss */
+/* line 190, ../sass/screen.scss */
 .publication-list {
   margin: 10px 5px;
   margin-left: 30px;
   padding: 0 30px;
   max-width: 700px;
 }
-/* line 183, ../sass/screen.scss */
+/* line 196, ../sass/screen.scss */
 .publication-list .publication-entry {
   display: flex;
   align-items: center;
   position: relative;
   border-bottom: 1px solid #86abcb;
 }
-/* line 189, ../sass/screen.scss */
+/* line 202, ../sass/screen.scss */
 .publication-list .publication-entry:first-child {
   border-top: 1px solid #86abcb;
 }
-/* line 193, ../sass/screen.scss */
+/* line 206, ../sass/screen.scss */
 .publication-list .publication-entry > span {
   padding: 7px 5px;
   display: inline-block;
 }
-/* line 197, ../sass/screen.scss */
+/* line 210, ../sass/screen.scss */
 .publication-list .publication-entry .publication-date {
   text-align: right;
   font-weight: light;
@@ -281,16 +294,16 @@ header {
   font-style: italic;
   width: 100px;
 }
-/* line 204, ../sass/screen.scss */
+/* line 217, ../sass/screen.scss */
 .publication-list .publication-entry .publication-descr {
   font-size: 0.9em;
   opacity: 0.9;
 }
-/* line 207, ../sass/screen.scss */
+/* line 220, ../sass/screen.scss */
 .publication-list .publication-entry .publication-descr:before {
   content: "– ";
 }
-/* line 211, ../sass/screen.scss */
+/* line 224, ../sass/screen.scss */
 .publication-list .publication-entry a.overlay {
   position: absolute;
   z-index: 1;
@@ -301,12 +314,12 @@ header {
 }
 
 @media screen and (max-width: 599px) {
-  /* line 223, ../sass/screen.scss */
+  /* line 236, ../sass/screen.scss */
   body {
     padding-top: 75px;
   }
 
-  /* line 226, ../sass/screen.scss */
+  /* line 239, ../sass/screen.scss */
   header, .sidebar {
     position: fixed;
     top: 0;
@@ -314,7 +327,7 @@ header {
     width: 100%;
   }
 
-  /* line 232, ../sass/screen.scss */
+  /* line 245, ../sass/screen.scss */
   header {
     z-index: 15;
     right: 60px;
@@ -323,13 +336,13 @@ header {
     height: 60px;
     line-height: 60px;
   }
-  /* line 239, ../sass/screen.scss */
+  /* line 252, ../sass/screen.scss */
   header img {
     max-height: 55px;
     vertical-align: middle;
   }
 
-  /* line 244, ../sass/screen.scss */
+  /* line 257, ../sass/screen.scss */
   .sidebar {
     z-index: 14;
     background: #f8ef78;
@@ -339,18 +352,18 @@ header {
     max-height: 100vh;
     overflow-y: auto;
   }
-  /* line 253, ../sass/screen.scss */
+  /* line 266, ../sass/screen.scss */
   .sidebar .minimenu {
     position: absolute;
     right: 5px;
     top: 5px;
     display: block;
   }
-  /* line 258, ../sass/screen.scss */
+  /* line 271, ../sass/screen.scss */
   .sidebar .minimenu img {
     height: 50px;
   }
-  /* line 262, ../sass/screen.scss */
+  /* line 275, ../sass/screen.scss */
   .sidebar ul.nav {
     display: flex;
     width: 100%;
@@ -359,17 +372,17 @@ header {
     font-size: 0.95em;
     margin-bottom: 10px;
   }
-  /* line 270, ../sass/screen.scss */
+  /* line 283, ../sass/screen.scss */
   .sidebar ul.nav li {
     display: inline-block;
     min-width: 150px;
     margin: 5px;
   }
-  /* line 274, ../sass/screen.scss */
+  /* line 287, ../sass/screen.scss */
   .sidebar ul.nav li a {
     padding: 10px;
   }
-  /* line 281, ../sass/screen.scss */
+  /* line 294, ../sass/screen.scss */
   .sidebar.collapse ul {
     display: none;
   }

mainsite/static/sass/screen.scss

@@ -149,7 +149,7 @@ header {
 .main {
     background: #fff;
     flex-grow: 1;
-    padding: 20px;
+    padding: 20px 40px;
     width: 100%;
     border: 1px solid rgba($rouge, 0.7);
 
@@ -172,6 +172,19 @@ header {
             box-shadow: 0 0 5px $rouge;
         }
     }
+
+    .intro-text {
+      margin-bottom: 40px;
+    }
+
+    p {
+      margin-bottom: 1em;
+    }
+
+    .md-text {
+      text-align: justify;
+      font-size: 1.1em;
+    }
 }
 
 .publication-list {

mainsite/templates/mainsite/homepage.html

@@ -10,6 +10,8 @@
         Demandez la <br />dernière édition&nbsp;!</a>
 </div>
 
+<div class="md-text">
   {{ site_config.homepageText | markdownify }}
+</div>
 
 {% endblock content %}

mainsite/templates/mainsite/publications_list_view.html

@@ -11,7 +11,7 @@ Millésime {{ year_range }}
 {% endif %}
 </h2>
 
-<div class="intro-text">{{ intro_text | safe | markdownify }}</div>
+<div class="intro-text md-text">{{ intro_text | safe | markdownify }}</div>
 
 <ul class="publication-list">
 {% for bocal in publications %}

mainsite/templates/mainsite/write_article.html

@@ -5,6 +5,8 @@
 {% block content %}
 {% get_solo 'mainsite.SiteConfiguration' as site_config %}
 
+<div class="md-text">
   {{ site_config.writearticleText | markdownify }}
+</div>
 
 {% endblock content %}