diff --git a/src/assets/img/background-red.jpg b/src/assets/img/background-red.jpg new file mode 100644 index 0000000..8dd2c51 Binary files /dev/null and b/src/assets/img/background-red.jpg differ diff --git a/src/assets/img/nav-logo.png b/src/assets/img/nav-logo.png index 4996bc6..0515c41 100644 Binary files a/src/assets/img/nav-logo.png and b/src/assets/img/nav-logo.png differ diff --git a/src/lib/css/controls.scss b/src/lib/css/controls.scss index 654bc17..64622ce 100644 --- a/src/lib/css/controls.scss +++ b/src/lib/css/controls.scss @@ -1,7 +1,7 @@ %button { - --background: var(--color-accent); - --background-hover: var(--background); - --color: var(--color-on-accent); + --background: var(--color-dark); + --background-hover: var(--color-primary); + --color: var(--color-on-primary); border-radius: var(--border-radius-small); padding: var(--space-small) var(--space-medium); diff --git a/src/lib/css/variables.scss b/src/lib/css/variables.scss index 3a941e1..2848950 100644 --- a/src/lib/css/variables.scss +++ b/src/lib/css/variables.scss @@ -2,20 +2,16 @@ $mobile-breakpoint: "max-width: 768px"; :root { --background-dark: url("/img/background-black-red.jpg"); + --background-red: url("/img/background-red.jpg"); --color-text: #161616; + --color-surface: #ffffff; --color-primary: #DB2937; - --color-on-primary: white; - - --color-accent: #303030; - --color-on-accent: #EA8189; + --color-on-primary: #ffffff; --color-dark: #161616; - --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%); - --color-on-dark: #E35965; - - --color-surface: #fff3f3; + --color-on-dark: #ffffff; --color-link: var(--color-primary); diff --git a/src/lib/nav.scss b/src/lib/nav.scss index aa8f5ce..3c6b953 100644 --- a/src/lib/nav.scss +++ b/src/lib/nav.scss @@ -1,7 +1,7 @@ %nav-button { @extend %button; --background: transparent; - --background-hover: var(--color-accent); + --background-hover: var(--color-primary); } .nav-bar { @@ -116,7 +116,7 @@ width: 2px; margin: 0 var(--space-small); - background: var(--color-on-accent); + background: var(--color-on-primary); @media($mobile-breakpoint) { display: none; @@ -162,7 +162,7 @@ margin: 5px 0; display: block; - background-color: var(--color-on-accent); + background-color: var(--color-on-primary); transition: all 0.3s ease-out; } } diff --git a/src/pages/index/games.scss b/src/pages/index/games.scss index 3ed591b..15940af 100644 --- a/src/pages/index/games.scss +++ b/src/pages/index/games.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; - background: var(--color-surface); + background: transparent; padding: 0; &--picture-wrapper { @@ -16,8 +16,11 @@ @extend h2; margin: 0; padding: var(--space-small); - background: var(--background-dark); + background: var(--background-red); color: var(--color-on-dark); + padding: var(--space-small) var(--space-xlarge); + font-family: 'Knewave'; + font-size: 40px; } &--description { diff --git a/src/pages/index/news.html b/src/pages/index/news.html index 2867ddc..228c99c 100644 --- a/src/pages/index/news.html +++ b/src/pages/index/news.html @@ -4,7 +4,7 @@ gettext("News"), "news", "/img/section-news.png", - title_picture_offset="60px", + title_picture_offset="0px", title_color = "var(--color-primary)" ) %} {% for news in glob("news/*.md") | map('markdown') %} diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss index 3816f73..fba8f35 100644 --- a/src/pages/index/news.scss +++ b/src/pages/index/news.scss @@ -10,10 +10,12 @@ &--header { display: flex; color: var(--color-on-dark); - background: var(--background-dark); + background: var(--background-red); padding: var(--space-small) var(--space-medium); align-items: center; gap: var(--space-small); + font-family: 'Knewave'; + font-size: 24px; @media($mobile-breakpoint) { flex-direction: column; @@ -37,6 +39,8 @@ &--title { flex-grow: 1; margin: 0; + font-family: 'Knewave'; + font-size: 32px; @media($mobile-breakpoint) { text-align: center;