From a2eb97dbf044b1164ea898c9b357f83c5962ee33 Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Fri, 4 Aug 2023 14:08:52 +0200
Subject: [PATCH] Improve Heros for Projects and correct title font
---
sass/_content.scss | 5 +++++
sass/_teckids.scss | 10 +++++++++-
templates/menu/projects.html | 11 +++++------
templates/project.html | 22 ++++++++++++----------
4 files changed, 31 insertions(+), 17 deletions(-)
diff --git a/sass/_content.scss b/sass/_content.scss
index bd3da2bc..3e1fdc90 100644
--- a/sass/_content.scss
+++ b/sass/_content.scss
@@ -8,3 +8,8 @@
.roboto-black {
font-family: 'Roboto Black';
}
+
+.media-v-centered {
+ @extend .media;
+ align-items: center;
+}
diff --git a/sass/_teckids.scss b/sass/_teckids.scss
index fa86a042..ddebd7ad 100644
--- a/sass/_teckids.scss
+++ b/sass/_teckids.scss
@@ -19,7 +19,12 @@ $project-colors: (
$project-colors-fonts: (
hack-n-fun: #ffffff,
schul-frei: #ffffff,
- indiedact: #000000,
+ indiedact: #1c1f33,
+);
+$project-colors-title-fonts: (
+ hack-n-fun: rgba(white, 0.7),
+ schul-frei: rgba(white, 0.7),
+ indiedact: rgba(black, 0.5),
);
.menu-project-section {
@@ -31,6 +36,9 @@ $project-colors-fonts: (
background-color: map-get($project-colors, $project);
color: map-get($project-colors-fonts, $project);
}
+ .project-title-#{$project} {
+ color: map-get($project-colors-title-fonts, $project);
+ }
#menu-project-section-#{$project} {
border-color: map-get($project-colors, $project);
diff --git a/templates/menu/projects.html b/templates/menu/projects.html
index 60cb6070..5b844640 100644
--- a/templates/menu/projects.html
+++ b/templates/menu/projects.html
@@ -3,14 +3,13 @@
<div class="container is-fluid">
<div class="columns">
{% for project in projects.items %}
- <section
- class="column menu-project-section"
- id="menu-project-section-{{ project.slug }}"
- >
+ <section class="column menu-project-section" id="menu-project-section-{{ project.slug }}">
{% set section = get_section(path = "projekte/" ~ project.slug ~
"/_index.md") %}
- <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}">{{ section.title }}</a></h1>
- <strong class="is-mega-menu-subtitle">{{ section.description }}</strong>
+ <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}">
+ <p> {{ section.title }} </p>
+ <p class="is-4">{{ section.description }}</p>
+ </a></h1>
{% for page in project.pages %}
<a class="navbar-item" href="{{ page.permalink }}">
diff --git a/templates/project.html b/templates/project.html
index 52026d9a..2df61a5f 100644
--- a/templates/project.html
+++ b/templates/project.html
@@ -16,25 +16,26 @@
<section class="hero hero-main is-fullheight-with-navbar project-background-{{ section.extra.project_slug }} roboto-black">
<div class="hero-body">
<div class="container">
- <div class="columns is-vcentered">
- <div class="column is-one-third circle-bg">
- <img class="is-1by1" src="/{{ section.extra.title_icon }}" alt="">
- </div>
- <div class="column is-two-fifth project-title">
+ <!-- <div class="columns is-vcentered"> -->
+ <!-- <div class="column is-two-fifth project-title"> -->
<div class="columns">
- <div class="column">
+ <div class="column project-title-{{ section.extra.project_slug }}">
<h1 class="title is-1">{{ section.title }}</h1>
<p class="title is-3">
{{ section.description }}
</p>
- </div>
- </div>
+ <!-- </div> -->
+ <!-- </div> -->
</div>
</div>
- <div class="container">
+ <div class="container">
+ <div class="columns is-vcentered">
+ <div class="column is-one-third circle-bg">
+ <img class="is-1by1" src="/{{ section.extra.title_icon }}" alt="">
+ </div>
<div class="project-theses">
{% for thesis in section.extra.theses %}
- <article class="media">
+ <article class="media-v-centered">
<figure class="media-left">
<p class="image is-64x64">
<img src="/{{ section.extra.list_icon }}" />
@@ -45,6 +46,7 @@
</div>
</article>
{% endfor %}
+ </div>
</div>
</div>
</div>
--
GitLab