From eb5b81f3997bf9b1218b6ab14bda0e551f8a4cd9 Mon Sep 17 00:00:00 2001 From: F53 Date: Thu, 9 Nov 2023 23:34:34 -0700 Subject: [PATCH] colors and icons --- assets/styles/misc.scss | 5 ++- nuxt.config.ts | 2 +- package-lock.json | 93 +++++++++++++++++++++++++++++++++++++++++ package.json | 1 + pages/index.vue | 55 ++++++++++++++++-------- 5 files changed, 137 insertions(+), 19 deletions(-) diff --git a/assets/styles/misc.scss b/assets/styles/misc.scss index b56a5f6..edea11b 100644 --- a/assets/styles/misc.scss +++ b/assets/styles/misc.scss @@ -1,7 +1,10 @@ // dark! :root { color-scheme: dark; - background-color: #0c0c0c; + --accent-dark: hsl(270, 90%, 5%); + --accent-light: hsl(293, 88%, 84%); + + background-color: var(--accent-dark); } body { background-color: transparent; diff --git a/nuxt.config.ts b/nuxt.config.ts index 5c3c378..2456de5 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -2,7 +2,7 @@ export default defineNuxtConfig({ devtools: { enabled: true }, typescript: { strict: true, typeCheck: true, shim: false }, - modules: ['nuxt-lodash'], + modules: ['nuxt-lodash', 'nuxt-icon'], css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss'], diff --git a/package-lock.json b/package-lock.json index b442670..306e9d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "eslint": "^8.52.0", "lint-staged": "^15.0.2", "nuxt": "^3.8.0", + "nuxt-icon": "^0.6.5", "nuxt-lodash": "^2.5.3", "simple-git-hooks": "^2.9.0", "typescript": "^5.2.2", @@ -1339,6 +1340,36 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "node_modules/@iconify/collections": { + "version": "1.0.353", + "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.353.tgz", + "integrity": "sha512-Xm5jFJyR+Z7xwfYZdipnaAQVZZXBVcf60ZXn6ZTmfnt2vPEcUYG2dy1fY6O50/g+iRyJxnIRLHrW61EHdGQQ4g==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } + }, + "node_modules/@iconify/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", + "dev": true + }, + "node_modules/@iconify/vue": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz", + "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==", + "dev": true, + "dependencies": { + "@iconify/types": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/cyberalien" + }, + "peerDependencies": { + "vue": ">=3" + } + }, "node_modules/@ioredis/commands": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz", @@ -9752,6 +9783,68 @@ } } }, + "node_modules/nuxt-icon": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.5.tgz", + "integrity": "sha512-+NwwFkVRsqCd3kRR2B1IPPpfERrjxGhco/JwtvuIa3fti5MNauTlPJBBQiQsoljOSwwVeZS6Ie67jr56m2runA==", + "dev": true, + "dependencies": { + "@iconify/collections": "^1.0.352", + "@iconify/vue": "^4.1.1", + "@nuxt/devtools-kit": "^1.0.0", + "@nuxt/kit": "^3.8.1" + } + }, + "node_modules/nuxt-icon/node_modules/@nuxt/kit": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.8.1.tgz", + "integrity": "sha512-DrhG1Z85iH68QOTkgfb0HVfM2g7+CfcMWrFWMDwck9ofyM2RXQUZyfmvMedwBnui1AjjpgpLO9078yZM+RqNUg==", + "dev": true, + "dependencies": { + "@nuxt/schema": "3.8.1", + "c12": "^1.5.1", + "consola": "^3.2.3", + "defu": "^6.1.3", + "globby": "^13.2.2", + "hash-sum": "^2.0.0", + "ignore": "^5.2.4", + "jiti": "^1.21.0", + "knitwork": "^1.0.0", + "mlly": "^1.4.2", + "pathe": "^1.1.1", + "pkg-types": "^1.0.3", + "scule": "^1.0.0", + "semver": "^7.5.4", + "ufo": "^1.3.1", + "unctx": "^2.3.1", + "unimport": "^3.4.0", + "untyped": "^1.4.0" + }, + "engines": { + "node": "^14.18.0 || >=16.10.0" + } + }, + "node_modules/nuxt-icon/node_modules/@nuxt/schema": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.8.1.tgz", + "integrity": "sha512-fSaWRcI/2mUskfTZTGSnH6Ny0x05CRzylbVn6WFV0d6UEKIVy42Qd6n+h7yoFfp4cq4nji6u16PT4SqS1DEhsw==", + "dev": true, + "dependencies": { + "@nuxt/ui-templates": "^1.3.1", + "consola": "^3.2.3", + "defu": "^6.1.3", + "hookable": "^5.5.3", + "pathe": "^1.1.1", + "pkg-types": "^1.0.3", + "std-env": "^3.4.3", + "ufo": "^1.3.1", + "unimport": "^3.4.0", + "untyped": "^1.4.0" + }, + "engines": { + "node": "^14.18.0 || >=16.10.0" + } + }, "node_modules/nuxt-lodash": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/nuxt-lodash/-/nuxt-lodash-2.5.3.tgz", diff --git a/package.json b/package.json index 1fd7c6f..905c44c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "eslint": "^8.52.0", "lint-staged": "^15.0.2", "nuxt": "^3.8.0", + "nuxt-icon": "^0.6.5", "nuxt-lodash": "^2.5.3", "simple-git-hooks": "^2.9.0", "typescript": "^5.2.2", diff --git a/pages/index.vue b/pages/index.vue index 51cea7f..ffa0930 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -14,33 +14,38 @@

TODO:

@@ -72,17 +77,33 @@ display: flex; flex-wrap: wrap; - a { - display: flex; - gap: .25rem; - justify-content: center; - align-items: center; - text-decoration: none; + li { + background-color: var(--accent-light); + &, > * { color: var(--accent-dark); } + &:hover { filter: brightness(0.95); scale: 0.95; } + &:active { filter: brightness(0.9); scale: 1.05; } + transition: scale 0.6s cubic-bezier(0.34, 3, 0.64, 1); + + font-weight: bold; + padding: .5rem .75rem; + border-radius: 1rem; cursor: pointer; - } - img { - height: 1.5rem; + + a { + display: flex; + gap: .25rem; + justify-content: center; + align-items: center; + text-decoration: none; + + > svg { + height: 1.25rem; + width: 1.25rem; + } + } } } + + h1 { color: var(--accent-light); } }