languages on sidebar
This commit is contained in:
parent
5511cdaa69
commit
dd0aaf2875
File diff suppressed because it is too large
Load Diff
@ -107,6 +107,37 @@
|
||||
</button>
|
||||
</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 -->
|
||||
<a href="/settings" class="nav-link settings-link">
|
||||
<i class="fa-solid fa-gear"></i> Repo Settings
|
||||
|
||||
@ -2546,6 +2546,13 @@ $fa-icons-custom: (
|
||||
"eye": $fa-var-eye,
|
||||
"star": $fa-var-star,
|
||||
"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: (
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
@use "fontawesome6/scss/fontawesome";
|
||||
@use "fontawesome6/scss/regular";
|
||||
@use "fontawesome6/scss/solid";
|
||||
@use "fontawesome6/scss/brands";
|
||||
|
||||
|
||||
body {
|
||||
|
||||
@ -10,139 +10,186 @@ $stat-count-color: #f0f0f0;
|
||||
$settings-link-hover-bg-color: #333;
|
||||
|
||||
@mixin sidbar-left-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $sidebar-text-color;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
padding: 0.75em 12px;
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $sidebar-text-color;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
padding: 0.75em 12px;
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: $sidebar-link-hover-bg-color;
|
||||
border-left: 2px solid wheat;
|
||||
}
|
||||
&:hover, &:active {
|
||||
background-color: $sidebar-link-hover-bg-color;
|
||||
border-left: 2px solid wheat;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
i {
|
||||
font-size: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
width: 250px;
|
||||
background-color: $sidebar-bg-color;
|
||||
color: $sidebar-text-color;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
background-color: $sidebar-bg-color;
|
||||
color: $sidebar-text-color;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.repo-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 2px solid cadetblue;
|
||||
.repo-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 2px solid cadetblue;
|
||||
|
||||
.repo-logo {
|
||||
//background-color: #f0f0f0;
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
background-color: black;
|
||||
.repo-logo {
|
||||
//background-color: #f0f0f0;
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
background-color: black;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
//color: green;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
//color: green;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.repo-details {
|
||||
.repo-author {
|
||||
font-size: 0.9rem;
|
||||
color: $sidebar-author-color;
|
||||
display: block;
|
||||
}
|
||||
.repo-details {
|
||||
.repo-author {
|
||||
font-size: 0.9rem;
|
||||
color: $sidebar-author-color;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.repo-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.repo-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
.repo-logo {
|
||||
&:hover, &:active {
|
||||
.repo-logo {
|
||||
img {
|
||||
border: 1px solid #9b9b9b;
|
||||
//background-color: #9b9b9b;
|
||||
border: 1px solid #9b9b9b;
|
||||
//background-color: #9b9b9b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 0.3rem;
|
||||
|
||||
.nav-link {
|
||||
@include sidbar-left-nav-links;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 7px 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background-color: $stat-bg-color;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
color: $stat-text-color;
|
||||
font-size: 0.8rem;
|
||||
height: 1.4rem;
|
||||
|
||||
.stat-icon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
color: $stat-count-color;
|
||||
min-width: 4ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: #444;
|
||||
color:#1b97ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-languages {
|
||||
//background-color: black;
|
||||
padding: 8px 12px;
|
||||
|
||||
.repo-languages-title {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
height: 1.7em;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 0.3rem;
|
||||
.repo-lang-list {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.nav-link {
|
||||
@include sidbar-left-nav-links;
|
||||
}
|
||||
}
|
||||
.repo-lang-list-item {
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.repo-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 7px 12px;
|
||||
* {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background-color: $stat-bg-color;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
color: $stat-text-color;
|
||||
font-size: 0.8rem;
|
||||
height: 1.4rem;
|
||||
.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;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&.lang1 {
|
||||
background-color: #1b97ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
color: $stat-count-color;
|
||||
min-width: 4ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: #444;
|
||||
color:#1b97ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-link {
|
||||
@include sidbar-left-nav-links;
|
||||
.settings-link {
|
||||
@include sidbar-left-nav-links;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user