feat(style): ajoute un container général

pull/1/head
Jalil Arfaoui 2022-07-25 02:07:32 +02:00
parent aa1fb4e349
commit 94ac1e62b1
8 changed files with 742 additions and 43 deletions

View File

@ -6,6 +6,7 @@
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
<excludeFolder url="file://$MODULE_DIR$/_site" />
<excludeFolder url="file://$MODULE_DIR$/src/css" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />

View File

@ -12,8 +12,9 @@
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
</head>
<body>
<div class="m-3 bg-orange-50 rounded-xl">
<header>
<img id="Logo" class="max-h-20" src="/images/Logo.jpg"/>
<img id="Logo" class="max-h-20 overflow-hidden p-1" src="/images/Logo.jpg"/>
<div id="Title" class="text-2xl font-bold"><a href="{{ '/' | url }}">{{ metadata.title }}</a></div>
{% set navigationOptions = {
@ -41,6 +42,8 @@
<footer></footer>
</div>
<!-- Current page: {{ page.url | url }} -->
<script defer data-domain="nonscollectif.arfaoui.net" src="https://plausible.io/js/plausible.js"></script>

704
src/css/global.css Normal file
View File

@ -0,0 +1,704 @@
/*
! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
body {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
font-size: 1.125rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
}
h1 {
margin-bottom: 0.5rem;
font-size: 2.25rem;
line-height: 2.5rem;
}
h2 {
margin-top: 1.5rem;
display: block;
font-size: 1.5rem;
line-height: 2rem;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-color: #78350f;
text-decoration-color: #78350f;
text-decoration-thickness: 4px;
}
main {
padding: 1rem;
}
p {
margin-top: 0.75rem;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::-webkit-backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-1 {
left: 0.25rem;
}
.clear-both {
clear: both;
}
.m-3 {
margin: 0.75rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.max-h-20 {
max-height: 5rem;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.overflow-hidden {
overflow: hidden;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border-2 {
border-width: 2px;
}
.border-b-\[1px\] {
border-bottom-width: 1px;
}
.border-dashed {
border-style: dashed;
}
.border-slate-700 {
--tw-border-opacity: 1;
border-color: rgb(51 65 85 / var(--tw-border-opacity));
}
.border-amber-900 {
--tw-border-opacity: 1;
border-color: rgb(120 53 15 / var(--tw-border-opacity));
}
.bg-orange-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}
.bg-amber-200 {
--tw-bg-opacity: 1;
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}
.bg-amber-800 {
--tw-bg-opacity: 1;
background-color: rgb(146 64 14 / var(--tw-bg-opacity));
}
.p-1 {
padding: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
header {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom-width: 1px;
border-style: dashed;
--tw-border-opacity: 1;
border-color: rgb(51 65 85 / var(--tw-border-opacity));
}
header > div#Title {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
}
header > ul {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
header > ul > li {
position: relative;
margin-top: 2rem;
margin-bottom: 2rem;
display: inline;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
header > ul > li > ul {
display: none;
}
header > ul > li:hover > ul {
position: absolute;
left: 0.25rem;
margin: 0.25rem;
display: block;
display: flex;
flex-direction: column;
border-radius: 0.375rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(120 53 15 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
header > ul > li:hover > ul > li {
white-space: nowrap;
padding: 0.25rem;
}
header > ul > li:hover > ul > li:hover {
--tw-bg-opacity: 1;
background-color: rgb(146 64 14 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

View File

@ -28,7 +28,7 @@ Les familles de NonScollectif ont la chance dêtre accompagnées par une a
Les résultats des premières audiences seront cruciaux et détermineront les actions à venir. Verdict dans quelques jours ou quelques semaines, en provenance notamment de lacadémie de Dijon où Maître Habib a plaidé récemment pour une autre famille.
## Une priorité sur le plan su symbole
## Une priorité sur le plan du symbole
Cette guerre pour la préservation du libre choix dinstruction pourrait paraître vaine ou secondaire… Cest vrai, un peu plus de 60 000 enfants seulement sont concernées par lIEF… À peine 0,4% du total des enfants en âge dêtre scolarisés en France. Cest peu.

View File

@ -1,6 +1,6 @@
@layer base {
body {
@apply text-slate-800 bg-orange-50 text-lg;
@apply text-slate-800 text-lg bg-gray-700;
}
h1 {
@apply text-4xl mb-2;

View File

@ -3,43 +3,4 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Colors */
:root {
--lightgray: #e0e0e0;
--gray: #C0C0C0;
--darkgray: #333;
--navy: #17050F;
--blue: #082840;
--white: #fff;
--beige: #fffff5;
}
header {
@apply border-b-[1px] border-dashed border-slate-700 flex flex-wrap items-center;
> div#Title {
@apply my-2 mx-4;
}
> ul {
@apply my-2;
> li {
@apply relative inline px-2 py-8 my-8;
> ul {
@apply hidden;
}
}
> li:hover > ul {
@apply block absolute left-1 flex flex-col bg-amber-200 drop-shadow-lg rounded-md border-amber-900 border-2 m-1;
> li {
@apply whitespace-nowrap p-1;
}
> li:hover {
@apply bg-amber-800 text-white;
}
}
}
}
@import "header.pcss";

29
src/scss/header.pcss Normal file
View File

@ -0,0 +1,29 @@
header {
@apply border-b-[1px] border-dashed border-slate-700 flex flex-wrap items-center;
> div#Title {
@apply my-2 mx-4;
}
> ul {
@apply my-2;
> li {
@apply relative inline px-2 py-8 my-8;
> ul {
@apply hidden;
}
}
> li:hover > ul {
@apply block absolute left-1 flex flex-col bg-amber-200 drop-shadow-lg rounded-md border-amber-900 border-2 m-1;
> li {
@apply whitespace-nowrap p-1;
}
> li:hover {
@apply bg-amber-800 text-white;
}
}
}
}

View File

@ -2,6 +2,7 @@
module.exports = {
content: [
'./src/**/*.njk',
'./src/scss/*.pcss',
],
theme: {
extend: {},