diff --git a/sass/_content.scss b/sass/_content.scss new file mode 100644 index 0000000000000000000000000000000000000000..fe64671cac6a34d8ca7f8ede95d59a4ba1efad35 --- /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 16508b12b72a1140f7cf3450dba9132aba882b39..7dee0d1df888042e0af5eeee9be54043694c8847 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 5d6b584df22577fee1ea8d0db612e97ffa7d4197..f56f76b0a966090701ab3f2cca3698bc67c84555 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">