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

Add banner & calendar

parent 292f5c0c
No related branches found
No related tags found
No related merge requests found
Pipeline #721 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 181 additions and 70 deletions
source/_data/data.json
+ 1
− 0
View file @ ee1850b8
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
"name": "Piráti Pardubického kraje" "name": "Piráti Pardubického kraje"
}, },
"date": "22. 1. 2020", "date": "22. 1. 2020",
"dateverbose": "Pondělí 10. dubna",
"datetime": "22. 1. 2020 19:30", "datetime": "22. 1. 2020 19:30",
"year": { "year": {
"long": "2020", "long": "2020",
......
source/_patterns/00-atoms/00-global/02-utility-colors.mustache
+ 2
− 2
View file @ ee1850b8
<ul class="sg-colors"> <ul class="sg-colors">
<li> <li>
<span class="sg-swatch bg-red"></span> <span class="sg-swatch bg-red-100"></span>
<span class="sg-label">Red<br>#d6151b</span> <span class="sg-label">Red 100<br>#d6151b</span>
</li> </li>
</ul> </ul>
source/_patterns/01-molecules/banner/banner.mustache 0 → 100644
+ 7
− 0
View file @ ee1850b8
<aside class="banner {{ color }}{{^ color }}bg-black{{/ color }} text-white {{ classes }}">
<i class="{{ icon }} banner__icon"></i>
<div class="banner__body">
<h1 class="{{ headClasses }}{{^ headClasses }}head-alt-lg{{/ headClasses }} banner__cta">{{ cta }}</h1>
{{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-4") }}
</div>
</aside>
source/_patterns/01-molecules/banner/color-variants.mustache 0 → 100644
+ 8
− 0
View file @ ee1850b8
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-2" style="min-height: 500px;">
{{> molecules-banner(color: "bg-black") }}
{{> molecules-banner(color: "bg-red-100") }}
{{> molecules-banner(color: "bg-green-100") }}
{{> molecules-banner(color: "bg-green-200") }}
{{> molecules-banner(color: "bg-brands-facebook") }}
{{> molecules-banner(color: "bg-brands-twitter") }}
</div>
source/_patterns/01-molecules/calendar/calendar-table-row.mustache 0 → 100644
+ 19
− 0
View file @ ee1850b8
<div class="grid grid-cols-12 items-center calendar-table-row">
<div class="col-span-2 text-red-100 head-alt-md calendar-table-row__col"><span>10.</span></div>
<div class="col-span-8 grid grid-cols-3 calendar-table-row__col">
<div class="col-span-3 md:col-span-1">
<strong class="block">{{ dateverbose }}</strong>
<p class="font-light text-sm mt-sm">Celý den</p>
</div>
<div class="col-span-3 md:col-span-2 mt-2 md:mt-0">
<strong class="block">{{ headline.short }}</strong>
<p class="font-light text-sm mt-sm">{{ excerpt.short }}</p>
</div>
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
<a href="#">
<i class="fas fa-map-marker-alt text-red-100 mr-sm" aria-hidden="true"></i>
<span>Mapa</span>
</a>
</div>
</div>
source/_patterns/01-molecules/calendar/calendar.mustache 0 → 100644
+ 15
− 0
View file @ ee1850b8
<div class="calendar grid grid-cols-4">
<div class="col-span-4 xl:col-span-1">
{{> molecules-banner(color: "bg-red-100", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
</div>
<div class="col-span-4 xl:col-span-3">
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
{{> molecules-calendar-table-row }}
</div>
</div>
source/css/atoms/heading.pcss
+ 7
− 7
View file @ ee1850b8
.head-alt-xl { .head-alt-xl {
@apply text-7xl font-alt font-normal leading-tight; @apply text-7xl font-alt font-normal leading-negative;
} }
.head-alt-lg { .head-alt-lg {
@apply text-6xl font-alt font-normal leading-tight; @apply text-6xl font-alt font-normal leading-negative;
} }
.head-alt-md { .head-alt-md {
@apply text-4xl font-alt font-normal leading-tight; @apply text-4xl font-alt font-normal leading-negative;
} }
.head-alt-base { .head-alt-base {
@apply text-3xl font-alt font-normal leading-tight; @apply text-3xl font-alt font-normal leading-negative;
} }
.head-alt-sm { .head-alt-sm {
@apply text-2xl font-alt font-normal leading-tight; @apply text-2xl font-alt font-normal leading-negative;
} }
.head-alt-xs { .head-alt-xs {
@apply text-xl font-alt font-normal leading-tight; @apply text-xl font-alt font-normal leading-negative;
} }
.head-alt-2xs { .head-alt-2xs {
@apply text-lg font-alt font-normal leading-tight; @apply text-lg font-alt font-normal leading-negative;
} }
......
source/css/molecules/banner.pcss 0 → 100644
+ 23
− 0
View file @ ee1850b8
.banner {
@apply p-4 flex flex-wrap flex-col;
}
.banner__icon {
font-size: 3rem;
@screen md {
font-size: 4rem;
}
@screen lg {
font-size: 9rem;
}
}
.banner__body {
@apply mt-auto;
}
.banner__cta {
@apply mt-4;
}
source/css/molecules/calendar.pcss 0 → 100644
+ 20
− 0
View file @ ee1850b8
.calendar-table-row {
@apply border-b border-grey-150;
&:first-child {
@apply border-t;
}
}
.calendar-table-row__col {
@apply h-full border-r border-grey-150 p-1 flex justify-center items-center;
&:first-child {
@apply border-l;
@screen lg {
@apply border-l-0;
}
}
}
source/css/pattern-scaffolding.css
+ 70
− 59
View file @ ee1850b8
/** /**
* This stylesheet is for styles you want to include only when displaying demo * This stylesheet is for styles you want to include only when displaying demo
* styles for grids, animations, color swatches, etc. * styles for grids, animations, color swatches, etc.
* These styles will not be your production CSS. * These styles will not be your production CSS.
*/ */
#sg-patterns { #sg-patterns {
-webkit-box-sizing: border-box !important; -webkit-box-sizing: border-box !important;
box-sizing: border-box !important; box-sizing: border-box !important;
max-width: 100%; max-width: 100%;
padding: 0 0.5em; padding: 0 0.5em;
} }
.demo-animate { .demo-animate {
background: #ddd; background: #ddd;
padding: 1em; padding: 1em;
margin-bottom: 1em; margin-bottom: 1em;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
} }
.sg-colors { .sg-colors {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none !important; list-style: none !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
} }
.sg-colors li { .sg-colors li {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
padding: 0.3em; padding: 0.3em;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
min-width: 5em; min-width: 5em;
max-width: 14em; max-width: 14em;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 8px; border-radius: 0;
} }
.sg-swatch { .sg-swatch {
display: block; display: block;
height: 4em; height: 8rem;
margin-bottom: 0.3em; margin-bottom: 0.5rem;
border-radius: 5px; border-radius: 0;
} }
.sg-label { .sg-label {
font-size: 90%; font-size: 1rem;
line-height: 1; }
}
.sg-pattern-example {
font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
.sg-pattern-example { }
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
} .sg-pattern-head .sg-pattern-title a {
font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
font-weight: bold !important;
font-size: 1.2rem !important;
color: #202020 !important;
}
.sg-pattern-category-title a {
font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
font-weight: 400 !important;
font-size: 3.5rem !important;
}
source/css/style.pcss
+ 2
− 0
View file @ ee1850b8
...@@ -25,6 +25,8 @@ ...@@ -25,6 +25,8 @@
@import "./molecules/article-card.pcss"; @import "./molecules/article-card.pcss";
@import "./molecules/badge.pcss"; @import "./molecules/badge.pcss";
@import "./molecules/banner.pcss";
@import "./molecules/calendar.pcss";
@import "./molecules/candidate-card.pcss"; @import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss"; @import "./molecules/candidate-table-row.pcss";
@import "./molecules/social-icon-group.pcss"; @import "./molecules/social-icon-group.pcss";
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ ee1850b8
Source diff could not be displayed: it is too large. Options to address this: view the blob.
tailwind.config.js
+ 6
− 1
View file @ ee1850b8
...@@ -9,6 +9,9 @@ module.exports = { ...@@ -9,6 +9,9 @@ module.exports = {
}, },
opacity: { opacity: {
'85': '0.85', '85': '0.85',
},
lineHeight: {
'negative': '0.9',
} }
}, },
fontFamily: { fontFamily: {
...@@ -50,7 +53,9 @@ module.exports = { ...@@ -50,7 +53,9 @@ module.exports = {
'450': '#262626', '450': '#262626',
'500': '#202020', '500': '#202020',
}, },
'red': '#d6151b', 'red': {
'100': '#d6151b',
},
'green': { 'green': {
'100': '#29bc51', '100': '#29bc51',
'200': '#26b34b', '200': '#26b34b',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft