Skip to content

Commit

Permalink
chore(deps): update deps and use [email protected]
Browse files Browse the repository at this point in the history
  • Loading branch information
ffoodd committed Sep 7, 2023
1 parent f360dfb commit 23fa859
Show file tree
Hide file tree
Showing 34 changed files with 3,738 additions and 491 deletions.
Binary file removed _site/favicon.ico
Binary file not shown.
13 changes: 13 additions & 0 deletions _site/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3,168 changes: 3,157 additions & 11 deletions _site/js/prism.js

Large diffs are not rendered by default.

59 changes: 47 additions & 12 deletions _site/js/script.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,67 @@
(function () {
(() => {
"use strict";

// Toggle switch component
var switches = document.querySelectorAll('[role="switch"]');

switches.forEach(function (el) {
el.addEventListener('click', function () {
var checked = this.getAttribute('aria-checked') === 'true' || false;
const switches = document.querySelectorAll('[role="switch"]');
switches.forEach(el => {
el.addEventListener('click', () => {
const checked = this.getAttribute('aria-checked') === 'true' || false;
this.setAttribute('aria-checked', !checked);

if (this.classList.contains('disable-css')) {
var chart = this.parentNode.nextElementSibling;
const chart = this.parentNode.nextElementSibling;
chart.classList.toggle('chaarts');
}
});
});

// Scrollable tables
var regions = document.querySelectorAll('.table-container');

const regions = document.querySelectorAll('.table-container');
if (window.matchMedia('(min-width: 30em)').matches) {
regions.forEach(function (el) {
var width = el.offsetWidth;
var table = el.querySelector('table');
regions.forEach(el => {
const width = el.offsetWidth;
const table = el.querySelector('table');

if (table.offsetWidth > width) {
el.setAttribute('tabindex', '0');
}
});
}

// Toggles
const toggles = document.querySelectorAll('.toggle');
toggles.forEach(toggle => {
const buttons = toggle.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
for (let button of buttons) {
button.setAttribute('aria-pressed', 'false');
}
button.setAttribute('aria-pressed', 'true');
});
});
});

// Dark mode
const switcher = document.getElementById('theme');
const options = switcher.querySelectorAll('button');
//// Start with user preference
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
document.documentElement.dataset.theme = (prefersDarkScheme.matches) ? 'dark' : 'light';
//// Then check for localStorage
const currentTheme = localStorage.getItem('theme');
document.documentElement.dataset.theme = (currentTheme === 'dark') ? 'dark' : 'light';
//// Apply expected theme
if (document.documentElement.dataset.theme === 'dark') {
document.querySelector('[data-scheme="dark"]').setAttribute('aria-pressed', 'true');
} else {
document.querySelector('[data-scheme="light"]').setAttribute('aria-pressed', 'true');
}
//// Finally handle overriding through buttons
options.forEach(option => {
option.addEventListener('click', () => {
document.documentElement.dataset.theme = option.dataset.scheme;
localStorage.setItem('theme', option.dataset.scheme);
});
});
})(document);
1 change: 0 additions & 1 deletion _site/js/script.min.js

This file was deleted.

16 changes: 1 addition & 15 deletions _site/scss/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,8 @@
/* ==================== */
/* == Vendors
/* ==================== */
@use "sseeeedd/src/scss/styles";
@use "vendors/prism";

.mb-0 {
margin-bottom: 0 !important;
}

.pb-0 {
padding-bottom: 0 !important;
}
@use "sseeeedd/src/sseeeedd";

.fly-out [rel]::before {
content: "\1F30D\A0";
}

// @todo Move this to sseeeedd (#202)
details[open] > summary ~ * {
box-sizing: border-box;
}
23 changes: 20 additions & 3 deletions _site/templates/accueil.njk
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
{% endblock %}

{% block skiplinks %}
<div>
<a href="#nav" class="sr-only sr-only-focusable">Aller à la navigation</a>
<a href="#main" class="sr-only sr-only-focusable">Aller au contenu</a>
<div class="skip-links visually-hidden visually-hidden-focusable">
<a href="#nav">Aller à la navigation</a>
<a href="#main">Aller au contenu</a>
</div>
{% endblock %}

Expand Down Expand Up @@ -45,6 +45,23 @@
</ul>
{% endblock %}

{% block darkmode %}
<div role="group" aria-label="Choix du thème" id="theme" class="toggle no-js-hidden mis-auto">
<button type="button" title="Thème sombre"
data-scheme="dark" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Thème sombre" class="mx-auto no-padding">
<path d="M3 11.98A9.81 9.81 0 0012.57 22a9.53 9.53 0 008.3-5.06 1 1 0 00-.94-1.48l-.1.01a5.2 5.2 0 01-.4.02 7.81 7.81 0 01-7.58-8.01 8.38 8.38 0 011.02-4A1 1 0 0011.92 2 9.86 9.86 0 003 11.98zm7.34-7.65a10.38 10.38 0 00-.48 3.15 9.89 9.89 0 008.28 9.92 7.4 7.4 0 01-5.57 2.6A7.81 7.81 0 015 11.98a8 8 0 015.34-7.65z"></path>
</svg>
</button>
<button type="button" title="Thème clair"
data-scheme="light" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Thème clair" class="mx-auto no-padding">
<path d="M12 18a6 6 0 10-6-6 6 6 0 006 6zm0-10a4 4 0 11-4 4 4 4 0 014-4zM12 4a1 1 0 001-1V2a1 1 0 00-2 0v1a1 1 0 001 1zM11 21v1a1 1 0 002 0v-1a1 1 0 00-2 0zM18.36 6.64a1 1 0 00.71-.3l.7-.7a1 1 0 00-1.4-1.42l-.71.7a1 1 0 00.7 1.72zM4.93 17.66l-.7.7a1 1 0 101.4 1.42l.71-.7a1 1 0 00-1.41-1.42zM22 11h-1a1 1 0 000 2h1a1 1 0 000-2zM2 13h1a1 1 0 000-2H2a1 1 0 000 2zM17.66 17.66a1 1 0 000 1.41l.7.7a1 1 0 001.42-1.4l-.7-.71a1 1 0 00-1.42 0zM4.93 6.34a1 1 0 001.41-1.41l-.7-.7a1 1 0 00-1.42 1.4z"></path>
</svg>
</button>
</div>
{% endblock %}

{% block main %}
<h1>Graphiques</h1>

Expand Down
12 changes: 6 additions & 6 deletions _site/templates/camembert.njk
Original file line number Diff line number Diff line change
Expand Up @@ -467,12 +467,12 @@
<figure aria-label="Exemple de rendu pour 44%.">
<figcaption class="no-padding h5">Exemple de rendu pour <var>44%</var></figcaption>
<div class="grid-2">
<figure aria-label="Capture d’écran du tracé pour 44%." class="mb-0 pb-0">
<figure aria-label="Capture d’écran du tracé pour 44%." class="mbe-0 pbe-0">
<img src="img/pie-1.jpg" alt="Tracé pour clip-path avec une valeur de 44% : six points visibles."
width="264" height="264">
<figcaption>Capture d’écran du tracé pour <var>44%</var>.</figcaption>
</figure>
<figure aria-label="Code généré pour 44%." class="mb-0 pb-0">
<figure aria-label="Code généré pour 44%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:44.njk' %}
<figcaption>Code généré pour <var>44%</var>.</figcaption>
</figure>
Expand All @@ -483,12 +483,12 @@
<figure aria-label="Exemple de rendu pour 64%.">
<figcaption class="no-padding h5">Exemple de rendu pour <var>64%</var></figcaption>
<div class="grid-2">
<figure aria-label="Capture d’écran du tracé pour 64%." class="mb-0 pb-0">
<figure aria-label="Capture d’écran du tracé pour 64%." class="mbe-0 pbe-0">
<img src="img/pie-2.jpg" alt="Tracé pour clip-path avec une valeur de 64% : sept points visibles."
width="264" height="264">
<figcaption>Capture d’écran du tracé pour <var>64%</var>.</figcaption>
</figure>
<figure aria-label="Code généré pour 64%." class="mb-0 pb-0">
<figure aria-label="Code généré pour 64%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:64.njk' %}
<figcaption>Code généré pour <var>64%</var>.</figcaption>
</figure>
Expand All @@ -499,12 +499,12 @@
<figure aria-label="Exemple de rendu pour 88%.">
<figcaption class="no-padding h5">Exemple de rendu pour <var>88%</var></figcaption>
<div class="grid-2">
<figure aria-label="Capture d’écran du tracé pour 88%." class="mb-0 pb-0">
<figure aria-label="Capture d’écran du tracé pour 88%." class="mbe-0 pbe-0">
<img src="img/pie-3.jpg" alt="Tracé pour clip-path avec une valeur de 88% : neuf points visibles."
width="264" height="264">
<figcaption>Capture d’écran du tracé pour <var>88%</var>.</figcaption>
</figure>
<figure aria-label="Code généré pour 88%." class="mb-0 pb-0">
<figure aria-label="Code généré pour 88%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:88.njk' %}
<figcaption>Code généré pour <var>88%</var>.</figcaption>
</figure>
Expand Down
34 changes: 23 additions & 11 deletions _site/templates/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
<html lang="{% block lang %}en{% endblock %}" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block meta %}
<title>chaarts</title>
<meta property="og:url" content="https://ffoodd.github.io/chaarts/">
Expand All @@ -14,21 +13,18 @@
<meta name="twitter:card" content="summary">
<link rel="alternate" hreflang="fr" href="https://ffoodd.github.io/chaarts/accueil.html">
{% endblock %}
<script>
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script>document.documentElement.classList.replace('no-js', 'js');</script>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/styles.min.css" media="all">
<link rel="stylesheet" href="css/chaarts.min.css" media="all">
<link rel="stylesheet" href="css/print.min.css" media="print">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<header role="banner">
<header role="banner" class="d-flex">
{% block skiplinks %}
<div>
<a href="#nav" class="sr-only sr-only-focusable">Skip to main navigation</a>
<a href="#main" class="sr-only sr-only-focusable">Skip to content</a>
<div class="skip-links visually-hidden visually-hidden-focusable">
<a href="#nav">Skip to main navigation</a>
<a href="#main">Skip to content</a>
</div>
{% endblock %}

Expand Down Expand Up @@ -57,6 +53,22 @@
</ul>
{% endblock %}
</nav>
{% block darkmode %}
<div role="group" aria-label="Color scheme selection" id="theme" class="toggle no-js-hidden mis-auto">
<button type="button" title="Dark mode"
data-scheme="dark" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Dark mode" class="mx-auto no-padding">
<path d="M3 11.98A9.81 9.81 0 0012.57 22a9.53 9.53 0 008.3-5.06 1 1 0 00-.94-1.48l-.1.01a5.2 5.2 0 01-.4.02 7.81 7.81 0 01-7.58-8.01 8.38 8.38 0 011.02-4A1 1 0 0011.92 2 9.86 9.86 0 003 11.98zm7.34-7.65a10.38 10.38 0 00-.48 3.15 9.89 9.89 0 008.28 9.92 7.4 7.4 0 01-5.57 2.6A7.81 7.81 0 015 11.98a8 8 0 015.34-7.65z"></path>
</svg>
</button>
<button type="button" title="Light moder"
data-scheme="light" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Light mode" class="mx-auto no-padding">
<path d="M12 18a6 6 0 10-6-6 6 6 0 006 6zm0-10a4 4 0 11-4 4 4 4 0 014-4zM12 4a1 1 0 001-1V2a1 1 0 00-2 0v1a1 1 0 001 1zM11 21v1a1 1 0 002 0v-1a1 1 0 00-2 0zM18.36 6.64a1 1 0 00.71-.3l.7-.7a1 1 0 00-1.4-1.42l-.71.7a1 1 0 00.7 1.72zM4.93 17.66l-.7.7a1 1 0 101.4 1.42l.71-.7a1 1 0 00-1.41-1.42zM22 11h-1a1 1 0 000 2h1a1 1 0 000-2zM2 13h1a1 1 0 000-2H2a1 1 0 000 2zM17.66 17.66a1 1 0 000 1.41l.7.7a1 1 0 001.42-1.4l-.7-.71a1 1 0 00-1.42 0zM4.93 6.34a1 1 0 001.41-1.41l-.7-.7a1 1 0 00-1.42 1.4z"></path>
</svg>
</button>
</div>
{% endblock %}
</header>

<main role="main" id="main" tabindex="-1" itemprop="mainContentOfPage">
Expand Down
12 changes: 6 additions & 6 deletions _site/templates/pie-charts.njk
Original file line number Diff line number Diff line change
Expand Up @@ -460,12 +460,12 @@
<figure aria-label="Rendering example for 44%.">
<figcaption class="no-padding h5">Rendering example for <var>44%</var></figcaption>
<div class="grid-2">
<figure aria-label="Shape screenshot for 44%." class="mb-0 pb-0">
<figure aria-label="Shape screenshot for 44%." class="mbe-0 pbe-0">
<img src="img/pie-1.jpg" alt="clip-path shape with a value of 44%: six visible points." width="264"
height="264">
<figcaption>Shape screenshot for <var>44%</var>.</figcaption>
</figure>
<figure aria-label="Code generated for 44%." class="mb-0 pb-0">
<figure aria-label="Code generated for 44%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:44.njk' %}
<figcaption>Code generated for <var>44%</var>.</figcaption>
</figure>
Expand All @@ -476,12 +476,12 @@
<figure aria-label="Rendering example for 64%.">
<figcaption class="no-padding h5">Rendering example for <var>64%</var></figcaption>
<div class="grid-2">
<figure aria-label="Shape screenshot for 64%." class="mb-0 pb-0">
<figure aria-label="Shape screenshot for 64%." class="mbe-0 pbe-0">
<img src="img/pie-2.jpg" alt="clip-path shape with a value of 64%: seven visible points." width="264"
height="264">
<figcaption>Shape screenshot for <var>64%</var>.</figcaption>
</figure>
<figure aria-label="Code generated for 64%." class="mb-0 pb-0">
<figure aria-label="Code generated for 64%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:64.njk' %}
<figcaption>Code generated for <var>64%</var>.</figcaption>
</figure>
Expand All @@ -492,12 +492,12 @@
<figure aria-label="Rendering example for 88%.">
<figcaption class="no-padding h5">Rendering example for <var>88%</var></figcaption>
<div class="grid-2">
<figure aria-label="Shape screenshot for 88%." class="mb-0 pb-0">
<figure aria-label="Shape screenshot for 88%." class="mbe-0 pbe-0">
<img src="img/pie-3.jpg" alt="clip-path shape with a value of 88%: nine visible points." width="264"
height="264">
<figcaption>Shape screenshot for <var>88%</var>.</figcaption>
</figure>
<figure aria-label="Code generated for 88%." class="mb-0 pb-0">
<figure aria-label="Code generated for 88%." class="mbe-0 pbe-0">
{% include 'includes/_pie-styles:88.njk' %}
<figcaption>Code generated for <var>88%</var>.</figcaption>
</figure>
Expand Down
32 changes: 21 additions & 11 deletions docs/accueil.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,25 @@
<html lang="fr" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>chaarts</title>
<meta property="og:url" content="https://ffoodd.github.io/chaarts/accueil.html">
<meta property="og:title" content="chaarts">
<meta property="og:type" content="article">
<meta property="og:description" name="description" content="Graphiques de données avec HTML & CSS">
<meta name="twitter:card" content="summary">
<link rel="alternate" hreflang="en" href="https://ffoodd.github.io/chaarts/">
<script>
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script>document.documentElement.classList.replace('no-js', 'js');</script>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/styles.min.css" media="all">
<link rel="stylesheet" href="css/chaarts.min.css" media="all">
<link rel="stylesheet" href="css/print.min.css" media="print">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<header role="banner">
<div>
<a href="#nav" class="sr-only sr-only-focusable">Aller à la navigation</a>
<a href="#main" class="sr-only sr-only-focusable">Aller au contenu</a>
<header role="banner" class="d-flex">
<div class="skip-links visually-hidden visually-hidden-focusable">
<a href="#nav">Aller à la navigation</a>
<a href="#main">Aller au contenu</a>
</div>

<nav role="navigation" id="nav" aria-label="Navigation principale">
Expand All @@ -50,6 +46,20 @@
</li>
</ul>
</nav>
<div role="group" aria-label="Choix du thème" id="theme" class="toggle no-js-hidden mis-auto">
<button type="button" title="Thème sombre"
data-scheme="dark" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Thème sombre" class="mx-auto no-padding">
<path d="M3 11.98A9.81 9.81 0 0012.57 22a9.53 9.53 0 008.3-5.06 1 1 0 00-.94-1.48l-.1.01a5.2 5.2 0 01-.4.02 7.81 7.81 0 01-7.58-8.01 8.38 8.38 0 011.02-4A1 1 0 0011.92 2 9.86 9.86 0 003 11.98zm7.34-7.65a10.38 10.38 0 00-.48 3.15 9.89 9.89 0 008.28 9.92 7.4 7.4 0 01-5.57 2.6A7.81 7.81 0 015 11.98a8 8 0 015.34-7.65z"></path>
</svg>
</button>
<button type="button" title="Thème clair"
data-scheme="light" aria-pressed="false">
<svg width="24" height="24" role="img" aria-label="Thème clair" class="mx-auto no-padding">
<path d="M12 18a6 6 0 10-6-6 6 6 0 006 6zm0-10a4 4 0 11-4 4 4 4 0 014-4zM12 4a1 1 0 001-1V2a1 1 0 00-2 0v1a1 1 0 001 1zM11 21v1a1 1 0 002 0v-1a1 1 0 00-2 0zM18.36 6.64a1 1 0 00.71-.3l.7-.7a1 1 0 00-1.4-1.42l-.71.7a1 1 0 00.7 1.72zM4.93 17.66l-.7.7a1 1 0 101.4 1.42l.71-.7a1 1 0 00-1.41-1.42zM22 11h-1a1 1 0 000 2h1a1 1 0 000-2zM2 13h1a1 1 0 000-2H2a1 1 0 000 2zM17.66 17.66a1 1 0 000 1.41l.7.7a1 1 0 001.42-1.4l-.7-.71a1 1 0 00-1.42 0zM4.93 6.34a1 1 0 001.41-1.41l-.7-.7a1 1 0 00-1.42 1.4z"></path>
</svg>
</button>
</div>
</header>

<main role="main" id="main" tabindex="-1" itemprop="mainContentOfPage">
Expand Down
Loading

0 comments on commit 23fa859

Please sign in to comment.