From 067a0a4e1010c4bcb0396e7ee44bb292a2c7e17f Mon Sep 17 00:00:00 2001 From: candifloss Date: Thu, 14 Nov 2024 15:13:13 +0530 Subject: [PATCH] language list scrolling --- test/css/icons.css | 392 +++++++++++++++++++++ test/css/repo-home.css | 440 ++---------------------- test/html/repo-home.html | 11 +- test/scss/icons.scss | 5 + test/scss/repo-home.scss | 5 - test/scss/repo-home/_header.scss | 1 + test/scss/repo-home/_sidebar-right.scss | 26 +- 7 files changed, 458 insertions(+), 422 deletions(-) create mode 100644 test/css/icons.css create mode 100644 test/scss/icons.scss diff --git a/test/css/icons.css b/test/css/icons.css new file mode 100644 index 0000000..d91c48a --- /dev/null +++ b/test/css/icons.css @@ -0,0 +1,392 @@ +/*! + * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2024 Fonticons, Inc. + */ +.fa { + font-family: var(--fa-style-family, "Font Awesome 6 Free"); + font-weight: var(--fa-style, 900); +} + +.fa-solid, +.fa-regular, +.fa-brands, +.fas, +.far, +.fab, +.fa-sharp-solid, +.fa-classic, +.fa { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: var(--fa-display, inline-block); + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; +} + +.fas, +.fa-classic, +.fa-solid, +.far, +.fa-regular { + font-family: "Font Awesome 6 Free"; +} + +.fab, +.fa-brands { + font-family: "Font Awesome 6 Brands"; +} + +.fa-1x { + font-size: 1em; +} + +.fa-2x { + font-size: 2em; +} + +.fa-3x { + font-size: 3em; +} + +.fa-4x { + font-size: 4em; +} + +.fa-5x { + font-size: 5em; +} + +.fa-6x { + font-size: 6em; +} + +.fa-7x { + font-size: 7em; +} + +.fa-8x { + font-size: 8em; +} + +.fa-9x { + font-size: 9em; +} + +.fa-10x { + font-size: 10em; +} + +.fa-2xs { + font-size: 0.625em; + line-height: 0.1em; + vertical-align: 0.225em; +} + +.fa-xs { + font-size: 0.75em; + line-height: 0.0833333337em; + vertical-align: 0.125em; +} + +.fa-sm { + font-size: 0.875em; + line-height: 0.0714285718em; + vertical-align: 0.0535714295em; +} + +.fa-lg { + font-size: 1.25em; + line-height: 0.05em; + vertical-align: -0.075em; +} + +.fa-xl { + font-size: 1.5em; + line-height: 0.0416666682em; + vertical-align: -0.125em; +} + +.fa-2xl { + font-size: 2em; + line-height: 0.03125em; + vertical-align: -0.1875em; +} + +.fa-fw { + text-align: center; + width: 1.25em; +} + +.fa-ul { + list-style-type: none; + margin-left: var(--fa-li-margin, 2.5em); + padding-left: 0; +} +.fa-ul > li { + position: relative; +} + +.fa-li { + left: calc(-1 * var(--fa-li-width, 2em)); + position: absolute; + text-align: center; + width: var(--fa-li-width, 2em); + line-height: inherit; +} + +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen +readers do not read off random characters that represent icons */ +.fa-house::before { + content: "\f015"; +} + +.fa-code::before { + content: "\f121"; +} + +.fa-exclamation-circle::before { + content: "\f06a"; +} + +.fa-code-branch::before { + content: "\f126"; +} + +.fa-play::before { + content: "\f04b"; +} + +.fa-tasks::before { + content: "\f0ae"; +} + +.fa-tag::before { + content: "\f02b"; +} + +.fa-book::before { + content: "\f02d"; +} + +.fa-chart-line::before { + content: "\f201"; +} + +.fa-gear::before { + content: "\f013"; +} + +.fa-eye::before { + content: "\f06e"; +} + +.fa-star::before { + content: "\f005"; +} + +.fa-box::before { + content: "\f466"; +} + +.fa-plus::before { + content: "\+"; +} + +.fa-bell::before { + content: "\f0f3"; +} + +.fa-css3-alt::before { + content: "\f38b"; +} + +.fa-html5::before { + content: "\f13b"; +} + +.fa-sass::before { + content: "\f41e"; +} + +.fa-golang::before { + content: "\e40f"; +} + +.fa-rust::before { + content: "\e07a"; +} + +.sr-only, +.fa-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.sr-only-focusable:not(:focus), +.fa-sr-only-focusable:not(:focus) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/*! + * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2024 Fonticons, Inc. + */ +:root, :host { + --fa-style-family-classic: "Font Awesome 6 Free"; + --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"; +} + +@font-face { + font-family: "Font Awesome 6 Free"; + font-style: normal; + font-weight: 400; + font-display: block; + src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype"); +} +.far, +.fa-regular { + font-weight: 400; +} + +/*! + * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2024 Fonticons, Inc. + */ +:root, :host { + --fa-style-family-classic: "Font Awesome 6 Free"; + --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"; +} + +@font-face { + font-family: "Font Awesome 6 Free"; + font-style: normal; + font-weight: 900; + font-display: block; + src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype"); +} +.fas, +.fa-solid { + font-weight: 900; +} + +/*! + * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2024 Fonticons, Inc. + */ +:root, :host { + --fa-style-family-brands: "Font Awesome 6 Brands"; + --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; +} + +@font-face { + font-family: "Font Awesome 6 Brands"; + font-style: normal; + font-weight: 400; + font-display: block; + src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype"); +} +.fab, +.fa-brands { + font-weight: 400; +} + +.fa-house:before { + content: "\f015"; +} + +.fa-code:before { + content: "\f121"; +} + +.fa-exclamation-circle:before { + content: "\f06a"; +} + +.fa-code-branch:before { + content: "\f126"; +} + +.fa-play:before { + content: "\f04b"; +} + +.fa-tasks:before { + content: "\f0ae"; +} + +.fa-tag:before { + content: "\f02b"; +} + +.fa-book:before { + content: "\f02d"; +} + +.fa-chart-line:before { + content: "\f201"; +} + +.fa-gear:before { + content: "\f013"; +} + +.fa-eye:before { + content: "\f06e"; +} + +.fa-star:before { + content: "\f005"; +} + +.fa-box:before { + content: "\f466"; +} + +.fa-plus:before { + content: "\+"; +} + +.fa-bell:before { + content: "\f0f3"; +} + +.fa-css3-alt:before { + content: "\f38b"; +} + +.fa-html5:before { + content: "\f13b"; +} + +.fa-sass:before { + content: "\f41e"; +} + +.fa-golang:before { + content: "\e40f"; +} + +.fa-rust:before { + content: "\e07a"; +} diff --git a/test/css/repo-home.css b/test/css/repo-home.css index 9a6d16e..e7277e5 100644 --- a/test/css/repo-home.css +++ b/test/css/repo-home.css @@ -18,6 +18,7 @@ header { align-items: center; width: 100%; border-bottom: 1px solid #444; + height: 5vh; } header .header-section { display: flex; @@ -86,7 +87,7 @@ header .header-section.header-right a:hover { padding: 0; display: flex; flex-direction: column; - max-height: 90vh; + height: 95vh; } .sidebar-right .repo-info { display: flex; @@ -183,22 +184,42 @@ header .header-section.header-right a:hover { } .sidebar-right .repo-languages { padding: 8px 12px; - overflow-y: scroll; } .sidebar-right .repo-languages .repo-languages-title { width: 100%; font-size: 16px; height: 1.7em; display: block; + margin-bottom: 2px; + border-bottom: 1px solid #333; } .sidebar-right .repo-languages .repo-lang-list { display: block; width: 100%; + overflow-y: scroll; + height: 200px; + max-height: 220px; } .sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item { font-size: 15px; + height: 20px; display: flex; width: 100%; + /*&.lang1 { + background: lang_bg(random_col(), 40%); + } + &.lang2 { + background: lang_bg(random_col(), 10%); + } + &.lang3 { + background: lang_bg(random_col(), 15%); + } + &.lang4 { + background: lang_bg(random_col(), 20%); + } + &.lang5 { + background: lang_bg(random_col(), 90%); + }*/ } .sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item * { margin: auto; @@ -216,22 +237,22 @@ header .header-section.header-right a:hover { .sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item .repo-lang-perc { min-width: 4ch; text-align: right; - margin-right: 0; + margin-right: 0.5ch; } -.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang1 { - background: linear-gradient(to left, rgb(161, 50, 28) 0%, rgb(161, 50, 28) 40%, rgba(0, 0, 0, 0) 0%); +.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-1 { + background: linear-gradient(to left, rgb(208, 1, 4) 0%, rgb(208, 1, 4) 40%, rgba(0, 0, 0, 0) 0%); } -.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang2 { - background: linear-gradient(to left, rgb(91, 30, 88) 0%, rgb(91, 30, 88) 10%, rgba(0, 0, 0, 0) 0%); +.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-2 { + background: linear-gradient(to left, rgb(185, 68, 68) 0%, rgb(185, 68, 68) 10%, rgba(0, 0, 0, 0) 0%); } -.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang3 { - background: linear-gradient(to left, rgb(64, 11, 2) 0%, rgb(64, 11, 2) 15%, rgba(0, 0, 0, 0) 0%); +.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-3 { + background: linear-gradient(to left, rgb(28, 85, 14) 0%, rgb(28, 85, 14) 15%, rgba(0, 0, 0, 0) 0%); } -.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang4 { - background: linear-gradient(to left, rgb(209, 33, 20) 0%, rgb(209, 33, 20) 20%, rgba(0, 0, 0, 0) 0%); +.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-4 { + background: linear-gradient(to left, rgb(79, 93, 103) 0%, rgb(79, 93, 103) 20%, rgba(0, 0, 0, 0) 0%); } -.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang5 { - background: linear-gradient(to left, rgb(162, 48, 33) 0%, rgb(162, 48, 33) 90%, rgba(0, 0, 0, 0) 0%); +.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-5 { + background: linear-gradient(to left, rgb(25, 37, 111) 0%, rgb(25, 37, 111) 90%, rgba(0, 0, 0, 0) 0%); } .sidebar-right .settings-link { display: flex; @@ -255,399 +276,6 @@ header .header-section.header-right a:hover { text-align: center; } -/*! - * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - * Copyright 2024 Fonticons, Inc. - */ -.fa { - font-family: var(--fa-style-family, "Font Awesome 6 Free"); - font-weight: var(--fa-style, 900); -} - -.fa-solid, -.fa-regular, -.fa-brands, -.fas, -.far, -.fab, -.fa-sharp-solid, -.fa-classic, -.fa { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: var(--fa-display, inline-block); - font-style: normal; - font-variant: normal; - line-height: 1; - text-rendering: auto; -} - -.fas, -.fa-classic, -.fa-solid, -.far, -.fa-regular { - font-family: "Font Awesome 6 Free"; -} - -.fab, -.fa-brands { - font-family: "Font Awesome 6 Brands"; -} - -.fa-1x { - font-size: 1em; -} - -.fa-2x { - font-size: 2em; -} - -.fa-3x { - font-size: 3em; -} - -.fa-4x { - font-size: 4em; -} - -.fa-5x { - font-size: 5em; -} - -.fa-6x { - font-size: 6em; -} - -.fa-7x { - font-size: 7em; -} - -.fa-8x { - font-size: 8em; -} - -.fa-9x { - font-size: 9em; -} - -.fa-10x { - font-size: 10em; -} - -.fa-2xs { - font-size: 0.625em; - line-height: 0.1em; - vertical-align: 0.225em; -} - -.fa-xs { - font-size: 0.75em; - line-height: 0.0833333337em; - vertical-align: 0.125em; -} - -.fa-sm { - font-size: 0.875em; - line-height: 0.0714285718em; - vertical-align: 0.0535714295em; -} - -.fa-lg { - font-size: 1.25em; - line-height: 0.05em; - vertical-align: -0.075em; -} - -.fa-xl { - font-size: 1.5em; - line-height: 0.0416666682em; - vertical-align: -0.125em; -} - -.fa-2xl { - font-size: 2em; - line-height: 0.03125em; - vertical-align: -0.1875em; -} - -.fa-fw { - text-align: center; - width: 1.25em; -} - -.fa-ul { - list-style-type: none; - margin-left: var(--fa-li-margin, 2.5em); - padding-left: 0; -} -.fa-ul > li { - position: relative; -} - -.fa-li { - left: calc(-1 * var(--fa-li-width, 2em)); - position: absolute; - text-align: center; - width: var(--fa-li-width, 2em); - line-height: inherit; -} - -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen -readers do not read off random characters that represent icons */ -.fa-house::before { - content: "\f015"; -} - -.fa-code::before { - content: "\f121"; -} - -.fa-exclamation-circle::before { - content: "\f06a"; -} - -.fa-code-branch::before { - content: "\f126"; -} - -.fa-play::before { - content: "\f04b"; -} - -.fa-tasks::before { - content: "\f0ae"; -} - -.fa-tag::before { - content: "\f02b"; -} - -.fa-book::before { - content: "\f02d"; -} - -.fa-chart-line::before { - content: "\f201"; -} - -.fa-gear::before { - content: "\f013"; -} - -.fa-eye::before { - content: "\f06e"; -} - -.fa-star::before { - content: "\f005"; -} - -.fa-box::before { - content: "\f466"; -} - -.fa-plus::before { - content: "\+"; -} - -.fa-bell::before { - content: "\f0f3"; -} - -.fa-css3-alt::before { - content: "\f38b"; -} - -.fa-html5::before { - content: "\f13b"; -} - -.fa-sass::before { - content: "\f41e"; -} - -.fa-golang::before { - content: "\e40f"; -} - -.fa-rust::before { - content: "\e07a"; -} - -.sr-only, -.fa-sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.sr-only-focusable:not(:focus), -.fa-sr-only-focusable:not(:focus) { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -/*! - * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - * Copyright 2024 Fonticons, Inc. - */ -:root, :host { - --fa-style-family-classic: "Font Awesome 6 Free"; - --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"; -} - -@font-face { - font-family: "Font Awesome 6 Free"; - font-style: normal; - font-weight: 400; - font-display: block; - src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype"); -} -.far, -.fa-regular { - font-weight: 400; -} - -/*! - * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - * Copyright 2024 Fonticons, Inc. - */ -:root, :host { - --fa-style-family-classic: "Font Awesome 6 Free"; - --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"; -} - -@font-face { - font-family: "Font Awesome 6 Free"; - font-style: normal; - font-weight: 900; - font-display: block; - src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype"); -} -.fas, -.fa-solid { - font-weight: 900; -} - -/*! - * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - * Copyright 2024 Fonticons, Inc. - */ -:root, :host { - --fa-style-family-brands: "Font Awesome 6 Brands"; - --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; -} - -@font-face { - font-family: "Font Awesome 6 Brands"; - font-style: normal; - font-weight: 400; - font-display: block; - src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype"); -} -.fab, -.fa-brands { - font-weight: 400; -} - -.fa-house:before { - content: "\f015"; -} - -.fa-code:before { - content: "\f121"; -} - -.fa-exclamation-circle:before { - content: "\f06a"; -} - -.fa-code-branch:before { - content: "\f126"; -} - -.fa-play:before { - content: "\f04b"; -} - -.fa-tasks:before { - content: "\f0ae"; -} - -.fa-tag:before { - content: "\f02b"; -} - -.fa-book:before { - content: "\f02d"; -} - -.fa-chart-line:before { - content: "\f201"; -} - -.fa-gear:before { - content: "\f013"; -} - -.fa-eye:before { - content: "\f06e"; -} - -.fa-star:before { - content: "\f005"; -} - -.fa-box:before { - content: "\f466"; -} - -.fa-plus:before { - content: "\+"; -} - -.fa-bell:before { - content: "\f0f3"; -} - -.fa-css3-alt:before { - content: "\f38b"; -} - -.fa-html5:before { - content: "\f13b"; -} - -.fa-sass:before { - content: "\f41e"; -} - -.fa-golang:before { - content: "\e40f"; -} - -.fa-rust:before { - content: "\e07a"; -} - body { background-color: #232323; display: flex; diff --git a/test/html/repo-home.html b/test/html/repo-home.html index 626ccf0..6a38554 100644 --- a/test/html/repo-home.html +++ b/test/html/repo-home.html @@ -5,6 +5,7 @@ Repository Home +
@@ -110,27 +111,27 @@

Languages

    -
  • +
  • Css 40%
    • -
  • +
  • Html 10%
    • -
  • +
  • Scss 15%
    • -
  • +
  • Rust 20%
    • -
  • +
  • Go 90% diff --git a/test/scss/icons.scss b/test/scss/icons.scss new file mode 100644 index 0000000..9a5af15 --- /dev/null +++ b/test/scss/icons.scss @@ -0,0 +1,5 @@ + +@use "fontawesome6/scss/fontawesome"; +@use "fontawesome6/scss/regular"; +@use "fontawesome6/scss/solid"; +@use "fontawesome6/scss/brands"; \ No newline at end of file diff --git a/test/scss/repo-home.scss b/test/scss/repo-home.scss index 9e1472b..90937da 100644 --- a/test/scss/repo-home.scss +++ b/test/scss/repo-home.scss @@ -1,11 +1,6 @@ @use "common"; @use "repo-home/header"; @use "repo-home/sidebar-right"; -@use "fontawesome6/scss/fontawesome"; -@use "fontawesome6/scss/regular"; -@use "fontawesome6/scss/solid"; -@use "fontawesome6/scss/brands"; - body { background-color: #232323; diff --git a/test/scss/repo-home/_header.scss b/test/scss/repo-home/_header.scss index 97fdeb5..b12c002 100644 --- a/test/scss/repo-home/_header.scss +++ b/test/scss/repo-home/_header.scss @@ -17,6 +17,7 @@ header { align-items: center; width: 100%; border-bottom: 1px solid $repo-home-header-border-color; + height: 5vh; .header-section { display: flex; diff --git a/test/scss/repo-home/_sidebar-right.scss b/test/scss/repo-home/_sidebar-right.scss index 74c0c9e..af1abe9 100644 --- a/test/scss/repo-home/_sidebar-right.scss +++ b/test/scss/repo-home/_sidebar-right.scss @@ -22,7 +22,7 @@ $settings-link-hover-bg-color: #333; @return linear-gradient( to left, $col 0%, - $col $perc, + $col ($perc * 1%), rgba(0,0,0,0) 0% ); } @@ -57,7 +57,7 @@ $settings-link-hover-bg-color: #333; padding: 0; display: flex; flex-direction: column; - max-height: 90vh; + height: 95vh; .repo-info { display: flex; @@ -163,7 +163,6 @@ $settings-link-hover-bg-color: #333; .repo-languages { //background-color: black; padding: 8px 12px; - overflow-y: scroll; .repo-languages-title { width: 100%; @@ -171,14 +170,21 @@ $settings-link-hover-bg-color: #333; height: 1.7em; display: block; //position: absolute; + margin-bottom: 2px; + border-bottom: 1px solid #333; + } .repo-lang-list { display: block; width: 100%; + overflow-y: scroll; + height: 200px; + max-height: 220px; .repo-lang-list-item { font-size: 15px; + height: 20px; display: flex; width: 100%; @@ -199,10 +205,10 @@ $settings-link-hover-bg-color: #333; .repo-lang-perc { min-width: 4ch; text-align: right; - margin-right: 0; + margin-right: 0.5ch; } - &.lang1 { + /*&.lang1 { background: lang_bg(random_col(), 40%); } &.lang2 { @@ -216,7 +222,15 @@ $settings-link-hover-bg-color: #333; } &.lang5 { background: lang_bg(random_col(), 90%); - } + }*/ + + $langs: (1: 40, 2: 10, 3: 15, 4: 20, 5: 90); + + @each $lang, $perc in $langs { + &.lang-#{$lang} { + background: lang_bg(random_col(), $perc) + } + } } } }