feat(theme): layouts and styles

2024-12-16 21:13:30 +01:00
7 changed files with 40 additions and 55 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/example.md
+++ b/example.md
@ -30,7 +30,7 @@ hideInToc: true
 layout: intro
 ---

-# <span class="highlight">L'accessibilité numérique</span> en 10 étapes
+# Introduction à <span class="highlight">l'accessibilité numérique</span>

 <div class="abs-br m-6">
    <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
@ -50,42 +50,52 @@ layout: bullets
 <Toc maxDepth="1"></Toc>

 ---
-layout: content
+layout: section
 ---

-# Contexte
+# l'Accessibilité Numérique

-> “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”
+Pourquoi, pour qui, comment ?

-Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web
+---
+layout: quote
+level: 2
+hideInToc: true
+---

-> “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
+> ## “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”

-Access 42
+Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web

-> The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.
-
-<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
+<!--
+Accès universel (accessible) dès la création de l'outil
+-->

 ---
 layout: fact
 hideInToc: true
 ---

-# 30 % de la population française
+# 1 personne sur 5 est handicapée

-Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
-
-<cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>
+La majorité des handicaps sont invisibles.

 <!--
 certains sont temporaires, certains arrivent avec l'âge
 -->

+---
+layout: quote
+hideInToc: true
+---
+
+> ## “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
+
+Access 42
+
 ---
 layout: bullets
 hideInToc: true
-hide: true
 ---

 ## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
@ -100,7 +110,6 @@ hide: true

 ---
 layout: auto-grid
-columns: 2
 ---

 # Exemples de technologies d'assistance
@ -112,12 +121,11 @@ columns: 2
 <Youtube id="SlxIEPEC_Qc" />
 <Youtube id="LHUyDhutx80" />

---
-layout: bullets
 ---

 # Bonnes pratiques en bref

+- [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
 - structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
 - contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
 - taille et unités des polices
@ -131,9 +139,9 @@ layout: bullets

 ---

-# Éléments HTML sémantiques
+# Éléments sémantiques

-````md magic-move {lines: false}
+````md magic-move {lines: true}
 ```html
 <body>
  <div class="header">
@ -180,19 +188,18 @@ layout: bullets
 ````

 ---
-layout: auto-grid
-columns: 2
+layout: two-cols-header
 ---

-# Structure des titres
+## Structure du contenu

-::content::
+::left::

 ```md {all|2|3|4|none}{lines: false}
 Erroné
 └── h1 Titre principal
-├── h2 Titre secondaire // [!code --]
-├── h4 Titre niveau 4 // [!code error]
+├── h2 Titre secondaire
+├── h4 Titre niveau 4
 │ └── h5 Titre niveau 5
 ├── h2 Titre secondaire
 │ ├── h2 Titre secondaire
@ -203,6 +210,8 @@ Erroné
 └── h1 Titre principal
 ```

+::right::
+
 ```md {none|all}{lines: false}
 Correct
 └── h1 Titre principal
--- a/layouts/auto-grid.vue
+++ b/layouts/auto-grid.vue
@ -1,9 +1,3 @@
-<script setup lang="ts">
-const props = defineProps<{
-  columns?: number
-}>()
-</script>
-
 <template>
  <div class="slidev-layout">
    <slot />
@ -15,14 +9,8 @@ const props = defineProps<{

 <style scoped>
 .auto-grid {
-  --_columns: v-bind(columns);
  display: grid;
-  grid-template-columns: repeat(var(--_columns, 2), 1fr);
-  grid-auto-rows: 250px;
+  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
 }
-.auto-grid > * {
-  inline-size: 100%;
-  block-size: 100%;
-}
 </style>
--- a/layouts/content.vue
+++ b/layouts/content.vue
@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout content">
-    <div>
-      <slot />
-    </div>
-  </div>
-</template>
--- a/package.json
+++ b/package.json
@ -20,7 +20,6 @@
    "@unocss/reset": "^0.65.1"
  },
  "devDependencies": {
-    "@shikijs/transformers": "^1.24.2",
    "@slidev/cli": "^0.50.0-beta.10",
    "prettier": "3.4.2",
    "prettier-plugin-slidev": "^1.0.5"
--- a/setup/shiki.ts
+++ b/setup/shiki.ts
@ -1,14 +1,11 @@
 import type { ShikiSetupReturn } from '@slidev/types'
 import { defineShikiSetup } from '@slidev/types'

-import {
-  transformerNotationDiff,
-  transformerNotationErrorLevel
-} from '@shikijs/transformers'
-
 export default defineShikiSetup((): ShikiSetupReturn => {
  return {
-    theme: 'one-dark-pro',
-    transformers: [transformerNotationDiff(), transformerNotationErrorLevel()]
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light'
+    }
  }
 })
--- a/styles/base.css
+++ b/styles/base.css
@ -26,7 +26,6 @@ body {

 :is(h1, h2, h3, h4, .h2, .h3, .h4) {
  font-weight: bold;
-  text-wrap: balance;
 }
 :where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
  margin-block-start: var(--space-s);