Skip to content
Snippets Groups Projects
Verified Commit 1f4a11fe authored by Nik | Klampfradler's avatar Nik | Klampfradler
Browse files

Add colour to section on index page

parent e00ff270
No related branches found
No related tags found
1 merge request!28Neue Website basierend auf Zola
Hide whitespace changes
Inline Side-by-side
sass/_teckids.scss
+ 15
− 0
View file @ 1f4a11fe
@import "../node_modules/bulma/sass/utilities/functions.sass";
$teckids-orange: #ff6600; $teckids-orange: #ff6600;
$teckids-orange-light: findLightColor($teckids-orange);
$teckids-orange-dark: findDarkColor($teckids-orange);
$teckids-blue: #0084ff; $teckids-blue: #0084ff;
$teckids-blue-light: findLightColor($teckids-blue);
$teckids-blue-dark: findDarkColor($teckids-blue);
$projects: hack-n-fun, schul-frei, indiedact; $projects: hack-n-fun, schul-frei, indiedact;
$project-colors: ( $project-colors: (
...@@ -17,3 +24,11 @@ $project-colors: ( ...@@ -17,3 +24,11 @@ $project-colors: (
border-color: map-get($project-colors, $project); 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
templates/base.html
+ 1
− 1
View file @ 1f4a11fe
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
{% include "menu.html" %} {% include "menu.html" %}
</header> </header>
<main class="section"> <main>
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
</body> </body>
......
templates/frontpage/blocks/claim.html
+ 15
− 13
View file @ 1f4a11fe
<section class="section"> <section class="section has-teckids-orange-light-bg">
<div class="columns is-centered is-half"> <div class="container">
<h1 class="title is-1">{{ section.extra.headlines.claims }}</h1> <div class="columns is-centered is-half">
</div> <h1 class="title is-1">{{ section.extra.headlines.claims }}</h1>
<div class="columns"> </div>
{% for claim in section.extra.claims %} <div class="columns">
<div class="column"> {% for claim in section.extra.claims %}
<div class="box is-shadowless"> <div class="column">
<h1 class="title is-3">{{ claim.title }}</h1> <div class="box is-shadowless">
<p> <h1 class="title is-3">{{ claim.title }}</h1>
{{ claim.content }} <p>
</p> {{ claim.content }}
</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
</section> </section>
templates/frontpage/blocks/news.html
+ 67
− 74
View file @ 1f4a11fe
<section class="section"> <section class="section">
<div class="columns is-centered is-half"> <div class="container">
<h1 class="title is-1">{{ section.extra.headlines.news }}</h1> <div class="columns is-centered is-half">
</div> <h1 class="title is-1">{{ section.extra.headlines.news }}</h1>
<div class="columns is-same-height"> </div>
<div class="column"> <div class="columns is-same-height">
<div class="card is-shadowless"> <div class="column">
<div class="card-image"> <div class="card is-shadowless">
<figure class="image is-4by3"> <div class="card-image">
<img <figure class="image is-4by3">
src="https://bulma.io/images/placeholders/1280x960.png" <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
alt="Placeholder image" </figure>
/>
</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> </div>
<div class="card-content">
<div class="content"> <div class="media">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec <div class="media-content">
iaculis mauris. <p class="subtitle is-6">person</p>
<br /> <p class="title is-4">name</p>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </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> </div>
</div> <div class="column">
<div class="column"> <div class="card is-shadowless">
<div class="card is-shadowless"> <div class="card-image">
<div class="card-image"> <figure class="image is-4by3">
<figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
<img </figure>
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> </div>
<div class="card-content">
<div class="content"> <div class="media">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec <div class="media-content">
iaculis mauris. <p class="subtitle is-6">person</p>
<br /> <p class="title is-4">name</p>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </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> </div>
</div> <div class="column">
<div class="column"> <div class="card is-shadowless">
<div class="card is-shadowless"> <div class="card-image">
<div class="card-image"> <figure class="image is-4by3">
<figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
<img </figure>
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> </div>
<div class="content"> <div class="card-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec <div class="media">
iaculis mauris. <div class="media-content">
<br /> <p class="subtitle is-6">person</p>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> <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> </div>
</div> </div>
</div> </div>
</section> </section>
\ No newline at end of file
templates/frontpage/blocks/projects.html
+ 25
− 26
View file @ 1f4a11fe
{% set projects_section = get_section(path="projekte/_index.md") %} {% set projects_section = get_section(path="projekte/_index.md") %}
<section class="section"> <section class="section has-teckids-blue-light-bg">
<div class="columns is-centered is-half"> <div class="container">
<h1 class="title is-1">{{ section.extra.headlines.projects }}</h1> <div class="columns is-centered is-half">
</div> <h1 class="title is-1">{{ section.extra.headlines.projects }}</h1>
<div class="columns"> </div>
{% for project_section_path in projects_section.subsections %} <div class="columns">
{% set project_section = get_section(path=project_section_path) %} {% for project_section_path in projects_section.subsections %}
<div class="column"> {% set project_section = get_section(path=project_section_path) %}
<div class="card"> <div class="column">
<figure class="image is-4by3"> <div class="card">
<img <figure class="image is-4by3">
src="https://bulma.io/images/placeholders/1280x960.png" <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
alt="Placeholder image" </figure>
/>
</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>
<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"> <div class="content">
{{ project_section.description }} {{ project_section.description }}
<br /> <br />
</div>
</div> </div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
</section> </section>
\ No newline at end of file
templates/index.html
+ 4
− 6
View file @ 1f4a11fe
{% extends "base.html" %} {% extends "base.html" %}
{% block main %} {% block main %}
<div class="container"> {% include "frontpage/blocks/claim.html" %}
{% include "frontpage/blocks/claim.html" %} {% include "frontpage/blocks/news.html" %}
{% include "frontpage/blocks/news.html" %} {% include "frontpage/blocks/projects.html" %}
{% include "frontpage/blocks/projects.html" %} {% include "frontpage/blocks/events.html" %}
{% include "frontpage/blocks/events.html" %}
</div>
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment