Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added icon emojis for nav, merged 'Home' nav item with arm logo, added container to nav ad, improved responsiveness

Browse source
This commit is contained in:
j5ive 2022-09-01 20:14:37 -05:00
parent 7f4d93a8fd
commit 0e6363d83f
2 changed files with 80 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/css/tailwind.css
View file

@ -145,6 +145,19 @@ html {
inset 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12); inset 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
} }
@media screen and (min-width: 1040px) {
.hover\:neumorphic-shadow-logo:hover
{
box-shadow:
-0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
-.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12),
inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05),
inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05);
}
}
.bg-blur, .bg-blur,
.hover\:bg-blur:hover { .hover\:bg-blur:hover {
backdrop-filter: blur(15px); backdrop-filter: blur(15px);

108
components/navbar.vue
View file

@ -3,7 +3,8 @@
<nav <nav
:class="[ :class="[
'fixed top-0 left-0 right-0 flex z-navbar', 'fixed top-0 left-0 right-0 flex z-navbar',
'bg-gradient-to-bl from-dark to-darker bg-fixed' 'bg-gradient-to-bl from-dark to-darker bg-fixed',
'justify-center items-center items-baseline'
]" ]"
> >
<div class="mobile-menu-container flex items-center lg:hidden p-2"> <div class="mobile-menu-container flex items-center lg:hidden p-2">
@ -52,7 +53,7 @@
<div <div
id="mobile-menu" id="mobile-menu"
:class="[ :class="[
'mobile-menu hidden target:visible lg:hidden absolute bg-blur top-0 left-0 right-0 w-full py-3 px-2', 'mobile-menu hidden target:visible lg:hidden absolute bg-blur top-0 left-0 right-0 w-full py-3 px-2 pr-0',
]" ]"
> >
<!-- Mobile menu button --> <!-- Mobile menu button -->
@ -80,7 +81,13 @@
</svg> </svg>
</a> </a>
<div class="px-2 pt-2 pb-3 lg:px-3"> <div class="px-2 pt-2 pb-3 lg:px-3 md:pt-5">
<a
href="/"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700"
>
🦾 Home
</a>
<a <a
v-for="(item, index) in items" v-for="(item, index) in items"
:key="index" :key="index"
@ -90,36 +97,56 @@
(currentPath === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700' (currentPath === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
]" ]"
> >
{{ item.emoji }}
{{ item.label }} {{ item.label }}
</a> </a>
</div> </div>
<hr> <hr>
</div> </div>
<div class="reponsive-menu-container relative w-full max-w-7xl mx-auto lg:px-6"> <div class="reponsive-menu-container relative w-full max-w-7xl ml-0 mb-1 mt-1 lg:mx-2 md:mr-2 md:mt-2">
<div class="flex justify-between h-16"> <div class="flex justify-between">
<div class="flex"> <!-- responsive logo -->
<div class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3"> <div class="flex-shrink-0 flex items-center">
<div>🦾</div> <a
</div> href="/"
<div class="hidden lg:ml-6 lg:flex lg:items-center space-x-4"> class="group h-full w-full lg:w-[110px] lg:h-[80px] lg:hover:bg-darker hover:neumorphic-shadow-logo lg:px-3 py-2 lg:rounded-md focus:outline-none lg:focus:text-white lg:focus:bg-gray-700 lg:leading-tight lg:transition lg:duration-150 lg:ease-in-out text-center whitespace-nowrap"
<a >
v-for="(item, index) in items" <div
:key="index" class="lg:text-5xl text-3xl md:text-4xl lg:group-hover:text-xl"
:href="item.url"
:class="[
'px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
(currentPath === item.url) ? 'text-white bg-darker hover:text-white neumorphic-shadow' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
]"
> >
{{ item.label }} 🦾
</a> </div>
</div> <div
class="hidden lg:group-hover:block text-gray-300 text-sm font-medium leading-4"
>
Home
</div>
</a>
</div> </div>
<div class="flex items-center"> <!-- nav items desktop view -->
<div class="flex-shrink-0"> <div class="hidden lg:flex lg:items-center grow justify-evenly">
<!-- <span class="rounded-md shadow-sm"> <a
v-for="(item, index) in items"
:key="index"
:href="item.url"
:class="[
'px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-center leading-tight whitespace-nowrap',(currentPath === item.url) ? 'text-white bg-darker hover:text-white neumorphic-shadow' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
]"
>
<div class="text-xl">
{{ item.emoji }}
</div>
<div>
{{ item.label }}
</div>
</a>
</div>
<!-- advertisement -->
<div class="flex shrink items-center">
<!-- <span class="rounded-md shadow-sm">
<LinkButton <LinkButton
href="https://prf.hn/l/daWX1vk" href="https://prf.hn/l/daWX1vk"
class="relative inline-flex items-center border-indigo-500" class="relative inline-flex items-center border-indigo-500"
@ -138,18 +165,15 @@
</span> --> </span> -->
<a <a
:class="[ :class="[
'underline px-3 py-2 rounded-md text-xs font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out', 'underline px-3 py-2 rounded-md text-xs font-medium focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out bg-black ml-4 m-1',
//(currentPath === item.url) ? 'text-white bg-darker hover:text-white neumorphic-shadow' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow' ]"
]" href="https://prf.hn/l/daWX1vk"
href="https://prf.hn/l/daWX1vk" >
> 🅿️ Windows on ARM now works on Parallels
🅿️ Windows on ARM now works on Parallels </a>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <!--
@ -158,7 +182,7 @@
Menu open: "block", Menu closed: "hidden" Menu open: "block", Menu closed: "hidden"
--> -->
</nav> </nav>
</template> </template>
<script> <script>
@ -176,31 +200,33 @@ export default {
type: Array, type: Array,
default: () => ([ default: () => ([
{ {
label: 'Home', emoji: '🤖',
url: '/',
},
{
label: 'Categories', label: 'Categories',
url: '/categories', url: '/categories',
}, },
{ {
emoji: '💻',
label: 'Devices', label: 'Devices',
url: '/devices', url: '/devices',
}, },
{ {
emoji: '🚀',
label: 'Benchmarks', label: 'Benchmarks',
url: '/benchmarks', url: '/benchmarks',
}, },
{ {
emoji: '🍺',
label: 'Homebrew', label: 'Homebrew',
url: '/kind/homebrew', url: '/kind/homebrew',
}, },
{ {
emoji: '🎮',
label: 'Games', label: 'Games',
url: '/games', url: '/games',
}, },
{ {
label: 'Apple Silicon App Test', emoji: '🧪',
label: 'App Test',
url: '/apple-silicon-app-test', url: '/apple-silicon-app-test',
}, },
]) ])