From 1f4a11fe20c4ddd9b7beef8c77209a863a940982 Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Tue, 13 Jun 2023 21:02:50 +0200
Subject: [PATCH] Add colour to section on index page
---
sass/_teckids.scss | 15 +++
templates/base.html | 2 +-
templates/frontpage/blocks/claim.html | 28 ++---
templates/frontpage/blocks/news.html | 141 +++++++++++------------
templates/frontpage/blocks/projects.html | 51 ++++----
templates/index.html | 10 +-
6 files changed, 127 insertions(+), 120 deletions(-)
diff --git a/sass/_teckids.scss b/sass/_teckids.scss
index df551f98..13a9f869 100644
--- a/sass/_teckids.scss
+++ b/sass/_teckids.scss
@@ -1,5 +1,12 @@
+@import "../node_modules/bulma/sass/utilities/functions.sass";
+
$teckids-orange: #ff6600;
+$teckids-orange-light: findLightColor($teckids-orange);
+$teckids-orange-dark: findDarkColor($teckids-orange);
+
$teckids-blue: #0084ff;
+$teckids-blue-light: findLightColor($teckids-blue);
+$teckids-blue-dark: findDarkColor($teckids-blue);
$projects: hack-n-fun, schul-frei, indiedact;
$project-colors: (
@@ -17,3 +24,11 @@ $project-colors: (
border-color: map-get($project-colors, $project);
}
}
+
+.has-teckids-orange-light-bg {
+ background-color: $teckids-orange-light;
+}
+
+.has-teckids-blue-light-bg {
+ background-color: $teckids-blue-light;
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 61d4e546..e1383f8f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,7 +21,7 @@
{% include "menu.html" %}
</header>
- <main class="section">
+ <main>
{% block main %}{% endblock %}
</main>
</body>
diff --git a/templates/frontpage/blocks/claim.html b/templates/frontpage/blocks/claim.html
index 7b94ecc4..652a6648 100644
--- a/templates/frontpage/blocks/claim.html
+++ b/templates/frontpage/blocks/claim.html
@@ -1,17 +1,19 @@
-<section class="section">
- <div class="columns is-centered is-half">
- <h1 class="title is-1">{{ section.extra.headlines.claims }}</h1>
- </div>
- <div class="columns">
- {% for claim in section.extra.claims %}
- <div class="column">
- <div class="box is-shadowless">
- <h1 class="title is-3">{{ claim.title }}</h1>
- <p>
- {{ claim.content }}
- </p>
+<section class="section has-teckids-orange-light-bg">
+ <div class="container">
+ <div class="columns is-centered is-half">
+ <h1 class="title is-1">{{ section.extra.headlines.claims }}</h1>
+ </div>
+ <div class="columns">
+ {% for claim in section.extra.claims %}
+ <div class="column">
+ <div class="box is-shadowless">
+ <h1 class="title is-3">{{ claim.title }}</h1>
+ <p>
+ {{ claim.content }}
+ </p>
+ </div>
</div>
+ {% endfor %}
</div>
- {% endfor %}
</div>
</section>
diff --git a/templates/frontpage/blocks/news.html b/templates/frontpage/blocks/news.html
index 0c464600..056ffb66 100644
--- a/templates/frontpage/blocks/news.html
+++ b/templates/frontpage/blocks/news.html
@@ -1,89 +1,82 @@
<section class="section">
- <div class="columns is-centered is-half">
- <h1 class="title is-1">{{ section.extra.headlines.news }}</h1>
- </div>
- <div class="columns is-same-height">
- <div class="column">
- <div class="card is-shadowless">
- <div class="card-image">
- <figure class="image is-4by3">
- <img
- src="https://bulma.io/images/placeholders/1280x960.png"
- alt="Placeholder image"
- />
- </figure>
- </div>
- <div class="card-content">
- <div class="media">
- <div class="media-content">
- <p class="subtitle is-6">person</p>
- <p class="title is-4">name</p>
- </div>
+ <div class="container">
+ <div class="columns is-centered is-half">
+ <h1 class="title is-1">{{ section.extra.headlines.news }}</h1>
+ </div>
+ <div class="columns is-same-height">
+ <div class="column">
+ <div class="card is-shadowless">
+ <div class="card-image">
+ <figure class="image is-4by3">
+ <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
+ </figure>
</div>
-
- <div class="content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
- iaculis mauris.
- <br />
- <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ <div class="card-content">
+ <div class="media">
+ <div class="media-content">
+ <p class="subtitle is-6">person</p>
+ <p class="title is-4">name</p>
+ </div>
+ </div>
+
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ <br />
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
</div>
+
</div>
-
</div>
- </div>
- <div class="column">
- <div class="card is-shadowless">
- <div class="card-image">
- <figure class="image is-4by3">
- <img
- src="https://bulma.io/images/placeholders/1280x960.png"
- alt="Placeholder image"
- />
- </figure>
- </div>
- <div class="card-content">
- <div class="media">
- <div class="media-content">
- <p class="subtitle is-6">person</p>
- <p class="title is-4">name</p>
- </div>
+ <div class="column">
+ <div class="card is-shadowless">
+ <div class="card-image">
+ <figure class="image is-4by3">
+ <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
+ </figure>
</div>
-
- <div class="content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
- iaculis mauris.
- <br />
- <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ <div class="card-content">
+ <div class="media">
+ <div class="media-content">
+ <p class="subtitle is-6">person</p>
+ <p class="title is-4">name</p>
+ </div>
+ </div>
+
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ <br />
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
</div>
+
</div>
-
</div>
- </div>
- <div class="column">
- <div class="card is-shadowless">
- <div class="card-image">
- <figure class="image is-4by3">
- <img
- src="https://bulma.io/images/placeholders/1280x960.png"
- alt="Placeholder image"
- />
- </figure>
- </div>
- <div class="card-content">
- <div class="media">
- <div class="media-content">
- <p class="subtitle is-6">person</p>
- <p class="title is-4">name</p>
- </div>
+ <div class="column">
+ <div class="card is-shadowless">
+ <div class="card-image">
+ <figure class="image is-4by3">
+ <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
+ </figure>
</div>
- <div class="content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
- iaculis mauris.
- <br />
- <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ <div class="card-content">
+ <div class="media">
+ <div class="media-content">
+ <p class="subtitle is-6">person</p>
+ <p class="title is-4">name</p>
+ </div>
+ </div>
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ <br />
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
</div>
</div>
</div>
</div>
</div>
-</section>
+</section>
\ No newline at end of file
diff --git a/templates/frontpage/blocks/projects.html b/templates/frontpage/blocks/projects.html
index 7d3491cb..794642df 100644
--- a/templates/frontpage/blocks/projects.html
+++ b/templates/frontpage/blocks/projects.html
@@ -1,34 +1,33 @@
{% set projects_section = get_section(path="projekte/_index.md") %}
-<section class="section">
- <div class="columns is-centered is-half">
- <h1 class="title is-1">{{ section.extra.headlines.projects }}</h1>
- </div>
- <div class="columns">
- {% for project_section_path in projects_section.subsections %}
- {% set project_section = get_section(path=project_section_path) %}
- <div class="column">
- <div class="card">
- <figure class="image is-4by3">
- <img
- src="https://bulma.io/images/placeholders/1280x960.png"
- alt="Placeholder image"
- />
- </figure>
- </div>
- <div class="card-content">
- <div class="media">
- <div class="media-content">
- <p class="title is-4">{{ project_section.title }}</p>
- </div>
+<section class="section has-teckids-blue-light-bg">
+ <div class="container">
+ <div class="columns is-centered is-half">
+ <h1 class="title is-1">{{ section.extra.headlines.projects }}</h1>
+ </div>
+ <div class="columns">
+ {% for project_section_path in projects_section.subsections %}
+ {% set project_section = get_section(path=project_section_path) %}
+ <div class="column">
+ <div class="card">
+ <figure class="image is-4by3">
+ <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
+ </figure>
</div>
+ <div class="card-content">
+ <div class="media">
+ <div class="media-content">
+ <p class="title is-4">{{ project_section.title }}</p>
+ </div>
+ </div>
- <div class="content">
- {{ project_section.description }}
- <br />
+ <div class="content">
+ {{ project_section.description }}
+ <br />
+ </div>
</div>
</div>
+ {% endfor %}
</div>
- {% endfor %}
</div>
-</section>
+</section>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9fef20e7..946f249f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,10 +1,8 @@
{% extends "base.html" %}
{% block main %}
- <div class="container">
- {% include "frontpage/blocks/claim.html" %}
- {% include "frontpage/blocks/news.html" %}
- {% include "frontpage/blocks/projects.html" %}
- {% include "frontpage/blocks/events.html" %}
- </div>
+ {% include "frontpage/blocks/claim.html" %}
+ {% include "frontpage/blocks/news.html" %}
+ {% include "frontpage/blocks/projects.html" %}
+ {% include "frontpage/blocks/events.html" %}
{% endblock %}
--
GitLab