language list scrolling
This commit is contained in:
parent
989729b503
commit
067a0a4e10
392
test/css/icons.css
Normal file
392
test/css/icons.css
Normal file
@ -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";
|
||||||
|
}
|
||||||
@ -18,6 +18,7 @@ header {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid #444;
|
border-bottom: 1px solid #444;
|
||||||
|
height: 5vh;
|
||||||
}
|
}
|
||||||
header .header-section {
|
header .header-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -86,7 +87,7 @@ header .header-section.header-right a:hover {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 90vh;
|
height: 95vh;
|
||||||
}
|
}
|
||||||
.sidebar-right .repo-info {
|
.sidebar-right .repo-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -183,22 +184,42 @@ header .header-section.header-right a:hover {
|
|||||||
}
|
}
|
||||||
.sidebar-right .repo-languages {
|
.sidebar-right .repo-languages {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
.sidebar-right .repo-languages .repo-languages-title {
|
.sidebar-right .repo-languages .repo-languages-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
height: 1.7em;
|
height: 1.7em;
|
||||||
display: block;
|
display: block;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
}
|
}
|
||||||
.sidebar-right .repo-languages .repo-lang-list {
|
.sidebar-right .repo-languages .repo-lang-list {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 200px;
|
||||||
|
max-height: 220px;
|
||||||
}
|
}
|
||||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
height: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
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 * {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item * {
|
||||||
margin: auto;
|
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 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item .repo-lang-perc {
|
||||||
min-width: 4ch;
|
min-width: 4ch;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-right: 0;
|
margin-right: 0.5ch;
|
||||||
}
|
}
|
||||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang1 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-1 {
|
||||||
background: linear-gradient(to left, rgb(161, 50, 28) 0%, rgb(161, 50, 28) 40%, rgba(0, 0, 0, 0) 0%);
|
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 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-2 {
|
||||||
background: linear-gradient(to left, rgb(91, 30, 88) 0%, rgb(91, 30, 88) 10%, rgba(0, 0, 0, 0) 0%);
|
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 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-3 {
|
||||||
background: linear-gradient(to left, rgb(64, 11, 2) 0%, rgb(64, 11, 2) 15%, rgba(0, 0, 0, 0) 0%);
|
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 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-4 {
|
||||||
background: linear-gradient(to left, rgb(209, 33, 20) 0%, rgb(209, 33, 20) 20%, rgba(0, 0, 0, 0) 0%);
|
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 {
|
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang-5 {
|
||||||
background: linear-gradient(to left, rgb(162, 48, 33) 0%, rgb(162, 48, 33) 90%, rgba(0, 0, 0, 0) 0%);
|
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 {
|
.sidebar-right .settings-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -255,399 +276,6 @@ header .header-section.header-right a:hover {
|
|||||||
text-align: center;
|
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 {
|
body {
|
||||||
background-color: #232323;
|
background-color: #232323;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Repository Home</title>
|
<title>Repository Home</title>
|
||||||
<link rel="stylesheet" href="../css/repo-home.css">
|
<link rel="stylesheet" href="../css/repo-home.css">
|
||||||
|
<link rel="stylesheet" href="../css/icons.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -110,27 +111,27 @@
|
|||||||
<div class="repo-languages">
|
<div class="repo-languages">
|
||||||
<h3 class="repo-languages-title">Languages</h3>
|
<h3 class="repo-languages-title">Languages</h3>
|
||||||
<ul class="repo-lang-list">
|
<ul class="repo-lang-list">
|
||||||
<li class="repo-lang-list-item lang1">
|
<li class="repo-lang-list-item lang-1">
|
||||||
<i class="repo-lang-icon fa-brands fa-css3-alt"></i>
|
<i class="repo-lang-icon fa-brands fa-css3-alt"></i>
|
||||||
<span class="repo-lang-name">Css</span>
|
<span class="repo-lang-name">Css</span>
|
||||||
<span class="repo-lang-perc">40%</span>
|
<span class="repo-lang-perc">40%</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="repo-lang-list-item lang2">
|
<li class="repo-lang-list-item lang-2">
|
||||||
<i class="repo-lang-icon fa-brands fa-html5"></i>
|
<i class="repo-lang-icon fa-brands fa-html5"></i>
|
||||||
<span class="repo-lang-name">Html</span>
|
<span class="repo-lang-name">Html</span>
|
||||||
<span class="repo-lang-perc">10%</span>
|
<span class="repo-lang-perc">10%</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="repo-lang-list-item lang3">
|
<li class="repo-lang-list-item lang-3">
|
||||||
<i class="repo-lang-icon fa-brands fa-sass"></i>
|
<i class="repo-lang-icon fa-brands fa-sass"></i>
|
||||||
<span class="repo-lang-name">Scss</span>
|
<span class="repo-lang-name">Scss</span>
|
||||||
<span class="repo-lang-perc">15%</span>
|
<span class="repo-lang-perc">15%</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="repo-lang-list-item lang4">
|
<li class="repo-lang-list-item lang-4">
|
||||||
<i class="repo-lang-icon fa-brands fa-rust"></i>
|
<i class="repo-lang-icon fa-brands fa-rust"></i>
|
||||||
<span class="repo-lang-name">Rust</span>
|
<span class="repo-lang-name">Rust</span>
|
||||||
<span class="repo-lang-perc">20%</span>
|
<span class="repo-lang-perc">20%</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="repo-lang-list-item lang5">
|
<li class="repo-lang-list-item lang-5">
|
||||||
<i class="repo-lang-icon fa-brands fa-golang"></i>
|
<i class="repo-lang-icon fa-brands fa-golang"></i>
|
||||||
<span class="repo-lang-name">Go</span>
|
<span class="repo-lang-name">Go</span>
|
||||||
<span class="repo-lang-perc">90%</span>
|
<span class="repo-lang-perc">90%</span>
|
||||||
|
|||||||
5
test/scss/icons.scss
Normal file
5
test/scss/icons.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
@use "fontawesome6/scss/fontawesome";
|
||||||
|
@use "fontawesome6/scss/regular";
|
||||||
|
@use "fontawesome6/scss/solid";
|
||||||
|
@use "fontawesome6/scss/brands";
|
||||||
@ -1,11 +1,6 @@
|
|||||||
@use "common";
|
@use "common";
|
||||||
@use "repo-home/header";
|
@use "repo-home/header";
|
||||||
@use "repo-home/sidebar-right";
|
@use "repo-home/sidebar-right";
|
||||||
@use "fontawesome6/scss/fontawesome";
|
|
||||||
@use "fontawesome6/scss/regular";
|
|
||||||
@use "fontawesome6/scss/solid";
|
|
||||||
@use "fontawesome6/scss/brands";
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #232323;
|
background-color: #232323;
|
||||||
|
|||||||
@ -17,6 +17,7 @@ header {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid $repo-home-header-border-color;
|
border-bottom: 1px solid $repo-home-header-border-color;
|
||||||
|
height: 5vh;
|
||||||
|
|
||||||
.header-section {
|
.header-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -22,7 +22,7 @@ $settings-link-hover-bg-color: #333;
|
|||||||
@return linear-gradient(
|
@return linear-gradient(
|
||||||
to left,
|
to left,
|
||||||
$col 0%,
|
$col 0%,
|
||||||
$col $perc,
|
$col ($perc * 1%),
|
||||||
rgba(0,0,0,0) 0%
|
rgba(0,0,0,0) 0%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -57,7 +57,7 @@ $settings-link-hover-bg-color: #333;
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 90vh;
|
height: 95vh;
|
||||||
|
|
||||||
.repo-info {
|
.repo-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -163,7 +163,6 @@ $settings-link-hover-bg-color: #333;
|
|||||||
.repo-languages {
|
.repo-languages {
|
||||||
//background-color: black;
|
//background-color: black;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
overflow-y: scroll;
|
|
||||||
|
|
||||||
.repo-languages-title {
|
.repo-languages-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -171,14 +170,21 @@ $settings-link-hover-bg-color: #333;
|
|||||||
height: 1.7em;
|
height: 1.7em;
|
||||||
display: block;
|
display: block;
|
||||||
//position: absolute;
|
//position: absolute;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.repo-lang-list {
|
.repo-lang-list {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 200px;
|
||||||
|
max-height: 220px;
|
||||||
|
|
||||||
.repo-lang-list-item {
|
.repo-lang-list-item {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
height: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -199,10 +205,10 @@ $settings-link-hover-bg-color: #333;
|
|||||||
.repo-lang-perc {
|
.repo-lang-perc {
|
||||||
min-width: 4ch;
|
min-width: 4ch;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-right: 0;
|
margin-right: 0.5ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.lang1 {
|
/*&.lang1 {
|
||||||
background: lang_bg(random_col(), 40%);
|
background: lang_bg(random_col(), 40%);
|
||||||
}
|
}
|
||||||
&.lang2 {
|
&.lang2 {
|
||||||
@ -216,6 +222,14 @@ $settings-link-hover-bg-color: #333;
|
|||||||
}
|
}
|
||||||
&.lang5 {
|
&.lang5 {
|
||||||
background: lang_bg(random_col(), 90%);
|
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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user