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

🎨 cleanup and styling of switcher dropdown

Browse Source
This commit is contained in:
Greg Newman
2023-04-26 14:06:34 -04:00
parent f009e91019
commit ff4f3e3023
2 changed files with 78 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
static/css/styles.css
View File

@@ -865,14 +865,6 @@ input[type=file] {
pointer-events: none;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
@@ -998,10 +990,6 @@ input[type=file] {
margin: 0px;
}
.-m-\[1000px\] {
margin: -1000px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -1282,10 +1270,6 @@ input[type=file] {
height: 3rem;
}
.h-0 {
height: 0px;
}
.max-h-\[470px\] {
max-height: 470px;
}
@@ -1334,10 +1318,6 @@ input[type=file] {
width: 200px;
}
.w-6 {
width: 1.5rem;
}
.w-32 {
width: 8rem;
}
@@ -1346,6 +1326,10 @@ input[type=file] {
width: 30px;
}
.w-6 {
width: 1.5rem;
}
.w-\[90\%\] {
width: 90%;
}
@@ -1378,10 +1362,6 @@ input[type=file] {
width: 0.25rem;
}
.w-0 {
width: 0px;
}
.min-w-0 {
min-width: 0px;
}
@@ -1612,6 +1592,12 @@ input[type=file] {
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1754,15 +1740,20 @@ input[type=file] {
background-color: rgb(221 231 236 / 0.6);
}
.bg-charcoal {
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-green\/10 {
background-color: rgb(90 213 153 / 0.1);
}
.bg-charcoal {
--tw-bg-opacity: 1;
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
}
.bg-orange {
--tw-bg-opacity: 1;
background-color: rgb(255 159 0 / var(--tw-bg-opacity));
@@ -1772,11 +1763,6 @@ input[type=file] {
background-color: rgb(23 42 52 / 0.6);
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(5 26 38 / var(--tw-bg-opacity));
@@ -1800,15 +1786,6 @@ input[type=file] {
background-color: rgb(49 74 87 / var(--tw-bg-opacity));
}
.bg-stone {
--tw-bg-opacity: 1;
background-color: rgb(221 231 236 / var(--tw-bg-opacity));
}
.bg-slate\/60 {
background-color: rgb(49 74 87 / 0.6);
}
.bg-opacity-70 {
--tw-bg-opacity: 0.7;
}
@@ -1827,10 +1804,6 @@ input[type=file] {
--tw-gradient-to: #FF9F00;
}
.fill-slate\/80 {
fill: rgb(49 74 87 / 0.8);
}
.fill-gold {
fill: #F4CA1F;
}
@@ -2152,6 +2125,10 @@ input[type=file] {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-thin {
font-weight: 100;
}
@@ -2160,10 +2137,6 @@ input[type=file] {
font-weight: 300;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
@@ -2265,6 +2238,21 @@ input[type=file] {
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-sky-600 {
--tw-text-opacity: 1;
color: rgb(2 132 199 / var(--tw-text-opacity));
}
.text-sky-400 {
--tw-text-opacity: 1;
color: rgb(56 189 248 / var(--tw-text-opacity));
}
.text-sky-500 {
--tw-text-opacity: 1;
color: rgb(14 165 233 / var(--tw-text-opacity));
}
.placeholder-gray-500::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2382,23 +2370,23 @@ input[type=file] {
background-color: rgb(49 74 87 / var(--tw-bg-opacity));
}
.hover\:fill-orange:hover {
fill: #FF9F00;
}
.hover\:text-orange:hover {
--tw-text-opacity: 1;
color: rgb(255 159 0 / var(--tw-text-opacity));
}
.hover\:text-gold:hover {
--tw-text-opacity: 1;
color: rgb(244 202 31 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:text-gold:hover {
--tw-text-opacity: 1;
color: rgb(244 202 31 / var(--tw-text-opacity));
.hover\:text-gold\/60:hover {
color: rgb(244 202 31 / 0.6);
}
.focus\:text-charcoal:focus {
@@ -2422,50 +2410,18 @@ input[type=file] {
color: rgb(255 159 0 / var(--tw-text-opacity));
}
.dark .dark\:visible {
visibility: visible;
}
.dark .dark\:invisible {
visibility: hidden;
}
.dark .dark\:-m-\[1000px\] {
margin: -1000px;
}
.dark .dark\:-m-0 {
margin: -0px;
}
.dark .dark\:inline-block {
display: inline-block;
}
.dark .dark\:inline-flex {
display: inline-flex;
.dark .dark\:inline {
display: inline;
}
.dark .dark\:hidden {
display: none;
}
.dark .dark\:h-0 {
height: 0px;
}
.dark .dark\:h-auto {
height: auto;
}
.dark .dark\:h-\[16px\] {
height: 16px;
}
.dark .dark\:w-0 {
width: 0px;
}
.dark .dark\:border-slate {
--tw-border-opacity: 1;
border-color: rgb(49 74 87 / var(--tw-border-opacity));
@@ -2481,14 +2437,6 @@ input[type=file] {
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
}
.dark .dark\:fill-white\/40 {
fill: rgb(255 255 255 / 0.4);
}
.dark .dark\:font-semibold {
font-weight: 600;
}
.dark .dark\:font-medium {
font-weight: 500;
}
@@ -2506,15 +2454,25 @@ input[type=file] {
color: rgb(255 255 255 / 0.4);
}
.dark .dark\:text-stone {
--tw-text-opacity: 1;
color: rgb(221 231 236 / var(--tw-text-opacity));
}
.dark .dark\:text-white\/60 {
color: rgb(255 255 255 / 0.6);
}
.dark .dark\:text-sky-700 {
--tw-text-opacity: 1;
color: rgb(3 105 161 / var(--tw-text-opacity));
}
.dark .dark\:text-sky-600 {
--tw-text-opacity: 1;
color: rgb(2 132 199 / var(--tw-text-opacity));
}
.dark .dark\:text-charcoal {
--tw-text-opacity: 1;
color: rgb(23 42 52 / var(--tw-text-opacity));
}
.dark .dark\:ring-gray-500 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -2530,6 +2488,14 @@ input[type=file] {
color: rgb(244 202 31 / var(--tw-text-opacity));
}
.dark .dark\:hover\:text-gold\/60:hover {
color: rgb(244 202 31 / 0.6);
}
.dark .dark\:hover\:text-gold\/80:hover {
color: rgb(244 202 31 / 0.8);
}
@media (min-width: 640px) {
.sm\:mt-24 {
margin-top: 6rem;

13
templates/includes/_header.html
View File

@@ -25,7 +25,7 @@
<a href="/libraries/" class="font-semibold dark:font-medium text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Libraries</a>
<a href="#" class="font-semibold dark:font-medium text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Releases</a>
</nav>
<nav class="items-center space-x-3 w-1/4 text-right" x-data="{ 'searchOpen': false }">
<nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
<span class="relative">
<i class="text-charcoal dark:text-white/50 hover:text-orange dark:hover:text-orange fas fa-search inline-flex -mt-1 cursor-pointer" @click="searchOpen = !searchOpen"></i>
<div x-show="searchOpen"
@@ -48,7 +48,7 @@
<form action="https://www.google.com/search" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="boost.org">
<input autocomplete="on"
class="py-2 px-3 text-xs text-charcoal dark:text-white rounded-lg border-gray-300 dark:border-slate bg-white dark:charcoal"
class="py-2 px-3 text-xs text-charcoal dark:text-charcoal rounded-lg border-gray-300 dark:border-slate bg-white dark:bg-charcoal"
name="q"
placeholder="Search Boost.org"
required="required"
@@ -67,7 +67,12 @@
<!-- theme switcher -->
<span x-data="{ 'modeOpen': false }" class="relative">
<i class="fas fa-sun inline-block cursor-pointer text-orange dark:text-white/50 hover:text-gold dark:hover:text-gold" @click="modeOpen = !modeOpen"></i>
<span class="dark:hidden">
<i class="fas fa-sun inline-block cursor-pointer text-sky-500 dark:text-white/50 hover:text-gold dark:hover:text-gold" @click="modeOpen = !modeOpen"></i>
</span>
<span class="hidden dark:inline">
<i class="fas fa-moon inline-block cursor-pointer text-orange dark:text-sky-600 hover:text-gold/60 dark:hover:text-gold/80" @click="modeOpen = !modeOpen"></i>
</span>
<div
x-show="modeOpen" x-cloak
@@ -98,6 +103,7 @@
:class="{'font-bold': mode === 'light', 'font-thin': mode !== 'light' }"
class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
>
<i class="fas fa-sun inline-block text-gold mr-1"></i>
Light Mode
</a>
@@ -106,6 +112,7 @@
:class="{'font-bold': mode === 'dark', 'font-thin': mode !== 'dark' }"
class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
>
<i class="fas fa-moon inline-block text-sky-600 mr-1"></i>
Dark Mode
</a>
</div>