roundabout,
created on Monday, 4 March 2024, 16:30:16 (1709569816),
received on Wednesday, 31 July 2024, 06:54:41 (1722408881)
Author identity: vlad <vlad.muntoiu@gmail.com>
c21db8460cbd4830189ee6809c7551ab0bdc567f
static/efficient-ui/THEME.css
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,700;1,300;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,600;1,600&display=swap');
@@ -346,7 +346,7 @@
--color-navbar: #546E7A; --color-navbar-text: var(--color-primary-text);
--color-navbar-link: var(--color-primary-text);
--height-navbar: 56px;
--height-navbar: 48px;
--width-navbar-button: 56px;
--padding-navbar: 12px;
--gap-navbar: 0;
@@ -374,13 +374,13 @@
--padding-sidenav: 8px;
/* BREADCRUMBS */
--color-breadcrumbs: #455A64; --color-breadcrumbs-text: var(--color-primary-1-text);
--color-breadcrumbs-link: var(--color-primary-1-text);
--color-breadcrumbs-separator: var(--color-primary-3);
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
--color-breadcrumbs-link: var(--color-navbar-text);
--color-breadcrumbs-separator: var(--color-navbar-text);
--height-breadcrumbs: 36px;
--height-breadcrumbs: 48px;
--padding-breadcrumbs: 16px;
--shadow-breadcrumbs: none;
--shadow-breadcrumbs: var(--shadow-navbar);
--border-breadcrumbs: none;
--radius-breadcrumbs: 0;
--separator-breadcrumbs: " > ";
@@ -813,24 +813,10 @@ dialog::backdrop {
}
}
:where(.navrail, .navbar, .sidenav) iconify-icon {
:where(.navrail, .navbar, .sidenav) > iconify-icon {
font-size: 1.5rem;
}
:is(.navrail, .navbar) a {
position: relative;
overflow: hidden;
}
.navrail :any-link {
font-weight: 500;
font-size: 0.875em;
}
.navrail :any-link.selected {
font-weight: 600;
}
.navbar > *, .navbar > ul > li > * {
height: var(--height-navbar);
display: flex;
@@ -838,9 +824,12 @@ dialog::backdrop {
justify-content: center;
}
.navrail a {
width: var(--width-navrail);
display: flex;
align-items: center;
justify-content: center;
header:has(.navbar) .breadcrumbs {
z-index: 2 !important;
position: relative;
box-shadow: none;
}
.navbar a {
font-weight: 500;
}
static/efficient-ui/cards.css
@@ -43,7 +43,7 @@ figcaption {
max-width: var(--figure-max-size-horizontal-card);
}
.card-horizontal > :is(figure, .card-top) + :is(section, header, footer) {
.card-horizontal > :is(figure, .card-top) ~ :is(section, header, footer) {
/* Beside figure */
padding-top: var(--padding-card-top);
}
static/style.css
@@ -224,4 +224,22 @@ hr {
.breadcrumbs > x-buttonbox > a {
display: flex;
align-items: center;
}
#repo-tabs > li > a {
display: flex;
flex-flow: row wrap;
gap: 0.5ch;
text-transform: uppercase;
position: relative;
overflow: hidden;
padding: 4px 16px;
}
#repo-tabs > li.selected > a {
box-shadow: inset 0 -0.25rem var(--color-accent);
}
#repo-nav {
padding-left: 0;
}
templates/default.html
@@ -101,11 +101,12 @@
{% endif %}
</x-buttonbox>
</nav>
{% if self.nav() | trim %}
<nav id="repo-nav" class="navbar" style="max-height: 100%; flex: 0 0 var(--height-navbar);">
{% block nav %}{% endblock %}
</nav>
{% endif %}
</header>
<nav id="repo-nav" class="navbar" style="max-height: 100%; flex: 0 0 var(--height-navbar);">
{% block nav %}
{% endblock %}
</nav>
<main>
{% block content %}
{% endblock %}
templates/repo.html
@@ -34,83 +34,54 @@
<ul id="repo-tabs">
<li class="{% if active_page == 'tree' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/tree">
{% if active_page == 'tree' %}
<iconify-icon icon="ic:baseline-folder-copy"></iconify-icon>
{% else %}
<iconify-icon icon="ic:outline-folder-copy"></iconify-icon>
{% endif %}
Files
</a>
</li>
<li class="{% if active_page == 'branches' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/branches">
{% if active_page == 'branches' %}
<iconify-icon icon="mdi:directions-fork"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:directions-fork"></iconify-icon>
{% endif %}
Branches
</a>
</li>
<li class="{% if active_page == 'log' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/log">
{% if active_page == 'log' %}
<iconify-icon icon="ic:baseline-history"></iconify-icon>
{% else %}
<iconify-icon icon="ic:outline-history"></iconify-icon>
{% endif %}
History
</a>
</li>
<li class="{% if active_page == 'prs' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/prs">
{% if active_page == 'prs' %}
<iconify-icon icon="mdi:comment-arrow-left"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:comment-arrow-left-outline"></iconify-icon>
{% endif %}
PRs
</a>
</li>
<li class="{% if active_page == 'forum' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/forum">
{% if active_page == 'forum' %}
<iconify-icon icon="ic:baseline-forum"></iconify-icon>
{% else %}
<iconify-icon icon="ic:outline-forum"></iconify-icon>
{% endif %}
Forum
</a>
</li>
<li class="{% if active_page == 'users' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/users">
{% if active_page == 'users' %}
<iconify-icon icon="mdi:users"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:users-outline"></iconify-icon>
{% endif %}
Users
</a>
</li>
<li class="{% if active_page == 'settings' %}selected{% endif %}">
<a href="/{{ username }}/{{ repository }}/settings">
{% if active_page == 'settings' %}
<iconify-icon icon="mdi:settings"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:settings-outline"></iconify-icon>
{% endif %}
Settings
</a>
</li>
</ul>
<div class="flexible-space"></div>
{% if logged_in_user %}
<a class="button button-round fab" title="Mark as favourite" href="/{{ username }}/{{ repository }}/favourite">
<iconify-icon icon="mdi:star-plus"></iconify-icon>
</a>
<button class="button-round fab" onclick="document.getElementById('clone-info').showModal();">
<iconify-icon icon="mdi:download"></iconify-icon>
<x-buttonbox>
{% if logged_in_user %}
<a title="Mark as favourite" class="button" href="/{{ username }}/{{ repository }}/favourite">
{% if not is_favourite %}
Favourite
{% else %}
Remove favourite
{% endif %}
</a>
{% endif %}
<button onclick="document.getElementById('clone-info').showModal();">
Clone
</button>
{% endif %}
</x-buttonbox>
{% endblock %}
templates/user-profile.html
@@ -9,41 +9,21 @@
<ul id="repo-tabs">
<li class="{% if active_page == 'profile' %}selected{% endif %}">
<a href="?">
{% if active_page == 'profile' %}
<iconify-icon icon="mdi:account"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:account-outline"></iconify-icon>
{% endif %}
Profile
</a>
</li>
<li class="{% if active_page == 'repositories' %}selected{% endif %}">
<a href="?action=repositories">
{% if active_page == 'repositories' %}
<iconify-icon icon="mdi:folder"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:folder-outline"></iconify-icon>
{% endif %}
Repos
Repositories
</a>
</li>
<li class="{% if active_page == 'followers' %}selected{% endif %}">
<a href="?action=followers">
{% if active_page == 'followers' %}
<iconify-icon icon="mdi:account-arrow-left"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:account-arrow-left-outline"></iconify-icon>
{% endif %}
Followers
</a>
</li>
<li class="{% if active_page == 'following' %}selected{% endif %}">
<a href="?action=follows">
{% if active_page == 'following' %}
<iconify-icon icon="mdi:account-arrow-right"></iconify-icon>
{% else %}
<iconify-icon icon="mdi:account-arrow-right-outline"></iconify-icon>
{% endif %}
Following
</a>
</li>
@@ -53,8 +33,8 @@
{% if logged_in_user %}
<form action="?action=follow" method="POST">
<button type="submit" class="button-round fab">
<iconify-icon icon="mdi:eye"></iconify-icon>
<button type="submit">
Follow
</button>
</form>
{% endif %}