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