From 5633364009eee4fb7d4d496ab28b7ffbf9819ad4 Mon Sep 17 00:00:00 2001 From: L3D Date: Sun, 16 Jan 2022 02:17:41 +0100 Subject: [PATCH] introducing mobile layout --- .gitattributes | 1 + assets/fonts/lato-v20-latin-700.ttf | 3 ++ assets/fonts/lato-v20-latin-700.woff | 3 ++ assets/fonts/lato-v20-latin-700.woff2 | 3 ++ assets/fonts/lato-v20-latin-900.ttf | 3 ++ assets/fonts/lato-v20-latin-900.woff | 3 ++ assets/fonts/lato-v20-latin-900.woff2 | 3 ++ assets/fonts/lato-v20-latin-regular.ttf | 3 ++ assets/fonts/lato-v20-latin-regular.woff | 3 ++ assets/fonts/lato-v20-latin-regular.woff2 | 3 ++ assets/fonts/lato_italic_400.ttf | 3 -- assets/fonts/lato_italic_700.ttf | 3 -- assets/fonts/lato_italic_900.ttf | 3 -- assets/fonts/lato_normal_400.ttf | 3 -- assets/fonts/lato_normal_700.ttf | 3 -- assets/fonts/lato_normal_900.ttf | 3 -- .../fonts/mochiy-pop-one-v5-latin-regular.ttf | 3 ++ .../mochiy-pop-one-v5-latin-regular.woff | 3 ++ .../mochiy-pop-one-v5-latin-regular.woff2 | 3 ++ assets/scss/_fonts.scss | 53 ++++++++----------- assets/scss/_general.scss | 2 +- assets/scss/_header.scss | 9 +++- assets/scss/_start.scss | 10 ++++ assets/scss/_variables.scss | 6 +++ 24 files changed, 85 insertions(+), 50 deletions(-) create mode 100644 assets/fonts/lato-v20-latin-700.ttf create mode 100644 assets/fonts/lato-v20-latin-700.woff create mode 100644 assets/fonts/lato-v20-latin-700.woff2 create mode 100644 assets/fonts/lato-v20-latin-900.ttf create mode 100644 assets/fonts/lato-v20-latin-900.woff create mode 100644 assets/fonts/lato-v20-latin-900.woff2 create mode 100644 assets/fonts/lato-v20-latin-regular.ttf create mode 100644 assets/fonts/lato-v20-latin-regular.woff create mode 100644 assets/fonts/lato-v20-latin-regular.woff2 delete mode 100644 assets/fonts/lato_italic_400.ttf delete mode 100644 assets/fonts/lato_italic_700.ttf delete mode 100644 assets/fonts/lato_italic_900.ttf delete mode 100644 assets/fonts/lato_normal_400.ttf delete mode 100644 assets/fonts/lato_normal_700.ttf delete mode 100644 assets/fonts/lato_normal_900.ttf create mode 100644 assets/fonts/mochiy-pop-one-v5-latin-regular.ttf create mode 100644 assets/fonts/mochiy-pop-one-v5-latin-regular.woff create mode 100644 assets/fonts/mochiy-pop-one-v5-latin-regular.woff2 diff --git a/.gitattributes b/.gitattributes index ee2ca03..d18b785 100644 --- a/.gitattributes +++ b/.gitattributes @@ -4,3 +4,4 @@ **.ttf filter=lfs diff=lfs merge=lfs -text **.woff filter=lfs diff=lfs merge=lfs -text **.ico filter=lfs diff=lfs merge=lfs -text +**.woff2 filter=lfs diff=lfs merge=lfs -text diff --git a/assets/fonts/lato-v20-latin-700.ttf b/assets/fonts/lato-v20-latin-700.ttf new file mode 100644 index 0000000..95d5c23 --- /dev/null +++ b/assets/fonts/lato-v20-latin-700.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a6b44938bc5bcb4c2a08ca8a762ec10566c66026f40704f13cb47e370b5c8e2c +size 59032 diff --git a/assets/fonts/lato-v20-latin-700.woff b/assets/fonts/lato-v20-latin-700.woff new file mode 100644 index 0000000..269d7ed --- /dev/null +++ b/assets/fonts/lato-v20-latin-700.woff @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9f5a6fb49257579436c7bd8d42fa5d052336132b6f9f8972a7c9c00d93ed18b4 +size 28052 diff --git a/assets/fonts/lato-v20-latin-700.woff2 b/assets/fonts/lato-v20-latin-700.woff2 new file mode 100644 index 0000000..995ebb7 --- /dev/null +++ b/assets/fonts/lato-v20-latin-700.woff2 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8d3ca80fa271e94b0c36cf3053b0f806b7a42bb3395b424c99dc0bd218f0ac20 +size 22992 diff --git a/assets/fonts/lato-v20-latin-900.ttf b/assets/fonts/lato-v20-latin-900.ttf new file mode 100644 index 0000000..9529e93 --- /dev/null +++ b/assets/fonts/lato-v20-latin-900.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0faf89b39cb8924a206a6b7cf2cc56d2e03a25788f3b6adb45529650b581d780 +size 55492 diff --git a/assets/fonts/lato-v20-latin-900.woff b/assets/fonts/lato-v20-latin-900.woff new file mode 100644 index 0000000..cdb3d8a --- /dev/null +++ b/assets/fonts/lato-v20-latin-900.woff @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7831e273f41fef8485564286f3578d2847754db375befdb48b8ce37e1e1f3a57 +size 27524 diff --git a/assets/fonts/lato-v20-latin-900.woff2 b/assets/fonts/lato-v20-latin-900.woff2 new file mode 100644 index 0000000..0b91e68 --- /dev/null +++ b/assets/fonts/lato-v20-latin-900.woff2 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7d4243c8e973ec0cfc707904891ae4e3efc03dbc8923acb9755f9a35c92269a6 +size 22572 diff --git a/assets/fonts/lato-v20-latin-regular.ttf b/assets/fonts/lato-v20-latin-regular.ttf new file mode 100644 index 0000000..9f5a160 --- /dev/null +++ b/assets/fonts/lato-v20-latin-regular.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:acb428bb824a7f7d865446caa0fe1f6885aa0723e43848042f51db37f0926f1f +size 60524 diff --git a/assets/fonts/lato-v20-latin-regular.woff b/assets/fonts/lato-v20-latin-regular.woff new file mode 100644 index 0000000..05af44e --- /dev/null +++ b/assets/fonts/lato-v20-latin-regular.woff @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04050bae4cc3b9ccd20d3c7f57f5b1ba249d4a54d6eff75a1e4df504362e8c00 +size 28660 diff --git a/assets/fonts/lato-v20-latin-regular.woff2 b/assets/fonts/lato-v20-latin-regular.woff2 new file mode 100644 index 0000000..4368b37 --- /dev/null +++ b/assets/fonts/lato-v20-latin-regular.woff2 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c3c0d3f472358aac78455515c4800771426770c22698e2486d39fdb5505634e1 +size 23484 diff --git a/assets/fonts/lato_italic_400.ttf b/assets/fonts/lato_italic_400.ttf deleted file mode 100644 index bb8cb1b..0000000 --- a/assets/fonts/lato_italic_400.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fd06557f74de9825f1e079d902d81f76417e07c47715f0ec127047560c85af71 -size 72888 diff --git a/assets/fonts/lato_italic_700.ttf b/assets/fonts/lato_italic_700.ttf deleted file mode 100644 index bdca23c..0000000 --- a/assets/fonts/lato_italic_700.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9d639cf8ee1db5eacfb3bd82ccf709561e9c7c8a48ae328f77e1a19806268b64 -size 74788 diff --git a/assets/fonts/lato_italic_900.ttf b/assets/fonts/lato_italic_900.ttf deleted file mode 100644 index 13b5b70..0000000 --- a/assets/fonts/lato_italic_900.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:07a2e07b3355ef98f9391acbe3a395b074115a9a10924b61ccb3d6cf66d4f0ed -size 68996 diff --git a/assets/fonts/lato_normal_400.ttf b/assets/fonts/lato_normal_400.ttf deleted file mode 100644 index 03ad750..0000000 --- a/assets/fonts/lato_normal_400.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:497cb53c10b503a6c03aeafd59804320972dbe447cc2e18c41e872318883c8ad -size 72296 diff --git a/assets/fonts/lato_normal_700.ttf b/assets/fonts/lato_normal_700.ttf deleted file mode 100644 index f980225..0000000 --- a/assets/fonts/lato_normal_700.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3364e4ead13a90e0bc0561a71970a9e955eb3824fe8f0f8de8c43b4b50e26037 -size 70560 diff --git a/assets/fonts/lato_normal_900.ttf b/assets/fonts/lato_normal_900.ttf deleted file mode 100644 index 04ee7d1..0000000 --- a/assets/fonts/lato_normal_900.ttf +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3aa190b0e78c467b9297e397f2548fa1f3d310c2ec9b7f89adf4b87ebce749e8 -size 66592 diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf b/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf new file mode 100644 index 0000000..c73e289 --- /dev/null +++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:38b66e120ae18ac9f7aa68b653d76b6056c84e503aeeb8606e8b3ae804a4e0df +size 38160 diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.woff b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff new file mode 100644 index 0000000..7bde619 --- /dev/null +++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1025b6de8bd8bee02dad2e4d7edb242af4e0f87c9e61afb3b6a77bb985cac3da +size 22716 diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2 b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2 new file mode 100644 index 0000000..23959ed --- /dev/null +++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:af5aca8ca15a44f468c4664b3c8363f3cea276c090ac3abb2ebebdb5a7d13736 +size 18228 diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index bb488d2..c8ceeea 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -1,53 +1,46 @@ -// 'Mochiy Pop P One' font +/* mochiy-pop-one-regular - latin */ @font-face { - font-family: 'Mochiy Pop P One'; + font-family: $headline_font; font-style: normal; font-weight: 400; font-display: swap; - src: url(/fonts/mochiypoppone.ttf) format('truetype'); + src: local(''), + url('../fonts/mochiy-pop-one-v5-latin-regular.woff2') format('woff2'), + url('../fonts/mochiy-pop-one-v5-latin-regular.woff') format('woff'), + url('../fonts/mochiy-pop-one-v5-latin-regular.ttf') format('truetype'), } // Lato font @font-face { - font-family: 'Lato'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url(/fonts/lato_italic_400.ttf) format('truetype'); -} -@font-face { - font-family: 'Lato'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url(/fonts/lato_italic_700.ttf) format('truetype'); -} -@font-face { - font-family: 'Lato'; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url(/fonts/lato_italic_900.ttf) format('truetype'); -} -@font-face { - font-family: 'Lato'; + font-family: $main_font; font-style: normal; font-weight: 400; font-display: swap; - src: url(/fonts/lato_normal_400.ttf) format('truetype'); + src: local(''), + url('/fonts/lato-v20-latin-regular.woff2') format('woff2'), + url('/fonts/lato-v20-latin-regular.woff') format('woff'), + url('/fonts/lato-v20-latin-regular.ttf') format('truetype'); } + @font-face { - font-family: 'Lato'; + font-family: $main_font; font-style: normal; font-weight: 700; font-display: swap; - src: url(/fonts/lato_normal_700.ttf) format('truetype'); + src: local(''), + url('/fonts/lato-v20-latin-700.woff2') format('woff2'), + url('/fonts/lato-v20-latin-700.woff') format('woff'), + url('/fonts/lato-v20-latin-700.ttf') format('truetype'); } + @font-face { - font-family: 'Lato'; + font-family: $main_font; font-style: normal; font-weight: 900; font-display: swap; - src: url(/fonts/lato_normal_900.ttf) format('truetype'); + src: local(''), + url('/fonts/lato-v20-latin-900.woff2') format('woff2'), + url('/fonts/lato-v20-latin-900.woff') format('woff'), + url('/fonts/lato-v20-latin-900.ttf') format('truetype'); } diff --git a/assets/scss/_general.scss b/assets/scss/_general.scss index 3a67001..cbea88f 100644 --- a/assets/scss/_general.scss +++ b/assets/scss/_general.scss @@ -1,5 +1,5 @@ body { - font-family: 'Lato', sans-serif; + font-family: $main_font, sans-serif; margin: 25px 25px 50px 25px; background: $background_accent_2; a { diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 70ece75..9a493e1 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -4,7 +4,7 @@ header { padding: 20px 30px; box-shadow: 5px 5px 5px 10px $background_accent_1; h1 a, h1 a:hover, h1 a:link { - font-family: 'Mochiy Pop P One', sans-serif; + font-family: $headline_font, sans-serif; color: $font_accent_1; margin: 0; font-weight: bold; @@ -23,3 +23,10 @@ header { } } } +@media (max-width: $media_horizontal_breakpoint) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_mobile; + } + } +} diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index 0c31538..0749373 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -30,3 +30,13 @@ div.start { text-shadow: 0px 0px 1px black; } } + +@media (max-width: $media_horizontal_breakpoint) { + div.start { + display: initial; + .left, .right { + text-align: center; + margin-top: 40px; + } + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index a17e980..6ce8c9b 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -10,4 +10,10 @@ $font_default: white; $font_size_default: 1.5em; $font_size_code: 1.7em; $font_size_h1: 3em; +$font_size_h1_mobile: 1.5em; $font_size_h2: 2.3em; + +$headline_font: 'Mochiy Pop One'; +$main_font: 'Lato'; + +$media_horizontal_breakpoint: 900px;