alexis.lahouze.org/assets/style.scss

// Gruvbox colorscheme
// https://github.com/morhetz/gruvbox
$bg0: #282828;
$bg0_h: #1D2021;
$bg0_s: #32302F;
$bg1: #3C3836;
$bg2: #504945;
$bg3: #665C54;
$bg4: #7C6F64;

$fg0: #FBF1C7;
$fg1: #EBDBB2;
$fg2: #D5C4A1;
$fg3: #BDAE93;
$fg4: #A89984;

$bg: $bg0_h;
$gray: #928374;
$red: #CC241D;
$lighred: #FB4934;
$green: #98971A;
$lightgreen: #B8BB26;
$yellow: #D79921;
$lightyellow: #FABD2F;
$blue: #458488;
$lightblue: #84A598;
$purple: #B16286;
$lightpurple: #D3869B;
$aqua: #689D6A;
$lightaqua: #8EC07C;
$orange: #D65D0E;
$lightorange: #FE8019;
$lightgray: #A89984;
$fg: $fg1;

// Default font and colors.
// ========================

// Body.
body {
    font-family: 'monospace';
    font-size: 1.2rem;
    color: $fg;
    background-color: $bg;
    width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

// Links.
a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
}

a:link {
    color: $yellow;
}

a:visited {
    color: $lightyellow
}

a:focus {
    color: $green;
}

a:hover {
    color: $green;
}

a:active {
    color: $lightgreen;
}

// Colorisation du code en ligne.
code:not([class]) {
  color: $green;
}

// Soulignement des titres
h1 {
  font-size: 1em;
  color: $fg0;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 1em;
  position: relative;
  display: inline-block;
}

h1::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 35.71%,
    $fg0 35.71% 42.85%,
    transparent 42.85% 49.99%,
    $fg0 49.99% 57.13%,
    transparent 57.13%
  );
}

h2 {
  font-size: 1em;
  text-transform: uppercase;
  color: $fg0;
  margin: 0;
  padding-bottom: 1em;
  position: relative;
  display: inline-block;
}

h2::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg0 49.99% 57.13%,
    transparent 57.13%
  );
}

// Séparation des articles.
article:not(:last-of-type) {
  margin: 0;
  padding-bottom: 1em;
  position: relative;
}

article:not(:last-of-type)::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg 49.99% 57.13%,
    transparent 57.13%
  );
}

// Séparation du pied de page
footer {
  margin: 0;
  padding-top: 1em;
  position: relative;
  color: $bg2;
}

footer::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0;
  width: 100%;
  height: 1em; /* ≈ hauteur d’un caractère */

  background-image: linear-gradient(
    to bottom,
    transparent 49.99%,
    $fg 49.99% 57.13%,
    transparent 57.13%
  );
}

// Prompt and command line.
// ========================
.cmdblock {
  border: 0;

  p, ol, ul {
    margin: 0;
  }

  p.prompt:before {
    content: "$ ";
  }
}

// Breadcrumb.
// ===========
.breadcrumb {
    //display: inline;

    ol {
      display: flex;
      padding: 0;
    }

    li {
      display: flex;
    }

    li:not(:first-child)::before {
      content: "/";
    }

    li.file {
      opacity: 0;
    }
}

ul.lsresult {
  margin: 0;
  padding: 0;
  display: table;

  li {
    display: table-row;
  }

  li span {
    display: table-cell;
  }

  li span:not(:first-child) {
    padding-left: 1ch;
  }
}

// Menus.
// ======
.menu {
    ul.tree {
        margin: 0;
        padding: 0;
        list-style: none;

    }

    /*ul.tree-child {
      border-left: solid 2px;
    }*/

    // 
    ul.tree ul {
     list-style: none;
      margin: 0;
      padding: 0;
    }
    ul.tree ul {
      margin-left: 0.5ch;
    }
    ul.tree ul ul {
      margin-left: 4ch;
    }

    ul.tree ul li {
      margin: 0;
      padding: 0 0.3ch;
      //line-height: 20px;
      //color: #369;
      //font-weight: bold;
      border-left:0.1ch solid $fg;

    }
    ul.tree ul li:last-child {
        border-left:none;
        display: inline;
    }
    ul.tree ul li:before {
       position:relative;
       top:-0.3em;
       height:0.5em;
       width:2ch;
       //color:white;
       border-bottom:0.1em solid $fg;
       content:"";
       display:inline-block;
       left:-0.3ch;
    }//*/
    ul.tree ul li:last-child:before {
       border-left:0.1ch solid $fg;
    }

    /*li {
        //display: inline-block;
    }*/

    /*li:not(:last-child)::after {
      content: "|";
    }*/

    a {
        //display: block;
        //padding: 6px 12px;
        //text-decoration: none;
    }
}