From 2ae6acc97116a451d966aa8f064210e538d61af5 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 27 Dec 2020 21:37:45 +0100
Subject: [PATCH] feat: adjust cf2021 layout, adjust -alt head lineheight
---
.../03-templates/cf2021/anonymous.mustache | 11 ++----
.../03-templates/cf2021/chairman.mustache | 38 +++++++++----------
.../03-templates/cf2021/user.mustache | 12 ++----
source/css/atoms/heading.pcss | 24 ++++++++----
source/css/templates/cf2021.pcss | 11 ++++--
5 files changed, 49 insertions(+), 47 deletions(-)
diff --git a/source/_patterns/03-templates/cf2021/anonymous.mustache b/source/_patterns/03-templates/cf2021/anonymous.mustache
index 1e915d8..690b037 100644
--- a/source/_patterns/03-templates/cf2021/anonymous.mustache
+++ b/source/_patterns/03-templates/cf2021/anonymous.mustache
@@ -1,10 +1,11 @@
{{> organisms-simplified-navbar-with-actions }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
+ <div class="cf2021__title flex justify-between">
+ <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ </div>
+
<section class="cf2021__video space-y-8">
- <div class="flex items-center justify-between mb-4 lg:mb-8">
- <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
- </div>
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -19,10 +20,6 @@
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body pb-2 lg:py-6">
- <h2 class="head-heavy-sm">OznámenĂ</h2>
- </div>
-
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
diff --git a/source/_patterns/03-templates/cf2021/chairman.mustache b/source/_patterns/03-templates/cf2021/chairman.mustache
index 1ca71ab..28d5e18 100644
--- a/source/_patterns/03-templates/cf2021/chairman.mustache
+++ b/source/_patterns/03-templates/cf2021/chairman.mustache
@@ -1,25 +1,25 @@
{{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
- <section class="cf2021__video space-y-8">
- <div class="flex items-center justify-between mb-4 lg:mb-8">
- <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
- <div class="dropdown dropdown--right mt-4">
- <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
- <ul class="dropdown__content whitespace-no-wrap">
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#"><i class="ico--pencil mr-2"></i>Přejmenovat bod programu</a>
- </li>
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
- </li>
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>UkonÄŤit bod programu</a>
- </li>
- </ul>
- </div>
+ <div class="cf2021__title flex justify-between">
+ <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ <div class="dropdown dropdown--right pl-4 pt-1 lg:pt-5">
+ <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
+ <ul class="dropdown__content whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--pencil mr-2"></i>Přejmenovat bod programu</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>UkonÄŤit bod programu</a>
+ </li>
+ </ul>
</div>
+ </div>
+ <section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -34,10 +34,6 @@
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body pb-2 lg:py-6">
- <h2 class="head-heavy-sm">OznámenĂ</h2>
- </div>
-
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed-with-action-menu(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
diff --git a/source/_patterns/03-templates/cf2021/user.mustache b/source/_patterns/03-templates/cf2021/user.mustache
index 0e3ae23..040bf89 100644
--- a/source/_patterns/03-templates/cf2021/user.mustache
+++ b/source/_patterns/03-templates/cf2021/user.mustache
@@ -1,11 +1,11 @@
{{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
- <section class="cf2021__video space-y-8">
- <div class="flex items-center justify-between mb-4 lg:mb-8">
- <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
- </div>
+ <div class="cf2021__title flex justify-between">
+ <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ </div>
+ <section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -20,10 +20,6 @@
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body pb-2 lg:py-6">
- <h2 class="head-heavy-sm">OznámenĂ</h2>
- </div>
-
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
diff --git a/source/css/atoms/heading.pcss b/source/css/atoms/heading.pcss
index 22e8d2e..c04fa09 100644
--- a/source/css/atoms/heading.pcss
+++ b/source/css/atoms/heading.pcss
@@ -3,7 +3,8 @@
}
.h-alt {
- @apply font-alt font-normal leading-negative;
+ @apply font-alt font-normal;
+ line-height: 0.96;
}
.h-allcaps {
@@ -14,37 +15,44 @@
@responsive {
.head-alt-xl,
.content-block .head-alt-xl {
- @apply text-7xl font-alt font-normal leading-negative;
+ @apply text-7xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-lg,
.content-block .head-alt-lg {
- @apply text-6xl font-alt font-normal leading-negative;
+ @apply text-6xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-md,
.content-block .head-alt-md {
- @apply text-4xl font-alt font-normal leading-negative;
+ @apply text-4xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-base,
.content-block .head-alt-base {
- @apply text-3xl font-alt font-normal leading-negative;
+ @apply text-3xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-sm,
.content-block .head-alt-sm {
- @apply text-2xl font-alt font-normal leading-negative;
+ @apply text-2xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-xs,
.content-block .head-alt-xs {
- @apply text-xl font-alt font-normal leading-negative;
+ @apply text-xl font-alt font-normal;
+ line-height: 0.96;
}
.head-alt-2xs,
.content-block .head-alt-2xs {
- @apply text-lg font-alt font-normal leading-negative;
+ @apply text-lg font-alt font-normal;
+ line-height: 0.96;
}
diff --git a/source/css/templates/cf2021.pcss b/source/css/templates/cf2021.pcss
index da42921..e4d342b 100644
--- a/source/css/templates/cf2021.pcss
+++ b/source/css/templates/cf2021.pcss
@@ -1,14 +1,16 @@
.cf2021 {
@apply grid gap-8;
- grid-template-areas: "video"
+ grid-template-areas: "title"
+ "video"
"notifications"
"posts";
@screen lg {
- grid-template-areas: "video notifications"
+ grid-template-areas: "title title"
+ "video notifications"
"posts notifications";
- grid-template-rows: auto auto 1fr;
+ grid-template-rows: auto auto auto 1fr;
grid-template-columns: theme("width.7/12") 1fr;
}
@@ -18,6 +20,9 @@
}
}
+.cf2021__title {
+ grid-area: title;
+}
.cf2021__video {
grid-area: video;
--
GitLab