diff --git a/css/base.css b/css/base.css index 88e47c0..6e2fe0f 100644 --- a/css/base.css +++ b/css/base.css @@ -1,34 +1,21 @@ - -/* Primary Font */ @font-face { - font-family: MonTrappist; - src: url(../assets/fonts/MonTrappist-Black.woff); + font-family: Banquise; + src: url(../assets/Banquise-Regular.woff); } -/* Secondary Font */ @font-face { - font-family: Segoesc; - src: url(../assets/fonts/segoesc.ttf); + font-family: Dymo; + src: url(../assets/Dymo.ttf); } -/* Basic Font */ -/* font-family: Courier New */ - -:root { - --primary-bg-color: black; /* global scope */ - --accent-violet: #8800FF; - --accent-yellow: #ffbf3e; - --accent-orange: #FF4E00 ; - --accent-minor-blue: #33D8D8; - --text-color-primary: #FFFFFF; +@font-face { + font-family: Erika; + src: url(../assets/Erika-Type.ttf); } html, body { height: 100%; margin: 0; - font-family: "Verdana", "Helvetica", "Arial", sans-serif; - color: var(--text-color-primary); - background: var(--primary-bg-color); } img { @@ -36,75 +23,34 @@ img { } a { - color: var(--accent-yellow); text-decoration: none; + color: black; } main { + /* 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 h3 { - font-family: MonTrappist; + font-family: Banquise; color: white; z-index: 2; } main h1 { - position: relative; - text-align: center; - margin: auto; - width: 50%; - font-size: clamp(4em, 14vw, 8em); - margin-top: 5%; - max-width: 1400px; font-size: 8em; } -main h2 { - position: relative; - margin: 4% auto; - text-align: center; - font-size: clamp(1.5em, 4vw, 3em); - font-family: segoesc; -} - -main h3 { - position: relative; - text-align: center; - margin: auto; - width: 100%; - font-size: clamp(2em, 4vw, 4em); - margin-top: 5%; -} - -main p { - margin: 1%; - padding: 1%; - /* border: solid 1px; */ - opacity: 0.90; - display: inline-block; - z-index: 3; - background-color: black; - -} - -section { - max-width: 1400px; - font-size: 2em; - text-align:justify; - margin: auto; - margin-bottom: 100px; - padding: 2%; - padding-left: 0px; - z-index: 1; - box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet); -} - nav, footer, aside { - background: var(--accent-violet); + background: #d7d7d7; + background: url(../assets/paper.avif); padding: 5px; - font-family: MonTrappist; + font-family: Erika; z-index: 10000; position: relative; opacity: 0.95; @@ -112,6 +58,7 @@ nav, footer, aside { } nav a, footer a, aside a { + font-family: Dymo; font-size: 3em; display: inline-block; margin-right: 1em; @@ -125,6 +72,8 @@ footer a:hover, nav a:hover { transform: rotate(-2deg); } + + footer { display: block; text-align: center; @@ -139,39 +88,3 @@ footer { align-items: center; } } - -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; - } -} - -#camp { - font-family: segoesc; - float: left; - margin-left: 10%; - line-height: 0.8em; - font-size: 0.9em; -} - -#interhack { - text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet); - color: var(--accent-yellow); - margin-right: 10%; - line-height: 0.5em; - margin-top: -0.4em; -} diff --git a/css/drag.css b/css/drag.css index a0ad629..1f15582 100644 --- a/css/drag.css +++ b/css/drag.css @@ -1,8 +1,8 @@ main img.draggable { - max-width: 200px; - max-height: 200px; + max-width: 150px; + max-height: 150px; position: absolute; } @@ -12,7 +12,7 @@ main img.draggable { position: relative; width: fit-content; user-select: none; - z-index: 10; + z-index: 1; filter: drop-shadow(5px 3px 2px #000000b7); } 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/css/home.css b/css/home.css index f637eb9..859720c 100644 --- a/css/home.css +++ b/css/home.css @@ -1,9 +1,63 @@ +main { + display: block; + color: black; + overflow: hidden; + width: 100%; + min-height: 1000px; +} + +main h1 { + position: relative; + text-align: center; + margin: auto; + width: 100%; + font-size: clamp(4em, 14vw, 8em); + margin-top: 5%; +} + +main h2 { + position: relative; + margin: 4% auto; + text-align: center; + font-size: clamp(2.5em, 5vw, 4em); +} + +main h3 { + position: relative; + text-align: center; + margin: auto; + width: 100%; + font-size: clamp(2em, 4vw, 4em); + margin-top: 5%; +} + +main p { + margin: 1%; + padding: 1%; + background: white; + background: url(../assets/notebook.jpg); + /* border: solid 1px; */ + opacity: 0.92; + display: inline-block; + z-index: 3; +} + +section { + max-width: 1400px; + font-size: 1.5em; + text-align: center; + font-family: Erika; + margin: auto; + margin-bottom: 100px; + padding: 2%; +} .logo { width: 100%; height: 100%; max-width: 7em ; padding: 0.2em; + background-color:rgba(99, 99, 99, 0.2); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 1em; z-index: 2; diff --git a/guide.template.html b/guide.template.html index 33a7b30..2dba4fc 100644 --- a/guide.template.html +++ b/guide.template.html @@ -24,37 +24,23 @@ BISOUS guide poster -
- + + + + + + - - - - - -

- camp -
- interhack -

- -

- Informations pratiques -

- -
- -