Skip to content
Snippets Groups Projects
Commit 2ae6acc9 authored by xaralis's avatar xaralis
Browse files

feat: adjust cf2021 layout, adjust -alt head lineheight

parent 87fedaa2
Branches
Tags 2.0.1
No related merge requests found
Pipeline #1922 passed
{{> organisms-simplified-navbar-with-actions }} {{> organisms-simplified-navbar-with-actions }}
<article class="container container--wide pt-8 lg:py-24 cf2021"> <article class="container container--wide pt-8 lg:py-24 cf2021">
<section class="cf2021__video space-y-8"> <div class="cf2021__title flex justify-between">
<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> <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>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto"> <div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container"> <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> <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 @@ ...@@ -19,10 +20,6 @@
<section class="cf2021__notifications"> <section class="cf2021__notifications">
<div class="lg:card lg:elevation-10"> <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"> <div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }} {{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div> </div>
......
{{> organisms-simplified-navbar-with-avatar }} {{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021"> <article class="container container--wide pt-8 lg:py-24 cf2021">
<section class="cf2021__video space-y-8"> <div class="cf2021__title flex justify-between">
<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> <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"> <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> <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
<ul class="dropdown__content whitespace-no-wrap"> <ul class="dropdown__content whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <li class="dropdown__content-item bg-white hover:bg-grey-125">
...@@ -20,6 +19,7 @@ ...@@ -20,6 +19,7 @@
</div> </div>
</div> </div>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto"> <div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container"> <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> <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 @@ ...@@ -34,10 +34,6 @@
<section class="cf2021__notifications"> <section class="cf2021__notifications">
<div class="lg:card lg:elevation-10"> <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"> <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") }} {{> organisms-event-feed-with-action-menu(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div> </div>
......
{{> organisms-simplified-navbar-with-avatar }} {{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021"> <article class="container container--wide pt-8 lg:py-24 cf2021">
<section class="cf2021__video space-y-8"> <div class="cf2021__title flex justify-between">
<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> <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>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto"> <div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container"> <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> <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 @@ ...@@ -20,10 +20,6 @@
<section class="cf2021__notifications"> <section class="cf2021__notifications">
<div class="lg:card lg:elevation-10"> <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"> <div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }} {{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div> </div>
......
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
} }
.h-alt { .h-alt {
@apply font-alt font-normal leading-negative; @apply font-alt font-normal;
line-height: 0.96;
} }
.h-allcaps { .h-allcaps {
...@@ -14,37 +15,44 @@ ...@@ -14,37 +15,44 @@
@responsive { @responsive {
.head-alt-xl, .head-alt-xl,
.content-block .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, .head-alt-lg,
.content-block .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, .head-alt-md,
.content-block .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, .head-alt-base,
.content-block .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, .head-alt-sm,
.content-block .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, .head-alt-xs,
.content-block .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, .head-alt-2xs,
.content-block .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;
} }
......
.cf2021 { .cf2021 {
@apply grid gap-8; @apply grid gap-8;
grid-template-areas: "video" grid-template-areas: "title"
"video"
"notifications" "notifications"
"posts"; "posts";
@screen lg { @screen lg {
grid-template-areas: "video notifications" grid-template-areas: "title title"
"video notifications"
"posts notifications"; "posts notifications";
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto auto 1fr;
grid-template-columns: theme("width.7/12") 1fr; grid-template-columns: theme("width.7/12") 1fr;
} }
...@@ -18,6 +20,9 @@ ...@@ -18,6 +20,9 @@
} }
} }
.cf2021__title {
grid-area: title;
}
.cf2021__video { .cf2021__video {
grid-area: video; grid-area: video;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment