diff --git a/src/assets/fonts/Knewave.woff b/src/assets/fonts/Knewave.woff new file mode 100755 index 0000000..22e4d0f Binary files /dev/null and b/src/assets/fonts/Knewave.woff differ diff --git a/src/assets/fonts/Montserrat-BoldItalic.woff b/src/assets/fonts/Montserrat-BoldItalic.woff new file mode 100644 index 0000000..4cb1910 Binary files /dev/null and b/src/assets/fonts/Montserrat-BoldItalic.woff differ diff --git a/src/assets/fonts/Montserrat-BoldItalic.woff2 b/src/assets/fonts/Montserrat-BoldItalic.woff2 new file mode 100644 index 0000000..b9d28db Binary files /dev/null and b/src/assets/fonts/Montserrat-BoldItalic.woff2 differ diff --git a/src/assets/fonts/Montserrat-Italic.woff2 b/src/assets/fonts/Montserrat-Italic.woff2 new file mode 100644 index 0000000..41ec45c Binary files /dev/null and b/src/assets/fonts/Montserrat-Italic.woff2 differ diff --git a/src/assets/fonts/Montserrat-Light.woff2 b/src/assets/fonts/Montserrat-Light.woff2 new file mode 100644 index 0000000..70cfdee Binary files /dev/null and b/src/assets/fonts/Montserrat-Light.woff2 differ diff --git a/src/assets/fonts/Montserrat-LightItalic.woff2 b/src/assets/fonts/Montserrat-LightItalic.woff2 new file mode 100644 index 0000000..53be93a Binary files /dev/null and b/src/assets/fonts/Montserrat-LightItalic.woff2 differ diff --git a/src/assets/fonts/Montserrat-Regular.woff2 b/src/assets/fonts/Montserrat-Regular.woff2 new file mode 100644 index 0000000..694d308 Binary files /dev/null and b/src/assets/fonts/Montserrat-Regular.woff2 differ diff --git a/src/lib/css/content.scss b/src/lib/css/content.scss index c099512..e2f3d42 100644 --- a/src/lib/css/content.scss +++ b/src/lib/css/content.scss @@ -1,11 +1,5 @@ body { background-image: url(img/background.jpg); - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - text-align: justify; - line-height: 25px; - color: var(--color); - font-weight: 300; } * { diff --git a/src/lib/css/typo.scss b/src/lib/css/typo.scss index cf6267d..0dc9cbc 100644 --- a/src/lib/css/typo.scss +++ b/src/lib/css/typo.scss @@ -1,46 +1,65 @@ -h1, h2, h3, h4 { - font-family: Knewave; +@font-face { + font-family: 'Knewave'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Knewave.woff) format('woff'); +} + +@mixin montserrat($style, $weight, $file) { + @font-face { + font-family: 'Montserrat'; + font-style: $style; + font-weight: $weight; + src: url(/fonts/#{$file}.woff2) format('woff2'); + } +} + +@include montserrat(normal, 700, "Montserrat-Bold"); +@include montserrat(italic, 700, "Montserrat-BoldItalic"); +@include montserrat(normal, 400, "Montserrat-Regular"); +@include montserrat(italic, 400, "Montserrat-Italic"); +@include montserrat(normal, 300, "Montserrat-Light"); +@include montserrat(italic, 300, "Montserrat-LightItalic"); + +body { + font-family: "Montserrat", sans-serif; + color: var(--color-text); } h1 { margin: 0 0 var(--space-medium) 0; - font-family: "Knewave", system-ui; + font-family: 'Knewave'; font-size: var(--fz-1); - text-transform: uppercase; - text-align: center; } h2 { margin: 0 0 var(--space-medium) 0; - font-family: "Knewave", system-ui; + font-family: 'Knewave'; font-size: var(--fz-2); - text-transform: uppercase; } h3 { margin: 0 0 var(--space-small) 0; - font-family: "Knewave", system-ui; font-size: var(--fz-3); } h4 { margin: 0 0 var(--space-small) 0; - font-family: "Knewave", system-ui; font-size: var(--fz-4); } p { margin: 0 0 var(--space-small) 0; + margin-bottom: var(--space-medium); } - @media ($mobile-breakpoint) { h1, h2, h3 { margin: 0 0 var(--space-small) 0; diff --git a/src/lib/css/variables.scss b/src/lib/css/variables.scss index 96572ec..c80bc48 100644 --- a/src/lib/css/variables.scss +++ b/src/lib/css/variables.scss @@ -3,7 +3,7 @@ $mobile-breakpoint: "max-width: 768px"; :root { --color-text: #161616; - --color-primary: #aa1d29; + --color-primary: #DB2937; --color-on-primary: white; --color-accent: #161616; @@ -21,8 +21,8 @@ $mobile-breakpoint: "max-width: 768px"; --width: 1100px; - --fz-1: 2rem; - --fz-2: 2rem; + --fz-1: 4rem; + --fz-2: 3rem; --fz-3: 1.5rem; --fz-4: 1.125rem; @@ -32,4 +32,11 @@ $mobile-breakpoint: "max-width: 768px"; --elevation-medium: 0px 2px 7px 0px rgba(22, 22, 22, 0.3); --transitions-duration: 0.2s; + + @media ($mobile-breakpoint) { + --fz-1: 2.8rem; + --fz-2: 2.5rem; + --fz-3: 1.5rem; + --fz-4: 1.125rem; + } } diff --git a/src/lib/nav.scss b/src/lib/nav.scss index 85491c8..2e9e19f 100644 --- a/src/lib/nav.scss +++ b/src/lib/nav.scss @@ -25,10 +25,6 @@ box-shadow: var(--elevation-high); background: var(--color-dark-gradient); - @media ($mobile-breakpoint) { - margin-bottom: 65px; - } - &--content { grid-area: 1 / 2 / 2 / 3; height: var(--desktop-height); diff --git a/src/lib/section.html b/src/lib/section.html index 247d31b..3c26d42 100644 --- a/src/lib/section.html +++ b/src/lib/section.html @@ -1,11 +1,22 @@ -{% macro section(title, title_image, title_image_hover) -%} -
-

{{ title }}

+{% macro section( + title, + title_picture, + title_picture_hover = None, + title_picture_offset = "20px", + title_color = "var(--color-text)") +-%} +
+

+ {{ title }} +

{{ caller() }}
{%- endmacro -%} diff --git a/src/lib/section.scss b/src/lib/section.scss index 183688f..429d88b 100644 --- a/src/lib/section.scss +++ b/src/lib/section.scss @@ -2,36 +2,44 @@ margin-bottom: var(--space-xlarge); display: flex; flex-direction: column; + align-items: center; @media ($mobile-breakpoint) { margin-bottom: var(--space-large); } &--title { - display: flex; - flex-direction: column; - align-items: center; - - @media ($mobile-breakpoint) { - flex-direction: row; - justify-content: center; - } + background: transparent; + position: relative; + margin-top: 110px; &::before { - width: 150px; - height: 150px; - background: center / contain no-repeat var(--image); - content: ""; + z-index: -1; - @media ($mobile-breakpoint) { - width: 50px; - height: 50px; - margin-right: var(--space-small); - } + position: absolute; + top: -110px; + left: var(--picture-offset); + width: 150px; + height: 125px; + + background: center / contain no-repeat var(--picture-url); + content: ""; } &:hover::before { - background-image: var(--hover-image); + background-image: var(--picture-hover-url); + } + + @media ($mobile-breakpoint) { + margin-top: 75px; + + &::before { + top: -75px; + left: calc(var(--picture-offset) * 0.8); + + width: 90px; + height: 90px; + } } } diff --git a/src/pages/index.html b/src/pages/index.html index 8704027..39a8d5d 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -2,11 +2,7 @@ - - Frog Collective - - diff --git a/src/pages/index/games.html b/src/pages/index/games.html index 428b579..e94cc8e 100644 --- a/src/pages/index/games.html +++ b/src/pages/index/games.html @@ -1,6 +1,10 @@ {% from "lib/section.html" import section %} -{% call section(gettext("Games"), "/img/section-games.png") %} +{% call section(gettext("Games"), + "/img/section-games.png", + title_picture_offset = "-20px", + title_color = "var(--color-primary)" + ) %} {% for game in glob("games/*.md") | map('markdown') %}
diff --git a/src/pages/index/news.html b/src/pages/index/news.html index dd91f40..b078c24 100644 --- a/src/pages/index/news.html +++ b/src/pages/index/news.html @@ -1,6 +1,11 @@ {% from "lib/section.html" import section %} -{% call section(gettext("News"), "/img/section-news.png") %} +{% call section( + gettext("News"), + "/img/section-news.png", + title_picture_offset="60px", + title_color = "var(--color-primary)" + ) %} {% for news in glob("news/*.md") | map('markdown') %}
diff --git a/src/pages/index/presentation.html b/src/pages/index/presentation.html index d879006..b79d53d 100644 --- a/src/pages/index/presentation.html +++ b/src/pages/index/presentation.html @@ -8,7 +8,12 @@
{% endmacro %} -{% call section(gettext("Collective"), "/img/section-collective.png", "/img/section-collective-hover.png") %} +{% call section( + gettext("Collective"), + "/img/section-collective.png", + title_picture_hover = "/img/section-collective-hover.png", + title_picture_offset = "170px" + ) %}

{% trans %}