Cool footnotes css style

1 files changed, 52 insertions, 42 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index b8020f4..020ad09 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -1,4 +1,56 @@
 article {
+  margin-right: 2%;
+  margin-left: 3%;
+  float: left;
+  width: 83%;
+  background: #FFF;
+  margin-bottom: 2.5%;
+  padding-right: 0;
+  padding-left: 0;
+  padding: 1.6em 1.6em;
+  font-family: Merriweather, "Liberation Serif", "Segoe UI";
+
+  code {
+    color: #a00;
+    background: #eee;
+    border: 1px solid #ccc;
+    padding: 0 5px;
+  }
+
+  @media #{$gt-gsm} {
+    float: none;
+    margin-right: 7%;
+    margin-left: 300px;
+    width: auto;
+
+    font-size: 1em;
+    padding-right: 5%;
+    padding-left: 5%;
+    transition: margin-left 0.5s ease-out 0.25s;
+
+    border: 1px solid #eaeaea;
+    border: 1px solid rgba(51, 51, 51, 0.1);
+    border-color: #eaeaea !important;
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    &.zen-mode {
+      margin-left: 7%;
+      transition: margin-left 0.5s ease-out 0.25s;
+    }
+  }
+
+  .footnotes {
+    color: #777;
+    font-size: 0.8em;
+    li {
+      padding-bottom: 15px;
+    }
+    ol p {
+      display: inline;
+    }
+  }
+
   h1 {
     font-size: 2em;
     color: #A5B;
@@ -49,46 +101,4 @@ section {
     }
   }
 }
-article {
-  margin-right: 2%;
-  margin-left: 3%;
-  float: left;
-  width: 83%;
-  background: #FFF;
-  margin-bottom: 2.5%;
-  padding-right: 0;
-  padding-left: 0;
-  padding: 1.6em 1.6em;
-  font-family: Merriweather, "Liberation Serif", "Segoe UI";
-
-  code {
-    color: #a00;
-    background: #eee;
-    border: 1px solid #ccc;
-    padding: 0 5px;
-  }
-
-  @media #{$gt-gsm} {
-    float: none;
-    margin-right: 7%;
-    margin-left: 300px;
-    width: auto;
-
-    font-size: 1em;
-    padding-right: 5%;
-    padding-left: 5%;
-    transition: margin-left 0.5s ease-out 0.25s;
-
-    border: 1px solid #eaeaea;
-    border: 1px solid rgba(51, 51, 51, 0.1);
-    border-color: #eaeaea !important;
-    margin-top: 50px;
-    margin-bottom: 50px;
-
-    &.zen-mode {
-      margin-left: 7%;
-      transition: margin-left 0.5s ease-out 0.25s;
-    }
-  }
-}