languages on sidebar

This commit is contained in:
Candifloss 2024-11-13 16:50:37 +05:30
parent 5511cdaa69
commit dd0aaf2875
5 changed files with 2397 additions and 114 deletions

File diff suppressed because it is too large Load Diff

View File

@ -107,6 +107,37 @@
</button> </button>
</div> </div>
<div class="repo-languages">
<h3 class="repo-languages-title">Languages</h3>
<ul class="repo-lang-list">
<li class="repo-lang-list-item lang1">
<i class="repo-lang-icon fa-brands fa-css3-alt"></i>
<span class="repo-lang-name">Css</span>
<span class="repo-lang-perc">40%</span>
</li>
<li class="repo-lang-list-item lang2">
<i class="repo-lang-icon fa-brands fa-html5"></i>
<span class="repo-lang-name">Html</span>
<span class="repo-lang-perc">10%</span>
</li>
<li class="repo-lang-list-item lang3">
<i class="repo-lang-icon fa-brands fa-sass"></i>
<span class="repo-lang-name">Scss</span>
<span class="repo-lang-perc">15%</span>
</li>
<li class="repo-lang-list-item lang4">
<i class="repo-lang-icon fa-brands fa-rust"></i>
<span class="repo-lang-name">Rust</span>
<span class="repo-lang-perc">20%</span>
</li>
<li class="repo-lang-list-item lang5">
<i class="repo-lang-icon fa-brands fa-golang"></i>
<span class="repo-lang-name">Go</span>
<span class="repo-lang-perc">90%</span>
</li>
</ul>
</div>
<!-- Repo Settings --> <!-- Repo Settings -->
<a href="/settings" class="nav-link settings-link"> <a href="/settings" class="nav-link settings-link">
<i class="fa-solid fa-gear"></i> Repo Settings <i class="fa-solid fa-gear"></i> Repo Settings

View File

@ -2546,6 +2546,13 @@ $fa-icons-custom: (
"eye": $fa-var-eye, "eye": $fa-var-eye,
"star": $fa-var-star, "star": $fa-var-star,
"box": $fa-var-box, "box": $fa-var-box,
"plus": $fa-var-plus,
"bell": $fa-var-bell,
"css3-alt": $fa-var-css3-alt,
"html5": $fa-var-html5,
"sass": $fa-var-sass,
"golang": $fa-var-golang,
"rust": $fa-var-rust,
); );
$fa-icons: ( $fa-icons: (

View File

@ -4,6 +4,7 @@
@use "fontawesome6/scss/fontawesome"; @use "fontawesome6/scss/fontawesome";
@use "fontawesome6/scss/regular"; @use "fontawesome6/scss/regular";
@use "fontawesome6/scss/solid"; @use "fontawesome6/scss/solid";
@use "fontawesome6/scss/brands";
body { body {

View File

@ -141,6 +141,53 @@ $settings-link-hover-bg-color: #333;
} }
} }
.repo-languages {
//background-color: black;
padding: 8px 12px;
.repo-languages-title {
width: 100%;
font-size: 16px;
height: 1.7em;
display: block;
}
.repo-lang-list {
display: block;
width: 100%;
.repo-lang-list-item {
font-size: 15px;
display: flex;
width: 100%;
* {
margin: auto;
}
.repo-lang-icon {
width: 3ch;
text-align: center;
margin: auto 0;
}
.repo-lang-name {
min-width: 10ch;
text-align: left;
margin-left: 4px;
}
.repo-lang-perc {
min-width: 4ch;
text-align: right;
margin-right: 0;
}
&.lang1 {
background-color: #1b97ff;
}
}
}
}
.settings-link { .settings-link {
@include sidbar-left-nav-links; @include sidbar-left-nav-links;
margin-top: auto; margin-top: auto;