From 759b943e95a9a60d72f6d117dacad8ea2a379a63 Mon Sep 17 00:00:00 2001 From: L3D Date: Fri, 14 Jan 2022 02:18:09 +0100 Subject: [PATCH] Adding font --- .gitattributes | 6 ++++ assets/favicon.ico | 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 ++ assets/fonts/mochiypoppone.ttf | 3 ++ assets/scss/_fonts.scss | 52 ++++++++++++++++++++++++++++++++ assets/scss/_footer.scss | 12 ++++++-- assets/scss/_general.scss | 22 +++++--------- assets/scss/_header.scss | 10 +++--- assets/scss/_page.scss | 19 ++++++++++++ assets/scss/_start.scss | 15 +++++++++ assets/scss/_variables.scss | 6 ++++ assets/scss/main.scss | 1 + assets/scss/start.scss | 1 + 18 files changed, 147 insertions(+), 21 deletions(-) create mode 100644 .gitattributes create mode 100644 assets/favicon.ico create mode 100644 assets/fonts/lato_italic_400.ttf create mode 100644 assets/fonts/lato_italic_700.ttf create mode 100644 assets/fonts/lato_italic_900.ttf create mode 100644 assets/fonts/lato_normal_400.ttf create mode 100644 assets/fonts/lato_normal_700.ttf create mode 100644 assets/fonts/lato_normal_900.ttf create mode 100644 assets/fonts/mochiypoppone.ttf create mode 100644 assets/scss/_fonts.scss diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..ee2ca03 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,6 @@ +**.png filter=lfs diff=lfs merge=lfs -text +**.jpg filter=lfs diff=lfs merge=lfs -text +**.jpeg filter=lfs diff=lfs merge=lfs -text +**.ttf filter=lfs diff=lfs merge=lfs -text +**.woff filter=lfs diff=lfs merge=lfs -text +**.ico filter=lfs diff=lfs merge=lfs -text diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..4f1c7ae --- /dev/null +++ b/assets/favicon.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:531ee181ed9f71b2d173d172d34cd506c9b293be2c0a7a3e5f77aa41bd97ba84 +size 4314 diff --git a/assets/fonts/lato_italic_400.ttf b/assets/fonts/lato_italic_400.ttf new file mode 100644 index 0000000..bb8cb1b --- /dev/null +++ b/assets/fonts/lato_italic_400.ttf @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..bdca23c --- /dev/null +++ b/assets/fonts/lato_italic_700.ttf @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..13b5b70 --- /dev/null +++ b/assets/fonts/lato_italic_900.ttf @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..03ad750 --- /dev/null +++ b/assets/fonts/lato_normal_400.ttf @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f980225 --- /dev/null +++ b/assets/fonts/lato_normal_700.ttf @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..04ee7d1 --- /dev/null +++ b/assets/fonts/lato_normal_900.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3aa190b0e78c467b9297e397f2548fa1f3d310c2ec9b7f89adf4b87ebce749e8 +size 66592 diff --git a/assets/fonts/mochiypoppone.ttf b/assets/fonts/mochiypoppone.ttf new file mode 100644 index 0000000..b3c663e --- /dev/null +++ b/assets/fonts/mochiypoppone.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a62cb893321b7a9fa9aae8222bac95585340c5ba1092a41736ca9241dc631284 +size 4608112 diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 0000000..8c5b25f --- /dev/null +++ b/assets/scss/_fonts.scss @@ -0,0 +1,52 @@ + +// 'Mochiy Pop P One' font +@font-face { + font-family: 'Mochiy Pop P One'; + font-style: normal; + font-weight: 400; + src: url(/fonts/mochiypoppone.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-style: normal; + font-weight: 400; + font-display: swap; + src: url(/fonts/lato_normal_400.ttf) format('truetype'); +} +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/fonts/lato_normal_700.ttf) format('truetype'); +} +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(/fonts/lato_normal_900.ttf) format('truetype'); +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index e2614a1..b6ddc07 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -1,6 +1,14 @@ footer { margin: 0 auto; - background: $background_accent_1; + background: $background_accent_2; padding: 20px 30px; - box-shadow: 5px 5px 5px 10px $background_accent_1; + font-size: $font_size_default; + color: $font_default; + text-align: center; + a { + color: $font_accent_4; + } + a:hover { + color: $font_accent_3; + } } diff --git a/assets/scss/_general.scss b/assets/scss/_general.scss index 67755f1..3a67001 100644 --- a/assets/scss/_general.scss +++ b/assets/scss/_general.scss @@ -1,21 +1,13 @@ body { - font-family: 'Verdana', sans-serif; + font-family: 'Lato', sans-serif; margin: 25px 25px 50px 25px; background: $background_accent_2; - color: $font_default; -} - -h1, h2 { - color: $font_accent_3; - text-shadow: 0px 0px 1px black; -} - -a { - color: $font_accent_2; -} - -a:hover { - color: $font_accent_3; + a { + color: $font_accent_2; + } + a:hover { + color: $font_accent_3; + } } .left { diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 364d6cf..70ece75 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -1,16 +1,18 @@ header { - margin: 0 auto; + margin: -25px -25px 0px -25px; background: $background_accent_1; padding: 20px 30px; box-shadow: 5px 5px 5px 10px $background_accent_1; - h1, h1 a, h1 a:hover, h1 a:link { + h1 a, h1 a:hover, h1 a:link { + font-family: 'Mochiy Pop P One', sans-serif; color: $font_accent_1; margin: 0; - font-weight: normal; - font-size: 42px; + font-weight: bold; text-decoration: none; + font-size: $font_size_h1; } nav ul { + font-size: $font_size_default; list-style: none; margin: 0; padding: 0; diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss index 9b3a499..d2c75ce 100644 --- a/assets/scss/_page.scss +++ b/assets/scss/_page.scss @@ -2,4 +2,23 @@ div.page { margin: 0 auto; padding: 20px 30px; background: transparent; + p, a{ + color: $font_default; + font-size: $font_size_default; + } + + code { + color: $font_accent_4; + font-size: $font_size_code; + } + h1 { + color: $font_accent_3; + font-size: $font_size_h1; + text-shadow: 0px 0px 1px black; + } + h2 { + color: $font_accent_3; + font-size: $font_size_h2; + text-shadow: 0px 0px 1px black; + } } diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index f6f3683..0c31538 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -14,4 +14,19 @@ div.start { max-height: 7dh; max-width: 100%; } + + p, a{ + color: $font_default; + font-size: $font_size_default; + } + + code { + color: $font_accent_4; + font-size: $font_size_code; + } + h2 { + color: $font_accent_3; + font-size: $font_size_h2; + text-shadow: 0px 0px 1px black; + } } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 53adc96..a17e980 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -4,4 +4,10 @@ $background_accent_2: black; $font_accent_1: red; $font_accent_2: maroon; $font_accent_3: orangered; +$font_accent_4: rgb(247, 196, 24 ); $font_default: white; + +$font_size_default: 1.5em; +$font_size_code: 1.7em; +$font_size_h1: 3em; +$font_size_h2: 2.3em; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index c627e1e..3d1b55c 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,4 +1,5 @@ @import "_variables"; +@import "_fonts"; @import "_page.scss"; diff --git a/assets/scss/start.scss b/assets/scss/start.scss index 2aad964..7bd2335 100644 --- a/assets/scss/start.scss +++ b/assets/scss/start.scss @@ -1,4 +1,5 @@ @import "_variables"; +@import "_fonts"; @import "_start";