atuleu/flanders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css-ing to death of the writer

Browse Source 
I hate css.
This commit is contained in:
Alexandre Tuleu
2023-08-14 17:14:46 +02:00
parent 6f6178b066
commit 3cc52e37b2
9 changed files with 245 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2", "@fortawesome/fontawesome-free": "^6.4.2",
"bulma": "^0.9.4",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"js-yaml": "^4.1.0" "js-yaml": "^4.1.0"
}, },
@@ -26,6 +27,7 @@
"eslint-plugin-svelte": "^2.30.0", "eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"sass": "^1.65.1",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
@@ -1465,6 +1467,11 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/busboy": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -2341,6 +2348,12 @@
"node": ">= 4" "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": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3304,6 +3317,23 @@
"rimraf": "bin.js" "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": { "node_modules/semver": {
"version": "7.5.4", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",

2
package.json
View File

@@ -28,6 +28,7 @@
"eslint-plugin-svelte": "^2.30.0", "eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"sass": "^1.65.1",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
@@ -38,6 +39,7 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2", "@fortawesome/fontawesome-free": "^6.4.2",
"bulma": "^0.9.4",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"js-yaml": "^4.1.0" "js-yaml": "^4.1.0"
} }

2
src/app.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

119
src/app.scss Normal file
View File

@@ -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;
}
}

3
src/config.yml
View File

@@ -2,13 +2,12 @@ title: 'Hello World !!'
subtitle: 'actually, I am a new pilot.' subtitle: 'actually, I am a new pilot.'
logo: 'icon-any.svg' logo: 'icon-any.svg'
icon: 'fa fa-cloud' icon: 'fa fa-cloud'
asmask: false asmask: true
colors: colors:
dark: dark:
test: red test: red
services: services:
- title: '/Cloud' - title: '/Cloud'
subtitle: 'Private Cloud Utilities' subtitle: 'Private Cloud Utilities'

11
src/lib/components/Brand.svelte
View File

@@ -3,6 +3,7 @@
export let brand: BrandConfig = {}; export let brand: BrandConfig = {};
export let size = 48; export let size = 48;
export let color = 'var(--text)';
console.log(brand); console.log(brand);
function masked() { function masked() {
@@ -11,8 +12,8 @@
</script> </script>
<div <div
class="logo container" class="container"
style="--size: {size}px; --mask: url({brand.logo || ''})" style="--size: {size}px; --mask: url({brand.logo || ''}); --mask-color: {color}"
class:masked={masked()} class:masked={masked()}
> >
{#if brand.logo} {#if brand.logo}
@@ -20,7 +21,7 @@
<img src={brand.logo} alt="logo" /> <img src={brand.logo} alt="logo" />
{/if} {/if}
{:else if brand.icon} {:else if brand.icon}
<i class="fa-fw {brand.icon}" /> <i class={brand.icon} />
{/if} {/if}
</div> </div>
@@ -29,11 +30,11 @@
width: var(--size); width: var(--size);
min-width: min-content; min-width: min-content;
height: var(--size); height: var(--size);
font-size: var(--size); color: var(--mask-color);
} }
.masked { .masked {
background: black; background: var(--mask-color);
mask: var(--mask) center no-repeat; mask: var(--mask) center no-repeat;
mask-size: var(--size); mask-size: var(--size);
-webkit-mask: var(--mask) center no-repeat; -webkit-mask: var(--mask) center no-repeat;

8
src/lib/components/ThemeVariantButton.svelte
View File

@@ -9,12 +9,14 @@
} }
</script> </script>
<button on:click={next}> <a on:click={next}>
<span class="icon">
{#if $themeVariant == 'default'} {#if $themeVariant == 'default'}
<i class="fa fa-circle-half-stroke" /> <i class="fas fa-circle-half-stroke" />
{:else if $themeVariant == 'light'} {:else if $themeVariant == 'light'}
<i class="fa-regular fa-circle" /> <i class="fa-regular fa-circle" />
{:else if $themeVariant == 'dark'} {:else if $themeVariant == 'dark'}
<i class="fa-solid fa-circle" /> <i class="fa-solid fa-circle" />
{/if} {/if}
</button> </span>
</a>

29
src/routes/+layout.svelte
View File

@@ -1,8 +1,31 @@
<script lang="ts"> <script lang="ts">
import '/src/app.scss';
import 'bulma/css/bulma.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fortawesome/fontawesome-free/css/all.min.css';
import { themeVariant } from '$lib/themeVariant'; import { themeVariant } from '$lib/themeVariant';
import { browser } from '$app/environment';
$: {
if (browser) {
switch ($themeVariant) {
case 'default': {
document.body.classList.remove('is-dark');
document.body.classList.remove('is-light');
break;
}
case 'light': {
document.body.classList.remove('is-dark');
document.body.classList.add('is-light');
break;
}
case 'dark': {
document.body.classList.add('is-dark');
document.body.classList.remove('is-light');
break;
}
}
}
}
</script> </script>
<div class:is-light={$themeVariant == 'light'} class:is-dark={$themeVariant == 'dark'}> <slot />
<slot />
</div>

35
src/routes/+page.svelte
View File

@@ -17,7 +17,7 @@
function renderColorVariables() { function renderColorVariables() {
return `<style> return `<style>
:root, body .is-light { :root, body.is-light {
${cssVariables(data.config.colors.light)} ${cssVariables(data.config.colors.light)}
} }
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
@@ -25,7 +25,7 @@
${cssVariables(data.config.colors.light)} ${cssVariables(data.config.colors.light)}
} }
} }
:root, body .is-dark { :root, body.is-dark {
${cssVariables(data.config.colors.dark)} ${cssVariables(data.config.colors.dark)}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -44,14 +44,31 @@
</svelte:head> </svelte:head>
<header> <header>
<Brand brand={data.config} /> <section class="first-line">
<h1>{data.config.title}</h1> <div class="container">
<div class="logo">
<a href="/">
<Brand brand={data.config} color="var(--text-header)" />
</a>
</div>
<div class="dashboard-title">
{#if data.config.subtitle} {#if data.config.subtitle}
<h2>{data.config.subtitle}</h2> <span class="headline">{data.config.subtitle}</span>
{/if} {/if}
<ThemeVariantButton /> <h1>{data.config.title}</h1>
</div>
</div>
</section>
<nav class="navbar" aria-label="main navigation">
<div class="container">
<div class="navbar-start" />
<div class="navbar-end"><ThemeVariantButton /></div>
</div>
</nav>
</header> </header>
{#each data.config.services as group, i}
<main class="section">
{#each data.config.services as group, i}
<ServiceGroup {group} groupData={data.serviceData[i]} /> <ServiceGroup {group} groupData={data.serviceData[i]} />
{/each} {/each}
<pre> {JSON.stringify(data.config, null, 2)}</pre> </main>