diff --git a/.gitignore b/.gitignore index e864957..9574248 100644 --- a/.gitignore +++ b/.gitignore @@ -61,8 +61,6 @@ content/* # CSS # --------------- -assets/css/src -assets/css/src/* assets/css/style.css assets/css/style.css.map @@ -72,3 +70,8 @@ kirby kirby/* vendor vendor/* + +# Local files +# --------------- +local +local/* \ No newline at end of file diff --git a/assets/css/src/_fonts.scss b/assets/css/src/_fonts.scss new file mode 100644 index 0000000..ce04ce2 --- /dev/null +++ b/assets/css/src/_fonts.scss @@ -0,0 +1,20 @@ +@font-face { + font-family: "Bartok"; + src: url("../fonts/BartokTrial-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Bartok"; + src: url("../fonts/BartokTrial-Poster.otf") format("opentype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Bartok"; + src: url("../fonts/BartokTrial-Highlight.otf") format("opentype"); + font-weight: 900; + font-style: normal; +} diff --git a/assets/css/src/_global.scss b/assets/css/src/_global.scss new file mode 100644 index 0000000..86acdc0 --- /dev/null +++ b/assets/css/src/_global.scss @@ -0,0 +1,9 @@ +// Styles of the raw HTML elements + +body { + background-color: var(--color-green); +} + +button { + cursor: pointer; +} diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss new file mode 100644 index 0000000..9b42119 --- /dev/null +++ b/assets/css/src/_header.scss @@ -0,0 +1,53 @@ +body > .logo { + width: 100%; + box-sizing: border-box; + text-align: center; + position: absolute; + font-family: "Bartok", sans-serif; + font-size: 6rem; + text-transform: uppercase; + line-height: 0.8; + z-index: -1; +} +.main-header { + position: fixed; + top: 0; + width: 100%; + text-align: center; + z-index: 1; + + .top { + display: flex; + justify-content: space-between; + button { + font-family: "Bartok", sans-serif; + text-transform: uppercase; + font-size: 2rem; + font-weight: 600; + } + } + + .characters { + margin-top: var(--offset); + svg { + margin-top: -2.5rem; + #left-character-background, + #right-character-background path { + fill: var(--color-green) !important; + } + } + } + + .strip { + box-sizing: border-box; + width: 100%; + padding: 1rem 0; + background-color: var(--color-beige); + border-radius: var(--radius); + border: var(--border); + + font-family: "Bartok", sans-serif; + font-size: 2rem; + font-weight: 600; + } +} diff --git a/assets/css/src/_reset.scss b/assets/css/src/_reset.scss new file mode 100644 index 0000000..610b9a5 --- /dev/null +++ b/assets/css/src/_reset.scss @@ -0,0 +1,24 @@ +body, +html { + margin: 0; + padding: 0; +} + +button { + border: none; + background-color: transparent; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +figcaption { + margin: 0; + padding: 0; +} diff --git a/assets/css/src/_variables.scss b/assets/css/src/_variables.scss new file mode 100644 index 0000000..25ea944 --- /dev/null +++ b/assets/css/src/_variables.scss @@ -0,0 +1,7 @@ +:root { + --color-green: #0bb786; + --color-beige: #f3f0e7; + + --radius: 0.8rem; + --border: 2px solid #000; +} diff --git a/assets/css/src/pages/_home.scss b/assets/css/src/pages/_home.scss new file mode 100644 index 0000000..51c902d --- /dev/null +++ b/assets/css/src/pages/_home.scss @@ -0,0 +1,5 @@ +[data-template="home"] { + main { + height: 200vh; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index e69de29..fddfdf1 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -0,0 +1,6 @@ +@import "src/reset"; +@import "src/fonts"; +@import "src/variables"; +@import "src/global"; +@import "src/header"; +@import "src/pages/home"; diff --git a/assets/fonts/BartokTrial-Highlight.otf b/assets/fonts/BartokTrial-Highlight.otf new file mode 100644 index 0000000..f956b07 Binary files /dev/null and b/assets/fonts/BartokTrial-Highlight.otf differ diff --git a/assets/fonts/BartokTrial-Poster.otf b/assets/fonts/BartokTrial-Poster.otf new file mode 100644 index 0000000..c41be12 Binary files /dev/null and b/assets/fonts/BartokTrial-Poster.otf differ diff --git a/assets/fonts/BartokTrial-Regular.otf b/assets/fonts/BartokTrial-Regular.otf new file mode 100644 index 0000000..d2428f4 Binary files /dev/null and b/assets/fonts/BartokTrial-Regular.otf differ diff --git a/assets/images/characters/characters.svg b/assets/images/characters/characters.svg new file mode 100644 index 0000000..7babe43 --- /dev/null +++ b/assets/images/characters/characters.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..908f5e5 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,12 @@ +document.addEventListener("DOMContentLoaded", () => { + function updateCharactersOffset() { + const charactersWrapper = document.querySelector(".characters"); + const MAX_OFFSET = 7; + const SPEED = 0.6; + + const topSpace = Math.max(0, MAX_OFFSET - (window.scrollY / 16) * SPEED); + charactersWrapper.style.setProperty("--offset", topSpace + "rem"); + } + + window.addEventListener("scroll", updateCharactersOffset); +}); diff --git a/site/snippets/footer.php b/site/snippets/footer.php new file mode 100644 index 0000000..a3c93e4 --- /dev/null +++ b/site/snippets/footer.php @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/site/snippets/head.php b/site/snippets/head.php new file mode 100644 index 0000000..f63ba08 --- /dev/null +++ b/site/snippets/head.php @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/site/snippets/header.php b/site/snippets/header.php new file mode 100644 index 0000000..7640888 --- /dev/null +++ b/site/snippets/header.php @@ -0,0 +1,20 @@ + +

+ Lesort
+ Hecq +

+
+
+
+ + / + +
+ +
+
+ +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, tenetur.

+
+
diff --git a/site/templates/home.php b/site/templates/home.php index e69de29..2efcc7d 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -0,0 +1,3 @@ + + + \ No newline at end of file