From ddfd44436401e24257c6ed2623c2b9ddbf2bdcc8 Mon Sep 17 00:00:00 2001 From: stanislas Date: Tue, 25 Mar 2025 23:20:14 +0100 Subject: [PATCH] formattage du scss --- src/scss/_component.scss | 518 +++++++++++++++++++++------------------ src/scss/_project.scss | 327 ++++++++++++------------ src/scss/_structure.scss | 52 ++-- src/scss/_variable.scss | 14 +- src/scss/chroma.scss | 369 +++++++++++++++++++++++----- 5 files changed, 787 insertions(+), 493 deletions(-) diff --git a/src/scss/_component.scss b/src/scss/_component.scss index c0a5634..cd43442 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -9,33 +9,33 @@ @use 'foundation/stack'; main * { - @extend %first-stack; + @extend %first-stack; } main { - * { - + h1, + h2, + h3, + h4, + h5, + h6, - + p, - + hr, - + table, - + ul, - + ol, - + dl, - + blockquote, - + pre, - + figure { - @extend %stack; - } - } + * { + + h1, + h2, + h3, + h4, + h5, + h6, + + p, + + hr, + + table, + + ul, + + ol, + + dl, + + blockquote, + + pre, + + figure { + @extend %stack; + } + } - li > ul, - li > ol { - @extend %unset-stack; - } + li > ul, + li > ol { + @extend %unset-stack; + } } figure > figcaption { - @extend %none-stack; + @extend %none-stack; } .table_of_contents, @@ -48,299 +48,333 @@ figure > figcaption { .button, .gist, .twitter-tweet { - @extend %stack; + @extend %stack; } .pagination { - @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between); - font-weight: bold; - > * { - @extend %none-stack; - } -} -.nav-prev {} -.nav-next { - margin-left: auto; + @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between); + font-weight: bold; + + > * { + @extend %none-stack; + } } -@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); - } - .nav-next { - margin-left: 0; - } +.nav-prev { +} + +.nav-next { + margin-left: auto; +} + +@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); + } + .nav-next { + margin-left: 0; + } } .panel { - --panel-font-color: #000; - --panel-background-color: unset; - --panel-border-color: transparent; + --panel-font-color: #000; + --panel-background-color: unset; + --panel-border-color: transparent; - padding: variable.$default-layout-padding; - color: var(--panel-font-color, #000); - background: var(--panel-background-color, unset); - border: 1px solid; - border-color: var(--panel-border-color, transparent); + padding: variable.$default-layout-padding; + color: var(--panel-font-color, #000); + background: var(--panel-background-color, unset); + border: 1px solid; + border-color: var(--panel-border-color, transparent); - a { - text-decoration: underline; - font-weight: bold; - } + a { + text-decoration: underline; + font-weight: bold; + } } .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}; - --custom-link-text-color: #fff; - --custom-link-text-hover-color: #fff; + --panel-border-color: #{variable.$default-border-color}; } -.panel-header {} -.panel-body {} +.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}; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-header { +} + +.panel-body { +} .button { - display: inline-block; - font-size: 120%; - padding: .5rem 1.2rem; - font-weight: bold; - text-decoration: none; - border-radius: .8rem; + display: inline-block; + font-size: 120%; + padding: .5rem 1.2rem; + font-weight: bold; + text-decoration: none; + border-radius: .8rem; - --button-font-color: #000; - --button-font-hover-color: #000; - --button-background-color: #{variable.$default-background-color}; - --button-background-hover-color: #f7f7f7; - --button-border-color: #{variable.$default-border-color}; + --button-font-color: #000; + --button-font-hover-color: #000; + --button-background-color: #{variable.$default-background-color}; + --button-background-hover-color: #f7f7f7; + --button-border-color: #{variable.$default-border-color}; - color: var(--button-font-color, #000); - background: var(--button-background-color, unset); - border: 2px solid ; - border-color: var(--button-border-color, transparent); + color: var(--button-font-color, #000); + background: var(--button-background-color, unset); + border: 2px solid; + border-color: var(--button-border-color, transparent); - &:hover { - color: var(--button-font-hover-color, #000); - text-decoration: none; - background: var(--button-background-hover-color, unset); - } + &:hover { + color: var(--button-font-hover-color, #000); + text-decoration: none; + background: var(--button-background-hover-color, unset); + } } .button-notice { - --button-font-color: #fff; - --button-font-hover-color: #fff; - --button-background-color: #4ba0e1; - --button-background-hover-color: #3b89c5; - --button-border-color: transparent; + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #4ba0e1; + --button-background-hover-color: #3b89c5; + --button-border-color: transparent; } + .button-success { - --button-font-color: #fff; - --button-font-hover-color: #fff; - --button-background-color: #369b08; - --button-background-hover-color: #256905; - --button-border-color: transparent; + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #369b08; + --button-background-hover-color: #256905; + --button-border-color: transparent; } + .button-caution { - --button-font-color: #fff; - --button-font-hover-color: #fff; - --button-background-color: #f56558; - --button-background-hover-color: #d45145; - --button-border-color: transparent; + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f56558; + --button-background-hover-color: #d45145; + --button-border-color: transparent; } + .button-warning { - --button-font-color: #fff; - --button-font-hover-color: #fff; - --button-background-color: #f5811b; - --button-background-hover-color: #db7012; - --button-border-color: transparent; + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f5811b; + --button-background-hover-color: #db7012; + --button-border-color: transparent; } + .button-danger { - --button-font-color: #fff; - --button-font-hover-color: #fff; - --button-background-color: #{variable.$danger-background-color}; - --button-background-hover-color: #a0281d; - --button-border-color: transparent; + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #{variable.$danger-background-color}; + --button-background-hover-color: #a0281d; + --button-border-color: transparent; } .notification { - padding: .2rem variable.$default-layout-padding; - text-align: center; - background: variable.$sidebar-active-color; + padding: .2rem variable.$default-layout-padding; + text-align: center; + background: variable.$sidebar-active-color; } figure > figcaption h4 { - font-size: 80%; - font-weight: normal; + font-size: 80%; + font-weight: normal; } .table_of_contents { - font-size: 90%; - padding: variable.$default-layout-padding; - border: 4px solid variable.$default-border-color; + font-size: 90%; + padding: variable.$default-layout-padding; + border: 4px solid variable.$default-border-color; - ul { - list-style: none; - padding-left: 0; - } - li { - border-top: 1px solid variable.$default-border-color; - } - > nav > ul > li:first-child { - border-top: unset; - } + ul { + list-style: none; + padding-left: 0; + } - 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; - } + li { + border-top: 1px solid variable.$default-border-color; + } + + > nav > ul > li:first-child { + border-top: unset; + } + + 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; + } } .taxonomy { - -webkit-column-width: 150px; - -moz-column-width: 150px; - column-width: 150px; + -webkit-column-width: 150px; + -moz-column-width: 150px; + column-width: 150px; } .ais-SearchBox { - .ais-SearchBox-input { - width: 70%; - } - button { - margin-left: .2rem; - padding: .4rem; - } -} -.ais-Stats { - font-size: 80%; - color: #70757a; -} -.ais-Hits-item { - @extend %stack; + .ais-SearchBox-input { + width: 70%; + } - h3 { - font-size: 140%; - font-weight: normal; - } - p { - @extend %unset-stack; - color: #3C4043; - } - .lastmod { - font-size: 90%; - color: #70757a; - } + button { + margin-left: .2rem; + padding: .4rem; + } +} + +.ais-Stats { + font-size: 80%; + color: #70757a; +} + +.ais-Hits-item { + @extend %stack; + + h3 { + font-size: 140%; + font-weight: normal; + } + + p { + @extend %unset-stack; + color: #3C4043; + } + + .lastmod { + font-size: 90%; + color: #70757a; + } } .ais-Pagination { - margin-top: 1em; + margin-top: 1em; } + .ais-Pagination-list { - list-style: none; - padding-left: 0; - @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center); + list-style: none; + padding-left: 0; + @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center); } + .ais-Pagination-item { - padding: .6rem; + padding: .6rem; } .code { - @include flexbox-grid-mixins.grid($flex-wrap: wrap); - @extend %stack; + @include flexbox-grid-mixins.grid($flex-wrap: wrap); + @extend %stack; - .filename { - @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); - font-size: 80%; - color: #666; - } - .copy-btn { - margin-left: auto; + .filename { + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + font-size: 80%; + color: #666; + } - cursor: pointer; - position: relative; + .copy-btn { + margin-left: auto; - font-size: 80%; - border: solid 1px #ccc; - padding: .2rem .6rem; - border-radius: .3rem; - line-height: 1; - margin-bottom: .2rem; - outline: none; - } - .code-content { - @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + cursor: pointer; + position: relative; - .highlight { - @extend %none-stack; - } - } + font-size: 80%; + border: solid 1px #ccc; + padding: .2rem .6rem; + border-radius: .3rem; + line-height: 1; + margin-bottom: .2rem; + outline: none; + } + + .code-content { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + + .highlight { + @extend %none-stack; + } + } } .tooltipped::after { - content: 'Copied!'; - background: #555; - display: inline-block; - color: #fff; - border-radius: .4rem; - position: absolute; - left: 50%; - top: -1.8rem; - transform: translate(-50%, 0); - font-size: .75rem; - padding: 4px 10px 6px 10px; - animation: fade-tooltip .5s 1s 1 forwards; + content: 'Copied!'; + background: #555; + display: inline-block; + color: #fff; + border-radius: .4rem; + position: absolute; + left: 50%; + top: -1.8rem; + transform: translate(-50%, 0); + font-size: .75rem; + padding: 4px 10px 6px 10px; + animation: fade-tooltip .5s 1s 1 forwards; } @keyframes fade-tooltip { - to { opacity: 0; } + to { + opacity: 0; + } } .edit-page-picto { - filter: invert(46%) sepia(17%) saturate(2064%) hue-rotate(161deg) brightness(90%) contrast(83%); - position: relative; - top: 2px; - vertical-align: center; + filter: invert(46%) sepia(17%) saturate(2064%) hue-rotate(161deg) brightness(90%) contrast(83%); + position: relative; + top: 2px; + vertical-align: center; } diff --git a/src/scss/_project.scss b/src/scss/_project.scss index 3703be4..8a1e72e 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -8,212 +8,221 @@ @use 'variable'; header { - color: var(--custom-font-color, #fff); - background: var(--custom-background-color, #000); - padding: .5rem variable.$default-layout-padding; + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .5rem variable.$default-layout-padding; - h1 { - font-size: 140%; - display: inline-block; - } + h1 { + font-size: 140%; + display: inline-block; + } - .version { - margin-left: .4rem; - font-size: 80%; - } + .version { + margin-left: .4rem; + font-size: 80%; + } - .github { - color: currentColor; - margin-left: .4rem; - font-size: 180%; - } + .github { + color: currentColor; + margin-left: .4rem; + font-size: 180%; + } } .description { } .global-menu { - color: var(--custom-font-color, #fff); - background: var(--custom-background-color, #000); - padding: .2rem variable.$default-layout-padding; + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .2rem variable.$default-layout-padding; - ul { - list-style: none; - padding: 0; - margin: 0; - } - li { - display: inline-block; - margin-right: 1.8rem; - position: relative; - } + ul { + list-style: none; + padding: 0; + margin: 0; + } - ul.sub-menu { - display: none; - margin: 0; - position: absolute; - top: 1.8rem; - left: 0; - z-index: 99999; + li { + display: inline-block; + margin-right: 1.8rem; + position: relative; + } - li { - padding: .2rem variable.$default-layout-padding; - background: var(--custom-background-color, #000); - width: 140px; - font-size: 80%; - a { - color: var(--custom-font-color, #fff); - } - } - } + ul.sub-menu { + display: none; + margin: 0; + position: absolute; + top: 1.8rem; + left: 0; + z-index: 99999; - li.parent:hover > ul.sub-menu { - @include flexbox-grid-mixins.grid($flex-flow: column nowrap); - } + li { + padding: .2rem variable.$default-layout-padding; + background: var(--custom-background-color, #000); + width: 140px; + font-size: 80%; - @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { - li { - display: block; - margin-right: 0; - border-bottom: 1px solid currentColor; + a { + color: var(--custom-font-color, #fff); + } + } + } - &:last-child { - border-bottom: none; - } - } + li.parent:hover > ul.sub-menu { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } - ul.sub-menu { - display: block; - position: static; + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )}) { + li { + display: block; + margin-right: 0; + border-bottom: 1px solid currentColor; - li { - width: auto; - background: transparent; - padding: 0 .4rem; - + li { - padding-top: .2rem; - } - a { - color: currentColor; - } - } - } - } + &:last-child { + border-bottom: none; + } + } - a { - display: block; - color: currentColor; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } + ul.sub-menu { + display: block; + position: static; + + li { + width: auto; + background: transparent; + padding: 0 .4rem; + + + li { + padding-top: .2rem; + } + + a { + color: currentColor; + } + } + } + } + + a { + display: block; + color: currentColor; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } main { - padding: 3rem; + padding: 3rem; } -@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )} ) { - main { - padding: 1rem; - } +@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )}) { + main { + padding: 1rem; + } } .sidebar { - font-size: 90%; - line-height: 1.8; - background: variable.$sidebar-background-color; - border-right: 1px solid variable.$sidebar-active-color; + font-size: 90%; + line-height: 1.8; + background: variable.$sidebar-background-color; + border-right: 1px solid variable.$sidebar-active-color; - ul { - list-style: none; - padding: 0; - margin: 0; - } + ul { + list-style: none; + padding: 0; + margin: 0; + } - a { - position: relative; - display: block; - color: #404040; - text-decoration: none; - padding: .2rem 1rem; - border-left: solid 4px variable.$sidebar-background-color; - border-bottom: solid 1px variable.$sidebar-active-color; + a { + position: relative; + display: block; + color: #404040; + text-decoration: none; + padding: .2rem 1rem; + border-left: solid 4px variable.$sidebar-background-color; + border-bottom: solid 1px variable.$sidebar-active-color; - &:hover { - color: #404040; - background: variable.$sidebar-hover-color; - border-left: solid 4px #ccc; - } - } + &:hover { + color: #404040; + background: variable.$sidebar-hover-color; + border-left: solid 4px #ccc; + } + } - 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; - } + nav > ul > li li a { + padding-left: 1rem + 1rem * 1; + } - @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; - } - } + nav > ul ul > li li a { + padding-left: 1rem + 1rem * 2; + } - .active > a { - background: variable.$sidebar-active-color; - border-left: solid 4px #ccc; - } + nav > ul ul ul > li li a { + padding-left: 1rem + 1rem * 3; + } - .slide-menu { - .has-sub-menu:not(.parent) ul { - display: none; - } + nav > ul ul ul ul > li li a { + padding-left: 1rem + 1rem * 4; + } - .has-sub-menu > a span.mark { - position: absolute; - top: 0; - right: 0; - display: inline-block; - height: 32px; - width: 32px; - line-height: 2; - text-align: center; - color: #979797; - background: #f2f2f2; - border-left: 1px solid #e7e7e7; - } - } + 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 )}) { + nav > ul > li:first-child a { + border-top: solid 1px variable.$sidebar-active-color; + } + } + + .active > a { + background: variable.$sidebar-active-color; + border-left: solid 4px #ccc; + } + + .slide-menu { + .has-sub-menu:not(.parent) ul { + display: none; + } + + .has-sub-menu > a span.mark { + position: absolute; + top: 0; + right: 0; + display: inline-block; + height: 32px; + width: 32px; + line-height: 2; + text-align: center; + color: #979797; + background: #f2f2f2; + border-left: 1px solid #e7e7e7; + } + } } .sidebar-footer { - padding: variable.$default-layout-padding; + padding: variable.$default-layout-padding; } footer { } .edit-meta { - font-size: 80%; - text-align: right; + font-size: 80%; + text-align: right; } .edit-page { - font-weight: bold; + font-weight: bold; } .powered { - font-size: 80%; - text-align: right; - color: #999; + font-size: 80%; + text-align: right; + color: #999; } diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index 73b77ae..c79e654 100644 --- a/src/scss/_structure.scss +++ b/src/scss/_structure.scss @@ -12,46 +12,46 @@ *-----------------------*/ html, body { - height: 100%; + height: 100%; } .container { - width: 100%; - height: 100%; - @include flexbox-grid-mixins.grid($flex-flow: column nowrap); - margin: auto; + width: 100%; + height: 100%; + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + margin: auto; } .content-container { - @include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); - @include flexbox-grid-mixins.grid($justify-content: center); + @include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); + @include flexbox-grid-mixins.grid($justify-content: center); } main { - @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); - &:only-child { - @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); - } + &:only-child { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + } } .sidebar { - @include flexbox-grid-mixins.grid-col($col: 3, $order: -1); - // position: fixed; - // overflow-x: hidden; - overflow-x: hidden; - overflow-y: scroll; + @include flexbox-grid-mixins.grid-col($col: 3, $order: -1); + // position: fixed; + // overflow-x: hidden; + overflow-x: hidden; + overflow-y: scroll; } -@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )} ) { - .content-container { - @include flexbox-grid-mixins.grid($flex-flow: column nowrap); - } +@media screen and (max-width: #{map.get(variable.$default-breakpoints, md )}) { + .content-container { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } - main { - @include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%); - } - .sidebar { - @include flexbox-grid-mixins.grid-col($col: none, $order: 1); - } + main { + @include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%); + } + .sidebar { + @include flexbox-grid-mixins.grid-col($col: none, $order: 1); + } } diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index 99e0035..493ad7f 100644 --- a/src/scss/_variable.scss +++ b/src/scss/_variable.scss @@ -27,22 +27,22 @@ $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: ( - xl: 1280px, - lg: 1024px, - md: 896px, - sm: 768px, - xs: 480px + xl: 1280px, + lg: 1024px, + md: 896px, + sm: 768px, + xs: 480px ) !default; // grid diff --git a/src/scss/chroma.scss b/src/scss/chroma.scss index 340149c..ef1ba98 100644 --- a/src/scss/chroma.scss +++ b/src/scss/chroma.scss @@ -1,59 +1,310 @@ -/* Background */ .chroma { color: #f8f8f2; background-color: #272822 } -/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; } -/* 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; } -/* Keyword */ .chroma .k { color: #66d9ef } -/* KeywordConstant */ .chroma .kc { 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 } +/* Background */ +.chroma { + color: #f8f8f2; + background-color: #272822 +} + +/* Error */ +.chroma .err { + color: #960050; + background-color: #1e0010 +} + +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: 100%; + overflow: auto; + display: block; +} + +/* 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; +} + +/* Keyword */ +.chroma .k { + color: #66d9ef +} + +/* KeywordConstant */ +.chroma .kc { + 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 +}