diff --git a/package-lock.json b/package-lock.json index 520e16b..ba9a7c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@fortawesome/fontawesome-free": "^6.4.2", + "bulma": "^0.9.4", "dotenv": "^16.3.1", "js-yaml": "^4.1.0" }, @@ -26,6 +27,7 @@ "eslint-plugin-svelte": "^2.30.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "sass": "^1.65.1", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", @@ -1465,6 +1467,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -2341,6 +2348,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz", + "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -3304,6 +3317,23 @@ "rimraf": "bin.js" } }, + "node_modules/sass": { + "version": "1.65.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz", + "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index 5aa6580..5dff627 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "eslint-plugin-svelte": "^2.30.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "sass": "^1.65.1", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", @@ -38,6 +39,7 @@ "type": "module", "dependencies": { "@fortawesome/fontawesome-free": "^6.4.2", + "bulma": "^0.9.4", "dotenv": "^16.3.1", "js-yaml": "^4.1.0" } diff --git a/src/app.html b/src/app.html index effe0d0..6769ed5 100644 --- a/src/app.html +++ b/src/app.html @@ -3,7 +3,7 @@ - + %sveltekit.head% diff --git a/src/app.scss b/src/app.scss new file mode 100644 index 0000000..fab11ac --- /dev/null +++ b/src/app.scss @@ -0,0 +1,119 @@ +html, +body { + height: 100%; + background-color: var(--background); +} + +body { + height: auto; + min-height: 100%; + background-image: var(--background-image); + background-size: cover; + background-position: center; + color: var(--text); + transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; + + a { + color: var(--link); + &:hover { + color: var(--link-hover); + } + } + + .title { + color: var(--text-title); + } + + .subtitle { + color: var(--text-subtitle); + } +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.7rem; + margin-top: 2rem; + margin-bottom: 1rem; + + .fas, + .fab, + .far { + margin-right: 10px; + } + + span { + font-weight: bold; + color: var(--highlight-secondary); + } +} + +header { + color: var(--text-header); + + .dashboard-title { + padding-left: 16px; + } + + .first-line { + .container { + display: flex; + flex-flow: row wrap; + align-items: center; + } + + min-height: 100px; + background-color: var(--highlight-primary); + + h1 { + margin-top: -12px; + font-size: 2rem; + } + .headline { + font-size: 0.9rem; + height: min-content; + } + + .container { + min-height: 80px; + padding: 10px 0; + } + .logo { + i { + vertical-align: top; + padding: 8px 15px; + font-size: 48px; + } + + img { + max-height: 70px; + max-width: 70px; + } + } + } + + .navbar { + background-color: var(--highlight-secondary); + + a { + color: var(--text-header); + padding: 8px 12px; + + &:hover, + &:focus { + color: var(--text-header); + background-color: var(--highlight-hover); + } + } + + .navbar-menu { + background-color: inherit; + } + } + + .navbar-end { + text-align: right; + } +} diff --git a/src/config.yml b/src/config.yml index 98a2876..989cad9 100644 --- a/src/config.yml +++ b/src/config.yml @@ -2,31 +2,30 @@ title: 'Hello World !!' subtitle: 'actually, I am a new pilot.' logo: 'icon-any.svg' icon: 'fa fa-cloud' -asmask: false +asmask: true colors: - dark: - test: red - + dark: + test: red services: - - title: '/Cloud' - subtitle: 'Private Cloud Utilities' - icon: 'fas fa-cloud' - items: - - title: 'NAS' - subtitle: 'Network Attached Storage' - icon: 'fas fa-hard-drive' - target: '_blank' - url: '/NAS' - type: prowlarr + - title: '/Cloud' + subtitle: 'Private Cloud Utilities' + icon: 'fas fa-cloud' + items: + - title: 'NAS' + subtitle: 'Network Attached Storage' + icon: 'fas fa-hard-drive' + target: '_blank' + url: '/NAS' + type: prowlarr - keywords: 'cloud storage files' + keywords: 'cloud storage files' - - title: 'PiHole' - subtitle: 'A DNS Hole' - icon: 'fas fa-hard-drive' - target: '_blank' - url: '/pihole' - type: 'pihole' - keywords: 'cloud storage files' + - title: 'PiHole' + subtitle: 'A DNS Hole' + icon: 'fas fa-hard-drive' + target: '_blank' + url: '/pihole' + type: 'pihole' + keywords: 'cloud storage files' diff --git a/src/lib/components/Brand.svelte b/src/lib/components/Brand.svelte index 8a1d083..7d7d170 100644 --- a/src/lib/components/Brand.svelte +++ b/src/lib/components/Brand.svelte @@ -3,6 +3,7 @@ export let brand: BrandConfig = {}; export let size = 48; + export let color = 'var(--text)'; console.log(brand); function masked() { @@ -11,8 +12,8 @@ @@ -29,11 +30,11 @@ width: var(--size); min-width: min-content; height: var(--size); - font-size: var(--size); + color: var(--mask-color); } .masked { - background: black; + background: var(--mask-color); mask: var(--mask) center no-repeat; mask-size: var(--size); -webkit-mask: var(--mask) center no-repeat; diff --git a/src/lib/components/ThemeVariantButton.svelte b/src/lib/components/ThemeVariantButton.svelte index 4ac937d..6ab2f0f 100644 --- a/src/lib/components/ThemeVariantButton.svelte +++ b/src/lib/components/ThemeVariantButton.svelte @@ -9,12 +9,14 @@ } - + + + {#if $themeVariant == 'default'} + + {:else if $themeVariant == 'light'} + + {:else if $themeVariant == 'dark'} + + {/if} + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index bf2c504..c848f11 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,8 +1,31 @@ -
- -
+ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ac4e802..ad31de1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -17,7 +17,7 @@ function renderColorVariables() { return `