boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-02-27 05:32:08 +00:00
Code Issues Projects Releases Wiki Activity

🐛 fixes wrapping in header

Browse Source 
closes: #218
This commit is contained in:
Greg Newman
2023-05-10 08:27:14 -04:00
parent 7b05185f9c
commit 78a5dcb939
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/css/styles.css
View File

@@ -1409,6 +1409,22 @@ input[type=file] {
width: 200px;
}
.w-80 {
width: 20rem;
}
.w-60 {
width: 15rem;
}
.w-48 {
width: 12rem;
}
.w-44 {
width: 11rem;
}
.min-w-0 {
min-width: 0px;
}

14
templates/includes/_header.html
View File

@@ -18,16 +18,16 @@
</a>
</div>
<div class="flex pt-5 w-full">
<nav class="relative items-center pl-6 space-x-10 w-3/4 text-lg text-left">
<nav class="relative items-center pl-6 space-x-10 w-full text-lg text-left">
<a href="{% url 'news' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">News</a>
<a href="{% url 'docs' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Learn</a>
<a href="/forum/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Community</a>
<a href="/libraries/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Libraries</a>
<a href="#" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Releases</a>
</nav>
<nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
<nav class="items-center space-x-5 text-right float-right w-44" x-data="{ 'searchOpen': false }">
<span class="relative">
<i class="inline-flex -mt-1 cursor-pointer text-slate fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
<i class="inline -mt-1 cursor-pointer text-slate fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
<div x-show="searchOpen"
@click.away="searchOpen = false"
x-transition:enter="transition ease-out duration-100"
@@ -63,7 +63,7 @@
</div>
</span>
<a href="{% url 'support' %}" class="inline-flex"><i class="text-slate fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>
<a href="{% url 'support' %}" class="inline"><i class="text-slate fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>
<!-- theme switcher -->
<span x-data="{ 'modeOpen': false }" class="relative">
@@ -120,12 +120,12 @@
<span x-data="{ 'userOpen': false }" class="relative">
{% if not user.is_authenticated %}
<a href="{% url 'account_signup' %}" class="font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
<a href="{% url 'account_signup' %}" class="inline font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
{% else %}
{% if user.image %}
<img src="{{ user.image.url }}" alt="user" class="inline-flex rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
<img src="{{ user.image.url }}" alt="user" class="inline rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
{% else %}
<i class="inline-flex mr-2 text-5xl fas fa-user text-charcoal dark:text-white/60"></i>
<i class="inline mr-2 text-5xl fas fa-user text-charcoal dark:text-white/60"></i>
{% endif %}
{% endif %}