From 7ed689df19ff58e26012fb3dfd8add787a3f2238 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Mar 2021 11:34:38 +0100
Subject: [PATCH] setup bootstrap file structure to allow overrides

---
 src/assets/scss/_bootstrap.scss               |   60 +
 src/assets/scss/app.scss                      | 1168 -----------------
 src/assets/scss/base/_colors.scss             |    7 -
 src/assets/scss/base/_fonts.scss              |   93 --
 src/assets/scss/base/_grid-flex.scss          |  105 --
 src/assets/scss/base/_grid.scss               |   92 --
 src/assets/scss/base/_layout.scss             |   94 --
 src/assets/scss/base/_reset.scss              |   40 -
 src/assets/scss/base/_transitions.scss        |   67 -
 src/assets/scss/base/_variables.scss          |   10 -
 .../scss/bootstrap-overrides/_mixins.scss     |    0
 .../scss/bootstrap-overrides/_variables.scss  |    0
 src/assets/scss/globals.scss                  |   19 +-
 src/assets/scss/main.scss                     |    9 +-
 14 files changed, 81 insertions(+), 1683 deletions(-)
 create mode 100644 src/assets/scss/_bootstrap.scss
 delete mode 100644 src/assets/scss/app.scss
 delete mode 100644 src/assets/scss/base/_colors.scss
 delete mode 100644 src/assets/scss/base/_fonts.scss
 delete mode 100644 src/assets/scss/base/_grid-flex.scss
 delete mode 100644 src/assets/scss/base/_grid.scss
 delete mode 100644 src/assets/scss/base/_layout.scss
 delete mode 100644 src/assets/scss/base/_reset.scss
 delete mode 100644 src/assets/scss/base/_transitions.scss
 delete mode 100644 src/assets/scss/base/_variables.scss
 create mode 100644 src/assets/scss/bootstrap-overrides/_mixins.scss
 create mode 100644 src/assets/scss/bootstrap-overrides/_variables.scss

diff --git a/src/assets/scss/_bootstrap.scss b/src/assets/scss/_bootstrap.scss
new file mode 100644
index 0000000..4753afa
--- /dev/null
+++ b/src/assets/scss/_bootstrap.scss
@@ -0,0 +1,60 @@
+/*!
+ * Import of all needed bootstrap files except variables, functions and mixins
+ */
+
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
+
+// TODO OPTI: import only used
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮   ╷ ╷╷ ╷┌─╴
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵     ╰╯ ╰─╯╰─╴
+
+// TODO OPTI: import only used
+
+@import "~bootstrap-vue/src/utilities";
+
+// General styling needed for special form controls
+@import "~bootstrap-vue/src/custom-controls";
+
+// Include custom SCSS for components
+@import "~bootstrap-vue/src/components/index";
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
deleted file mode 100644
index 5fa49a0..0000000
--- a/src/assets/scss/app.scss
+++ /dev/null
@@ -1,1168 +0,0 @@
-@import './base/reset';
-@import './base/variables';
-@import './base/colors';
-@import './base/grid-flex';
-@import './base/transitions';
-@import './base/layout';
-@import './base/fonts';
-
-/* The emerging W3C standard
-that is currently Firefox-only */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: $grisclair rgba(255,255,255,0);
-}
-
-/* Works on Chrome/Edge/Safari */
-*::-webkit-scrollbar {
-  width: 12px;
-}
-*::-webkit-scrollbar-track {
-  background: rgba(255,255,255,0);
-}
-*::-webkit-scrollbar-thumb {
-  background-color: $grisclair;
-  border-radius: 20px;
-  border: none;
-}
-
-body{
-  color: #1a1a1a;
-}
-
-#root{
-}
-
-.red{
-  background-color: red;
-  color:white;
-
-}
-
-header[role="banner"]{
-  div.wrapper{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-  h1.site-title{
-    grid-column: 1;
-    margin:0;
-    font-size: 1em;
-  }
-  nav#header-menu{
-    grid-column: 2;
-    text-align: right;
-    >ul>li{
-      display: inline-block;
-      margin-right: 1em;
-      position: relative;
-      >ul{
-        position: absolute;
-        top:1em; right:-1em;
-        overflow: hidden;
-        padding-bottom: 0.5em;
-        background-color: white;
-        >li{
-          padding:0 1em;
-          // margin-right: -1em;
-          transition: height 0.3s ease-in-out;
-          height:0;
-          overflow: hidden;
-        }
-      }
-      //
-      // &:focus-within
-      // &:hover,
-      &.opened{
-        >ul>li{
-          height:1em;
-        }
-      }
-      &.has-submenu{
-        cursor: pointer;
-      }
-    }
-    li>span,li>a{
-      font-size: 0.9em;
-      color: $bleuroi;
-      text-transform: uppercase;
-
-    }
-  }
-}
-section[role="main-content"]{
-  #home{
-    header{
-      text-align: center;
-      h1{
-        color: $bleuroi;
-        font-size: 8em;
-        font-weight: 300;
-        margin:15vh 0 0;
-      }
-      h2{
-        color: $or;
-        font-size: 2em;
-        font-weight: 300;
-        margin:1em 0 0;
-        text-transform: uppercase;
-        letter-spacing: 0.2em;
-        sup{
-          // line-height: 5em;
-          vertical-align:text-top;
-          font-size: 0.7em
-        }
-      }
-    }
-    // $filet_space:8em;
-    // $decallage: 0.5em;
-    section{
-      padding-top: 8em;
-    }
-    @mixin teasersfilet($filet_space, $decallage){
-      &:before, &:after{
-        z-index: 0;
-        content: "";
-        position: absolute;
-        opacity: 0.4;
-      }
-      &:before{
-        border:1px solid $or;
-        width:calc(100% + #{$filet_space*2 + $decallage*2});
-        left:- $filet_space - $default_gap/2 -$decallage;
-        height:calc(100% + #{$filet_space});
-        top:- $filet_space / 2;
-      }
-      &:after{
-        border:1px solid $rouge;
-        width:calc(100% + #{$filet_space*2});
-        left:- $filet_space - $default_gap/2;
-        height:calc(100% + #{$filet_space + $decallage*2});
-        top:- $filet_space / 2 - $decallage;
-      }
-
-    }
-    div.teasers{
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      position: relative;
-      padding-right: 0;
-      article{
-        box-sizing: border-box;
-        flex-basis: percentage(2 / ( $default_sum - 6) );
-        padding-right: $default_gap;
-        @include fontsans;
-
-        h1{
-          color: $bleuroi;
-        }
-        p{
-          font-size: 0.882em;
-          line-height: 1.2;
-        }
-        span{
-          color:$rouge;
-          font-size:0.693em;
-        }
-      }
-      // filets decoratif
-      @include teasersfilet(8em, 0.5em);
-      }
-    // responsive
-    @media only screen and (max-width: $small-bp) {
-      header{
-        h1{
-          font-size: 5em;
-          margin:7vh 0 0;
-        }
-        h2{
-          font-size: 1em;
-        }
-      }
-      section{
-        padding-top: 4em;
-      }
-      div.teasers{
-        flex-direction: column;
-        // filets decoratif
-        @include teasersfilet(4em, 0.5em);
-      }
-    }
-  }
-
-  #list-corpus, .index{
-    >header>h1{
-      font-family: "noto_sans";
-      color: $rouge;
-      font-weight: 400;
-    }
-
-    article.item{
-      margin: 2em 0 0;
-      header h1{
-        font-size: 1.512em;
-        color: $bleuroi;
-        font-weight: 400;
-        margin:0;
-      }
-    }
-    ul.item-list{
-      li{
-        margin: 0 0 2em 0;
-        header{
-          h2{
-            margin:0.4em 0 0.2em;
-            @include title1blue;
-          }
-          h3{
-            margin:0.2em 0;
-            @include fontsans;
-            font-size: 0.756em;
-            font-weight: 500;
-          }
-          margin-bottom: 0.3em;
-        }
-        section.editions{
-          div.editions{
-            ol{
-              padding:0;
-              li{
-                margin:0.7em 1em;
-              }
-            }
-          }
-        }
-        h4{
-          margin:0.1em 0;
-          font-weight: 300;
-          @include fontsans;
-          font-size: 0.756em;
-          &.texts-quantity{
-            color: $rouge;
-            // &:after{
-            //   content: ">>";
-            //   margin:0 0 0 0.5em;
-            // }
-          }
-        }
-
-        ul {
-          li{
-            margin:0 0 0 1em;
-            h3{
-              margin: 0.5em 0;
-              font-weight: 400;
-              font-size: 1em;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  #corpus{
-  }
-
-  .index{
-  }
-
-  .index-item{
-    header{
-      h1{
-        @include title1black;
-        margin:0 0 0.3em;
-      }
-      p{
-        margin: 0 0 0.5em 0;
-      }
-      h3{
-        @include title2black
-        margin:0;
-      }
-      .authors{
-        a{
-          @include title2black;
-          color: $bleuroi;
-        }
-        margin:0 0 0.3em;
-      }
-      .mdi{
-        color: $bleuroilight;
-        font-size: 0.7em;
-      }
-    }
-    .occurences{
-      >ul{
-        >li{
-          padding:0 0 2em 0;
-          h3{
-            @include title2black;
-            padding:0 0 0.5em 0;
-            color: $bleuroi;
-          }
-          >ul{
-            >li{
-              padding:0 0 0.5em 0;
-              section{
-                h4{
-                  @include title3black;
-                  display: inline-block;
-                }
-                span.open-close{
-                  cursor: pointer;
-                  display: inline-block;
-                  svg{
-                    transform: rotate(-90deg) scale(0.8);
-                    transition: transform 0.3s ease-in-out;
-                    path{
-                      fill:$bleuroi;
-                    }
-                  }
-                }
-                div.text{
-                  max-height: 0;
-                  transition: max-height 0.3s ease-in-out;
-                  overflow: hidden;
-                  box-sizing: content-box;
-                  p, h1, h2, h3, h4, h5, h6{
-                    margin: 0.5em 0 0 0;
-                  }
-                }
-                a.lire-plus{
-                  color: $bleuroi;
-                  opacity: 0;
-                  display: inline-block;
-                  height: 0;
-                  overflow: hidden;
-                  transition: height, opacity 0.3s ease-in-out;
-                }
-                &.opened{
-                  span.open-close{
-                    cursor: pointer;
-                    display: inline-block;
-                    svg{
-                      transform: scale(0.8) rotate(0);
-                    }
-                  }
-                  div.text{
-                    max-height:100px;
-                  }
-                  a.lire-plus{
-                    opacity: 1;
-                    height:1em;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    nav{
-      h3{
-        @include title2black;
-        margin:0 0 0.5em;
-      }
-      h4{
-        @include title3black;
-        margin:0 0 0.5em;
-        color: $bleuroi;
-      }
-      .attested-forms{
-        ul{
-          >li{
-            margin: 0 0 1em 0;
-            li{
-              margin: 0 0 0.5em 0;
-            }
-          }
-        }
-        a{
-          @include title4black;
-          color: $grisfonce;
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  #edition{
-    >header{
-      position: relative;
-      h1{
-        @include title1black;
-      }
-      aside.index-tooltip{
-        z-index:10;
-        margin-top: -1.75em;
-        position:absolute;
-        text-align: right;
-        right: 2em;
-        h1 {
-          @include title2black;
-          margin:0 0 0.5em 0;
-        }
-        p{
-          margin:0 0 0.5em 0;
-        }
-        time{
-          font-weight: 600;
-        }
-        @media only screen and (max-width: $small-bp) {
-          background-color: #fff;
-          padding: 1em;
-          box-shadow: 0 0 10px $gris;
-          *{
-            pointer-events: none;
-          }
-        }
-      }
-    }
-
-    $pagenum_w:1em;
-    >section{
-      padding-right: 0;
-      >.wrapper{
-        padding-right: $pagenum_w*2;
-      }
-      div#text{
-        // .infinite-loading-container{
-        //   height:0;
-        //   overflow: hidden;
-        // }
-        div.tei{
-          position: relative;
-          width: calc(100% - #{$pagenum_w});
-
-          // @media only screen and (min-width: $small-bp + 1) {
-          padding-right: $pagenum_w;
-          border-left: 1px dotted $grisclair;
-          padding-left: 1em;
-          &.active{
-            border-left: 1px dotted $bleuroi;
-          }
-          // }
-          >h1{@include teititle1blue;}
-          span.placeName,
-          span.objectName,
-          span.persName{
-            font-weight: 600;
-          }
-
-          h1{ font-size: 1.512em; }
-          p{
-            margin-top: 0;
-            font-size: 1.134em;
-            line-height: 1.5;
-            span.persName,
-            span.placeName,
-            span.objectName{
-              font-weight: 600;
-            }
-            a{
-              font-weight: 600;
-              &.active-link{
-                color: $rouge;
-                // text-decoration: underline;
-              }
-              sup.mdi{
-                font-size: 0.630em;
-                vertical-align: super;
-                // line-height: 0.1;
-                padding: 0 0.2em;
-              }
-            }
-          }
-
-          span[role="pageNum"]{
-            font-size: 16px;
-            position: relative;
-            float:right;
-            width: $pagenum_w; height:0;
-            // margin-left:calc(100% - #{$pagenum_w * 2});
-            // margin-left: 100%;
-            margin-right: - $pagenum_w;
-            &:after{
-              content:attr(data-num);
-              border-top: 1px solid $bleuroilight;
-              position: absolute;
-              right:0;
-              font-size: 0.630em;
-              width: $pagenum_w*2; height: $pagenum_w;
-              line-height: $pagenum_w;
-              border-right: 1px solid $bleuroilight;
-              color: $bleuroi;
-              text-indent: $pagenum_w * 2.5;
-            }
-          }
-
-          a.text-item-link{
-            // float: left;
-            position: absolute;
-            top:0; left:0;
-            // display: block;
-            // width:1em; height:1em;
-            font-size: 0.630em;
-            .mdi{
-              color: $bleuroi;
-              pointer-events: none;
-            }
-          }
-          // front page
-          header{
-            padding-top: 1em;
-            h1{
-              @include teititlefrontblue;
-              .initial{
-                text-transform: uppercase;
-                font-size: 1.3em;
-                line-height: 1.3em;
-              }
-            }
-          }
-          .byline{
-            text-align: center;
-            font-style: italic;
-            padding-bottom: 1em;
-          }
-          .docImprint{
-            text-align: center;
-            // padding-bottom: 1em;
-          }
-          .imprimatur{
-            text-align: center;
-            font-style: italic;
-            padding-bottom: 1em;
-
-          }
-
-          figure{
-            // outline: 1px solid red;
-            background-color: $grisclair;
-            margin:1em 0;
-            img{
-              width: 100%;
-            }
-            figcaption{
-              @include fontcaption
-              padding: 0.5em;
-            }
-          }
-        }
-      }
-    }
-
-    >nav{
-      $pager_h:2em;
-      display: flex;
-      flex-direction: column;
-      span.nav-title{ display:none; }
-
-      section#toc{
-        box-sizing: content-box;
-        padding:0 0 1em 1.5em;
-        height:calc(100% - #{$pager_h});
-        overflow-x: hidden;
-        overflow-y: auto;
-        >ul{
-          ul{
-            li{
-              ul{
-                overflow: hidden;
-                max-height: 1000px;
-                transition: max-height 0.5s ease-in-out;
-                // transform: scaleY(1);
-                // transform-origin: top;
-                // transition: transform 0.3s ease-in-out;
-                &:not(.opened){
-                  // height:0;
-                  max-height:0;
-                  transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
-                  // transform: scaleY(0);
-                }
-                // &.opened{
-                //   border: 1px solid red;
-                // }
-                // padding-left: 1em;
-                border-left: 0.5px solid $grisclair;
-                // min-height: 1em;
-                margin-bottom: 0em;
-                li{
-                  // min-height: 1em;
-                  // border-left: 1px solid red;
-                  padding:0 0 0.2em 1em;
-                }
-              }
-            }
-          }
-          .toc-title{
-            @include title4black;
-            &.active,
-            &:hover{
-              color:$grisfonce;
-              font-weight: 600;
-            }
-            &.loaded{
-              color:$grisfonce;
-            }
-          }
-          // h2.toc-title{font-size: 0.882em;}
-          // h3.toc-title{font-size: 0.882em;}
-          // h4.toc-title{font-size: 0.882em;}
-          // h5.toc-title{font-size: 0.882em;}
-          // h6.toc-title{font-size: 0.882em;}
-          // span.toc-title{font-size: 0.882em;}
-        }
-      }
-
-      div#page-nav{
-        height:$pager_h;
-        overflow: hidden;
-        box-sizing: content-box;
-        padding:1em 0 0 1.5em;
-        select{
-          option{
-            padding:0;
-          }
-        }
-      }
-    }
-    // responsive
-    @media only screen and (max-width: $small-bp) {
-      position: relative;
-      >nav{
-        $top: 45px;
-        z-index: 2;
-        position: absolute;
-        top:$top;
-        right:0;
-        background-color: #fff;
-        width:percentage(10/$default_sum);
-        box-sizing: border-box;
-        padding-top: 1em;
-        padding-bottom: 1em;
-        height:calc(100% - #{$top});
-
-        transform: translateX(100%);
-        transition: transform 0.3s ease-in-out;
-
-        span.nav-title{
-          display: block;
-          position: absolute;
-          top:4.5em; left:-1.8em;
-          transform: rotateZ(-90deg);
-          transform-origin: center;
-          @include fontsans;
-          font-size: 0.600em;
-          cursor: pointer;
-          color: $bleuroi;
-          svg{
-            vertical-align: bottom;
-            transform-origin: center;
-            transform: scale(0.8) rotate(180deg);
-            transition: transform 0.3s ease-in-out;
-            path{
-              fill: $bleuroi;
-            }
-          }
-        }
-
-        &.opened{
-          box-shadow: -3px -3px 5px $grisclair;
-          transform: translateX(0);
-          span.nav-title{
-            svg{
-              transform: scale(0.7) rotate(0);
-            }
-          }
-        }
-
-      }
-    }
-  }
-
-  #text{
-    .tei{}}
-
-  #biblio{
-    .router-link-active{
-      font-weight: 600;
-    }
-    ul.item-list{
-      margin:0;
-      padding:0;
-      li{
-        padding:0;
-        margin:0 0 1.5em 0;
-        h2{
-          margin:0;
-          @include title2black;
-        }
-        p{
-          margin:0;
-        }
-      }
-    }
-  }
-}
-
-footer[role="tools"]{
-  $list-item-h: 7em;
-
-  @mixin resultItem{
-    box-sizing: border-box;
-    // we are only on 10 colls as 2 are occupied by sides
-    flex-basis: percentage(2/($default_sum - 2));
-    max-height: $list-item-h;
-    overflow: hidden;
-    padding-bottom: 1em;
-    padding-right: $default_gap;
-    article{
-      max-height: 100%;
-      overflow: hidden;
-    }
-    article.item{
-        h1{
-          @include title3black;
-          font-weight: 600;
-          max-width: 95%;
-        }
-        h2{
-          @include title3black;
-          text-transform: none;
-        }
-        span{
-          font-size: 0.882em;
-        }
-      // .preview{
-      //   font-size: 0.882em;
-      //   margin:0;
-      //   code{
-      //     @include fontserif;
-      //     background-color: lighten(desaturate($rouge,20%), 20%);
-      //     padding:0 0.2em;
-      //   }
-      // }
-    }
-
-  }
-
-  #history{
-    z-index: 8;
-    background-color: $or;
-    padding:1.2em $side-padding;
-    max-height: $list-item-h;
-    @include accordeon-transition($list-item-h);
-    >header{
-
-    }
-    .history-list{
-      overflow-x: hidden;
-      .wrapper{
-        height:100%;
-        // hidding the scrollbar
-        overflow-y: auto;
-        // width:calc(100% + 1em);
-        padding-right: 1em;
-        >ul{
-          padding:0;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-      }
-      li.item{
-        @include resultItem;
-      }
-    }
-  }
-  #results{
-    z-index: 9;
-    background-color: $gris;
-    padding:1.2em $side-padding;
-    @media only screen and (max-width: $small-bp) {
-      padding:1.2em $side-padding/2;
-    }
-    max-height: $list-item-h * 3;
-    @include accordeon-transition($list-item-h * 3);
-    >header{
-      .search-keys{
-        font-size: 0.756em;
-        font-weight: 500;
-      }
-      .results-count{
-        font-size: 0.756em;
-      }
-    }
-    .results-list{
-      overflow-x: hidden;
-      .wrapper{
-        position:relative;
-        height:100%;
-        // hidding the scrollbar
-        overflow-y: auto;
-        // width:calc(100% + 1em);
-        padding-right: 1em;
-        >ul{
-          padding:0;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-      }
-      li.result{
-        @include resultItem;
-      }
-      .infinite-loading-container{
-        // TODO: how to center the loading
-      }
-    }
-
-    >header, section.results-list{
-      transition: opacity 0.2s ease-in-out;
-    }
-    &.loading {
-      >header, section.results-list{
-        transition: opacity 0.5s ease-in-out;
-        opacity:0.5;
-        pointer-events: none;
-      }
-    }
-
-    // responsive
-    @media only screen and (max-width: $small-bp) {
-      position: relative;
-      >header{
-        padding:0 0 1em 0;
-        >*{
-          display: inline-block;
-          margin-right: 1em;
-        }
-        #sorting{
-          width:10em;
-        }
-      }
-      >section.results-list{
-        max-height: 15em;
-        li.result{
-          flex-basis: 33%;
-        }
-      }
-      >nav{
-        position: absolute;
-        top:1.2em; right:1.2em;
-      }
-    }
-  }
-  #footer-bottom{
-    z-index: 10;
-    padding:0 $side-padding;
-    @media only screen and (max-width: $small-bp) {
-      padding:0 $side-padding/2;
-    }
-    background-color: $bleuroi;
-    &>*{
-      // disable grid gap
-      padding-right: 0;
-    }
-    #footer-tabs{
-      ul{
-        padding:0; margin:0;
-        display: flex;
-        flex-direction: column;
-        li{
-          flex: 1 1 auto;
-          .wrapper{
-            box-sizing: border-box;
-            line-height: 0.6em;
-            height:2em;
-            width: calc(100% + $side-padding);
-            margin-left:-$side-padding;
-            padding:0.3em 0.5em 0.3em $side-padding;
-          }
-          &.history .wrapper{
-            background-color: $or;
-          }
-          &.results .wrapper{
-            background-color: $gris;
-          }
-          span{
-            font-size: 0.693em;
-            font-weight: 400;
-            text-transform: uppercase;
-            cursor: pointer;
-            @include fade-transition;
-          }
-        }
-      }
-    }
-    #search{
-      color: #fff;
-      background-color: $bleuroi;
-      form{
-        padding: 0;
-        // display: flex;
-        // flex-direction: row;
-        // flex-wrap: wrap;
-        fieldset{
-          padding:0.7em 1em;
-          border: none;
-          box-sizing:border-box;
-          // width correction as row is not the same width as others in the page
-          // flex-basis: percentage(2/($default_sum - 1));
-          // flex-basis: 17.667%;
-          // flex-basis: percentage(2 / 11);
-          &:not(:first-of-type){
-            border-left: 1px solid $grisclair;
-          }
-        }
-        fieldset.search{
-          display: inline-flex;
-          >div{
-            width:80%;
-            vertical-align: middle;
-          }
-          label[for="keys"]{
-            display: none;
-          }
-          input[type="text"]{
-            padding:0em 0.3em;
-            margin:0 0 0.3em 0;
-            box-sizing: border-box;
-            font-size: 0.756em;
-            line-height: 1;
-            width:100%;
-            height:1.4em;
-            border:none;
-            border-radius: 2px;
-          }
-          span.mdi{
-            display: inline-block;
-            margin:0 0 0 0.5em;
-            font-size: 1.2em;
-            line-height:1.1;
-            vertical-align:middle;
-            width:1.2em; height:1.2em;
-            border-radius: 0.6em;
-            background-color: #fff;
-            color: $bleuroi;
-            text-align: center;
-            font-weight: 700;
-            cursor: pointer;
-          }
-        }
-      }
-
-      fieldset.filters{
-        .vs__actions{
-          // background-color: $grisclair;
-          align-items:baseline;
-          padding-top:0.2em;
-        }
-      }
-      form{
-        transition: opacity 0.2s ease-in-out;
-      }
-      &.loading{
-        form{
-          opacity:0.5;
-          transition: opacity 0.5s ease-in-out;
-          pointer-events: none;
-        }
-      }
-
-      // responsive
-      @media only screen and (max-width: $small-bp) {
-        form{
-          fieldset{
-            &.search{
-              >div{
-                display: inline-flex;
-                flex-wrap: nowrap;
-                width:84%;
-                >*{
-                  flex-basis: 45%;
-                  margin: 0 0.5em 0 0;
-                  // box-sizing: content-box;
-                  // width:auto!important;
-                  &#keys[type="text"]{
-                    margin-right:1.5em;
-                  }
-                }
-              }
-              span.mdi{
-                width:1em; height:1em;
-                margin-top: -0.1em;
-                margin-left: 0;
-              }
-            }
-            &.filters{
-              border-left: none;
-              flex-basis: 32%;
-              padding: 0.2em 0 1em 1em;
-            }
-          }
-        }
-      }
-    }
-  }
-  h2{
-    margin:0;
-    font-size: 0.756em;
-    font-weight: 400;
-    text-transform: uppercase;
-    padding:0;
-  }
-}
-
-// vue-select
-.v-select{
-  padding:0;
-  div[role="combobox"]{
-    background-color: #fff;
-    padding:0;
-    border-radius: 2px;
-    border: none;
-  }
-  input[type="search"]{
-    margin:0;
-    padding:0;
-    -webkit-appearance:textfield;
-    -webkit-box-sizing:content-box;
-  }
-  input::-webkit-search-decoration,
-  input::-webkit-search-cancel-button {
-      display: none;
-  }
-  .vs__search{
-    &, &:focus{
-      font-size: 0.756em;
-      line-height: 1;
-      height:1.2em;
-      border:none;
-      box-sizing: border-box;
-    }
-  }
-  .vs__dropdown-toggle{
-    input::placeholder{background-color: #fff;}
-  }
-  .vs__selected-options{
-    background-color: #fff;
-  }
-  .vs__actions{
-    padding:1px 3px;
-    button.vs__clear{
-      line-height: 0.5;
-      // height:0;
-    }
-    svg[role="presentation"]{
-      transform: scale(0.8);
-      path{
-        fill: $bleuroi;
-      }
-    }
-  }
-  .vs__selected{
-    margin:0;
-    padding:0.2em 0;
-    line-height:1;
-    font-size: 0.756em;
-    background-color: #fff;
-    border:none;
-    align-items: middle;
-    box-sizing: content-box;
-    display: inline-block;
-    width: calc(100% - 12px);
-    // &>*:not(button){
-    //   display: inline-block;
-    //   width:70%;
-    // }
-    button{
-      svg{
-        transform: scale(0.8);
-        path{
-          fill: $bleuroi;
-        }
-      }
-      &.vs__deselect{
-        line-height: 0;
-      }
-    }
-
-  }
-
-  // border-radius: 2px;
-  // border: none;
-}
-
-ul[role="listbox"]{
-  @include fontsans;
-  padding:0;
-  margin:0;
-  border:none;
-  position: relative;
-  li{
-    box-sizing: content-box;
-    padding:0.3em;
-    margin:0;
-    font-size: 0.756em;
-    line-height: 1;
-    white-space: normal;
-    position: relative;
-    *{
-      max-width: 100%;
-    }
-  }
-}
-
-//  ___
-// |_ _|__ ___ _ _  ___
-//  | |/ _/ _ \ ' \(_-<
-// |___\__\___/_||_/__/
-
-span.mdi-close{
-  cursor: pointer;
-}
-
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
-}
-
-span.mdi-loading{
-  animation-name: spin;
-  animation-duration: 2000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-
- //  _                 _ _
- // | |   ___  __ _ __| (_)_ _  __ _
- // | |__/ _ \/ _` / _` | | ' \/ _` |
- // |____\___/\__,_\__,_|_|_||_\__, |
- //                            |___/
-
-span.loading{
-  @include fontsans;
-  font-size: 0.756em;
-  color: $grisfonce;
-  animation: pulseloading 4s infinite;
-}
-
-@keyframes pulseloading{
-  0% {
-    opacity: 1;
-  }
-  50%{
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/src/assets/scss/base/_colors.scss b/src/assets/scss/base/_colors.scss
deleted file mode 100644
index 8991f0b..0000000
--- a/src/assets/scss/base/_colors.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$bleuroi: rgb(61,82,102);
-$bleuroilight: lighten(rgb(61,82,102), 30%);
-$gris: rgb(200,204,204);
-$grisclair: rgb(230,234,234);
-$grisfonce: rgb(57,57,64);
-$or: rgb(179,161,125);
-$rouge: rgb(204,61,82);
diff --git a/src/assets/scss/base/_fonts.scss b/src/assets/scss/base/_fonts.scss
deleted file mode 100644
index 99bc343..0000000
--- a/src/assets/scss/base/_fonts.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@import '../fonts/libertinus/libertinus.css';
-@import '../fonts/notosans/notosans.css';
-// @import '../fonts/notosans/notosans-semicondensed.css';
-// @import '../fonts/notosans/notosans-condensed.css';
-// @import '../fonts/notosans/notosans-extracondensed.css';
-
-@mixin fontsans {
-  font-family: "noto_sans";
-}
-@mixin fontserif {
-  font-family: 'libertinus_serif';
-}
-
-body{
-  @include fontserif;
-  font-weight: 400;
-
-  // font-family: 'noto_sans';
-  // font-weight: 900;
-  // font-style: italic;
-}
-
-#header-menu,
-#footer-tabs,
-#search,
-footer[role="tools"] .row>header,
-footer[role="tools"] .row>nav{
-  @include fontsans;
-}
-@mixin title1blue {
-  @include fontserif;
-  font-size: 2.268em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title1black {
-  @include fontserif;
-  font-size: 1.512em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title2black {
-  @include fontserif;
-  font-size: 1.134em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title3black {
-  @include fontserif;
-  font-size: 1em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title4black {
-  @include fontserif;
-  font-size: 0.882em;;
-  color: $gris;
-  font-weight: 400;
-  margin:0;
-}
-
-// TEI
-
-@mixin teititlefrontblue {
-  @include fontserif;
-  font-size: 2.6em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-  text-align: center;
-}
-
-@mixin teititle1blue {
-  @include fontserif;
-  font-size: 1.8em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin fontcaption {
-  @include fontsans;
-  font-size: 0.643em;
-  line-height: 1.1em;
-}
diff --git a/src/assets/scss/base/_grid-flex.scss b/src/assets/scss/base/_grid-flex.scss
deleted file mode 100644
index e632c57..0000000
--- a/src/assets/scss/base/_grid-flex.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-// http://www.thesassway.com/intermediate/simple-grid-mixins
-
-
-@mixin row() {
-  display:flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  @media only screen and (max-width: $small-bp) {
-    flex-wrap:wrap;
-  }
-}
-
-.row{
-  @include row;
-}
-.row-rl{
-  @include row;
-}
-
-// small
-.small-row {
-  @media only screen and (max-width: $small-bp) {
-    @include row;
-  }
-}
-
-// medium
-.med-row {
-  @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-    @include row;
-  }
-}
-
-// large
-.large-row {
-  @media only screen and (min-width: $med-bp+1) {
-    @include row;
-  }
-}
-
-%col-reset {
-    box-sizing: border-box;
-}
-
-@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
-  @extend %col-reset;
-  padding-left: $gap*$offset;
-  @if $col == $default_sum {
-    // if last col, then no gap
-    padding-right: 0;
-  }@else{
-    padding-right: $gap;
-  }
-  &:last-child{padding-right: 0;}
-
-  // no offset with flex ??
-  // margin-left: percentage(($col/$sum)*$offset);
-
-  // col width
-  flex-basis: percentage($col/$sum);
-}
-
-@for $c from 1 through $default_sum {
-  .col-#{$c} {
-      @include col($c);
-  }
-
-  // small
-  .small-col-#{$c} {
-    @media only screen and (max-width: $small-bp) {
-      @include col($c);
-    }
-  }
-
-  // medium
-  .med-col-#{$c} {
-    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-      @include col($c);
-    }
-  }
-
-  // large
-  .large-col-#{$c} {
-    @media only screen and (min-width: $med-bp+1) {
-      @include col($c);
-    }
-  }
-
-}
-
-@for $c from 1 through $default_sum - 1 {
-  @for $o from 1 through $default_sum - $c {
-    .col-#{$c}-offset-#{$o} {
-      @include col($c, $o);
-    }
-  }
-}
-
-// TODO: replace with align-self:flex-start or flex-end
-// .col.float-right{
-//   float: right;
-//   padding-right: 0;
-//   padding-left: $default_gap;
-// }
diff --git a/src/assets/scss/base/_grid.scss b/src/assets/scss/base/_grid.scss
deleted file mode 100644
index 2908694..0000000
--- a/src/assets/scss/base/_grid.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-// http://www.thesassway.com/intermediate/simple-grid-mixins
-
-
-@mixin row() {
-  // font-size: 0;
-  // white-space: nowrap;
-  position: relative;
-  // >*{
-  //   font-size: 16px;
-  // }
-  &:after{
-    content:"";
-    clear:both;
-    display: block;
-  }
-}
-
-%col-reset {
-    width: 100%;
-    // display: inline-block;
-    // white-space:normal;
-    // font-size: 16px;
-    float:left;
-    box-sizing: border-box;
-}
-
-@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
-  @extend %col-reset;
-  padding-left: $gap*$offset;
-  @if $col == $default_sum {
-    padding-right: 0;
-  }@else{
-    padding-right: $gap;
-  }
-  &:last-child{padding-right: 0;}
-
-  margin-left: percentage(($col/$sum)*$offset);
-
-  // @media only screen and (min-width: 768px) {
-    width: percentage($col/$sum);
-    // vertical-align: $align;
-  // }
-}
-
-.row{
-  @include row;
-  // html:not(.js) &{
-  //   overflow-y: auto;
-  // }
-}
-
-@for $c from 1 through $default_sum {
-  .col-#{$c} {
-      @include col($c);
-  }
-
-  // small
-  .small-col-#{$c} {
-    @media only screen and (max-width: $small-bp) {
-      @include col($c);
-    }
-  }
-
-  // medium
-  .med-col-#{$c} {
-    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-      @include col($c);
-    }
-  }
-
-  // large
-  .large-col-#{$c} {
-    @media only screen and (min-width: $med-bp+1) {
-      @include col($c);
-    }
-  }
-
-}
-
-@for $c from 1 through $default_sum - 1 {
-  @for $o from 1 through $default_sum - $c {
-    .col-#{$c}-offset-#{$o} {
-      @include col($c, $o);
-    }
-  }
-}
-
-.col.float-right{
-  float: right;
-  padding-right: 0;
-  padding-left: $default_gap;
-}
diff --git a/src/assets/scss/base/_layout.scss b/src/assets/scss/base/_layout.scss
deleted file mode 100644
index 6843c74..0000000
--- a/src/assets/scss/base/_layout.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-$side-padding:3em;
-
-body, html{
-  position: relative;
-  width: 100%;
-  height:100%;
-  font-family: sans-serif;
-  font-style: normal;
-  margin:0;
-  padding:0;
-}
-
-body{
-  overflow:hidden;
-}
-
-#root{
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height:100vh;
-  %layout-element{
-    width:100vw;
-    box-sizing:border-box;
-  }
-  header[role="banner"]{
-    z-index:10;
-    flex: 0 0 auto;
-    @extend %layout-element;
-    padding:1em $side-padding 1em $side-padding;
-    @media only screen and (max-width: $small-bp) {
-      padding:1em $side-padding/2 0 $side-padding/2;
-    }
-  }
-  section[role="main-content"]{
-    display: flex;
-    flex:1 1 auto;
-    @extend %layout-element;
-    overflow: hidden;
-    position: relative;
-    >.wrapper{
-      position: relative;
-      padding:0 $side-padding 0 $side-padding;
-      // height:100%; max-height:100%;
-      display: flex;
-      flex: 1;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      >*{
-        @include fade-transition;
-      }
-      @media only screen and (max-width: $small-bp) {
-        overflow-y: auto;
-        padding:0 $side-padding/2 0 $side-padding/2;
-      }
-    }
-    .main-content-layout{
-      position: relative;
-      // https://stackoverflow.com/a/33644245
-      display: flex;
-      flex: 1;
-      >section{
-        max-height: 100%;
-      }
-      >header,
-      >section>.wrapper,
-      >nav{
-        box-sizing: border-box;
-        max-height: 100%;
-        padding-top:1em;
-      }
-      >section>.wrapper,
-      >nav{
-        overflow-x: hidden;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    }
-    @media only screen and (max-width: $small-bp) {
-      .main-content-layout{
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-  footer[role="tools"]{
-    flex:0 0 auto;
-    @extend %layout-element;
-    // padding-bottom: 1em;
-    // >*{
-    //   padding:0.5em 1em;
-    // }
-  }
-}
diff --git a/src/assets/scss/base/_reset.scss b/src/assets/scss/base/_reset.scss
deleted file mode 100644
index 63978ac..0000000
--- a/src/assets/scss/base/_reset.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-html, body{
-  font-size:16px;
-  line-height: 0.9;
-  margin:0; padding:0;
-  background: white;
-}
-
-a{
-	color: inherit;
-	text-decoration: none;
-}
-a, a:focus, a:active { outline: none; }
-a:focus{ -moz-outline-style: none; }
-
-ul {
-  padding:0;
-  margin:0;
-}
-li{
-  padding:0;
-  margin:0;
-  list-style: none;
-}
-
-.visualy-hidden {
-  position: absolute !important;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  height: 1px;
-  width: 1px;
-  word-wrap: normal;
-}
-.visualy-hidden:active,
-.visualy-hidden:focus {
-  position: static !important;
-  clip: auto;
-  overflow: visible;
-  height: auto;
-  width: auto;
-}
diff --git a/src/assets/scss/base/_transitions.scss b/src/assets/scss/base/_transitions.scss
deleted file mode 100644
index 06b0e85..0000000
--- a/src/assets/scss/base/_transitions.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-
-//  _                    _ _   _
-// | |_ _ _ __ _ _ _  __(_) |_(_)___ _ _  ___
-// |  _| '_/ _` | ' \(_-< |  _| / _ \ ' \(_-<
-//  \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
-@mixin accordeon-transition($h){
-  &.accordeon-enter,
-  &.accordeon-leave-to{
-    // opacity: 0;
-    height:0.01vh;
-    padding-top: 0;
-    padding-bottom: 0;
-    // transform: translateY(100%);
-    // transform: translate3d(0, 100%, 0);
-  }
-  &.accordeon-enter-to,
-  &.accordeon-leave{
-    // opacity:1;
-    height:$h;
-    // transform: translateY(0%);
-    // transform: translate3d(0, 0, 0);
-  }
-  &.accordeon-enter-active{
-    transition: all 300ms ease-in-out;
-  }
-  &.accordeon-leave-active{
-    transition: all 200ms ease-in-out;
-  }
-
-}
-
-@mixin fade-transition() {
-  &.fade-enter,
-  &.fade-leave-to{
-    opacity: 0;
-  }
-  &.fade-enter-to,
-  &.fade-leave{
-    opacity:1;
-  }
-  &.fade-enter-active{
-    transition: all 300ms ease-in-out;
-  }
-  &.fade-leave-active{
-    transition: all 200ms ease-in-out;
-  }
-}
-
-.fade-enter-active{
-  transition: all 300ms ease-in-out;
-}
-.fade-leave-active{
-  transition: all 200ms ease-in-out;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0
-}
-
-// .edition-texts-enter-active, .edition-texts-leave-active {
-//   transition: all 1s;
-// }
-// .edition-texts-enter, .edition-texts-leave-to /* .list-leave-active below version 2.1.8 */ {
-//   max-height: 0;
-//   // transform: translateY(30px);
-// }
diff --git a/src/assets/scss/base/_variables.scss b/src/assets/scss/base/_variables.scss
deleted file mode 100644
index 821cad3..0000000
--- a/src/assets/scss/base/_variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$base_font_size:16px;
-
-// grid
-$default_gap: 1em;
-$default_sum: 12; // total number of columns
-
-$small-bp:768px;
-$med-bp:1080px;
-$ipad-bp: 1536px;
-$large-bp:1900px;
diff --git a/src/assets/scss/bootstrap-overrides/_mixins.scss b/src/assets/scss/bootstrap-overrides/_mixins.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/scss/bootstrap-overrides/_variables.scss b/src/assets/scss/bootstrap-overrides/_variables.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/scss/globals.scss b/src/assets/scss/globals.scss
index 9f96714..3fad532 100644
--- a/src/assets/scss/globals.scss
+++ b/src/assets/scss/globals.scss
@@ -14,10 +14,27 @@
 
 */
 
+
+// Custom variables must be imported first.
+@import 'bootstrap-overrides/variables';
 @import 'variables';
 
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
+
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 
-@import '~bootstrap-vue/src/variables';
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮   ╷ ╷╷ ╷┌─╴
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵     ╰╯ ╰─╯╰─╴
+
+@import "~bootstrap-vue/src/variables";
+
+
+// mixins and functions overides must be imported after bootstrap's definitions.
+@import 'bootstrap-overrides/mixins';
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 7070543..b13edf9 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,11 +1,8 @@
-@import 'variables';
+@import 'globals';
 
-// Bootstrap (temp ?)
-@import '~bootstrap/scss/bootstrap.scss';
-@import '~bootstrap-vue/src/index.scss';
+@import 'bootstrap';
 
 
-html, body, #app, main {
+html, body, #app {
   height: 100%;
-  margin: 0;
 }