improve navigation link style

This commit is contained in:
Henri Dickson 2024-05-31 13:40:49 -04:00
parent 20ca5fa240
commit 1879aa7c4e
11 changed files with 43 additions and 25 deletions

View file

@ -3,7 +3,7 @@
{% load mastodon %} {% load mastodon %}
{% load thumb %} {% load thumb %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" class="classic-page"> <html lang="zh" class="classic-page nav-page-discover">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -23,7 +23,7 @@
<script src="{% static 'js/podcast.js' %}"></script> <script src="{% static 'js/podcast.js' %}"></script>
</head> </head>
<body> <body>
{% include "_header.html" with current="discover" %} {% include "_header.html" %}
<script> <script>
function _scroll_left(el){ function _scroll_left(el){
el.scrollBy(0-el.offsetWidth, 0); el.scrollBy(0-el.offsetWidth, 0);

View file

@ -6,7 +6,7 @@
{% load duration %} {% load duration %}
{% load thumb %} {% load thumb %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" class="classic-page"> <html lang="zh" class="classic-page nav-page-search">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -21,11 +21,11 @@ body {
min-width: -moz-max-content; min-width: -moz-max-content;
} }
ul li a.current { .nav-links a {
font-weight: bold; color: var(--pico-secondary);
color: var(--pico-primary);
} }
font-weight: bold;
.nav-search, .nav-search,
.nav-search li { .nav-search li {
@ -171,3 +171,21 @@ body {
*/ */
} }
} }
.nav-page-discover .nav-links a.nav-link-discover {
color: var(--pico-primary) !important;
font-weight: bold;
}
.nav-page-feed .nav-links a.nav-link-feed {
color: var(--pico-primary) !important;
font-weight: bold;
}
.nav-page-home .nav-links a.nav-link-home {
color: var(--pico-primary) !important;
font-weight: bold;
}
.nav-page-search .nav-links a.nav-link-search {
color: var(--pico-primary) !important;
font-weight: bold;
}

View file

@ -51,29 +51,27 @@
</ul> </ul>
<ul class="nav-links"> <ul class="nav-links">
<li class="small-only"> <li class="small-only">
<a _="on click toggle .unhide on .nav-search then call #q.focus()" <a class="nav-link-search"
_="on click toggle .unhide on .nav-search then call #q.focus()"
href="#"><i class="fa-solid fa-magnifying-glass"></i></a> href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</li> </li>
<li class="small-only"> <li class="small-only">
<a href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a> <a class="nav-link-discover" href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a>
</li> </li>
<li class="small-only"> <li class="small-only">
<a href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a> <a class="nav-link-feed" href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a>
</li> </li>
<li class="small-only"> <li class="small-only">
<a href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a> <a class="nav-link-home" href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a>
</li> </li>
<li class="large-only"> <li class="large-only">
<a class="{% if current == 'discover' %}secondary{% endif %}" <a class="nav-link-discover" href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
</li> </li>
<li class="large-only"> <li class="large-only">
<a class="{% if current == 'timeline' %}secondary{% endif %}" <a class="nav-link-feed" href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
</li> </li>
<li class="large-only"> <li class="large-only">
<a class="{% if current == 'home' %}secondary{% endif %}" <a class="nav-link-home" href="{% url 'common:me' %}">{% trans 'Home' %}</a>
href="{% url 'common:me' %}">{% trans 'Home' %}</a>
</li> </li>
</ul> </ul>
<ul class="nav-dropdown"> <ul class="nav-dropdown">

View file

@ -110,7 +110,9 @@
<section> <section>
<div class="entity-list" <div class="entity-list"
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}" hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
hx-trigger="load"></div> hx-trigger="load">
<i class="fa-solid fa-compact-disc fa-spin loading"></i>
</div>
</section> </section>
<section> <section>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}

View file

@ -3,7 +3,7 @@
{% load mastodon %} {% load mastodon %}
{% load thumb %} {% load thumb %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" class="classic-page"> <html lang="zh" class="classic-page{% if me %} nav-page-home{% endif %}">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -30,7 +30,7 @@
</head> </head>
<body> <body>
{% if request.user == identity.user %} {% if request.user == identity.user %}
{% include "_header.html" with current="home" %} {% include "_header.html" %}
{% else %} {% else %}
{% include "_header.html" %} {% include "_header.html" %}
{% endif %} {% endif %}

View file

@ -4,7 +4,7 @@
{% load mastodon %} {% load mastodon %}
{% load thumb %} {% load thumb %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" class="feed-page"> <html lang="zh" class="feed-page nav-page-feed">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,7 +16,7 @@
<script src="{% static 'js/podcast.js' %}"></script> <script src="{% static 'js/podcast.js' %}"></script>
</head> </head>
<body> <body>
{% include "_header.html" with current="timeline" %} {% include "_header.html" %}
<main> <main>
<div class="grid__main"> <div class="grid__main">
<h5>{% trans 'Activities from those you follow' %}</h5> <h5>{% trans 'Activities from those you follow' %}</h5>

View file

@ -4,7 +4,7 @@
{% load mastodon %} {% load mastodon %}
{% load thumb %} {% load thumb %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" class="feed-page"> <html lang="zh" class="feed-page nav-page-feed">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -11,7 +11,7 @@
{% include "common_libs.html" %} {% include "common_libs.html" %}
</head> </head>
<body> <body>
{% include "_header.html" with current="data" %} {% include "_header.html" %}
<main> <main>
<div class="grid__main"> <div class="grid__main">
{% if allow_any_site %} {% if allow_any_site %}

View file

@ -11,7 +11,7 @@
{% include "common_libs.html" %} {% include "common_libs.html" %}
</head> </head>
<body> <body>
{% include "_header.html" with current="data" %} {% include "_header.html" %}
<main> <main>
<div class="grid__main"> <div class="grid__main">
<article> <article>

View file

@ -12,7 +12,7 @@
{% include "common_libs.html" %} {% include "common_libs.html" %}
</head> </head>
<body> <body>
{% include "_header.html" with current="data" %} {% include "_header.html" %}
<main> <main>
<div class="grid__main"> <div class="grid__main">
<article> <article>