Keycapsss/awesome-mechanical-keyboard
1
1
Fork 0
mirror of https://github.com/Keycapsss/awesome-mechanical-keyboard.git synced 2024-12-01 03:46:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dark-mode

Browse Source
This commit is contained in:
BenRoe 2020-02-15 00:31:34 +01:00
parent 14ea7368b7
commit cdd8c4279f
8 changed files with 108 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/css/tailwind.css
View File

@ -46,5 +46,22 @@ td {
@apply list-disc;
}
@screen dark-mode {
body {
@apply text-gray-400;
}
.content a:hover {
@apply border-primary-light;
}
tr {
@apply border-gray-800;
}
.v--modal {
@apply bg-gray-900 !important;
@apply border-2 border-gray-500;
}
}
@tailwind components;
@tailwind utilities;

2
src/components/SwitchDetailRow.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-4 bg-gray-200 rounded-b">
<div class="p-4 bg-gray-200 dark-mode:bg-gray-900 rounded-b">
<div class="flex flex-wrap">
<div class="md:w-1/4 w-1/3 mb-4">
<div class="font-bold mb-1">

2
src/layouts/Default.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content-wrapper">
<div class="content-wrapper dark-mode:bg-gray-900">
<Header />
<div class="container w-full flex flex-wrap mx-auto px-4 pb-4">

155
src/layouts/Docs.vue
View File

@ -1,7 +1,7 @@
<template>
<Layout>
<!-- Sidebar Nav -->
<div v-if="links" class="w-full lg:w-1/5 p-6 pl-0 text-gray-800 leading-normal">
<div v-if="links" class="w-full lg:w-1/5 p-6 pl-0 text-gray-800 dark-mode:text-gray-400 leading-normal">
<template v-for="(group, i1) in links">
<!-- Section headline not needed -->
<!-- <p class="font-bold py-2 lg:pb-6 text-gray-700"
@ -11,7 +11,7 @@
<!-- Fake dropdown field as menu toggle for mobile view -->
<div class="block lg:hidden sticky inset-0">
<button id="side-nav-toggle"
class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-500 hover:border-primary appearance-none focus:outline-none">
class="flex w-full justify-end px-3 py-3 bg-white dark-mode:bg-gray-900 lg:bg-transparent border rounded border-gray-500 dark-mode:border-gray-700 hover:border-primary appearance-none focus:outline-none">
<svg class="fill-current h-4 float-right"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
@ -20,7 +20,7 @@
</button>
</div>
<div id="menu-content"
class="w-full inset-0 h-64 lg:h-auto overflow-x-hidden overflow-y-scroll lg:overflow-y-hidden lg:block mt-0 border border-gray-400 rounded-b lg:border-transparent bg-white shadow lg:shadow-none lg:bg-transparent z-20"
class="w-full inset-0 h-64 lg:h-auto overflow-x-hidden overflow-y-scroll lg:overflow-y-hidden lg:block mt-0 border border-gray-400 rounded-b lg:border-transparent dark-mode:border-transparent shadow lg:shadow-none lg:bg-transparent z-20"
:class="{hidden: !showDropdownMenu}">
<ul class="list-reset ml-4 lg:ml-0 mt-4 lg:mt-0">
<li v-for="(item, i2) in group.items"
@ -61,7 +61,7 @@
</div>
<!-- Content -->
<div class="w-full lg:w-4/5 py-6 lg:p-6 lg:mt-0 leading-normal bg-white">
<div class="w-full lg:w-4/5 py-6 lg:p-6 lg:mt-0 leading-normal">
<slot />
<!--Back link -->
<div class="w-full lg:ml-auto mt-8 text-base">
@ -91,84 +91,83 @@
</a>
</p>
<ClientOnly>
<modal
name="contact-form"
:adaptive="true"
:scrollable="true"
height="auto"
>
<div class="mb-4 mt-4 pb-4 border-b font-bold text-xl text-center text-primary">
Suggest new content
</div>
<div class="absolute top-0 right-0">
<button v-on:click="modalHide">
<font-awesome :icon="['far', 'window-close']" class="m-6 text-gray-500 hover:text-primary-light"/>
</button>
</div>
<div class="m-6">
<form
name="newContent"
method="post"
v-on:submit.prevent="handleSubmit"
action="/success/"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<ClientOnly>
<modal
name="contact-form"
:adaptive="true"
:scrollable="true"
height="auto"
>
<div class="mb-4 mt-4 pb-4 border-b dark-mode:border-gray-800 font-bold text-xl text-center text-primary">
Suggest new content
</div>
<div class="absolute top-0 right-0">
<button v-on:click="modalHide">
<font-awesome :icon="['far', 'window-close']" class="m-6 text-gray-500 hover:text-primary-light"/>
</button>
</div>
<div class="m-6">
<form
name="newContent"
method="post"
v-on:submit.prevent="handleSubmit"
action="/success/"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="newContent" />
<p hidden>
<label>
Don’t fill this out: <input name="bot-field" />
</label>
</p>
<input type="hidden" name="form-name" value="newContent" />
<p hidden>
<label>
Don’t fill this out: <input name="bot-field" />
</label>
</p>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 pb-2">
<label for="name" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Project Name
</label>
</div>
<div class="md:w-2/3">
<input type="text" name="name" v-model="formData.name" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 pb-2">
<label for="name" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Project Name
</label>
</div>
<div class="md:w-2/3">
<input type="text" name="name" v-model="formData.name" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 pb-2">
<label for="link" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Link
</label>
</div>
<div class="md:w-2/3">
<input type="url" name="link" v-model="formData.link" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 self-start">
<label for="description" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Short Description
</label>
</div>
<div class="md:w-2/3">
<textarea name="description" maxlength="300" v-model="formData.description" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 pb-2">
<label for="link" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Link
</label>
</div>
<div class="md:w-2/3">
<input type="url" name="link" v-model="formData.link" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3 self-start">
<label for="description" class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4">
Short Description
</label>
</div>
<div class="md:w-2/3">
<textarea name="description" maxlength="300" v-model="formData.description" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3"></div>
<div class="md:w-1/3">
<button type="submit" class="shadow bg-primary hover:bg-primary-light focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">Submit</button>
</div>
</div>
</form>
</div>
</modal>
</ClientOnly>
<div class="md:flex md:items-center">
<div class="md:w-1/3"></div>
<div class="md:w-1/3">
<button type="submit" class="shadow bg-primary hover:bg-primary-light focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">Submit</button>
</div>
</div>
</form>
</div>
</modal>
</ClientOnly>
</div>
</Layout>

