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

Make design more Neumorphic Dark-Mode

Browse source
This commit is contained in:
Sam Carlton 2020-09-19 20:54:24 -05:00
parent 1386676ae6
commit 2a59db41d3
4 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/link-button.vue
View file

@ -4,7 +4,7 @@
:href="href"
:target="target"
role="button"
class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-600 active:bg-indigo-600 transition duration-150 ease-in-out"
class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-darker neumorphic-shadow hover:bg-indigo-400 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-600 active:bg-indigo-600 transition duration-150 ease-in-out"
>
<slot />
</a>

2
components/navbar.vue
View file

@ -50,7 +50,7 @@
: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',
($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
]"
>
{{ item.label }}

4
layouts/default.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="app-wrapper text-gray-300 bg-gray-800">
<div class="app-wrapper text-gray-300 bg-gradient-to-bl from-dark to-darker bg-fixed">
<Navbar />
<div class="app-main min-h-screen flex items-center">
<nuxt />
@ -31,6 +31,8 @@ html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
/* background: #3e3d42; */
}
*,

6
pages/index.vue
View file

@ -1,10 +1,10 @@
<template>
<section class="container">
<div class="flex flex-col items-center">
<h1 class="title text-6xl font-bold text-center">
Does it 🦾ARM?
<h1 class="title text-6xl font-hairline text-center">
Does it ARM?
</h1>
<h2 class="subtitle text-xl font-bold text-center">
<h2 class="subtitle text-xl font-light text-center">
Apps that are reported to support Apple Silicon
</h2>