From 17644890284dff9c4c2639b5b737c3af39009bf6 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Wed, 31 Aug 2022 05:58:33 +0200
Subject: [PATCH] Feat: remove nav and toctree in small screen

---
 theme/static/stylesheet/style.less    | 830 +++++++++++++-------------
 theme/static/stylesheet/style.min.css |   2 +-
 2 files changed, 412 insertions(+), 420 deletions(-)

diff --git a/theme/static/stylesheet/style.less b/theme/static/stylesheet/style.less
index 82694f1..c969fb0 100644
--- a/theme/static/stylesheet/style.less
+++ b/theme/static/stylesheet/style.less
@@ -1,8 +1,8 @@
 @import "variables.less";
 
 html, body {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 h1,
@@ -11,68 +11,68 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 300;
-  line-height: 1.1;
+    font-weight: 300;
+    line-height: 1.1;
 }
 
 h1{
-  font-size: 2.4em
+    font-size: 2.4em
 }
 
 h2 {
-  font-size: 2em;
-  background-color: @light-grey;
-  padding: 4px;
+    font-size: 2em;
+    background-color: @light-grey;
+    padding: 4px;
 }
 
 h3 {
-  font-size: 1.6em
+    font-size: 1.6em
 }
 
 h4 {
-  font-size: 1.36em
+    font-size: 1.36em
 }
 
 h5 {
-  font-size: 1.2em
+    font-size: 1.2em
 }
 
 h6 {
-  font-size: 1.1em
+    font-size: 1.1em
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  background-color: @body-bg;
-  color: @text-color;
-  font-family: @sans;
-  font-size: 1.02em;
-  line-height: 1.2em;
+    margin: 0;
+    padding: 0;
+    background-color: @body-bg;
+    color: @text-color;
+    font-family: @sans;
+    font-size: 1.02em;
+    line-height: 1.2em;
 }
 
 a {
-  color: @link-color;
-  text-decoration: none;
+    color: @link-color;
+    text-decoration: none;
 }
 
 a:hover {
-  color: @link-hover-color;
+    color: @link-hover-color;
 }
 
 hr {
-  color: @light-grey;
-  background-color: @light-grey;
-  height: 1px;
-  border: none;
-  margin-top: 40px;
-  margin-bottom: 40px;
+    color: @light-grey;
+    background-color: @light-grey;
+    height: 1px;
+    border: none;
+    margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 img {
-  max-width: 100%;
-  border: 2px solid @med-light-grey;
-  box-shadow: 0px 0px 10px @light-grey;
+    max-width: 100%;
+    border: 2px solid @med-light-grey;
+    box-shadow: 0px 0px 10px @light-grey;
 }
 
 .button {
@@ -84,23 +84,23 @@ img {
     display: inline-flex;
     vertical-align: top;
     padding: 5px 15px;
-    * {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        gap: 10px;
-    }
-    a {
-        width:100%;
-        height:100%;
-    }
-    .nolink {
-        width:100%;
-        height:100%;
-    }
-    h3 {
-        margin: 0px;
-    }
+     * {
+         display: flex;
+         justify-content: center;
+         flex-direction: column;
+         gap: 10px;
+     }
+     a {
+         width:100%;
+         height:100%;
+     }
+     .nolink {
+         width:100%;
+         height:100%;
+     }
+     h3 {
+         margin: 0px;
+     }
 
 }
 
@@ -109,289 +109,163 @@ img {
 }
 
 aside {
-  background-color: @sidebar-bg;
-  color: @sidebar-text-color;
-  // text-align: center;
+    background-color: @sidebar-bg;
+    color: @sidebar-text-color;
+    // text-align: center;
 
-  a {
-    color: @sidebar-link-color;
-    display: block;
-  }
-
-  a:hover {
-    color: @sidebar-link-hover-color;
-  }
-
-  .title {
-    text-align: center;
-    margin-bottom: 50px;
-    margin-top: 50px;
-
-    img {
-      padding: 20px;
-      border-radius: 50%;
-      max-width: 140px;
+    a {
+        color: @sidebar-link-color;
+        display: block;
     }
 
-    h1 {
-      margin: 15px 0 5px 0;
-      
+    a:hover {
+        color: @sidebar-link-hover-color;
     }
 
-    p {
-      margin: 0 0 15px 0;
-      font-size: .92em;
+    .title {
+        text-align: center;
+        padding-bottom: 20px;
+        padding-top: 20px;
+
+        img {
+            padding: 20px;
+            border-radius: 50%;
+            max-width: 140px;
+        }
+
+        h1 {
+            margin: 15px 0 5px 0;
+
+        }
+
+        p {
+            margin: 0 0 15px 0;
+            font-size: .92em;
+        }
+    }
+    nav {
+        display: none;
+    }
+    .tagcloud {
+        display: none;
     }
-  }
 
-  nav {
-      background-color: @navbar-bg;
-      h2 {
-          background-color: @navbar-bg;
-          margin-bottom: 0;
-      }
-      ul {
-          padding-inline-start: 0px;
-          display: block;
-      }
-      ul.toctree {
-          li {
-              a {
-                  color: @navbar-text-color;
-                  border: none;
-              }
-          }
-          li.toctree-l1 {
-              li.current{
-                  background-color: @navbar-toctree-l2-sel-bg;
-                  color: @navbar-toctree-l2-sel-txt;
-                  padding: 10px;
-                  border-left: solid 2px @orange;
-              }
-          }
-          li.current{
-              a {
-                  background-color: @navbar-toctree-l1-sel-bg;
-                  color: @navbar-toctree-l1-sel-txt;
-                  border-top: solid 1px @light-grey;
-                  border-bottom: solid 1px @light-grey;
-                  border-left: solid 2px @orange;
-              }
-              a:hover {
-                  color: @orange;
-              }
-          }
-          li.toctree-l2 {
-              a {
-                  border: none;
-                  background-color: @navbar-toctree-l2-bg;
-                  color: @navbar-toctree-l2-txt;
-              }
-          }
-          a {
-              padding: 10px;
-          }
-          a:hover {
-              color: @orange;
-          }
-      }
-      ul.list {
-          li {
-              display: inline;
-              line-height: 1.6em;
-              font-size: 1.28em;
-              text-transform: lowercase;
-          }
-      }
-  }
-
-  .tagcloud {
-      h2 {
-          margin-bottom: 0;
-          background-color: @sidebar-bg;
-      }
-
-      ul {
-          list-style: none;
-          padding: 0;
-          margin: 10px;
-      }
-
-      ul li {
-          display: inline-block;
-      }
-
-      li.tag-0 {
-          font-size: 170%;
-      }
-
-      li.tag-1 {
-          font-size: 150%;
-      }
-
-      li.tag-2 {
-          font-size: 120%;
-      }
-
-      li.tag-3 {
-          font-size: 100%;
-      }
-
-      li.tag-4 {
-          font-size: 80%;
-      }
-  }
 }
 
 main {
-  nav {
-    text-align: center;
-    text-transform: uppercase;
-    font-size: .72em;
-    padding: 14px 0 14px 0;
-    border-bottom: @nav-border-color 1px solid;
-  }
-
-  nav, .translations {
-    a {
-      padding: 0 4px 0 4px;
-      border-left: @nav-border-color 1px solid;
-      border-right: @nav-border-color 1px solid;
+    nav {
+        display: none;
     }
 
-    :first-child {
-      border-left: none;
-    }
 
-    :last-child {
-      border-right: none;
-    }
-  }
+    article {
+        margin: 0 8% 2% 8%;
 
-  .neighbors {
-    margin: 4% 0% 4% 0%;
-    height: 20px;
-  }
+        header {
+            h1, h2 {
+                margin-bottom: 0;
+            }
 
-  .pagination {
-    margin: 4% 8% 4% 8%;
-    height: 20px;
-  }
+            p {
+                color: @header-text-color;
+                font-size: 0.86em;
+            }
 
-  .social-share {
-    p {
-      font-size: .8em;
-    }
-  }
+            .translations {
+                float: right;
 
-  article {
-    margin: 0 8% 2% 8%;
-
-    header {
-      h1, h2 {
-        margin-bottom: 0;
-      }
-
-      p {
-        color: @header-text-color;
-        font-size: 0.86em;
-      }
-
-      .translations {
-        float: right;
-
-        .active {
-          font-weight: 600;
+                .active {
+                    font-weight: 600;
+                }
+            }
+        }
+
+        code, kbd, samp, pre {
+            font-family: @mono;
+        }
+
+        blockquote, pre {
+            background-color: rgba(128,128,128,0.05);
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-left: 8px solid rgba(128,128,128,0.075);
+            border-left-width: 10px;
+        }
+
+        blockquote {
+            padding: 10px 20px;
+            font-weight: 300;
+            font-size: 1.1em;
+        }
+
+        pre {
+            padding: 4px;
+            font-size: .9em;
+            overflow-x: auto;
+        }
+
+        samp {
+            white-space: pre;
+            display: block;
+            overflow-x: auto;
+        }
+
+        kbd {
+            padding: .1em .6em;
+            border: 1px solid rgba(63,63,63,0.25);
+            box-shadow: 0 1px 0 rgba(63,63,63,0.25);
+            background-color: #fff;
+            color: #333;
+            border-radius: 3px;
+            display: inline-block;
+            margin: 0 .1em;
+            white-space: nowrap;
+            font-size: .78em;
+        }
+
+        *:not(pre) > code {
+            font-size: .8em;
+            white-space: nowrap;
+            color: #c25;
+            padding: 1px 3px;
+            background-color: #f7f7f9;
+            border: 1px solid #e1e1e8;
+            border-radius: 3px;
+        }
+
+        .comment-count {
+            font-size: .8em;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+
+            thead:first-child tr:first-child th {
+                border-top: 0;
+            }
+
+            th, td {
+                padding: 8px;
+                line-height: 20px;
+                vertical-align: top;
+                border-top: 1px solid #ddd;
+            }
         }
-      }
     }
 
-    code, kbd, samp, pre {
-      font-family: @mono;
+    footer {
+        padding-top: 4px;
+        border-top: @footer-border-color 1px solid;
+
+        p {
+            margin: 2px;
+            text-align: center;
+            padding: 0 40px 0 40px;
+            color: @footer-text-color;
+            font-size: 11px;
+        }
     }
-
-    blockquote, pre {
-      background-color: rgba(128,128,128,0.05);
-      border-top-right-radius: 5px;
-      border-bottom-right-radius: 5px;
-      border-left: 8px solid rgba(128,128,128,0.075);
-      border-left-width: 10px;
-    }
-
-    blockquote {
-      padding: 10px 20px;
-      font-weight: 300;
-      font-size: 1.1em;
-    }
-
-    pre {
-      padding: 4px;
-      font-size: .9em;
-      overflow-x: auto;
-    }
-
-    samp {
-      white-space: pre;
-      display: block;
-      overflow-x: auto;
-    }
-
-    kbd {
-      padding: .1em .6em;
-      border: 1px solid rgba(63,63,63,0.25);
-      box-shadow: 0 1px 0 rgba(63,63,63,0.25);
-      background-color: #fff;
-      color: #333;
-      border-radius: 3px;
-      display: inline-block;
-      margin: 0 .1em;
-      white-space: nowrap;
-      font-size: .78em;
-    }
-
-    *:not(pre) > code {
-      font-size: .8em;
-      white-space: nowrap;
-      color: #c25;
-      padding: 1px 3px;
-      background-color: #f7f7f9;
-      border: 1px solid #e1e1e8;
-      border-radius: 3px;
-    }
-
-    .comment-count {
-      font-size: .8em;
-    }
-
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-
-      thead:first-child tr:first-child th {
-         border-top: 0;
-      }
-
-      th, td {
-        padding: 8px;
-        line-height: 20px;
-        vertical-align: top;
-        border-top: 1px solid #ddd;
-      }
-    }
-  }
-
-  footer {
-    padding-top: 4px;
-    border-top: @footer-border-color 1px solid;
-
-    p {
-      margin: 2px;
-      text-align: center;
-      padding: 0 40px 0 40px;
-      color: @footer-text-color;
-      font-size: 11px;
-    }
-  }
 }
 
 .about {
@@ -401,96 +275,96 @@ main {
 }
 
 .tag-cloud {
-  text-align: center;
-  a {
-    background-color: @tag-bg;
-    padding: .2em .6em .2em;
-    font-size: .74em;
+    text-align: center;
+    a {
+        background-color: @tag-bg;
+        padding: .2em .6em .2em;
+        font-size: .74em;
+        line-height: 1;
+        color: @tag-text-color;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: .25em;
+    }
+
+    a:hover {
+        background-color: @tag-hover-color;
+    }
+}
+
+a.btn {
+    background-color: @btn-bg;
+    padding: .6em .6em;
+    font-size: .8em;
     line-height: 1;
-    color: @tag-text-color;
+    color: @btn-text-color;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: .25em;
-  }
-
-  a:hover {
-    background-color: @tag-hover-color;
-  }
-}
-
-a.btn {
-  background-color: @btn-bg;
-  padding: .6em .6em;
-  font-size: .8em;
-  line-height: 1;
-  color: @btn-text-color;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
 }
 
 a.btn:hover {
-  background-color: @btn-hover-color;
+    background-color: @btn-hover-color;
 }
 
 .center, .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .img-center {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
 }
 
 .align-center {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
 }
 
 .float-left {
-  float: left;
+    float: left;
 }
 
 .float-right {
-  float: right;
+    float: right;
 }
 
 div.related-posts {
-  margin: 15px 0 15px 0;
-  padding-bottom: 20px;
-  border-top: @rel-post-border-color 1px solid;
-  border-bottom: @rel-post-border-color 1px solid;
+    margin: 15px 0 15px 0;
+    padding-bottom: 20px;
+    border-top: @rel-post-border-color 1px solid;
+    border-bottom: @rel-post-border-color 1px solid;
 
-  h4 {
-    margin: 20px 0 25px 0;
-  }
-
-  ul {
-    font-size: 1.1em;
-    padding-left: 12px;
-
-    li {
-      padding: 4px 0 4px 0;
+    h4 {
+        margin: 20px 0 25px 0;
+    }
+
+    ul {
+        font-size: 1.1em;
+        padding-left: 12px;
+
+        li {
+            padding: 4px 0 4px 0;
+        }
     }
-  }
 }
 
 ul.list, ul.social, ul.related-posts {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
 }
 
 ul.list {
-  padding: 1em 0 1em 0;
+    padding: 1em 0 1em 0;
 
-  li {
-    padding: 4px;
-  }
+    li {
+        padding: 4px;
+    }
 }
 
 ul.breadcrumb {
@@ -520,28 +394,28 @@ ul.breadcrumb {
 }
 
 ul.social {
-  font-size: 1.6em;
-  padding-top: 20px;
+    font-size: 1.6em;
+    padding-top: 20px;
 
-  li {
-    display: inline;
-  }
+    li {
+        display: inline;
+    }
 
-  a:hover {
-    z-index: 2;
-    -webkit-transform: translateY(-5px);
-    transform: translateY(-5px);
-  }
+    a:hover {
+        z-index: 2;
+        -webkit-transform: translateY(-5px);
+        transform: translateY(-5px);
+    }
 
-  a {
-    display: inline-block;
-    width: 36px;
-    height: 36px;
-    border-radius: 100%;
-    text-align: center;
-    font-size: .8em;
-    line-height: 36px;
-  }
+    a {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        border-radius: 100%;
+        text-align: center;
+        font-size: .8em;
+        line-height: 36px;
+    }
 
 
 }
@@ -552,49 +426,167 @@ ul.social {
 //
 
 @media screen and (min-width: 768px) {
-  aside {
-    width: 20%;
-    max-width: 250px;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    overflow-y: auto;
+    aside {
+        width: 20%;
+        max-width: 250px;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        overflow-y: auto;
 
-    div {
-      nav {
-        ul {
-          li {
-            padding: 0;
+        .title {
+            padding-bottom: 50px;
+            padding-top: 50px;
+        }
+        nav {
             display: block;
-          }
+            background-color: @navbar-bg;
+            h2 {
+                background-color: @navbar-bg;
+                margin-bottom: 0;
+            }
+            ul {
+                padding-inline-start: 0px;
+                display: block;
+                li {
+                    padding: 0;
+                    display: block;
+                }
+            }
+            ul.toctree {
+                li {
+                    a {
+                        color: @navbar-text-color;
+                        border: none;
+                    }
+                }
+                li.toctree-l1 {
+                    li.current{
+                        background-color: @navbar-toctree-l2-sel-bg;
+                        color: @navbar-toctree-l2-sel-txt;
+                        padding: 10px;
+                        border-left: solid 2px @orange;
+                    }
+                }
+                li.current{
+                    a {
+                        background-color: @navbar-toctree-l1-sel-bg;
+                        color: @navbar-toctree-l1-sel-txt;
+                        border-top: solid 1px @light-grey;
+                        border-bottom: solid 1px @light-grey;
+                        border-left: solid 2px @orange;
+                    }
+                    a:hover {
+                        color: @orange;
+                    }
+                }
+                li.toctree-l2 {
+                    a {
+                        border: none;
+                        background-color: @navbar-toctree-l2-bg;
+                        color: @navbar-toctree-l2-txt;
+                    }
+                }
+                a {
+                    padding: 10px;
+                }
+                a:hover {
+                    color: @orange;
+                }
+            }
+            ul.list {
+                li {
+                    display: inline;
+                    line-height: 1.6em;
+                    font-size: 1.28em;
+                    text-transform: lowercase;
+                }
+            }
         }
-      }
 
-      ul.social {
-        padding-top: 32px;
-      }
-    }
-  }
+        .tagcloud {
+            display: block;
+            h2 {
+                margin-bottom: 0;
+                background-color: @sidebar-bg;
+            }
 
-  main {
-    width: 75%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 2.5%;
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 10px;
+            }
 
-    article {
+            ul li {
+                display: inline-block;
+            }
 
-      &.single {
-        min-height: 80%;
-      }
+            li.tag-0 {
+                font-size: 170%;
+            }
 
-      ul.list {
-        li {
-          padding: 2px;
+            li.tag-1 {
+                font-size: 150%;
+            }
+
+            li.tag-2 {
+                font-size: 120%;
+            }
+
+            li.tag-3 {
+                font-size: 100%;
+            }
+
+            li.tag-4 {
+                font-size: 80%;
+            }
+        }
+    }
+
+    main {
+        width: 75%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 2.5%;
+
+        nav {
+            display: block;
+            text-align: center;
+            text-transform: uppercase;
+            font-size: .72em;
+            padding: 14px 0 14px 0;
+            border-bottom: @nav-border-color 1px solid;
+        }
+
+        nav, .translations {
+            a {
+                padding: 0 4px 0 4px;
+                border-left: @nav-border-color 1px solid;
+                border-right: @nav-border-color 1px solid;
+            }
+
+            :first-child {
+                border-left: none;
+            }
+
+            :last-child {
+                border-right: none;
+            }
+        }
+
+        article {
+
+            &.single {
+                min-height: 80%;
+            }
+
+            ul.list {
+                li {
+                    padding: 2px;
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/theme/static/stylesheet/style.min.css b/theme/static/stylesheet/style.min.css
index bbae5e2..bb46b4c 100644
--- a/theme/static/stylesheet/style.min.css
+++ b/theme/static/stylesheet/style.min.css
@@ -1 +1 @@
-html,body{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em;background-color:#eeeeee;padding:4px}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#ffffff;color:#242121;font-family:'Source Sans Pro','Roboto','Open Sans','Liberation Sans','DejaVu Sans','Verdana','Helvetica','Arial',sans-serif;font-size:1.02em;line-height:1.2em}a{color:#D9411E;text-decoration:none}a:hover{color:#FF5A09}hr{color:#eeeeee;background-color:#eeeeee;height:1px;border:none;margin-top:40px;margin-bottom:40px}img{max-width:100%;border:2px solid #d9d8d8;box-shadow:0 0 10px #eeeeee}.button{margin:20px;border:3px solid #D9411E;width:250px;height:150px;border-radius:25px;display:inline-flex;vertical-align:top;padding:5px 15px}.button *{display:flex;justify-content:center;flex-direction:column;gap:10px}.button a{width:100%;height:100%}.button .nolink{width:100%;height:100%}.button h3{margin:0px}.button:hover{background-color:#eeeeee}aside{background-color:#242121;color:#ffffff}aside a{color:#ffffff;display:block}aside a:hover{color:#eeeeee}aside .title{text-align:center;margin-bottom:50px;margin-top:50px}aside .title img{padding:20px;border-radius:50%;max-width:140px}aside .title h1{margin:15px 0 5px 0}aside .title p{margin:0 0 15px 0;font-size:.92em}aside nav{background-color:#242121}aside nav h2{background-color:#242121;margin-bottom:0}aside nav ul{padding-inline-start:0px;display:block}aside nav ul.toctree li a{color:#ffffff;border:none}aside nav ul.toctree li.toctree-l1 li.current{background-color:#eeeeee;color:#333333;padding:10px;border-left:solid 2px #D9411E}aside nav ul.toctree li.current a{background-color:#d9d8d8;color:#333333;border-top:solid 1px #eeeeee;border-bottom:solid 1px #eeeeee;border-left:solid 2px #D9411E}aside nav ul.toctree li.current a:hover{color:#D9411E}aside nav ul.toctree li.toctree-l2 a{border:none;background-color:#999999;color:#333333}aside nav ul.toctree a{padding:10px}aside nav ul.toctree a:hover{color:#D9411E}aside nav ul.list li{display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}aside .tagcloud h2{margin-bottom:0;background-color:#242121}aside .tagcloud ul{list-style:none;padding:0;margin:10px}aside .tagcloud ul li{display:inline-block}aside .tagcloud li.tag-0{font-size:170%}aside .tagcloud li.tag-1{font-size:150%}aside .tagcloud li.tag-2{font-size:120%}aside .tagcloud li.tag-3{font-size:100%}aside .tagcloud li.tag-4{font-size:80%}main nav{text-align:center;text-transform:uppercase;font-size:.72em;padding:14px 0 14px 0;border-bottom:#eeeeee 1px solid}main nav a,main .translations a{padding:0 4px 0 4px;border-left:#eeeeee 1px solid;border-right:#eeeeee 1px solid}main nav :first-child,main .translations :first-child{border-left:none}main nav :last-child,main .translations :last-child{border-right:none}main .neighbors{margin:4% 0% 4% 0%;height:20px}main .pagination{margin:4% 8% 4% 8%;height:20px}main .social-share p{font-size:.8em}main article{margin:0 8% 2% 8%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999999;font-size:.86em}main article header .translations{float:right}main article header .translations .active{font-weight:600}main article code,main article kbd,main article samp,main article pre{font-family:'Source Code Pro','Consolas','Liberation Mono','DejaVu Sans Mono',monospace}main article blockquote,main article pre{background-color:rgba(128,128,128,0.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid rgba(128,128,128,0.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;font-size:.9em;overflow-x:auto}main article samp{white-space:pre;display:block;overflow-x:auto}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article *:not(pre)>code{font-size:.8em;white-space:nowrap;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table th,main article table td{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:#eeeeee 1px solid}main footer p{margin:2px;text-align:center;padding:0 40px 0 40px;color:#999999;font-size:11px}.about{text-align:center;border-top:#eeeeee 1px solid;padding-top:1em}.tag-cloud{text-align:center}.tag-cloud a{background-color:#D9411E;padding:.2em .6em .2em;font-size:.74em;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.tag-cloud a:hover{background-color:#FF5A09}a.btn{background-color:#D9411E;padding:.6em .6em;font-size:.8em;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.btn:hover{background-color:#FF5A09}.center,.text-center{text-align:center}.img-center{margin-left:auto;margin-right:auto;display:block}.align-center{margin-left:auto;margin-right:auto;display:block}.float-left{float:left}.float-right{float:right}div.related-posts{margin:15px 0 15px 0;padding-bottom:20px;border-top:#eeeeee 1px solid;border-bottom:#eeeeee 1px solid}div.related-posts h4{margin:20px 0 25px 0}div.related-posts ul{font-size:1.1em;padding-left:12px}div.related-posts ul li{padding:4px 0 4px 0}ul.list,ul.social,ul.related-posts{list-style-type:none;margin:0;padding:0}ul.list{padding:1em 0 1em 0}ul.list li{padding:4px}ul.breadcrumb{padding:5px 10px;list-style:none;background-color:#eee;font-size:.9em}ul.breadcrumb li{display:inline;font-size:18px}ul.breadcrumb li a{color:#D9411E;text-decoration:none}ul.breadcrumb li a:hover{color:#FF5A09}ul.breadcrumb li+li:before{padding:8px;color:black;content:"/\00a0"}ul.social{font-size:1.6em;padding-top:20px}ul.social li{display:inline}ul.social a:hover{z-index:2;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}@media screen and (min-width:768px){aside{width:20%;max-width:250px;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside div nav ul li{padding:0;display:block}aside div ul.social{padding-top:32px}main{width:75%;height:100%;position:absolute;top:0;right:2.5%}main article.single{min-height:80%}main article ul.list li{padding:2px}}
\ No newline at end of file
+html,body{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em;background-color:#eeeeee;padding:4px}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#ffffff;color:#242121;font-family:'Source Sans Pro','Roboto','Open Sans','Liberation Sans','DejaVu Sans','Verdana','Helvetica','Arial',sans-serif;font-size:1.02em;line-height:1.2em}a{color:#D9411E;text-decoration:none}a:hover{color:#FF5A09}hr{color:#eeeeee;background-color:#eeeeee;height:1px;border:none;margin-top:40px;margin-bottom:40px}img{max-width:100%;border:2px solid #d9d8d8;box-shadow:0 0 10px #eeeeee}.button{margin:20px;border:3px solid #D9411E;width:250px;height:150px;border-radius:25px;display:inline-flex;vertical-align:top;padding:5px 15px}.button *{display:flex;justify-content:center;flex-direction:column;gap:10px}.button a{width:100%;height:100%}.button .nolink{width:100%;height:100%}.button h3{margin:0px}.button:hover{background-color:#eeeeee}aside{background-color:#242121;color:#ffffff}aside a{color:#ffffff;display:block}aside a:hover{color:#eeeeee}aside .title{text-align:center;padding-bottom:20px;padding-top:20px}aside .title img{padding:20px;border-radius:50%;max-width:140px}aside .title h1{margin:15px 0 5px 0}aside .title p{margin:0 0 15px 0;font-size:.92em}aside nav{display:none}aside .tagcloud{display:none}main nav{display:none}main article{margin:0 8% 2% 8%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999999;font-size:.86em}main article header .translations{float:right}main article header .translations .active{font-weight:600}main article code,main article kbd,main article samp,main article pre{font-family:'Source Code Pro','Consolas','Liberation Mono','DejaVu Sans Mono',monospace}main article blockquote,main article pre{background-color:rgba(128,128,128,0.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid rgba(128,128,128,0.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;font-size:.9em;overflow-x:auto}main article samp{white-space:pre;display:block;overflow-x:auto}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article *:not(pre)>code{font-size:.8em;white-space:nowrap;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table th,main article table td{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:#eeeeee 1px solid}main footer p{margin:2px;text-align:center;padding:0 40px 0 40px;color:#999999;font-size:11px}.about{text-align:center;border-top:#eeeeee 1px solid;padding-top:1em}.tag-cloud{text-align:center}.tag-cloud a{background-color:#D9411E;padding:.2em .6em .2em;font-size:.74em;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.tag-cloud a:hover{background-color:#FF5A09}a.btn{background-color:#D9411E;padding:.6em .6em;font-size:.8em;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.btn:hover{background-color:#FF5A09}.center,.text-center{text-align:center}.img-center{margin-left:auto;margin-right:auto;display:block}.align-center{margin-left:auto;margin-right:auto;display:block}.float-left{float:left}.float-right{float:right}div.related-posts{margin:15px 0 15px 0;padding-bottom:20px;border-top:#eeeeee 1px solid;border-bottom:#eeeeee 1px solid}div.related-posts h4{margin:20px 0 25px 0}div.related-posts ul{font-size:1.1em;padding-left:12px}div.related-posts ul li{padding:4px 0 4px 0}ul.list,ul.social,ul.related-posts{list-style-type:none;margin:0;padding:0}ul.list{padding:1em 0 1em 0}ul.list li{padding:4px}ul.breadcrumb{padding:5px 10px;list-style:none;background-color:#eee;font-size:.9em}ul.breadcrumb li{display:inline;font-size:18px}ul.breadcrumb li a{color:#D9411E;text-decoration:none}ul.breadcrumb li a:hover{color:#FF5A09}ul.breadcrumb li+li:before{padding:8px;color:black;content:"/\00a0"}ul.social{font-size:1.6em;padding-top:20px}ul.social li{display:inline}ul.social a:hover{z-index:2;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}@media screen and (min-width:768px){aside{width:20%;max-width:250px;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside .title{padding-bottom:50px;padding-top:50px}aside nav{display:block;background-color:#242121}aside nav h2{background-color:#242121;margin-bottom:0}aside nav ul{padding-inline-start:0px;display:block}aside nav ul li{padding:0;display:block}aside nav ul.toctree li a{color:#ffffff;border:none}aside nav ul.toctree li.toctree-l1 li.current{background-color:#eeeeee;color:#333333;padding:10px;border-left:solid 2px #D9411E}aside nav ul.toctree li.current a{background-color:#d9d8d8;color:#333333;border-top:solid 1px #eeeeee;border-bottom:solid 1px #eeeeee;border-left:solid 2px #D9411E}aside nav ul.toctree li.current a:hover{color:#D9411E}aside nav ul.toctree li.toctree-l2 a{border:none;background-color:#999999;color:#333333}aside nav ul.toctree a{padding:10px}aside nav ul.toctree a:hover{color:#D9411E}aside nav ul.list li{display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}aside .tagcloud{display:block}aside .tagcloud h2{margin-bottom:0;background-color:#242121}aside .tagcloud ul{list-style:none;padding:0;margin:10px}aside .tagcloud ul li{display:inline-block}aside .tagcloud li.tag-0{font-size:170%}aside .tagcloud li.tag-1{font-size:150%}aside .tagcloud li.tag-2{font-size:120%}aside .tagcloud li.tag-3{font-size:100%}aside .tagcloud li.tag-4{font-size:80%}main{width:75%;height:100%;position:absolute;top:0;right:2.5%}main nav{display:block;text-align:center;text-transform:uppercase;font-size:.72em;padding:14px 0 14px 0;border-bottom:#eeeeee 1px solid}main nav a,main .translations a{padding:0 4px 0 4px;border-left:#eeeeee 1px solid;border-right:#eeeeee 1px solid}main nav :first-child,main .translations :first-child{border-left:none}main nav :last-child,main .translations :last-child{border-right:none}main article.single{min-height:80%}main article ul.list li{padding:2px}}
\ No newline at end of file