8
src/layouts/partials/Footer.vue
View File

@ -1,10 +1,10 @@
<template>
<footer class="bg-gray-100 border-t border-gray-300">
<footer class="bg-gray-100 dark-mode:bg-gray-900 border-t border-gray-300 dark-mode:border-gray-800">
<div class="container mx-auto flex py-8">
<div class="w-full mx-auto flex flex-wrap">
<div class="flex w-full">
<div class="px-8">
<h3 class="font-bold text-gray-900">
<h3 class="font-bold text-gray-900 dark-mode:text-gray-600">
<font-awesome :icon="['fas', 'heart']" class="mr-1" size="xs"></font-awesome>
Sponsor
</h3>
@ -23,7 +23,9 @@
<div class="flex w-full">
<div class="px-8">
<h3 class="font-bold text-gray-900">Contributors</h3>
<h3 class="font-bold text-gray-900 dark-mode:text-gray-600">
Contributors
</h3>
<ul class="flex flex-wrap">
<li v-for="edge in $static.allContributors.edges" :key="edge.node.id"
class="m-4 text-xs text-gray-600">

4
src/layouts/partials/Header.vue
View File

@ -1,6 +1,6 @@
<template>
<header class="bg-white">
<nav id="header" class="w-full z-10 top-0 bg-white border-b border-gray-300">
<header>
<nav id="header" class="w-full z-10 top-0 border-b border-gray-300 dark-mode:border-gray-800">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-4">
<!-- Logo -->
<div class="pl-4 flex items-center">

4
src/pages/news.vue
View File

@ -14,8 +14,8 @@
</p>
<div class="text-sm mt-1">
<div class="text-gray-500 leading-none">
<font-awesome :icon="['fas', 'user-ninja']" class="mr-1 text-gray-300"></font-awesome>
<div class="text-gray-500 dark-mode:text-gray-600 leading-none">
<font-awesome :icon="['fas', 'user-ninja']" class="mr-1 text-gray-300 dark-mode:text-gray-600"></font-awesome>
{{ edge.node.author }}
{{ edge.node.date }}
</div>

3
tailwind.config.js
View File

@ -1,6 +1,9 @@
module.exports = {
theme: {
extend: {
screens: {
'dark-mode': { raw: '(prefers-color-scheme: dark)' },
},
colors: {
'primary': {
light: '#4ECDC4',