formattage du scss

src/scss/_component.scss

@@ -54,16 +54,20 @@ figure > figcaption {
 .pagination {
   @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between);
   font-weight: bold;
+
   > * {
     @extend %none-stack;
   }
 }
-.nav-prev {}
+
+.nav-prev {
+}
+
 .nav-next {
   margin-left: auto;
 }
 
-@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )}) {
   .pagination {
     @include flexbox-grid-mixins.grid($flex-flow: column nowrap, $justify-content: null, $align-items: center);
   }
@@ -92,36 +96,42 @@ figure > figcaption {
 .panel-primary {
   --panel-border-color: #{variable.$default-border-color};
 }
+
 .panel-notice {
   --panel-font-color: #fff;
   --panel-background-color: #b0b0b0;
   --custom-link-text-color: #fff;
   --custom-link-text-hover-color: #fff;
 }
+
 .panel-recipe {
   --panel-font-color: #000;
   --panel-background-color: #{variable.$light-grey-background-color};
   --custom-link-text-color: #{variable.$default-link-text-color};
   --custom-link-text-hover-color: #{variable.$default-link-text-hover-color};
 }
+
 .panel-success {
   --panel-font-color: #fff;
   --panel-background-color: #609f43;
   --custom-link-text-color: #fff;
   --custom-link-text-hover-color: #fff;
 }
+
 .panel-caution {
   --panel-font-color: #fff;
   --panel-background-color: #de776d;
   --custom-link-text-color: #fff;
   --custom-link-text-hover-color: #fff;
 }
+
 .panel-warning {
   --panel-font-color: #fff;
   --panel-background-color: #e67e22;
   --custom-link-text-color: #fff;
   --custom-link-text-hover-color: #fff;
 }
+
 .panel-danger {
   --panel-font-color: #fff;
   --panel-background-color: #{variable.$danger-background-color};
@@ -129,8 +139,11 @@ figure > figcaption {
   --custom-link-text-hover-color: #fff;
 }
 
-.panel-header {}
+.panel-header {
-.panel-body {}
+}
+
+.panel-body {
+}
 
 .button {
   display: inline-block;
@@ -148,7 +161,7 @@ figure > figcaption {
 
   color: var(--button-font-color, #000);
   background: var(--button-background-color, unset);
-	border: 2px solid ;
+  border: 2px solid;
   border-color: var(--button-border-color, transparent);
 
   &:hover {
@@ -165,6 +178,7 @@ figure > figcaption {
   --button-background-hover-color: #3b89c5;
   --button-border-color: transparent;
 }
+
 .button-success {
   --button-font-color: #fff;
   --button-font-hover-color: #fff;
@@ -172,6 +186,7 @@ figure > figcaption {
   --button-background-hover-color: #256905;
   --button-border-color: transparent;
 }
+
 .button-caution {
   --button-font-color: #fff;
   --button-font-hover-color: #fff;
@@ -179,6 +194,7 @@ figure > figcaption {
   --button-background-hover-color: #d45145;
   --button-border-color: transparent;
 }
+
 .button-warning {
   --button-font-color: #fff;
   --button-font-hover-color: #fff;
@@ -186,6 +202,7 @@ figure > figcaption {
   --button-background-hover-color: #db7012;
   --button-border-color: transparent;
 }
+
 .button-danger {
   --button-font-color: #fff;
   --button-font-hover-color: #fff;
@@ -214,9 +231,11 @@ figure > figcaption h4 {
     list-style: none;
     padding-left: 0;
   }
+
   li {
     border-top: 1px solid variable.$default-border-color;
   }
+
   > nav > ul > li:first-child {
     border-top: unset;
   }
@@ -224,15 +243,19 @@ figure > figcaption h4 {
   ul > li li a {
     margin-left: 2rem * 1;
   }
+
   ul ul > li li a {
     margin-left: 2rem * 2;
   }
+
   ul ul ul > li li a {
     margin-left: 2rem * 3;
   }
+
   ul ul ul ul > li li a {
     margin-left: 2rem * 4;
   }
+
   ul ul ul ul ul > li li a {
     margin-left: 2rem * 5;
   }
@@ -249,15 +272,18 @@ figure > figcaption h4 {
   .ais-SearchBox-input {
     width: 70%;
   }
+
   button {
     margin-left: .2rem;
     padding: .4rem;
   }
 }
+
 .ais-Stats {
   font-size: 80%;
   color: #70757a;
 }
+
 .ais-Hits-item {
   @extend %stack;
 
@@ -265,10 +291,12 @@ figure > figcaption h4 {
     font-size: 140%;
     font-weight: normal;
   }
+
   p {
     @extend %unset-stack;
     color: #3C4043;
   }
+
   .lastmod {
     font-size: 90%;
     color: #70757a;
@@ -278,11 +306,13 @@ figure > figcaption h4 {
 .ais-Pagination {
   margin-top: 1em;
 }
+
 .ais-Pagination-list {
   list-style: none;
   padding-left: 0;
   @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center);
 }
+
 .ais-Pagination-item {
   padding: .6rem;
 }
@@ -296,6 +326,7 @@ figure > figcaption h4 {
     font-size: 80%;
     color: #666;
   }
+
   .copy-btn {
     margin-left: auto;
 
@@ -310,6 +341,7 @@ figure > figcaption h4 {
     margin-bottom: .2rem;
     outline: none;
   }
+
   .code-content {
     @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
 
@@ -335,7 +367,9 @@ figure > figcaption h4 {
 }
 
 @keyframes fade-tooltip {
-  to { opacity: 0; }
+  to {
+    opacity: 0;
+  }
 }
 
 .edit-page-picto {

src/scss/_project.scss

@@ -42,6 +42,7 @@ header {
     padding: 0;
     margin: 0;
   }
+
   li {
     display: inline-block;
     margin-right: 1.8rem;
@@ -61,6 +62,7 @@ header {
       background: var(--custom-background-color, #000);
       width: 140px;
       font-size: 80%;
+
       a {
         color: var(--custom-font-color, #fff);
       }
@@ -71,7 +73,7 @@ header {
     @include flexbox-grid-mixins.grid($flex-flow: column nowrap);
   }
 
-	@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
+  @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )}) {
     li {
       display: block;
       margin-right: 0;
@@ -90,9 +92,11 @@ header {
         width: auto;
         background: transparent;
         padding: 0 .4rem;
+
         + li {
           padding-top: .2rem;
         }
+
         a {
           color: currentColor;
         }
@@ -104,6 +108,7 @@ header {
     display: block;
     color: currentColor;
     text-decoration: none;
+
     &:hover {
       text-decoration: underline;
     }
@@ -114,7 +119,7 @@ main {
   padding: 3rem;
 }
 
-@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )}) {
   main {
     padding: 1rem;
   }
@@ -151,20 +156,24 @@ main {
   nav > ul > li li a {
     padding-left: 1rem + 1rem * 1;
   }
+
   nav > ul ul > li li a {
     padding-left: 1rem + 1rem * 2;
   }
+
   nav > ul ul ul > li li a {
     padding-left: 1rem + 1rem * 3;
   }
+
   nav > ul ul ul ul > li li a {
     padding-left: 1rem + 1rem * 4;
   }
+
   nav > ul ul ul ul ul > li li a {
     padding-left: 1rem + 1rem * 5;
   }
 
-	@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
+  @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )}) {
     nav > ul > li:first-child a {
       border-top: solid 1px variable.$sidebar-active-color;
     }

src/scss/_structure.scss

@@ -43,7 +43,7 @@ main {
   overflow-y: scroll;
 }
 
-@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )} ) {
+@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )}) {
   .content-container {
     @include flexbox-grid-mixins.grid($flex-flow: column nowrap);
   }

src/scss/_variable.scss

@@ -27,14 +27,14 @@ $sidebar-active-color: #eee !default;
 
 $light-grey-background-color: #e0e0e0;
 
-$danger-background-color:#ce3426;
+$danger-background-color: #ce3426;
 
 // code
 $code-font-size: .95rem !default;
 $code-block-background-color: #f4f6f8 !default;
 $code-border-color: #f0f0f0 !default;
 $code-inline-background-color: #f0f0f0 !default;
-$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace !default;
+$code-font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
 // breakpoint
 $default-breakpoints: (

src/scss/chroma.scss

@@ -1,59 +1,310 @@
-/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
+/* Background */
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+.chroma {
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+  color: #f8f8f2;
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
+  background-color: #272822
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
+}
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
+
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Error */
-/* Keyword */ .chroma .k { color: #66d9ef }
+.chroma .err {
-/* KeywordConstant */ .chroma .kc { color: #66d9ef }
+  color: #960050;
-/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+  background-color: #1e0010
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+}
-/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+
-/* KeywordReserved */ .chroma .kr { color: #66d9ef }
+/* LineTableTD */
-/* KeywordType */ .chroma .kt { color: #66d9ef }
+.chroma .lntd {
-/* NameAttribute */ .chroma .na { color: #a6e22e }
+  vertical-align: top;
-/* NameClass */ .chroma .nc { color: #a6e22e }
+  padding: 0;
-/* NameConstant */ .chroma .no { color: #66d9ef }
+  margin: 0;
-/* NameDecorator */ .chroma .nd { color: #a6e22e }
+  border: 0;
-/* NameException */ .chroma .ne { color: #a6e22e }
+}
-/* NameFunction */ .chroma .nf { color: #a6e22e }
+
-/* NameOther */ .chroma .nx { color: #a6e22e }
+/* LineTable */
-/* NameTag */ .chroma .nt { color: #f92672 }
+.chroma .lntable {
-/* Literal */ .chroma .l { color: #ae81ff }
+  border-spacing: 0;
-/* LiteralDate */ .chroma .ld { color: #e6db74 }
+  padding: 0;
-/* LiteralString */ .chroma .s { color: #e6db74 }
+  margin: 0;
-/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+  border: 0;
-/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+  width: 100%;
-/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+  overflow: auto;
-/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+  display: block;
-/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+}
-/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+
-/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+/* LineHighlight */
-/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+.chroma .hl {
-/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+  background-color: #ffffcc;
-/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+  display: block;
-/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+  width: 100%
-/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+}
-/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LineNumbersTable */
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+.chroma .lnt {
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+  margin-right: 0.4em;
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+  padding: 0 0.4em 0 0.4em;
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+  display: block;
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+}
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+
-/* Operator */ .chroma .o { color: #f92672 }
+/* LineNumbers */
-/* OperatorWord */ .chroma .ow { color: #f92672 }
+.chroma .ln {
-/* Comment */ .chroma .c { color: #75715e }
+  margin-right: 0.4em;
-/* CommentHashbang */ .chroma .ch { color: #75715e }
+  padding: 0 0.4em 0 0.4em;
-/* CommentMultiline */ .chroma .cm { color: #75715e }
+}
-/* CommentSingle */ .chroma .c1 { color: #75715e }
+
-/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* Keyword */
-/* CommentPreproc */ .chroma .cp { color: #75715e }
+.chroma .k {
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+  color: #66d9ef
-/* GenericDeleted */ .chroma .gd { color: #f92672 }
+}
-/* GenericEmph */ .chroma .ge { font-style: italic }
+
-/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* KeywordConstant */
-/* GenericStrong */ .chroma .gs { font-weight: bold }
+.chroma .kc {
-/* GenericSubheading */ .chroma .gu { color: #75715e }
+  color: #66d9ef
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #66d9ef
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+  color: #f92672
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+  color: #66d9ef
+}
+
+/* KeywordReserved */
+.chroma .kr {
+  color: #66d9ef
+}
+
+/* KeywordType */
+.chroma .kt {
+  color: #66d9ef
+}
+
+/* NameAttribute */
+.chroma .na {
+  color: #a6e22e
+}
+
+/* NameClass */
+.chroma .nc {
+  color: #a6e22e
+}
+
+/* NameConstant */
+.chroma .no {
+  color: #66d9ef
+}
+
+/* NameDecorator */
+.chroma .nd {
+  color: #a6e22e
+}
+
+/* NameException */
+.chroma .ne {
+  color: #a6e22e
+}
+
+/* NameFunction */
+.chroma .nf {
+  color: #a6e22e
+}
+
+/* NameOther */
+.chroma .nx {
+  color: #a6e22e
+}
+
+/* NameTag */
+.chroma .nt {
+  color: #f92672
+}
+
+/* Literal */
+.chroma .l {
+  color: #ae81ff
+}
+
+/* LiteralDate */
+.chroma .ld {
+  color: #e6db74
+}
+
+/* LiteralString */
+.chroma .s {
+  color: #e6db74
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #e6db74
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #e6db74
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+  color: #e6db74
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #e6db74
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #e6db74
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #e6db74
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  color: #ae81ff
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #e6db74
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #e6db74
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+  color: #e6db74
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #e6db74
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #e6db74
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #e6db74
+}
+
+/* LiteralNumber */
+.chroma .m {
+  color: #ae81ff
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #ae81ff
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #ae81ff
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #ae81ff
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #ae81ff
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #ae81ff
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #ae81ff
+}
+
+/* Operator */
+.chroma .o {
+  color: #f92672
+}
+
+/* OperatorWord */
+.chroma .ow {
+  color: #f92672
+}
+
+/* Comment */
+.chroma .c {
+  color: #75715e
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  color: #75715e
+}
+
+/* CommentMultiline */
+.chroma .cm {
+  color: #75715e
+}
+
+/* CommentSingle */
+.chroma .c1 {
+  color: #75715e
+}
+
+/* CommentSpecial */
+.chroma .cs {
+  color: #75715e
+}
+
+/* CommentPreproc */
+.chroma .cp {
+  color: #75715e
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #75715e
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: #f92672
+}
+
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic
+}
+
+/* GenericInserted */
+.chroma .gi {
+  color: #a6e22e
+}
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold
+}
+
+/* GenericSubheading */
+.chroma .gu {
+  color: #75715e
+}