diff --git a/index.html b/index.html index 8388c4b..d9aee78 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - - - - Vite + Vue + + + + Nom du service
diff --git a/public/assets/css/panel.css b/public/assets/css/panel.css new file mode 100644 index 0000000..35e7793 --- /dev/null +++ b/public/assets/css/panel.css @@ -0,0 +1,10 @@ +/* CSS VARIABLES */ + +:root { + + /* Colors */ + --color-l-200: 95%; + --color-l-300: 85%; + --color-l-400: 80%; + --color-l-500: 74%; +} diff --git a/public/content/clients/1_dior/client.txt b/public/content/clients/1_dior/client.txt new file mode 100644 index 0000000..8435f55 --- /dev/null +++ b/public/content/clients/1_dior/client.txt @@ -0,0 +1,21 @@ +Title: Dior + +---- + +Headline: + +---- + +Text: + +---- + +Logo: - file://25NN1En7lGeEttZy + +---- + +Color: #000 + +---- + +Uuid: G418qZ4ABsoWFx4i \ No newline at end of file diff --git a/public/content/clients/1_dior/dior.jpg b/public/content/clients/1_dior/dior.jpg new file mode 100644 index 0000000..12fb9e3 Binary files /dev/null and b/public/content/clients/1_dior/dior.jpg differ diff --git a/public/content/clients/1_dior/dior.jpg.txt b/public/content/clients/1_dior/dior.jpg.txt new file mode 100644 index 0000000..047244c --- /dev/null +++ b/public/content/clients/1_dior/dior.jpg.txt @@ -0,0 +1 @@ +Uuid: 25NN1En7lGeEttZy \ No newline at end of file diff --git a/public/content/clients/2_hermes/client.txt b/public/content/clients/2_hermes/client.txt new file mode 100644 index 0000000..8d95fd3 --- /dev/null +++ b/public/content/clients/2_hermes/client.txt @@ -0,0 +1,13 @@ +Title: Hermes + +---- + +Logo: - file://Nj3oUfpMGXwRETWn + +---- + +Color: #fb6b22 + +---- + +Uuid: PweFYnBx27eMZ2mr \ No newline at end of file diff --git a/public/content/clients/2_hermes/hermes.jpg b/public/content/clients/2_hermes/hermes.jpg new file mode 100644 index 0000000..17559cd Binary files /dev/null and b/public/content/clients/2_hermes/hermes.jpg differ diff --git a/public/content/clients/2_hermes/hermes.jpg.txt b/public/content/clients/2_hermes/hermes.jpg.txt new file mode 100644 index 0000000..f21765e --- /dev/null +++ b/public/content/clients/2_hermes/hermes.jpg.txt @@ -0,0 +1 @@ +Uuid: Nj3oUfpMGXwRETWn \ No newline at end of file diff --git a/public/content/clients/clients.txt b/public/content/clients/clients.txt new file mode 100644 index 0000000..137418b --- /dev/null +++ b/public/content/clients/clients.txt @@ -0,0 +1,5 @@ +Title: Clients + +---- + +Uuid: TsaoiLb9iQJWZAvX \ No newline at end of file diff --git a/public/content/error/error.txt b/public/content/error/error.txt index e1e70d7..8693572 100644 --- a/public/content/error/error.txt +++ b/public/content/error/error.txt @@ -1,4 +1,4 @@ -Title: Error +Title: Erreur ---- diff --git a/public/content/home/home.txt b/public/content/home/home.txt index dd6e110..5f21997 100644 --- a/public/content/home/home.txt +++ b/public/content/home/home.txt @@ -1,4 +1,4 @@ -Title: Home +Title: Accueil ---- @@ -10,7 +10,7 @@ Testtext: test ---- -Testblocks: [{"content":{"location":"kirby","image":["home/image.png"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"ad071a0e-852b-473b-9f6f-46ea4079168e","isHidden":false,"type":"image"}] +Testblocks: ---- diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png b/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png new file mode 100644 index 0000000..35f3985 Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png.txt b/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png.txt new file mode 100644 index 0000000..b73f720 --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/0c41d3266e9ce2872f30608cceb28239.png.txt @@ -0,0 +1,5 @@ +Uuid: aWouZREvKfW9VWMt + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg b/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg new file mode 100644 index 0000000..6353fe6 Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg.txt b/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg.txt new file mode 100644 index 0000000..0e37173 --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/20878a95a67b25e122365f351f1ec1a7.jpg.txt @@ -0,0 +1,5 @@ +Uuid: T3MXkEhh9mmAGkUH + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg b/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg new file mode 100644 index 0000000..de69e36 Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg.txt b/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg.txt new file mode 100644 index 0000000..dc2764f --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/22f8779f680ed826a2d0a1d2af6018c9.jpg.txt @@ -0,0 +1,5 @@ +Uuid: e57fucmyhXX9jJv4 + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png b/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png new file mode 100644 index 0000000..e22fdbc Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png.txt b/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png.txt new file mode 100644 index 0000000..e48dd82 --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/37a038883c87973036232aa0e43f6da2.png.txt @@ -0,0 +1,5 @@ +Uuid: aGCNfbFS7FcFJls1 + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg b/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg new file mode 100644 index 0000000..9d0227c Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg.txt b/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg.txt new file mode 100644 index 0000000..c7a78b6 --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/6b0228aa62a396728a25bb8991a49392.jpg.txt @@ -0,0 +1,5 @@ +Uuid: qqhD8ABZ7BkkJxd5 + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png b/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png new file mode 100644 index 0000000..546e793 Binary files /dev/null and b/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png differ diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png.txt b/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png.txt new file mode 100644 index 0000000..886c1e5 --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/d82f18573c439d6edd434ffca62471a7.png.txt @@ -0,0 +1,5 @@ +Uuid: B3TFeDZKd5d8dxKK + +---- + +Template: image \ No newline at end of file diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/project.txt b/public/content/projects/1_miss-dior-blooming-bouquet/project.txt new file mode 100644 index 0000000..df5a3cb --- /dev/null +++ b/public/content/projects/1_miss-dior-blooming-bouquet/project.txt @@ -0,0 +1,36 @@ +Title: Miss Dior Blooming Bouquet + +---- + +Client: - page://G418qZ4ABsoWFx4i + +---- + +Briefclientpdf: + +---- + +Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. + +---- + +Briefclientimages: + +- file://aWouZREvKfW9VWMt +- file://qqhD8ABZ7BkkJxd5 +- file://e57fucmyhXX9jJv4 +- file://aGCNfbFS7FcFJls1 +- file://T3MXkEhh9mmAGkUH +- file://B3TFeDZKd5d8dxKK + +---- + +Pdf: + +---- + +Text: + +---- + +Uuid: 513oEM4JFuWBt2Bw \ No newline at end of file diff --git a/public/content/projects/projects.txt b/public/content/projects/projects.txt new file mode 100644 index 0000000..f195f70 --- /dev/null +++ b/public/content/projects/projects.txt @@ -0,0 +1,5 @@ +Title: Projets + +---- + +Uuid: JgUmDeKdunC06yBi \ No newline at end of file diff --git a/public/content/projects/projet-test/project.txt b/public/content/projects/projet-test/project.txt new file mode 100644 index 0000000..d1bee12 --- /dev/null +++ b/public/content/projects/projet-test/project.txt @@ -0,0 +1,29 @@ +Title: Projet Test + +---- + +Client: - page://G418qZ4ABsoWFx4i + +---- + +Briefclientpdf: + +---- + +Description: Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. + +---- + +Briefclientimages: + +---- + +Pdf: + +---- + +Text: + +---- + +Uuid: Bdho8W2PQkSk1x21 \ No newline at end of file diff --git a/public/content/site.txt b/public/content/site.txt index b1f98d7..d12bfae 100644 --- a/public/content/site.txt +++ b/public/content/site.txt @@ -1 +1,5 @@ -Title: Site Title \ No newline at end of file +Title: Nom du service + +---- + +Briefclientimagestags: Parachèvements, Forme & design, Matériaux & textures, Coloris & nuances, Bouchon, Bouton poussoir, DA globale \ No newline at end of file diff --git a/public/site/blueprints/files/image.yml b/public/site/blueprints/files/image.yml new file mode 100644 index 0000000..94b5fc1 --- /dev/null +++ b/public/site/blueprints/files/image.yml @@ -0,0 +1,15 @@ +title: Image + +accept: + mime: image/* + type: image +focus: false + +fields: + description: + type: textarea + buttons: false + size: small + width: 1/2 + # tags: + # type: tags \ No newline at end of file diff --git a/public/site/blueprints/files/pdf.yml b/public/site/blueprints/files/pdf.yml new file mode 100644 index 0000000..fd4d5a5 --- /dev/null +++ b/public/site/blueprints/files/pdf.yml @@ -0,0 +1,5 @@ +title: PDF + +accept: + mime: application/pdf +focus: false \ No newline at end of file diff --git a/public/site/blueprints/pages/client.yml b/public/site/blueprints/pages/client.yml new file mode 100644 index 0000000..447e614 --- /dev/null +++ b/public/site/blueprints/pages/client.yml @@ -0,0 +1,45 @@ +title: Client + +tabs: + projects: + label: Projets + icon: folder + columns: + - width: 1/2 + sections: + projectsListed: + extends: sections/projects + headline: Projets en cours + query: page.projectsListed + status: unlisted + columns: + title: true + client: false + - width: 1/2 + sections: + projectsUnlisted: + extends: sections/projects + headline: Projets archivés + query: page.projectsUnlisted + status: unlisted + columns: + title: true + client: false + + brand: + label: Brand + icon: palette + fields: + logo: + type: files + multiple: false + layout: cards + image: + ratio: 1/1 + back: white + width: 1/6 + color: + label: Couleur + type: color + width: 2/6 + files: tabs/files diff --git a/public/site/blueprints/pages/clients.yml b/public/site/blueprints/pages/clients.yml new file mode 100644 index 0000000..6ffde4d --- /dev/null +++ b/public/site/blueprints/pages/clients.yml @@ -0,0 +1,21 @@ +title: Clients + +sections: + pages: + label: Tous les clients + status: all + templates: client + layout: table + columns: + title: + label: Nom + projectsListed: + label: En cours + value: "{{ page.projectsListed.count }}" + width: 1/12 + projectsUnlisted: + label: Archivés + value: "{{ page.projectsUnlisted.count }}" + width: 1/12 + image: + cover: true diff --git a/public/site/blueprints/pages/home.yml b/public/site/blueprints/pages/home.yml index 3d20152..d2f8f85 100644 --- a/public/site/blueprints/pages/home.yml +++ b/public/site/blueprints/pages/home.yml @@ -1,7 +1 @@ -fields: - testImages: - type: files - testText: - type: text - testBlocks: - type: blocks +title: Home diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/project.yml new file mode 100644 index 0000000..ead9b17 --- /dev/null +++ b/public/site/blueprints/pages/project.yml @@ -0,0 +1,67 @@ +title: Projet +icon: page + +tabs: + brief: + label: Brief client + icon: document + columns: + - width: 1/2 + sections: + brief: + type: fields + fields: + client: + type: pages + multiple: false + query: site.find("clients").childrenAndDrafts + subpages: false + image: + query: page.logo.toFile + layout: cardlets + width: 1/2 + briefClientPdf: + label: PDF + type: files + multiple: false + uploads: pdf + layout: cardlets + width: 1/2 + - width: 1/2 + sections: + description: + type: fields + fields: + description: + type: textarea + size: tiny + buttons: false + maxlength: 700 + - width: 1/1 + sections: + images: + type: fields + fields: + briefClientImages: + label: Images + type: files + uploads: image + layout: cards + size: medium + # client: + # label: Client + # icon: account + # columns: + # - width: 1/1 + # sections: + # client: + # type: fields + # fields: + # client: + # type: pages + # multiple: false + # query: site.find("clients").childrenAndDrafts + # subpages: false + # layout: cards + # size: medium + files: tabs/files diff --git a/public/site/blueprints/pages/projects.yml b/public/site/blueprints/pages/projects.yml new file mode 100644 index 0000000..61c4dee --- /dev/null +++ b/public/site/blueprints/pages/projects.yml @@ -0,0 +1,15 @@ +title: Projets + +sections: + drafts: + extends: sections/projects + headline: Brouillons + status: draft + listed: + extends: sections/projects + headline: En cours + status: listed + unlisted: + extends: sections/projects + headline: Archivés + status: unlisted diff --git a/public/site/blueprints/sections/projects.yml b/public/site/blueprints/sections/projects.yml new file mode 100644 index 0000000..988e9ff --- /dev/null +++ b/public/site/blueprints/sections/projects.yml @@ -0,0 +1,11 @@ +type: pages +headline: Projets +template: project +layout: table +columns: + title: + label: Titre + client: true +empty: Pas encore de projet +image: false +search: true \ No newline at end of file diff --git a/public/site/blueprints/site.yml b/public/site/blueprints/site.yml index b7da661..75f7dd5 100644 --- a/public/site/blueprints/site.yml +++ b/public/site/blueprints/site.yml @@ -1,5 +1,41 @@ title: Site -sections: - pages: - type: pages +tabs: + dashboard: + label: Dashboard + icon: dashboard + columns: + clients: + width: 1/2 + sections: + clients: + label: Clients + type: pages + parent: site.find("clients") + template: client + search: true + image: + back: white + projects: + width: 1/2 + sections: + projects: + extends: sections/projects + headline: Projets récement modifiés + parent: site.find("projects") + layout: list + sortBy: modified desc + settings: + label: Paramètres + icon: cog + columns: + - width: 1/1 + sections: + settings: + label: Paramètres + type: fields + fields: + briefClientImagesTags: + label: Tags des images de Brief client + help: Ensemble des tags d’images disponibles lors de la création du Brief client + type: tags diff --git a/public/site/blueprints/tabs/files.yml b/public/site/blueprints/tabs/files.yml new file mode 100644 index 0000000..22202de --- /dev/null +++ b/public/site/blueprints/tabs/files.yml @@ -0,0 +1,15 @@ +label: + en: Files + fr: Fichiers +icon: images + +columns: + - width: 1/1 + sections: + files: + label: + en: Files + fr: Fichiers + type: files + layout: cards + size: small diff --git a/public/site/blueprints/users/admin.yml b/public/site/blueprints/users/admin.yml new file mode 100644 index 0000000..4843c22 --- /dev/null +++ b/public/site/blueprints/users/admin.yml @@ -0,0 +1 @@ +title: Admin \ No newline at end of file diff --git a/public/site/blueprints/users/client.yml b/public/site/blueprints/users/client.yml new file mode 100644 index 0000000..3e9a838 --- /dev/null +++ b/public/site/blueprints/users/client.yml @@ -0,0 +1,4 @@ +title: Client +permissions: + access: + panel: false diff --git a/public/site/blueprints/users/project-manager.yml b/public/site/blueprints/users/project-manager.yml new file mode 100644 index 0000000..de6f987 --- /dev/null +++ b/public/site/blueprints/users/project-manager.yml @@ -0,0 +1,3 @@ +title: + fr: Chef·fe de projet + en: Project Manager \ No newline at end of file diff --git a/public/site/config/config.php b/public/site/config/config.php index 4c7232c..81f4f8c 100644 --- a/public/site/config/config.php +++ b/public/site/config/config.php @@ -7,7 +7,68 @@ return [ // Enable api access without SSL. To disable in production. 'allowInsecure' => true ], - 'content' => [ - 'uuid' => false + 'panel' => [ + 'language' => 'fr', + 'css' => 'assets/css/panel.css', + 'favicon' => 'assets/favicons/favicon.svg', + 'menu' => [ + 'site' => [ + 'label' => 'Dashboard', + 'icon' => 'dashboard', + 'current' => function (string $current): bool { + // the links of all your custom menu entries + $links = [ + 'pages/clients', + 'pages/projects', + 'pages/notifications', + 'pages/events' + ]; + $path = Kirby\Cms\App::instance()->path(); + return + $current === 'site' && + A::every($links, fn ($link) => Str::contains($path, $link) === false); + } + ], + 'clients' => [ + 'label' => 'Clients', + 'icon' => 'account', + 'link' => 'pages/clients', + 'current' => function (string $current): bool { + $path = Kirby\Cms\App::instance()->path(); + return Str::contains($path, 'pages/clients'); + } + ], + 'projects' => [ + 'label' => 'Projets', + 'icon' => 'folder', + 'link' => 'pages/projects', + 'current' => function (string $current): bool { + $path = Kirby\Cms\App::instance()->path(); + return Str::contains($path, 'pages/projects'); + } + ], + '-', + 'notifications' => [ + 'label' => 'Notifications', + 'icon' => 'bell', + 'link' => 'pages/notifications', + 'current' => function (string $current): bool { + $path = Kirby\Cms\App::instance()->path(); + return Str::contains($path, 'pages/notifications'); + } + ], + 'events' => [ + 'label' => 'Événements', + 'icon' => 'calendar', + 'link' => 'pages/events', + 'current' => function (string $current): bool { + $path = Kirby\Cms\App::instance()->path(); + return Str::contains($path, 'pages/events'); + } + ], + '-', + 'users', + 'system' + ] ] -]; \ No newline at end of file +]; diff --git a/public/site/models/client.php b/public/site/models/client.php new file mode 100644 index 0000000..5ec33a9 --- /dev/null +++ b/public/site/models/client.php @@ -0,0 +1,18 @@ +children()->filterBy('intendedTemplate', 'project')->filterBy(function($project) { + return $project->client()->toPage() === $this; + }); + } + public function projectsListed() { + return page('projects')->children()->listed()->filterBy('intendedTemplate', 'project')->filterBy(function($project) { + return $project->client()->toPage() === $this; + }); + } + public function projectsUnlisted() { + return page('projects')->children()->unlisted()->filterBy('intendedTemplate', 'project')->filterBy(function($project) { + return $project->client()->toPage() === $this; + }); + } +} diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 0000000..7c15831 --- /dev/null +++ b/src/assets/css/index.css @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +@import 'src/0.0.reset.css'; +@import 'src/0.1.fonts.css'; +@import 'src/0.2.variables.css'; + +/* GLOBAL CSS */ +@import 'src/1.0.global.css'; + +/* COMPOSITIONS */ +@import 'src/1.1.compositions.auto-grid.css'; +@import 'src/1.2.compositions.grid.css'; +@import 'src/1.3.compositions.flex.css'; +@import 'src/1.4.compositions.with-sidebar.css'; + +/* BLOCKS */ +@import 'src/2.blocks.button.css'; +@import 'src/2.blocks.card.css'; +@import 'src/2.blocks.header.css'; +@import 'src/2.blocks.pill.css'; +@import 'src/2.blocks.skip-link.css'; + +/* UTILITY CLASSES */ +@import 'src/3.utilities.border.css'; +@import 'src/3.utilities.flow.css'; +@import 'src/3.utilities.icons.css'; +@import 'src/3.utilities.overflow.css'; +@import 'src/3.utilities.screen-readers.css'; +@import 'src/3.utilities.size.css'; +@import 'src/3.utilities.spacing.css'; +@import 'src/3.utilities.text.css'; diff --git a/src/assets/css/src/0.0.reset.css b/src/assets/css/src/0.0.reset.css new file mode 100755 index 0000000..1f2cc47 --- /dev/null +++ b/src/assets/css/src/0.0.reset.css @@ -0,0 +1,84 @@ +/* RESET */ +/* Modified version of Modern CSS Reset by Piccalilli https://piccalil.li/blog/a-more-modern-css-reset/ */ + + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, h1, h2, h3, h4, p, +figure, blockquote, dl, dd { + margin: 0; + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; + padding: 0; + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, h2, h3, h4, +button, input, label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, h2, +h3, h4 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, button, +textarea, select { + -webkit-appareance: none; + appearance: none; + font-family: inherit; + font-size: inherit; + background: none; + border: none; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} diff --git a/src/assets/css/src/0.1.fonts.css b/src/assets/css/src/0.1.fonts.css new file mode 100644 index 0000000..9e9ac89 --- /dev/null +++ b/src/assets/css/src/0.1.fonts.css @@ -0,0 +1,4 @@ +/* FONTS */ + +/* Font sans */ +@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400..500&display=swap'); \ No newline at end of file diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css new file mode 100755 index 0000000..7bddd84 --- /dev/null +++ b/src/assets/css/src/0.2.variables.css @@ -0,0 +1,81 @@ +/* CSS VARIABLES */ + +:root { + + /* Fonts */ + --font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + /* Colors */ + --color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */ + --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */ + --color-white: var(--color-white-100); /* White */ + --color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */ + --color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */ + --color-grey-300: hsla(0, 0%, 74%, 1); + --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */ + --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ + --color-black: hsla(0, 0%, 10%, 1); /* Black */ + --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */ + --color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */ + --color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */ + --color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */ + --color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */ + --color-primary: var(--color-primary-100); /* Focus */ + --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */ + --color-brand: var(--color-brand-100); /* Brand */ + --color-background: var(--color-white); + --color-text: var(--color-black); + --color-focus-ring: var(--color-primary-100); + --color-disabled: var(--color-grey-400); + + /* Space scale */ + --space: .275em; /* typographic space */ + --space-xs: .25rem; /* 4px */ + --space-sm: .5rem; /* 8px */ + --space-md: .75rem; /* 12px */ + --space-lg: 1rem; /* 16px */ + --space-xl: 1.5rem; /* 24px */ + --space-2xl: 2rem; /* 32px */ + + /* Type scale */ + --text-xs: .75rem; /* 12px */ + --text-sm: .875rem; /* 14px */ + --text-md: 1rem; /* 16px */ + --text-lg: 1.5rem; /* 24px */ + + /* Leading */ + --leading-none: 1; + --leading-sm: 1.25; + --leading-md: 1.4285714286; /* 20/14 */ + --leading-lg: 1.5; /* 24/16 */ + + /* Tracking */ + --tracking-wide: 0.01em; + + /* Layout */ + --gutter: 32px; + --header-height: 3.5rem; /* 56px */ + --sidebar-width: 22.25rem; /* 356px */ + --flow-space: 1rem; + --auto-grid-placement: auto-fill; + --gap: var(--space-lg); + + /* Borders */ + --rounded-xs: 1px; + --rounded-sm: 4px; + --rounded-md: 12px; + --rounded-lg: 20px; + --rounded-full: 9999px; + --border-width: 1px; + --border-color: var(--color-black); + --border: var(--border-width) solid var(--border-color); + + /* Prose */ + --max-width: 64ch; + + /* Transitions */ + --timing: 200ms; + --easing: ease; + +} diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css new file mode 100644 index 0000000..b41d9bd --- /dev/null +++ b/src/assets/css/src/1.0.global.css @@ -0,0 +1,262 @@ +/* GLOBAL CSS */ + +html { + font-size: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +body { + font: var(--text-md)/var(--leading-md) var(--font-sans); + letter-spacing: var(--tracking-wide); + text-rendering: optimizeSpeed; + font-variant-ligatures: common-ligatures; + -moz-font-feature-settings: "liga", "clig"; + -webkit-font-feature-settings: "liga", "clig"; + font-feature-settings: "liga", "clig"; + background-color: var(--color-grey-50); + color: var(--color-text, black); + padding: 2rem var(--gutter); +} + +/* If an element is [hidden] it needs to be max priority */ +.hidden, [hidden] { + display: none !important; +} + + +/* Disabled state */ +.disabled, [disabled] { + opacity: var(--alpha); +} + +/* Placeholder */ +::placeholder { + font: inherit; + color: rgba(0, 0, 0, .54); +} + + +/* Main */ +main { + position: relative; +} + + +/* Headings */ + +h1, h2, h3, h4, h5, h6 { + font-size: var(--text-md); + font-weight: 400; + text-wrap: balance; + position: relative; +} + +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; + border-bottom: none; +} + +*:not(.sr-only) + h2, +*:not(.sr-only) + h3 { + margin-top: var(--space-xs); +} + + +/* General typesetting */ + +p { + max-width: 40em; +} + + +/* Lists */ + +ul:not([class]), +ol:not([class]) { + list-style: none; + padding-left: 0; +} + + +/* Blockquotes */ + +blockquote { + padding-left: 0; +} +blockquote > * { + padding-left: var(--space-md); +} + + +/* Separators */ + +hr { + border: none; + border-top: var(--border); + margin-inline: 0; +} + +hr, +hr + * { + --flow-space: var(--space-xs); +} + +/* Sub and sup */ +sub, +sup { + font-size: 0.75em; +} + +sub { + vertical-align: sub; +} + +sup { + vertical-align: middle; + position: relative; + top: -1ex; +} + + +/* Details */ + +summary { + -webkit-appearance: none; + list-style: none; + cursor: pointer; + width: fit-content; + display: flex; + -webkit-user-select: none; + user-select: none; +} +summary::-webkit-details-marker, +summary::marker { + display: none; + content: ""; +} +summary::before { + content: '+'; + margin-right: var(--space); +} +summary + p { + margin-top: 0; +} +summary + .gallery, +summary + figure { + margin-top: .5em; +} +details > *:last-child { + margin-bottom: var(--space-xs); +} +details[open] > summary::before { + content: '−'; +} + + +/* Media */ + +figure { + width: fit-content; + height: fit-content; +} +figcaption { + font-size: var(--text-md); + margin: .16666667em 0; + position: relative; +} +figcaption::before { + float: right; + margin-left: var(--gap); +} +figure + p { + margin-top: var(--space-xs); +} + +video { + background-color: var(--color-gray); + max-width: 100%; + border-radius: var(--rounded-md); +} + +/* Selects images that are likely to have a transparent BG and applies a */ +/* theme-driven mask to them */ +img[src$='.svg'], +img[src$='.png'] { + background-color: transparent; +} +img { + object-fit: cover; + background-size: cover; + background-repeat: no-repeat; +} +[data-ratio="auto"] img { + height: auto; +} + +/* Links */ + +a { + color: inherit; + text-decoration: none; +} +a:visited { + color: currentColor; +} +a:hover { + color: currentColor; +} + +a.link-full::after { + content: ''; + display: block; + position: absolute; + inset: 0; + z-index: 1; + transition: outline var(--timing) var(--easing); +} +a.link-full:focus-visible { + outline-width: 0; +} +a.link-full:focus-visible::after { + outline: none; + outline-offset: 2px; + text-decoration: underline; +} + + +/* Form, Input, Buttons */ + +form { + display: flex; + gap: var(--space-xs); +} +input { + font: inherit; + max-height: 1.125rem; /* 18px */ +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} +button { + cursor: pointer; +} + +/* General interactive states */ + +:focus-visible { + +} + + +/* High contrast selection style */ +::selection { + background: var(--color-grey); +} diff --git a/src/assets/css/src/1.1.compositions.auto-grid.css b/src/assets/css/src/1.1.compositions.auto-grid.css new file mode 100644 index 0000000..cdd58f6 --- /dev/null +++ b/src/assets/css/src/1.1.compositions.auto-grid.css @@ -0,0 +1,13 @@ +/* AUTO-GRID COMPOSITION */ + +.auto-grid { + --column-gap: var(--gap); + --row-gap: var(--gap); + display: grid; + grid-template-columns: repeat( + var(--auto-grid-placement, auto-fill), + minmax(var(--min, 50%), 1fr) + ); + grid-gap: var(--row-gap) var(--column-gap); + gap: var(--row-gap) var(--column-gap); +} diff --git a/src/assets/css/src/1.2.compositions.grid.css b/src/assets/css/src/1.2.compositions.grid.css new file mode 100644 index 0000000..8b7261e --- /dev/null +++ b/src/assets/css/src/1.2.compositions.grid.css @@ -0,0 +1,55 @@ +/* LAYOUT GRID */ + +.grid { + --gap: var(--gutter); + --column-gap: var(--gap); + --row-gap: var(--gap); + display: -ms-grid; + display: grid; + grid-gap: var(--column-gap) var(--row-gap); + gap: var(--column-gap) var(--row-gap); + grid-template-columns: 1fr; + position: relative; + width: 100%; +} + +.grid > .column { + margin-bottom: var(--gap); + display: flex; + flex-direction: column; + justify-content: var(--justify-content, flex-start); + align-items: var(--align-items, baseline); +} + +@media (min-width: 35rem) { /* >= 560px */ + + .grid { + -ms-grid-columns: repeat(6, 1fr); + grid-template-columns: repeat(6, 1fr); + } + + .grid > .column { + -ms-grid-column: span 6; + grid-column: span 6; + } + + .grid > .column[style*="--columns:3"] { + -ms-grid-column: span 3; + grid-column: span 3; + } + +} + +@media (min-width: 67.5rem) { /* >= 1080px */ + + .grid { + -ms-grid-columns: repeat(12, 1fr); + grid-template-columns: repeat(12, 1fr); + } + + .grid > .column { + -ms-grid-column: span var(--columns); + grid-column: span var(--columns); + } + +} \ No newline at end of file diff --git a/src/assets/css/src/1.3.compositions.flex.css b/src/assets/css/src/1.3.compositions.flex.css new file mode 100644 index 0000000..3793321 --- /dev/null +++ b/src/assets/css/src/1.3.compositions.flex.css @@ -0,0 +1,11 @@ +/* FLEX COMPOSITION */ + +.flex { + display: flex; + flex-direction: var(--direction, row); + flex-wrap: var(--wrap, wrap); + align-items: var(--items, center); + justify-content: var(--justify, flex-start); + column-gap: var(--column-gap, var(--gutter, var(--space-sm))); + row-gap: var(--row-gap, var(--gutter, var(--space-sm))); +} diff --git a/src/assets/css/src/1.4.compositions.with-sidebar.css b/src/assets/css/src/1.4.compositions.with-sidebar.css new file mode 100644 index 0000000..c83a7d4 --- /dev/null +++ b/src/assets/css/src/1.4.compositions.with-sidebar.css @@ -0,0 +1,18 @@ +/* SIDEBAR COMPOSITION */ + +.with-sidebar { + display: flex; + flex-wrap: wrap; + gap: var(--space-2xl); +} + +.with-sidebar > :first-child { + flex-basis: var(--sidebar-width); + flex-grow: 1; +} + +.with-sidebar > :last-child { + flex-basis: 0; + flex-grow: 999; + min-inline-size: 50%; +} \ No newline at end of file diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css new file mode 100644 index 0000000..abd3a4b --- /dev/null +++ b/src/assets/css/src/2.blocks.button.css @@ -0,0 +1,48 @@ +/* BUTTON BLOCK */ + +.btn { + --background: var(--color-primary-100); + --color: var(--color-white); + display: inline-flex; + justify-content: center; + align-items: center; + padding: var(--space-md) var(--space-lg); + text-align: center; + text-decoration: none; + font-size: var(--text-sm); + line-height: var(--leading-md); + font-weight: 500; + border-radius: var(--rounded-md); + cursor: pointer; + background-color: var(--background, var(--color-primary-100)); + color: var(--color, var(--color-white)); +} + +.btn--secondary { + --background: var(--color-primary-10); + --color: var(--color-primary-100); +} +.btn--black { + --background: var(--color-black); + --color: var(--color-white); +} +.btn--white { + --background: var(--color-white); + --color: var(--color-grey-700); +} +.btn--white-10 { + --background: var(--color-white-10); + --color: var(--color-white); +} + +@media (hover: hover) { + +} + +.btn:focus-visible { + +} + +.btn:active { + +} diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css new file mode 100644 index 0000000..2dfa031 --- /dev/null +++ b/src/assets/css/src/2.blocks.card.css @@ -0,0 +1,29 @@ +/* CARD BLOCK */ + +.card { + --padding: clamp(1.5rem, 0.5rem + 5vw, 5rem); + display: flex; + flex-direction: column; + position: relative; + padding: var(--padding); +} + +.card header { + display: flex; + flex-direction: column-reverse; +} + +.card__title > a { + font: inherit; + color: currentColor; +} + +.card__date { + position: absolute; + bottom: var(--padding); + right: var(--padding); +} + +.card:hover { + background-color: var(--color-background-hover); +} diff --git a/src/assets/css/src/2.blocks.header.css b/src/assets/css/src/2.blocks.header.css new file mode 100644 index 0000000..2f5d61b --- /dev/null +++ b/src/assets/css/src/2.blocks.header.css @@ -0,0 +1,11 @@ +/* HEADER BLOCK */ + +.header { + display: flex; + flex-direction: column; + align-items: flex-start; + min-height: var(--header-height); + padding: 0 var(--gutter); + margin-bottom: var(--space-xl); +} + diff --git a/src/assets/css/src/2.blocks.pill.css b/src/assets/css/src/2.blocks.pill.css new file mode 100644 index 0000000..d50d443 --- /dev/null +++ b/src/assets/css/src/2.blocks.pill.css @@ -0,0 +1,27 @@ +/* PILL BLOCK */ + +.pill { + display: inline-flex; + justify-content: center; + align-items: center; + gap: var(--space-sm); + padding: var(--space-xs) var(--space-md); + text-align: center; + text-decoration: none; + font-size: var(--text-sm); + font-weight: 500; + border-radius: var(--rounded-full); + background-color: var(--background, var(--color-primary-100)); + color: var(--color, var(--color-white)); + white-space: pre; +} + +.pill--secondary { + --background: var(--color-primary-10); + --color: var(--color-primary-100); +} + +.pill[data-icon] { + padding: var(--space-sm) var(--space-lg); +} + diff --git a/src/assets/css/src/2.blocks.skip-link.css b/src/assets/css/src/2.blocks.skip-link.css new file mode 100644 index 0000000..4d0546e --- /dev/null +++ b/src/assets/css/src/2.blocks.skip-link.css @@ -0,0 +1,34 @@ +/* SKIP-LINK BLOCK */ + +/* The skip link is visually hidden when it is not focused. */ +/* It exists so when a user hits tab on load, they can quickly */ +/* skip to the main content of the site—avoiding navigation etc */ +.skip-link { + z-index: 9999; + display: inline-block; + width: max-content; + max-width: 10rem; + right: var(--gutter); + width: auto; + line-height: 1; + position: absolute; +} + +.skip-link:focus, +.skip-link:focus-visible { + background: var(--color-text); + color: var(--color-background) !important; +} + +.skip-link:not(:focus) { + /* @extend .visually-hidden */ + border: 0; + clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/src/assets/css/src/3.utilities.border.css b/src/assets/css/src/3.utilities.border.css new file mode 100644 index 0000000..a48c24e --- /dev/null +++ b/src/assets/css/src/3.utilities.border.css @@ -0,0 +1,17 @@ +/* BORDER UTILITY */ + +/* Borders */ + +.border-t { border-top: var(--border) } +.border-b { border-bottom: var(--border) } +.border-l { border-left: var(--border) } +.border-r { border-right: var(--border) } +.border { border: var(--border) } + +/* Border radius */ + +.rounded-xs { border-radius: var(--rounded-xs) } +.rounded-sm { border-radius: var(--rounded-sm) } +.rounded-md { border-radius: var(--rounded-md) } +.rounded-lg { border-radius: var(--rounded-lg) } +.rounded-full { border-radius: var(--rounded-gull) } \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.flow.css b/src/assets/css/src/3.utilities.flow.css new file mode 100644 index 0000000..1d0b412 --- /dev/null +++ b/src/assets/css/src/3.utilities.flow.css @@ -0,0 +1,6 @@ +/* FLOW UTILITY */ +/* Info: https://web.dev/design-system/css-utilities/#flow */ + +.flow > * + * { + margin-top: var(--flow-space); +} diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css new file mode 100644 index 0000000..c9e13cb --- /dev/null +++ b/src/assets/css/src/3.utilities.icons.css @@ -0,0 +1,43 @@ +/* ICONS UTILITY */ + +:root { + --icon-circle: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='8' stroke='currentColor' stroke-width='1.25'/%3E%3C/svg%3E%0A"); + --icon-point: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3C/svg%3E%0A"); + --icon-point-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3Ccircle cx='50%' cy='50%' r='8' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E%0A"); + --icon-home: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 10L10 1.875L18.125 10M4.375 11.875V18.125H15.625V11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-calendar: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.125 4.375C2.79348 4.375 2.47554 4.5067 2.24112 4.74112C2.0067 4.97554 1.875 5.29348 1.875 5.625V16.875C1.875 17.2065 2.0067 17.5245 2.24112 17.7589C2.47554 17.9933 2.79348 18.125 3.125 18.125H16.875C17.2065 18.125 17.5245 17.9933 17.7589 17.7589C17.9933 17.5245 18.125 17.2065 18.125 16.875V5.625C18.125 5.29348 17.9933 4.97554 17.7589 4.74112C17.5245 4.5067 17.2065 4.375 16.875 4.375H14.375M1.875 9.375H18.125M5.625 1.875V6.875M14.375 1.875V6.875M5.625 4.375H11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-check: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + --icon-check-3: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C13.9957 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C9.96999 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1001 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1001 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + --icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0004 2.26245V4.13745M15.0004 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5.00039 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} + +[data-icon] { + position: relative; +} + +[data-icon]::before { + content: ""; + display: inline-block; + width: var(--icon-size, 1.25rem); + height: var(--icon-size, 1.25rem); + background: var(--icon-color, currentColor); + mask-repeat: no-repeat; + mask-position: center; + mask-size: var(--icon-size, 1.25rem); + mask-image: var(--icon, var(--icon-circle)); +} + +[data-icon="home"] { + --icon: var(--icon-home) +} +[data-icon="calendar"] { + --icon: var(--icon-calendar) +} +[data-icon="megaphone"] { + --icon: var(--icon-megaphone) +} +[data-icon="inspiration"] { + --icon: var(--icon-inspiration) +} \ No newline at end of file diff --git a/src/assets/css/src/3.utilities.overflow.css b/src/assets/css/src/3.utilities.overflow.css new file mode 100644 index 0000000..03f663d --- /dev/null +++ b/src/assets/css/src/3.utilities.overflow.css @@ -0,0 +1,5 @@ +/* OVERFLOW UTILITY */ + +.overflow-y-hidden { + overflow-y: hidden !important; +} diff --git a/src/assets/css/src/3.utilities.screen-readers.css b/src/assets/css/src/3.utilities.screen-readers.css new file mode 100644 index 0000000..91ff54c --- /dev/null +++ b/src/assets/css/src/3.utilities.screen-readers.css @@ -0,0 +1,13 @@ +/* SCREEN READERS */ + +.sr-only { + border: 0; + clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/src/assets/css/src/3.utilities.size.css b/src/assets/css/src/3.utilities.size.css new file mode 100644 index 0000000..c7c506e --- /dev/null +++ b/src/assets/css/src/3.utilities.size.css @@ -0,0 +1,12 @@ +/* SIZE UTILITY */ + +.h-full { + height: 100%; +} +.min-h-screen { + min-height: 100vh; + min-height: 100dvh; +} +.w-full { + width: 100%; +} diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css new file mode 100644 index 0000000..3940817 --- /dev/null +++ b/src/assets/css/src/3.utilities.spacing.css @@ -0,0 +1,84 @@ +/* SPACING UTILITY */ + +/* Margins */ + +.m-0 { margin: 0 } + +.mb-0 { margin-bottom: 0 } +.mb-xs { margin-bottom: var(--space-xs) } +.mb-sm { margin-bottom: var(--space-sm) } +.mb-md { margin-bottom: var(--space-md) } +.mb-lg { margin-bottom: var(--space-lg) } +.mb-xl { margin-bottom: var(--space-xl) } +.mb-2xl { margin-bottom: var(--space-2xl) } + +.ml-auto { margin-left: auto } +.ml-xs { margin-left: var(--space-xs) } +.ml-sm { margin-left: var(--space-sm) } +.ml-md { margin-left: var(--space-md) } +.ml-lg { margin-left: var(--space-lg) } +.ml-xl { margin-left: var(--space-xl) } + +.mr-auto { margin-right: auto } +.mr-xs { margin-right: var(--space-xs) } +.mr-sm { margin-right: var(--space-sm) } +.mr-md { margin-right: var(--space-md) } +.mr-lg { margin-right: var(--space-lg) } +.mr-xl { margin-right: var(--space-xl) } + +.-mt-px { margin-top: -1px } +.mt-0 { margin-top: 0 } +.mt-xs { margin-top: var(--space-xs) } +.mt-sm { margin-top: var(--space-sm) } +.mt-md { margin-top: var(--space-md) } +.mt-lg { margin-top: var(--space-lg) } +.mt-xl { margin-top: var(--space-xl) } +.mt-2xl { margin-top: var(--space-2xl) } + +.mx-px { margin-left: 1px ; margin-right: 1px } +.mx-xs { margin-left: var(--space-xs) ; margin-right: var(--space-xs) } +.mx-sm { margin-left: var(--space-sm) ; margin-right: var(--space-sm) } +.mx-md { margin-left: var(--space-md) ; margin-right: var(--space-md) } +.mx-lg { margin-left: var(--space-lg) ; margin-right: var(--space-lg) } +.mx-xl { margin-left: var(--space-xl) ; margin-right: var(--space-xl) } +.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl) } + +.my-xs { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs) } +.my-sm { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm) } +.my-md { margin-top: var(--space-md) ; margin-bottom: var(--space-md) } +.my-lg { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg) } +.my-xl { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl) } +.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) } + + +/* Padding */ + +.pl-0 { padding-left: 0 } + +.pt-xs { padding-top: var(--space-xs) } +.pt-sm { padding-top: var(--space-sm) } +.pt-md { padding-top: var(--space-md) } +.pt-lg { padding-top: var(--space-lg) } +.pt-xl { padding-top: var(--space-xl) } +.pt-2xl { padding-top: var(--space-2xl) } + +.pb-xs { padding-bottom: var(--space-xs) } +.pb-sm { padding-bottom: var(--space-sm) } +.pb-md { padding-bottom: var(--space-md) } +.pb-lg { padding-bottom: var(--space-lg) } +.pb-xl { padding-bottom: var(--space-xl) } +.pb-2xl { padding-bottom: var(--space-2xl) } + +.px-xs { padding-left: var(--space-xs) ; padding-right: var(--space-xs) } +.px-sm { padding-left: var(--space-sm) ; padding-right: var(--space-sm) } +.px-md { padding-left: var(--space-md) ; padding-right: var(--space-md) } +.px-lg { padding-left: var(--space-lg) ; padding-right: var(--space-lg) } +.px-xl { padding-left: var(--space-xl) ; padding-right: var(--space-xl) } +.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) } + +.py-xs { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs) } +.py-sm { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm) } +.py-md { padding-top: var(--space-md) ; padding-bottom: var(--space-md) } +.py-lg { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg) } +.py-xl { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl) } +.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) } diff --git a/src/assets/css/src/3.utilities.text.css b/src/assets/css/src/3.utilities.text.css new file mode 100644 index 0000000..2909cbc --- /dev/null +++ b/src/assets/css/src/3.utilities.text.css @@ -0,0 +1,92 @@ +/* TEXT UTILITY */ + +/* Font family */ + +.font-serif { + font-family: var(--font-serif); + font-optical-sizing: auto; + font-style: normal; +} + + +/* Fonts weights */ + +.font-normal { + font-weight: 400; +} +.font-medium { + font-weight: 500; +} + + +/* Font sizes */ + +.text-sm { + font-size: var(--text-sm); /* 14px */ + line-height: 1.4285714286; /* 20px */ +} +.text-md { + font-size: var(--text-md); /* 16px */ + line-height: 1.5; /* 24px */ +} +.text-lg { + font-size: var(--text-lg); /* 24px */ + line-height: 1.5; /* 36px */ +} + + +/* Case */ + +.uppercase { + font-style: normal; + font-weight: 400; + line-height: 1.333; + letter-spacing: 0.3rem; + text-transform: uppercase; +} + + +/* Text align */ + +.text-right { text-align: right } +.text-center { text-align: center } + + + +/* Text colors */ + +.text-white { + color: var(--color-white); +} +.text-grey-200 { + color: var(--color-grey-200); +} +.text-grey-400 { + color: var(--color-grey-400); +} +.text-grey-700 { + color: var(--color-grey-700); +} +.text-background { + color: var(--color-background); +} +.text-transparent { + color: transparent; +} +.text-brand-100 { + color: var(--color-brand-100); +} + + +/* User select */ + +.select-none { + user-select: none; +} + + +/* Underline */ + +.underline { + text-decoration: underline; +} \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Menu.vue b/src/components/Menu.vue new file mode 100644 index 0000000..4e144b8 --- /dev/null +++ b/src/components/Menu.vue @@ -0,0 +1,114 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 84c8a88..eb8ba21 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ import { createApp } from "vue"; -import "./assets/css/style.css"; +import "./assets/css/index.css"; import App from "./App.vue"; import { createPinia } from "pinia"; diff --git a/src/views/Home.vue b/src/views/Home.vue index b1a4e58..8eb8623 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,9 +1,298 @@ -