From 2bb81ecf240d4fb489539c257639995760252f85 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 12 Jun 2023 20:12:20 +0200
Subject: [PATCH] Add is-same-height class for columns
---
sass/_content.scss | 7 ++++++
sass/style.scss | 1 +
templates/frontpage/blocks/news.html | 33 ++++++++++++++++++++++++++--
3 files changed, 39 insertions(+), 2 deletions(-)
create mode 100644 sass/_content.scss
diff --git a/sass/_content.scss b/sass/_content.scss
new file mode 100644
index 00000000..fe64671c
--- /dev/null
+++ b/sass/_content.scss
@@ -0,0 +1,7 @@
+.columns.is-same-height {
+ align-items: stretch;
+
+ .column > * {
+ height: 100%;
+ }
+}
diff --git a/sass/style.scss b/sass/style.scss
index 16508b12..7dee0d1d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -7,3 +7,4 @@ $family-sans-serif: "Roboto", sans-serif;
@import "../node_modules/bulma/bulma.sass";
@import "./_menu.scss";
+@import "./_content.scss";
diff --git a/templates/frontpage/blocks/news.html b/templates/frontpage/blocks/news.html
index 5d6b584d..f56f76b0 100644
--- a/templates/frontpage/blocks/news.html
+++ b/templates/frontpage/blocks/news.html
@@ -2,7 +2,7 @@
<section class="columns is-centered is-half">
<h1 class="title is-1">Neuigkeiten</h1>
</section>
- <section class="columns">
+ <section class="columns is-same-height">
<div class="column">
<div class="card">
{% include "frontpage/blocks/embed_article.html" %}
@@ -10,7 +10,36 @@
</div>
<div class="column">
<div class="card">
- {% include "frontpage/blocks/embed_article.html" %}
+ <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>
+
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+ iaculis mauris.
+ 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 class="column">
--
GitLab