diff --git a/css/base.css b/css/base.css index 268ef28..e00b4c1 100644 --- a/css/base.css +++ b/css/base.css @@ -75,10 +75,12 @@ footer { text-align: center; display: flex; justify-content: space-evenly; + align-items: end; } @media (max-width: 600px) { footer { flex-direction: column; + align-items: center; } } \ No newline at end of file diff --git a/css/guide.css b/css/guide.css new file mode 100644 index 0000000..d175b18 --- /dev/null +++ b/css/guide.css @@ -0,0 +1,112 @@ +body { + background-image: radial-gradient(at left top, #058C9E, #BC5180); + background-repeat: no-repeat; + background-attachment: fixed; +} + +main { + width: 100%; + max-width: 800px; + margin-left: auto; + margin-right: auto; + background: none; + padding-bottom: 100px; + font-family: Erika; + line-height: 1.5; +} + +main > * { + width: 100%; + background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white; + box-sizing: border-box; + margin: 0; + background-size: 100% auto; + padding-bottom: 1em; + filter: drop-shadow(5px 3px 2px #000000b7); + padding-left: 15px; + padding-right: 15px; + z-index: 1; + position: relative; + max-width: 100%; +} + +main > img { + object-fit: scale-down; +} + +main > .sticker { + background: none; + z-index: 0; +} + +main > *.draggable:not(.sticker) { + + &:not(h2) { + width: 100%; + } + + &:not(h1):not(h2):hover { + animation: none; + } +} + + +main ul, +main ol, +main dl { + padding-left: calc(1em + 15px); +} + +main h1 { + text-align: center; + font-size: 4rem; +} + +main h1, +main h2 { + background: none; + padding-top: 1.5em; + padding-left: 0; + padding-right: 0; +} + +@media screen and (max-width: 800px) { + main h2 { + padding-left: 1em; + } +} + +main h1 + *, +main h2 + * { + padding-top: 1em; +} + +main h1 small { + display: block; + background: url(../assets/notebook.jpg); + color: black; + font-family: Erika; + font-size: 2.5rem; + width: fit-content; + max-width: 90%; + margin-left: auto; + margin-right: auto; + transform: translateY(-0.3em) rotate(-2deg); +} + +main pre { + white-space: pre-wrap; +} + +main a { + text-decoration: underline; + color: teal; +} + +main a:visited { + color: rebeccapurple; +} + +footer { + padding: 1em; +} \ No newline at end of file diff --git a/feat-infos-pratiques.patch b/feat-infos-pratiques.patch new file mode 100644 index 0000000..d9e90b9 --- /dev/null +++ b/feat-infos-pratiques.patch @@ -0,0 +1,459 @@ +diff --git a/css/base.css b/css/base.css +index 12d4840..e00b4c1 100644 +--- a/css/base.css ++++ b/css/base.css +@@ -24,16 +24,18 @@ a { + } + + main { +- background-color: #413f43; +- background-image: url(../assets/background.jpg); +- background-repeat: no-repeat; +- background-size: cover; ++ /* background-color: #413f43;*/ ++ background: #058C9E; ++ background: radial-gradient(at left top, #058C9E, #BC5180); ++ /* background-repeat: no-repeat; ++ background-size: cover; */ + } + + +-main h1, main h2 { ++main h1, main h2, main h3 { + font-family: Banquise; + color: white; ++ z-index: 2; + } + + main h1 { +@@ -73,10 +75,12 @@ footer { + text-align: center; + display: flex; + justify-content: space-evenly; ++ align-items: end; + } + + @media (max-width: 600px) { + footer { + flex-direction: column; ++ align-items: center; + } + } +\ No newline at end of file +diff --git a/css/drag.css b/css/drag.css +index 6e97cd7..b3b3804 100644 +--- a/css/drag.css ++++ b/css/drag.css +@@ -17,6 +17,28 @@ main img.draggable { + filter: drop-shadow(5px 3px 2px #000000b7); + } + ++.draggable:hover { ++ /* Start the shake animation and make the animation last for 0.5 seconds */ ++ animation: shake 3s; ++ ++ /* When the animation is finished, start again */ ++ animation-iteration-count: infinite; ++} ++ ++@keyframes shake { ++ 0% { transform: translate(1px, 1px) rotate(0deg); } ++ 10% { transform: translate(-1px, -2px) rotate(-1deg); } ++ 20% { transform: translate(-2px, 0px) rotate(1deg); } ++ 30% { transform: translate(2px, 2px) rotate(0deg); } ++ 40% { transform: translate(1px, -1px) rotate(1deg); } ++ 50% { transform: translate(-1px, 2px) rotate(-1deg); } ++ 60% { transform: translate(-3px, 1px) rotate(0deg); } ++ 70% { transform: translate(2px, 1px) rotate(-1deg); } ++ 80% { transform: translate(-1px, -1px) rotate(1deg); } ++ 90% { transform: translate(1px, 2px) rotate(0deg); } ++ 100% { transform: translate(1px, -2px) rotate(-1deg); } ++} ++ + span.draggable { + display: inline-block; + /* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */ +diff --git a/css/guide.css b/css/guide.css +new file mode 100644 +index 0000000..d175b18 +--- /dev/null ++++ b/css/guide.css +@@ -0,0 +1,112 @@ ++body { ++ background-image: radial-gradient(at left top, #058C9E, #BC5180); ++ background-repeat: no-repeat; ++ background-attachment: fixed; ++} ++ ++main { ++ width: 100%; ++ max-width: 800px; ++ margin-left: auto; ++ margin-right: auto; ++ background: none; ++ padding-bottom: 100px; ++ font-family: Erika; ++ line-height: 1.5; ++} ++ ++main > * { ++ width: 100%; ++ background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white; ++ box-sizing: border-box; ++ margin: 0; ++ background-size: 100% auto; ++ padding-bottom: 1em; ++ filter: drop-shadow(5px 3px 2px #000000b7); ++ padding-left: 15px; ++ padding-right: 15px; ++ z-index: 1; ++ position: relative; ++ max-width: 100%; ++} ++ ++main > img { ++ object-fit: scale-down; ++} ++ ++main > .sticker { ++ background: none; ++ z-index: 0; ++} ++ ++main > *.draggable:not(.sticker) { ++ ++ &:not(h2) { ++ width: 100%; ++ } ++ ++ &:not(h1):not(h2):hover { ++ animation: none; ++ } ++} ++ ++ ++main ul, ++main ol, ++main dl { ++ padding-left: calc(1em + 15px); ++} ++ ++main h1 { ++ text-align: center; ++ font-size: 4rem; ++} ++ ++main h1, ++main h2 { ++ background: none; ++ padding-top: 1.5em; ++ padding-left: 0; ++ padding-right: 0; ++} ++ ++@media screen and (max-width: 800px) { ++ main h2 { ++ padding-left: 1em; ++ } ++} ++ ++main h1 + *, ++main h2 + * { ++ padding-top: 1em; ++} ++ ++main h1 small { ++ display: block; ++ background: url(../assets/notebook.jpg); ++ color: black; ++ font-family: Erika; ++ font-size: 2.5rem; ++ width: fit-content; ++ max-width: 90%; ++ margin-left: auto; ++ margin-right: auto; ++ transform: translateY(-0.3em) rotate(-2deg); ++} ++ ++main pre { ++ white-space: pre-wrap; ++} ++ ++main a { ++ text-decoration: underline; ++ color: teal; ++} ++ ++main a:visited { ++ color: rebeccapurple; ++} ++ ++footer { ++ padding: 1em; ++} +\ No newline at end of file +diff --git a/guide.template.html b/guide.template.html +new file mode 100644 +index 0000000..53ad069 +--- /dev/null ++++ b/guide.template.html +@@ -0,0 +1,56 @@ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ Guide Interhack Camp 2026 ++ ++ ++ ++
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
++ ++ ++ +diff --git a/index.html b/index.html +index cb211f1..f991bbf 100644 +--- a/index.html ++++ b/index.html +@@ -13,8 +13,8 @@ + + +
+ +diff --git a/infos-pratiques.html b/infos-pratiques.html +deleted file mode 100644 +index de63cc0..0000000 +--- a/infos-pratiques.html ++++ /dev/null +@@ -1,136 +0,0 @@ +- +- +- +- +- +- +- +- +- +- Camp Interhack 2026 +- +- +- +- +-
+- +- +- +- +- +- +- +- +- +- +- +- +- +- +- +- +- +- +-

+- Informations +-
+- Pratiques +-

+- +-

+- Quand ? +-

+- +-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Où ? +-

+- +-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +- +-

+- Comment ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Quoi ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Venir ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Manger ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Dormir ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Le prix ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-

+- Le son ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +- +-

+- Le réseau ? +-

+-
+-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, earum omnis quaerat reprehenderit error atque amet minus, quod quo repellat fuga exercitationem sequi ex libero velit pariatur. Omnis, alias!

+-
+- +-
+- +- +- +- +diff --git a/js/drag.js b/js/drag.js +index 55d68e5..7fdf564 100644 +--- a/js/drag.js ++++ b/js/drag.js +@@ -1,5 +1,10 @@ + const stepSize = 100; + const main = document.querySelector('main'); ++ ++for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) { ++ guideDraggable.classList.add("draggable"); ++} ++ + const draggables = document.querySelectorAll(".draggable"); + const randomStarts = document.querySelectorAll(".randomStart"); + +diff --git a/update-guide.sh b/update-guide.sh +new file mode 100755 +index 0000000..f1c4990 +--- /dev/null ++++ b/update-guide.sh +@@ -0,0 +1,25 @@ ++#!/bin/bash ++ ++GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA" ++ ++DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'" ++ ++echo "Mise a jour du guide dans guide.html a partir du edgedoc" ++echo "$GUIDE_EDGEDOC_URL" ++ ++set -e ++curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md ++pandoc --from markdown --to html guide.tmp.md > guide.tmp.html ++cat guide.template.html \ ++ | sed '/EDGEDOC/{ ++ s///; ++ r guide.tmp.html ++ }' \ ++ | sed -e "/DATE/{ ++ s///; ++ n; ++ e $DATE_CMD ++ }" \ ++ > guide.html ++ ++rm guide.tmp.md guide.tmp.html +\ No newline at end of file diff --git a/guide.html b/guide.html new file mode 100644 index 0000000..e69de29 diff --git a/guide.template.html b/guide.template.html new file mode 100644 index 0000000..53ad069 --- /dev/null +++ b/guide.template.html @@ -0,0 +1,56 @@ + + + + + + + + + + Guide Interhack Camp 2026 + + + +
+ + + + + + + + + + + + + + + + + +
+ + + diff --git a/index.html b/index.html index de37388..4d17ca0 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@
diff --git a/js/drag.js b/js/drag.js index 55d68e5..7fdf564 100644 --- a/js/drag.js +++ b/js/drag.js @@ -1,5 +1,10 @@ const stepSize = 100; const main = document.querySelector('main'); + +for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) { + guideDraggable.classList.add("draggable"); +} + const draggables = document.querySelectorAll(".draggable"); const randomStarts = document.querySelectorAll(".randomStart"); diff --git a/update-guide.sh b/update-guide.sh new file mode 100755 index 0000000..f1c4990 --- /dev/null +++ b/update-guide.sh @@ -0,0 +1,25 @@ +#!/bin/bash + +GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA" + +DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'" + +echo "Mise a jour du guide dans guide.html a partir du edgedoc" +echo "$GUIDE_EDGEDOC_URL" + +set -e +curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md +pandoc --from markdown --to html guide.tmp.md > guide.tmp.html +cat guide.template.html \ + | sed '/EDGEDOC/{ + s///; + r guide.tmp.html + }' \ + | sed -e "/DATE/{ + s///; + n; + e $DATE_CMD + }" \ + > guide.html + +rm guide.tmp.md guide.tmp.html \ No newline at end of file