Skip to content

Commit

Permalink
docs: add accessibility statement (#2665)
Browse files Browse the repository at this point in the history 
Co-authored-by: Louis-Maxime Piton <[email protected]>
  • Loading branch information
@julien-deramond @louismaximepiton
julien-deramond and louismaximepiton authored Aug 2, 2024
1 parent 3f56fca commit 10f3d04
Show file tree
Hide file tree
Showing 4 changed files with 528 additions and 13 deletions.
8 changes: 8 additions & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"callout",
"callouts",
"camelCase",
"CEDEX",
"clearfix",
"clic",
"Codesniffer",
Expand All @@ -34,6 +35,8 @@
"Csvg",
"Datalists",
"Deduping",
"Défenseur",
"Défenseurs",
"Deque",
"discoverability",
"docsearch",
Expand All @@ -46,6 +49,7 @@
"dgst",
"errorf",
"evenodd",
"extranet",
"favicon",
"favicons",
"fieldsets",
Expand Down Expand Up @@ -88,6 +92,7 @@
"Packagist",
"paginations",
"pinterest",
"pluri",
"popperjs",
"prebuild",
"preconnect",
Expand All @@ -99,6 +104,8 @@
"printf",
"rects",
"relref",
"réponse",
"RGAA",
"rgba",
"roboto",
"RTLCSS",
Expand Down Expand Up @@ -142,6 +149,7 @@
"WCAG",
"whatsapp",
"WICG's",
"ydette",
"zindex",
"بالعالم",
"مرحبًا"
Expand Down
243 changes: 243 additions & 0 deletions site/assets/scss/_boosted.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,246 @@ body {
}
}
}

// Accessibility statement

.pie {
position: relative;
width: 200px;
height: 200px;
font-size: 3em;
text-align: center;
background: var(--bs-secondary-bg);
background-image: linear-gradient(to right, transparent 50%, var(--bs-primary) 0);
border-radius: 50%; // stylelint-disable-line property-disallowed-list
}

.pie::after,
.pie::before {
position: absolute;
display: block;
width: 50%;
height: 100%;
margin-left: 50%;
content: "";
background-color: inherit;
border-radius: 0 100% 100% 0 / 50%; // stylelint-disable-line property-disallowed-list
transform-origin: left;
}

.pie::after {
background-color: var(--bs-primary);
}

.pie-val {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
z-index: 2;
padding-top: 25%;
background-color: var(--bs-body-bg);
border-radius: 50%; // stylelint-disable-line property-disallowed-list
}

// .pie[data-value="1"]::before { transform: rotate(3.6deg); }
// .pie[data-value="1"]::after { display: none; }
// .pie[data-value="2"]::before { transform: rotate(7.2deg); }
// .pie[data-value="2"]::after { display: none; }
// .pie[data-value="3"]::before { transform: rotate(10.8deg); }
// .pie[data-value="3"]::after { display: none; }
// .pie[data-value="4"]::before { transform: rotate(14.4deg); }
// .pie[data-value="4"]::after { display: none; }
// .pie[data-value="5"]::before { transform: rotate(18deg); }
// .pie[data-value="5"]::after { display: none; }
// .pie[data-value="6"]::before { transform: rotate(21.6deg); }
// .pie[data-value="6"]::after { display: none; }
// .pie[data-value="7"]::before { transform: rotate(25.2deg); }
// .pie[data-value="7"]::after { display: none; }
// .pie[data-value="8"]::before { transform: rotate(28.8deg); }
// .pie[data-value="8"]::after { display: none; }
// .pie[data-value="9"]::before { transform: rotate(32.4deg); }
// .pie[data-value="9"]::after { display: none; }
// .pie[data-value="10"]::before { transform: rotate(36deg); }
// .pie[data-value="10"]::after { display: none; }
// .pie[data-value="11"]::before { transform: rotate(39.6deg); }
// .pie[data-value="11"]::after { display: none; }
// .pie[data-value="12"]::before { transform: rotate(43.2deg); }
// .pie[data-value="12"]::after { display: none; }
// .pie[data-value="13"]::before { transform: rotate(46.8deg); }
// .pie[data-value="13"]::after { display: none; }
// .pie[data-value="14"]::before { transform: rotate(50.4deg); }
// .pie[data-value="14"]::after { display: none; }
// .pie[data-value="15"]::before { transform: rotate(54deg); }
// .pie[data-value="15"]::after { display: none; }
// .pie[data-value="16"]::before { transform: rotate(57.6deg); }
// .pie[data-value="16"]::after { display: none; }
// .pie[data-value="17"]::before { transform: rotate(61.2deg); }
// .pie[data-value="17"]::after { display: none; }
// .pie[data-value="18"]::before { transform: rotate(64.8deg); }
// .pie[data-value="18"]::after { display: none; }
// .pie[data-value="19"]::before { transform: rotate(68.4deg); }
// .pie[data-value="19"]::after { display: none; }
// .pie[data-value="20"]::before { transform: rotate(72deg); }
// .pie[data-value="20"]::after { display: none; }
// .pie[data-value="21"]::before { transform: rotate(75.6deg); }
// .pie[data-value="21"]::after { display: none; }
// .pie[data-value="22"]::before { transform: rotate(79.2deg); }
// .pie[data-value="22"]::after { display: none; }
// .pie[data-value="23"]::before { transform: rotate(82.8deg); }
// .pie[data-value="23"]::after { display: none; }
// .pie[data-value="24"]::before { transform: rotate(86.4deg); }
// .pie[data-value="24"]::after { display: none; }
// .pie[data-value="25"]::before { transform: rotate(90deg); }
// .pie[data-value="25"]::after { display: none; }
// .pie[data-value="26"]::before { transform: rotate(93.6deg); }
// .pie[data-value="26"]::after { display: none; }
// .pie[data-value="27"]::before { transform: rotate(97.2deg); }
// .pie[data-value="27"]::after { display: none; }
// .pie[data-value="28"]::before { transform: rotate(100.8deg); }
// .pie[data-value="28"]::after { display: none; }
// .pie[data-value="29"]::before { transform: rotate(104.4deg); }
// .pie[data-value="29"]::after { display: none; }
// .pie[data-value="30"]::before { transform: rotate(108deg); }
// .pie[data-value="30"]::after { display: none; }
// .pie[data-value="31"]::before { transform: rotate(111.6deg); }
// .pie[data-value="31"]::after { display: none; }
// .pie[data-value="32"]::before { transform: rotate(115.2deg); }
// .pie[data-value="32"]::after { display: none; }
// .pie[data-value="33"]::before { transform: rotate(118.8deg); }
// .pie[data-value="33"]::after { display: none; }
// .pie[data-value="34"]::before { transform: rotate(122.4deg); }
// .pie[data-value="34"]::after { display: none; }
// .pie[data-value="35"]::before { transform: rotate(126deg); }
// .pie[data-value="35"]::after { display: none; }
// .pie[data-value="36"]::before { transform: rotate(129.6deg); }
// .pie[data-value="36"]::after { display: none; }
// .pie[data-value="37"]::before { transform: rotate(133.2deg); }
// .pie[data-value="37"]::after { display: none; }
// .pie[data-value="38"]::before { transform: rotate(136.8deg); }
// .pie[data-value="38"]::after { display: none; }
// .pie[data-value="39"]::before { transform: rotate(140.4deg); }
// .pie[data-value="39"]::after { display: none; }
// .pie[data-value="40"]::before { transform: rotate(144deg); }
// .pie[data-value="40"]::after { display: none; }
// .pie[data-value="41"]::before { transform: rotate(147.6deg); }
// .pie[data-value="41"]::after { display: none; }
// .pie[data-value="42"]::before { transform: rotate(151.2deg); }
// .pie[data-value="42"]::after { display: none; }
// .pie[data-value="43"]::before { transform: rotate(154.8deg); }
// .pie[data-value="43"]::after { display: none; }
// .pie[data-value="44"]::before { transform: rotate(158.4deg); }
// .pie[data-value="44"]::after { display: none; }
// .pie[data-value="45"]::before { transform: rotate(162deg); }
// .pie[data-value="45"]::after { display: none; }
// .pie[data-value="46"]::before { transform: rotate(165.6deg); }
// .pie[data-value="46"]::after { display: none; }
// .pie[data-value="47"]::before { transform: rotate(169.2deg); }
// .pie[data-value="47"]::after { display: none; }
// .pie[data-value="48"]::before { transform: rotate(172.8deg); }
// .pie[data-value="48"]::after { display: none; }
// .pie[data-value="49"]::before { transform: rotate(176.4deg); }
// .pie[data-value="49"]::after { display: none; }
// .pie[data-value="50"]::before { transform: rotate(180deg); }
// .pie[data-value="50"]::after { display: none; }
// .pie[data-value="51"]::after { transform: rotate(3.6deg); }
// .pie[data-value="51"]::before { display: none; }
// .pie[data-value="52"]::after { transform: rotate(7.2deg); }
// .pie[data-value="52"]::before { display: none; }
// .pie[data-value="53"]::after { transform: rotate(10.8deg); }
// .pie[data-value="53"]::before { display: none; }
// .pie[data-value="54"]::after { transform: rotate(14.4deg); }
// .pie[data-value="54"]::before { display: none; }
// .pie[data-value="55"]::after { transform: rotate(18deg); }
// .pie[data-value="55"]::before { display: none; }
// .pie[data-value="56"]::after { transform: rotate(21.6deg); }
// .pie[data-value="56"]::before { display: none; }
// .pie[data-value="57"]::after { transform: rotate(25.2deg); }
// .pie[data-value="57"]::before { display: none; }
// .pie[data-value="58"]::after { transform: rotate(28.8deg); }
// .pie[data-value="58"]::before { display: none; }
// .pie[data-value="59"]::after { transform: rotate(32.4deg); }
// .pie[data-value="59"]::before { display: none; }
// .pie[data-value="60"]::after { transform: rotate(36deg); }
// .pie[data-value="60"]::before { display: none; }
// .pie[data-value="61"]::after { transform: rotate(39.6deg); }
// .pie[data-value="61"]::before { display: none; }
// .pie[data-value="62"]::after { transform: rotate(43.2deg); }
// .pie[data-value="62"]::before { display: none; }
// .pie[data-value="63"]::after { transform: rotate(46.8deg); }
// .pie[data-value="63"]::before { display: none; }
.pie[data-value="64"]::after { transform: rotate(50.4deg); }
.pie[data-value="64"]::before { display: none; }
// .pie[data-value="65"]::after { transform: rotate(54deg); }
// .pie[data-value="65"]::before { display: none; }
// .pie[data-value="66"]::after { transform: rotate(57.6deg); }
// .pie[data-value="66"]::before { display: none; }
// .pie[data-value="67"]::after { transform: rotate(61.2deg); }
// .pie[data-value="67"]::before { display: none; }
// .pie[data-value="68"]::after { transform: rotate(64.8deg); }
// .pie[data-value="68"]::before { display: none; }
// .pie[data-value="69"]::after { transform: rotate(68.4deg); }
// .pie[data-value="69"]::before { display: none; }
// .pie[data-value="70"]::after { transform: rotate(72deg); }
// .pie[data-value="70"]::before { display: none; }
// .pie[data-value="71"]::after { transform: rotate(75.6deg); }
// .pie[data-value="71"]::before { display: none; }
// .pie[data-value="72"]::after { transform: rotate(79.2deg); }
// .pie[data-value="72"]::before { display: none; }
// .pie[data-value="73"]::after { transform: rotate(82.8deg); }
// .pie[data-value="73"]::before { display: none; }
// .pie[data-value="74"]::after { transform: rotate(86.4deg); }
// .pie[data-value="74"]::before { display: none; }
// .pie[data-value="75"]::after { transform: rotate(90deg); }
// .pie[data-value="75"]::before { display: none; }
// .pie[data-value="76"]::after { transform: rotate(93.6deg); }
// .pie[data-value="76"]::before { display: none; }
// .pie[data-value="77"]::after { transform: rotate(97.2deg); }
// .pie[data-value="77"]::before { display: none; }
// .pie[data-value="78"]::after { transform: rotate(100.8deg); }
// .pie[data-value="78"]::before { display: none; }
// .pie[data-value="79"]::after { transform: rotate(104.4deg); }
// .pie[data-value="79"]::before { display: none; }
// .pie[data-value="80"]::after { transform: rotate(108deg); }
// .pie[data-value="80"]::before { display: none; }
// .pie[data-value="81"]::after { transform: rotate(111.6deg); }
// .pie[data-value="81"]::before { display: none; }
// .pie[data-value="82"]::after { transform: rotate(115.2deg); }
// .pie[data-value="82"]::before { display: none; }
// .pie[data-value="83"]::after { transform: rotate(118.8deg); }
// .pie[data-value="83"]::before { display: none; }
// .pie[data-value="84"]::after { transform: rotate(122.4deg); }
// .pie[data-value="84"]::before { display: none; }
// .pie[data-value="85"]::after { transform: rotate(126deg); }
// .pie[data-value="85"]::before { display: none; }
// .pie[data-value="86"]::after { transform: rotate(129.6deg); }
// .pie[data-value="86"]::before { display: none; }
.pie[data-value="87"]::after { transform: rotate(133.2deg); }
.pie[data-value="87"]::before { display: none; }
// .pie[data-value="88"]::after { transform: rotate(136.8deg); }
// .pie[data-value="88"]::before { display: none; }
// .pie[data-value="89"]::after { transform: rotate(140.4deg); }
// .pie[data-value="89"]::before { display: none; }
// .pie[data-value="90"]::after { transform: rotate(144deg); }
// .pie[data-value="90"]::before { display: none; }
// .pie[data-value="91"]::after { transform: rotate(147.6deg); }
// .pie[data-value="91"]::before { display: none; }
// .pie[data-value="92"]::after { transform: rotate(151.2deg); }
// .pie[data-value="92"]::before { display: none; }
// .pie[data-value="93"]::after { transform: rotate(154.8deg); }
// .pie[data-value="93"]::before { display: none; }
// .pie[data-value="94"]::after { transform: rotate(158.4deg); }
// .pie[data-value="94"]::before { display: none; }
// .pie[data-value="95"]::after { transform: rotate(162deg); }
// .pie[data-value="95"]::before { display: none; }
// .pie[data-value="96"]::after { transform: rotate(165.6deg); }
// .pie[data-value="96"]::before { display: none; }
// .pie[data-value="97"]::after { transform: rotate(169.2deg); }
// .pie[data-value="97"]::before { display: none; }
// .pie[data-value="98"]::after { transform: rotate(172.8deg); }
// .pie[data-value="98"]::before { display: none; }
// .pie[data-value="99"]::after { transform: rotate(176.4deg); }
// .pie[data-value="99"]::before { display: none; }
// .pie[data-value="100"]::after { transform: rotate(180deg); }
// .pie[data-value="100"]::before { display: none; }
Loading

0 comments on commit 10f3d04

Please sign in to comment.