text: style the new citation block

- Styles the citation block.
- Clarify some rules for figures, but this is not finished yet.

Co-Authored-by: iGor milhit <igor@milhit.ch>

assets/css/style.css

@@ -0,0 +1 @@
+html,body{font-size:1.25rem}code,figure p,.footnotes,.footnote-ref,.main-footer,nav,.post-info,.posts-list footer{font-size:1rem}#content{line-height:1.4}.main-footer ul{display:flex;align-items:center;justify-content:flex-end;border-top:solid .1em #e1e1e1;padding-top:1em;margin-bottom:1em}.main-footer li{list-style:none;margin-right:.5em}.smallcaps{font-variant:small-caps}.main-header section{display:flex;flex-direction:column;border-bottom:solid .1em #e1e1e1;padding-bottom:1em}.main-header header{flex-grow:1}.title{display:flex;align-items:center}.avatar{border-radius:50%;width:5rem;margin-right:1rem}nav{margin-right:.5em;align-self:flex-end}.container{max-width:35rem;margin:0 auto}body{display:flex;flex-direction:column;height:100vh}main{flex-grow:1}.posts-list{display:flex;flex-direction:column;margin-bottom:.5em}dl{display:inline-flex;flex-flow:row;flex-wrap:wrap;width:100%;overflow:visible}dt{flex:0 0 39%;word-wrap:anywhere}dt::after{content:" :"}dd{flex:0 0 59%;margin-left:auto;text-align:left}.contents{padding:0}.contents li{list-style:none}.audio audio,.stream audio{width:100%;border-radius:.5rem}.audio figcaption p,.stream figcaption p{text-align:left;font-size:1rem;padding-left:.5rem}.audio>p,.stream>p{font-size:1rem;font-variant:small-caps}figure{background-color:#d3d3d3;padding:.4rem;border-radius:5px;margin-right:.4rem;margin-left:.4rem}figure img{width:100%}figure p{text-align:center;margin:.2rem 0}.post-header{margin:1em 0 1em 0}.post-header h1{margin:0}.post-info{display:flex;flex-wrap:wrap;padding:0;margin-top:0}.post-info>li{padding-right:.5rem}.post-info li{list-style:none;display:flex}.post-info li>ul{display:flex;padding:0;white-space:pre}.post-info li>ul:before{content:" ";white-space:pre}.post-taxonomies+.post-taxonomies:before{content:", "}code,pre{background-color:#d3d3d3;border-radius:5px;padding:.2rem}pre{overflow:auto;max-width:95vw}.terms{display:flex;flex-wrap:wrap}.term{margin-right:1rem}/*# sourceMappingURL=style.css.map */

assets/scss/_colors.scss

@@ -44,7 +44,7 @@ pre {
   background-color: $darker-polar;
 }
 
-figure {
+mark {
-  // background-color: $darkest-polar;
+  background-color: $aurora-yellow;
-  // box-shadow: 0 2px 10px 5px $the-darkiest-polar;
+  color: $the-darkiest-polar;
 }

assets/scss/_fonts.scss

@@ -12,7 +12,7 @@ body {
 }
 
 code,
-figure p,
+figure figcaption,
 .footnotes,
 .footnote-ref,
 .list-footer,

assets/scss/_medias.scss

@@ -62,9 +62,12 @@ figure {
     width: 100%;
   }
 
-  p {
+  figcaption {
-    margin: .2rem 0;
-    text-align: center;
     font-size: $font-size-small;
+
+    p {
+      margin: .2rem 0;
+      text-align: center;
+    }
   }
 }

assets/scss/_texts.scss

@@ -22,3 +22,32 @@
     text-decoration: none;
   }
 }
+
+.citation {
+  border: none;
+  margin-left: 0;
+
+  blockquote {
+    margin: 0;
+    margin-left: .5rem;
+    @include breakpoint(laptop) {
+      margin-left: 1rem;
+    }
+    border-left: solid $lighter-polar .5rem;
+    padding-left: .5rem;
+
+    @include breakpoint(laptop) {
+      padding-left: 1rem;
+    }
+
+    p {
+      text-align: left;
+      margin: .4rem 0;
+    }
+
+    figcaption {
+      text-align: right;
+      margin-top: 1rem;
+    }
+  }
+}