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

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" :href="href"
:target="target" :target="target"
role="button" 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 /> <slot />
</a> </a>

2
components/navbar.vue
View file

@ -50,7 +50,7 @@
:href="item.url" :href="item.url"
:class="[ :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', '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 }} {{ item.label }}

4
layouts/default.vue
View file

@ -1,5 +1,5 @@
<template> <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 /> <Navbar />
<div class="app-main min-h-screen flex items-center"> <div class="app-main min-h-screen flex items-center">
<nuxt /> <nuxt />
@ -31,6 +31,8 @@ html {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
box-sizing: border-box; box-sizing: border-box;
/* background: #3e3d42; */
} }
*, *,

6
pages/index.vue
View file

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