Skip to content
Snippets Groups Projects
Commit 18166e53 authored by xaralis's avatar xaralis
Browse files

Fix responsivness of hero blocks, add flags

parent f986bb46
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 152 additions and 71 deletions
source/_patterns/00-atoms/flags/basic-flag.mustache 0 → 100644
+ 3
− 0
View file @ 18166e53
<div class="flag {{ font }}{{^ font }}head-alt-base{{/ font }} {{ classes }}">
{{ cta }}
</div>
source/_patterns/00-atoms/flags/flag-color-variants.mustache 0 → 100644
+ 11
− 0
View file @ 18166e53
<div class="flex space-x-5">
<div>
{{> atoms-basic-flag(classes: "bg-black text-white") }}
</div>
<div>
{{> atoms-basic-flag(classes: "bg-green-100 text-white") }}
</div>
<div>
{{> atoms-basic-flag(classes: "bg-red-100 text-white") }}
</div>
</div>
source/_patterns/00-atoms/flags/flag-size-variants.mustache 0 → 100644
+ 11
− 0
View file @ 18166e53
<div class="flex space-x-5">
<div>
{{> atoms-basic-flag(font: "head-alt-base") }}
</div>
<div>
{{> atoms-basic-flag(font: "head-alt-lg") }}
</div>
<div>
{{> atoms-basic-flag(font: "head-alt-xl") }}
</div>
</div>
source/_patterns/02-organisms/03-hero/hero.mustache
+ 8
− 6
View file @ 18166e53
<article class="hero {{ classes }}">
<div class="container grid grid-cols-7 gap-1 items-start">
<div class="col-span-3">
<h1 class="head-alt-xl max-w-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
<div class="mt-6">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive text-lg", icon: "fas fa-chevron-right") }}
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="md-2 md:mt-4">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "fas fa-chevron-right") }}
</div>
</div>
<div class="col-span-4">
<div class="lg:row-span-5 lg:col-span-4 order-2">
<img src="/images/hero-profile-img.png" />
</div>
</div>
......
source/_patterns/02-organisms/03-hero/image-hero.mustache
+ 9
− 7
View file @ 18166e53
<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container flex space-x-8">
<div>
<h1 class="head-alt-lg max-w-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
<div class="mt-6">
<a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
<a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="md-2 md:mt-4 space-y-2">
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
</div>
</div>
<div>
<div class="lg:row-span-5 lg:col-span-4 order-2">
<img src="/images/hero-profile-img.png" />
</div>
</div>
......
source/css/atoms/flag.pcss 0 → 100644
+ 13
− 0
View file @ 18166e53
.flag {
/* mr makes space for flag stripes */
@apply inline-block relative py-4 pl-4 pr-3 mr-5 bg-black text-white;
&:after {
@apply absolute w-5 h-full;
content: "";
left: 100%;
top: 0;
background: inherit;
clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100%, -2px 100%);
}
}
source/css/atoms/heading.pcss
+ 59
− 56
View file @ 18166e53
.head-alt-xl {
@apply text-7xl font-alt font-normal leading-negative;
}
@responsive {
.head-alt-xl {
@apply text-7xl font-alt font-normal leading-negative;
}
.head-alt-lg {
@apply text-6xl font-alt font-normal leading-negative;
}
.head-alt-lg {
@apply text-6xl font-alt font-normal leading-negative;
}
.head-alt-md {
@apply text-4xl font-alt font-normal leading-negative;
}
.head-alt-md {
@apply text-4xl font-alt font-normal leading-negative;
}
.head-alt-base {
@apply text-3xl font-alt font-normal leading-negative;
}
.head-alt-base {
@apply text-3xl font-alt font-normal leading-negative;
}
.head-alt-sm {
@apply text-2xl font-alt font-normal leading-negative;
}
.head-alt-sm {
@apply text-2xl font-alt font-normal leading-negative;
}
.head-alt-xs {
@apply text-xl font-alt font-normal leading-negative;
}
.head-alt-xs {
@apply text-xl font-alt font-normal leading-negative;
}
.head-alt-2xs {
@apply text-lg font-alt font-normal leading-negative;
}
.head-alt-2xs {
@apply text-lg font-alt font-normal leading-negative;
}
.head-base {
@apply text-3xl font-condensed font-medium leading-tight;
}
.head-base {
@apply text-3xl font-condensed font-medium leading-tight;
}
.head-sm {
@apply text-2xl font-condensed font-medium leading-tight;
}
.head-sm {
@apply text-2xl font-condensed font-medium leading-tight;
}
.head-xs {
@apply text-xl font-condensed font-medium leading-tight;
}
.head-xs {
@apply text-xl font-condensed font-medium leading-tight;
}
.head-2xs {
@apply text-lg font-condensed font-medium leading-tight;
}
.head-2xs {
@apply text-lg font-condensed font-medium leading-tight;
}
.head-heavy-base {
@apply text-3xl font-condensed font-bold leading-tight;
}
.head-heavy-base {
@apply text-3xl font-condensed font-bold leading-tight;
}
.head-heavy-sm {
@apply text-2xl font-condensed font-bold leading-tight;
}
.head-heavy-sm {
@apply text-2xl font-condensed font-bold leading-tight;
}
.head-heavy-xs {
@apply text-xl font-condensed font-bold leading-tight;
}
.head-heavy-xs {
@apply text-xl font-condensed font-bold leading-tight;
}
.head-heavy-2xs {
@apply text-lg font-condensed font-bold leading-tight;
}
.head-heavy-2xs {
@apply text-lg font-condensed font-bold leading-tight;
}
.head-allcaps-2xs {
@apply text-lg font-condensed uppercase leading-tight;
}
.head-allcaps-2xs {
@apply text-lg font-condensed uppercase leading-tight;
}
.head-allcaps-3xs {
@apply text-base font-condensed uppercase leading-tight;
}
.head-allcaps-3xs {
@apply text-base font-condensed uppercase leading-tight;
}
.head-allcaps-heavy-2xs {
@apply text-lg font-condensed font-bold uppercase leading-tight;
}
.head-allcaps-heavy-2xs {
@apply text-lg font-condensed font-bold uppercase leading-tight;
}
.head-allcaps-heavy-3xs {
@apply text-base font-condensed font-bold uppercase leading-tight;
.head-allcaps-heavy-3xs {
@apply text-base font-condensed font-bold uppercase leading-tight;
}
}
source/css/organisms/hero.pcss
+ 5
− 1
View file @ 18166e53
.hero {
@apply py-8;
@apply py-2;
@screen md {
@apply py-8;
}
}
.hero--image {
......
source/css/style.pcss
+ 1
− 0
View file @ 18166e53
......@@ -19,6 +19,7 @@
@import "./atoms/button.pcss";
@import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss";
@import "./atoms/flag.pcss";
@import "./atoms/heading.pcss";
@import "./atoms/paragraph.pcss";
@import "./atoms/social-icon.pcss";
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ 18166e53
This diff is collapsed.
source/images/hero-profile-img.png
+ 0
− 0
View replaced file @ f986bb46 View file @ 18166e53
source/images/hero-profile-img.png

494 KiB | W: | H:

source/images/hero-profile-img.png

501 KiB | W: | H:

source/images/hero-profile-img.png
source/images/hero-profile-img.png
source/images/hero-profile-img.png
source/images/hero-profile-img.png
  • 2-up
  • Swipe
  • Onion skin
source/images/logo-full-white.svg 0 → 100644
+ 30
− 0
View file @ 18166e53
<svg xmlns="http://www.w3.org/2000/svg" width="144.365" height="39.988" viewBox="0 0 144.365 39.988">
<g id="logo-flag-text-white" transform="translate(-288.3 -170.5)">
<g id="Group_11" data-name="Group 11" transform="translate(288.3 173.149)">
<path id="Path_17" data-name="Path 17" d="M306.944,211.307A16.912,16.912,0,1,1,323.856,194.4a16.936,16.936,0,0,1-16.912,16.912M320.189,181.2a18.571,18.571,0,1,0,5.5,13.194,18.794,18.794,0,0,0-5.5-13.194" transform="translate(-288.3 -175.7)" fill="#fff"/>
<path id="Path_18" data-name="Path 18" d="M316,197.98c-.56,2.7-3.515,4.126-5.247,5.3v-13.7c2.9.713,6.368,2.955,5.247,8.405M310.75,188.1v-2.6h-1.63v3.005c-1.121.357-1.732.713-1.63.917a5.119,5.119,0,0,1,1.63-.1v15.741c-1.681,3.26.713,8.252.713,8.252s-1.783-5.349,2.19-7.9c3.668-2.343,16.4-1.223,16.352-8.405,0-10.188-11.767-10.137-17.625-8.915" transform="translate(-297.709 -180.508)" fill="#fff"/>
<path id="Path_19" data-name="Path 19" d="M384.221,186.483a4.663,4.663,0,0,0,.866.051,2.758,2.758,0,0,0,1.936-.611,2.117,2.117,0,0,0,.662-1.681c0-1.375-.866-2.038-2.649-2.038a5.022,5.022,0,0,0-.866.1v4.177Zm0,2.853v4.432H380.4V179.606a29.174,29.174,0,0,1,4.279-.306c4.432,0,6.622,1.579,6.622,4.788a5.032,5.032,0,0,1-1.477,3.922,6.265,6.265,0,0,1-4.381,1.324,9.753,9.753,0,0,1-1.223,0" transform="translate(-333.484 -177.466)" fill="#fff"/>
</g>
<rect id="Rectangle_29" data-name="Rectangle 29" width="4.279" height="14.263" transform="translate(347.951 175.187)" fill="#fff"/>
<g id="Group_12" data-name="Group 12" transform="translate(355.032 174.983)">
<path id="Path_20" data-name="Path 20" d="M423.121,185.973h1.07a2.269,2.269,0,0,0,1.579-.509,1.639,1.639,0,0,0,.56-1.375q0-1.834-2.14-1.834a6.358,6.358,0,0,0-1.07.1Zm0,2.8v4.992H419.3V179.606a42.086,42.086,0,0,1,5.094-.306c3.922,0,5.858,1.477,5.858,4.381a3.871,3.871,0,0,1-.764,2.292A4.207,4.207,0,0,1,427.5,187.5v.051a2.646,2.646,0,0,1,.968.866,6.5,6.5,0,0,1,.764,1.477l1.426,3.922h-4.024l-1.223-3.719a1.949,1.949,0,0,0-.56-.968,1.2,1.2,0,0,0-.866-.306h-.866Z" transform="translate(-419.3 -179.3)" fill="#fff"/>
</g>
<path id="Path_21" data-name="Path 21" d="M448.551,183.8h2.6l-1.273-5.3h-.051Zm2.089-9.781h-3.107l1.936-3.515h4.279Zm-2.8,12.684-.662,2.751H443.1l4.687-14.263h4.126L456.6,189.45h-4.126l-.662-2.751Z" transform="translate(-75.944)" fill="#fff"/>
<path id="Path_22" data-name="Path 22" d="M480.816,179.7v3.209h-3.871v11.054h-3.973V182.909H469.1V179.7Z" transform="translate(-88.7 -4.513)" fill="#fff"/>
<g id="Group_13" data-name="Group 13" transform="translate(393.237 175.034)">
<path id="Path_23" data-name="Path 23" d="M504.233,183.373a8.828,8.828,0,0,0-4.024-.968,2.5,2.5,0,0,0-1.375.306,1,1,0,0,0-.458.866c0,.56.408.917,1.274,1.172a11.092,11.092,0,0,1,4.33,1.987,4.145,4.145,0,0,1-.2,6.164,7.27,7.27,0,0,1-4.483,1.121,10.863,10.863,0,0,1-2.7-.408,6,6,0,0,1-2.292-1.07l.866-3.005a8.413,8.413,0,0,0,2.14,1.07,6.866,6.866,0,0,0,2.139.408c1.172,0,1.783-.408,1.783-1.273,0-.56-.509-.968-1.579-1.274a10.417,10.417,0,0,1-4.075-1.987,3.808,3.808,0,0,1-1.223-2.9,3.719,3.719,0,0,1,1.477-3.056,6.681,6.681,0,0,1,4.177-1.121,10.873,10.873,0,0,1,4.89.968Z" transform="translate(-494.3 -179.4)" fill="#fff"/>
</g>
<path id="Path_24" data-name="Path 24" d="M523.722,185.762h.051l3.668-6.062h4.483l-4.483,6.826,4.687,7.437h-4.483l-3.872-6.622h-.051v6.622H519.8V179.7h3.922Z" transform="translate(-113.573 -4.513)" fill="#fff"/>
<path id="Path_25" data-name="Path 25" d="M550.651,183.8h2.6l-1.274-5.3h-.051Zm2.089-9.781h-3.107l1.936-3.515h4.279Zm-2.8,12.684-.662,2.751H545.2l4.687-14.263h4.126L558.7,189.45h-4.126l-.662-2.751Z" transform="translate(-126.034)" fill="#fff"/>
<g id="Group_14" data-name="Group 14" transform="translate(334.758 194.289)">
<path id="Path_26" data-name="Path 26" d="M389.433,221.173a8.828,8.828,0,0,0-4.024-.968,2.5,2.5,0,0,0-1.375.306,1,1,0,0,0-.458.866c0,.56.408.917,1.274,1.172a11.093,11.093,0,0,1,4.33,1.987,4.146,4.146,0,0,1-.2,6.164,7.27,7.27,0,0,1-4.483,1.121,10.866,10.866,0,0,1-2.7-.408,6.866,6.866,0,0,1-2.292-1.07l.866-3.005a8.414,8.414,0,0,0,2.139,1.07,6.867,6.867,0,0,0,2.14.408c1.172,0,1.783-.408,1.783-1.274,0-.56-.509-.968-1.579-1.273a10.419,10.419,0,0,1-4.075-1.987,3.808,3.808,0,0,1-1.223-2.9,3.719,3.719,0,0,1,1.477-3.056,6.681,6.681,0,0,1,4.177-1.121,10.874,10.874,0,0,1,4.89.968Z" transform="translate(-379.5 -217.2)" fill="#fff"/>
</g>
<path id="Path_27" data-name="Path 27" d="M415.016,217.6v3.209h-3.871v11.054h-3.973V220.809H403.3V217.6Z" transform="translate(-56.418 -23.107)" fill="#fff"/>
<g id="Group_15" data-name="Group 15" transform="translate(360.686 194.289)">
<path id="Path_28" data-name="Path 28" d="M434.221,223.822h1.07a2.269,2.269,0,0,0,1.579-.509,1.639,1.639,0,0,0,.56-1.375q0-1.834-2.14-1.834a6.36,6.36,0,0,0-1.07.1Zm0,2.853v4.992H430.4V217.506a42.1,42.1,0,0,1,5.094-.306c3.922,0,5.858,1.477,5.858,4.381a3.871,3.871,0,0,1-.764,2.292A4.207,4.207,0,0,1,438.6,225.4v.051a2.647,2.647,0,0,1,.968.866,6.5,6.5,0,0,1,.764,1.477l1.426,3.922h-4.024L436.513,228a1.949,1.949,0,0,0-.56-.968,1.2,1.2,0,0,0-.866-.306h-.866Z" transform="translate(-430.4 -217.2)" fill="#fff"/>
</g>
<path id="Path_29" data-name="Path 29" d="M460.051,226.158h2.6l-1.273-5.3h-.051Zm-.713,2.955-.662,2.751H454.6l4.687-14.263h4.126l4.687,14.263h-4.126l-.662-2.751Z" transform="translate(-81.586 -23.107)" fill="#fff"/>
<path id="Path_30" data-name="Path 30" d="M492.349,225.394h.051V217.6h3.821v14.263H492.4l-4.279-7.845h-.051v7.845H484.3V217.6h3.77Z" transform="translate(-96.157 -23.107)" fill="#fff"/>
<path id="Path_31" data-name="Path 31" d="M516.151,226.158h2.6l-1.274-5.3h-.051Zm-.713,2.955-.662,2.751H510.7l4.686-14.263h4.126l4.687,14.263h-4.126l-.662-2.751Z" transform="translate(-109.108 -23.107)" fill="#fff"/>
</g>
</svg>
source/images/logo-round-white.svg 0 → 100644
+ 1
− 0
View file @ 18166e53
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 20.217 20.156" width="20.217pt" height="20.156pt"><defs><clipPath id="_clipPath_tR3ALwD3k6PT9ZS47lNZPyjlLQOtvovj"><rect width="20.217" height="20.156"/></clipPath></defs><g clip-path="url(#_clipPath_tR3ALwD3k6PT9ZS47lNZPyjlLQOtvovj)"><path d=" M 10.081 19.222 C 5.04 19.214 0.96 15.123 0.965 10.083 C 0.97 5.042 5.059 0.959 10.1 0.962 C 15.14 0.965 19.225 5.051 19.225 10.092 C 19.214 15.135 15.124 19.219 10.081 19.222 M 17.242 2.97 C 13.848 -0.384 8.558 -0.878 4.603 1.791 C 0.647 4.46 -0.877 9.549 0.963 13.953 C 2.802 18.356 7.493 20.849 12.172 19.911 C 16.85 18.973 20.217 14.864 20.217 10.092 C 20.212 7.417 19.142 4.854 17.242 2.97" fill="rgb(255,255,255)"/><path d=" M 9.888 9.432 C 9.588 10.889 7.988 11.659 7.051 12.292 L 7.051 4.892 C 8.065 5.051 8.96 5.643 9.505 6.513 C 10.049 7.384 10.189 8.447 9.888 9.429 M 7.051 4.094 L 7.051 2.694 L 6.17 2.694 L 6.17 4.316 C 5.564 4.508 5.233 4.701 5.289 4.811 C 5.578 4.746 5.875 4.727 6.17 4.756 L 6.17 13.256 C 5.261 15.016 6.556 17.711 6.556 17.711 C 6.556 17.711 5.592 14.824 7.74 13.449 C 9.723 12.184 16.609 12.789 16.581 8.912 C 16.581 3.412 10.219 3.44 7.051 4.1" fill="rgb(255,255,255)"/></g></svg>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft