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

Revamp color scheme

parent 8a0079d1
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 144 additions and 173 deletions
source/_data/data.json
+ 65
− 1
View file @ 35d6d9cc
...@@ -92,5 +92,69 @@ ...@@ -92,5 +92,69 @@
"long": "20", "long": "20",
"short": "20" "short": "20"
}, },
"seconds": "31" "seconds": "31",
"greyColors": [
{"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
{"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
{"cls": "grey-125", "hex": "#f0f0f0", "name": "Grey 125"},
{"cls": "grey-200", "hex": "#adadad", "name": "Grey 200"},
{"cls": "grey-300", "hex": "#4c4c4c", "name": "Grey 300"},
{"cls": "grey-400", "hex": "#343434", "name": "Grey 400"},
{"cls": "grey-500", "hex": "#303132", "name": "Grey 500"},
{"cls": "grey-600", "hex": "#262626", "name": "Grey 600"},
{"cls": "grey-700", "hex": "#202020", "name": "Grey 700"},
{"cls": "grey-800", "hex": "#1f1f1f", "name": "Grey 800"}
],
"brandColors": [
{
"name": "Primary",
"variants": [
{"cls": "black", "name": "Black", "hex": "#000000"},
{"cls": "white", "name": "White", "hex": "#ffffff"}
]
},
{
"name": "Green",
"variants": [
{"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
]
},
{
"name": "Blue",
"variants": [
{"cls": "blue-100", "name": "Blue 100", "hex": "#abcdef"},
{"cls": "blue-200", "name": "Blue 200", "hex": "#76b4cf"},
{"cls": "blue-300", "name": "Blue 300", "hex": "#027da8"}
]
},
{
"name": "Cyan",
"variants": [
{"cls": "cyan-100", "name": "Cyan 100", "hex": "#a7d4d1"},
{"cls": "cyan-200", "name": "Cyan 200", "hex": "#57b3bd"},
{"cls": "cyan-300", "name": "Cyan 300", "hex": "#3e8793"},
{"cls": "cyan-400", "name": "Cyan 400", "hex": "#497280"},
{"cls": "cyan-500", "name": "Cyan 500", "hex": "#004958"}
]
},
{
"name": "Orange",
"variants": [
{"cls": "orange-100", "name": "Orange 100", "hex": "#f2d29f"},
{"cls": "orange-200", "name": "Orange 200", "hex": "#f1ae7b"},
{"cls": "orange-300", "name": "Orange 300", "hex": "#ed9654"}
]
},
{
"name": "Violet",
"variants": [
{"cls": "violet-100", "name": "Violet 100", "hex": "#edc8bd"},
{"cls": "violet-200", "name": "Violet 200", "hex": "#d28c94"},
{"cls": "violet-300", "name": "Violet 300", "hex": "#8d415f"},
{"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
{"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
]
}
]
} }
source/_meta/_01-foot.mustache
+ 6
− 5
View file @ 35d6d9cc
...@@ -15,13 +15,14 @@ ...@@ -15,13 +15,14 @@
*/ */
var idx = location.pathname.indexOf("/patterns"); var idx = location.pathname.indexOf("/patterns");
var prefix = location.pathname.substring(0, idx); var prefix = location.pathname.substring(0, idx);
if (prefix != "") {
var anchors = document.querySelectorAll('a[data-href]'); var anchors = document.querySelectorAll('a[data-href]');
for (var i = 0; i < anchors.length; i++) { for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i]; var anchor = anchors[i];
if (prefix != "") {
anchor.setAttribute('href', prefix + anchor.dataset.href); anchor.setAttribute('href', prefix + anchor.dataset.href);
} else {
anchor.setAttribute('href', anchor.dataset.href);
} }
} }
</script> </script>
......
source/_patterns/00-atoms/00-global/00-brand-colors.mustache
+ 8
− 37
View file @ 35d6d9cc
{{# brandColors }}
<h2 class="head-alt-sm mb-4 mt-8">{{ name }}</h2>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col"> {{# variants }}
<div class="h-32 bg-black"></div> {{> molecules-color-swatch }}
<div class="card__body p-2 flex"> {{/ variants }}
<p class="font-bold flex-grow">Black</p>
<p>#000000</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-white"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">White</p>
<p>#ffffff</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 100</p>
<p>#29bc51</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-200"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 200</p>
<p>#26b34b</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-300"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 300</p>
<p>#22a244</p>
</div>
</div>
</div> </div>
{{/ brandColors }}
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+ 3
− 77
View file @ 35d6d9cc
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col"> {{# greyColors }}
<div class="h-32 bg-grey-50"></div> {{> molecules-color-swatch }}
<div class="card__body p-2 flex"> {{/ greyColors }}
<p class="font-bold flex-grow">Grey 50</p>
<p>#f7f7f7</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 100</p>
<p>#f3f3f3</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-125"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 125</p>
<p>#f0f0f0</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-150"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 150</p>
<p>#00000012</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-200"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 200</p>
<p>#adadad</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-300"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 300</p>
<p>#4c4c4c</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-400"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 400</p>
<p>#343434</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-500"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 500</p>
<p>#303132</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-600"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 600</p>
<p>#262626</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-700"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 700</p>
<p>#202020</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-800"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 800</p>
<p>#1f1f1f</p>
</div>
</div>
</div> </div>
source/_patterns/00-atoms/00-global/02-utility-colors.mustache deleted 100644 → 0
+ 0
− 16
View file @ 8a0079d1
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-red-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Red 100</p>
<p>#d6151b</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-red-200"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Red 200</p>
<p>#d6151b</p>
</div>
</div>
</div>
source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+ 12
− 6
View file @ 35d6d9cc
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8"> <div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black") }} {{> atoms-basic-button(classes: "btn--black") }}
{{> atoms-basic-button(classes: "btn--grey-800") }}
{{> atoms-basic-button(classes: "btn--grey-700") }} {{> atoms-basic-button(classes: "btn--grey-700") }}
{{> atoms-basic-button(classes: "btn--grey-500") }} {{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }} {{> atoms-basic-button(classes: "btn--grey-125") }}
{{> atoms-basic-button(classes: "btn--white") }} {{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--green-100") }} {{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--red-100") }} {{> atoms-basic-button(classes: "btn--cyan-200") }}
{{> atoms-basic-button(classes: "btn--green-200") }}
{{> atoms-basic-button(classes: "btn--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black") }} {{> atoms-icon-button(classes: "btn--black") }}
{{> atoms-icon-button(classes: "btn--grey-800") }}
{{> atoms-icon-button(classes: "btn--grey-700") }} {{> atoms-icon-button(classes: "btn--grey-700") }}
{{> atoms-icon-button(classes: "btn--grey-500") }} {{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }} {{> atoms-icon-button(classes: "btn--grey-125") }}
{{> atoms-icon-button(classes: "btn--white") }} {{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--green-100") }} {{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--red-100") }} {{> atoms-icon-button(classes: "btn--cyan-200") }}
{{> atoms-icon-button(classes: "btn--green-200") }}
{{> atoms-icon-button(classes: "btn--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }}
</div> </div>
</div> </div>
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+ 12
− 6
View file @ 35d6d9cc
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8"> <div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
</div> </div>
</div> </div>
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
+ 12
− 6
View file @ 35d6d9cc
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8"> <div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }} {{> atoms-basic-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-basic-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }} {{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }} {{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }} {{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }} {{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-basic-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }} {{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-basic-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }} {{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
{{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }} {{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }} {{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-icon-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }} {{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }} {{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }} {{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }} {{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-icon-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }} {{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-icon-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }} {{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
{{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }} {{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div> </div>
</div> </div>
source/_patterns/00-atoms/flags/flag-color-variants.mustache
+ 2
− 2
View file @ 35d6d9cc
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
{{> atoms-basic-flag(classes: "bg-black text-white") }} {{> atoms-basic-flag(classes: "bg-black text-white") }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-basic-flag(classes: "bg-green-100 text-white") }} {{> atoms-basic-flag(classes: "bg-green-200 text-white") }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-basic-flag(classes: "bg-red-100 text-white") }} {{> atoms-basic-flag(classes: "bg-blue-100 text-white") }}
</div> </div>
</div> </div>
source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache
+ 3
− 3
View file @ 35d6d9cc
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
<a href="#" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{ headline.medium }}</h1></a> <a href="#" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{ headline.medium }}</h1></a>
<p class="card-body-text flex-grow text-white">{{ excerpt.long }}</p> <p class="card-body-text flex-grow text-white">{{ excerpt.long }}</p>
<div class="inline-block-nogap mt-4"> <div class="inline-block-nogap mt-4">
{{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
{{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
{{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }} {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
</div> </div>
</div> </div>
</article> </article>
source/_patterns/01-molecules/banner/color-variants.mustache
+ 2
− 2
View file @ 35d6d9cc
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;"> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
{{> molecules-banner(color: "bg-black") }} {{> molecules-banner(color: "bg-black") }}
{{> molecules-banner(color: "bg-red-100") }} {{> molecules-banner(color: "bg-violet-300") }}
{{> molecules-banner(color: "bg-green-100") }}
{{> molecules-banner(color: "bg-green-200") }} {{> molecules-banner(color: "bg-green-200") }}
{{> molecules-banner(color: "bg-blue-200") }}
{{> molecules-banner(color: "bg-brands-facebook") }} {{> molecules-banner(color: "bg-brands-facebook") }}
{{> molecules-banner(color: "bg-brands-twitter") }} {{> molecules-banner(color: "bg-brands-twitter") }}
</div> </div>
source/_patterns/01-molecules/calendar/calendar-table-row.mustache
+ 2
− 2
View file @ 35d6d9cc
<div class="grid grid-cols-12 items-center calendar-table-row {{ classes }}"> <div class="grid grid-cols-12 items-center calendar-table-row {{ classes }}">
<div class="col-span-2 text-red-100 head-alt-md calendar-table-row__col"><span>10.</span></div> <div class="col-span-2 text-orange-300 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-8 grid grid-cols-3 calendar-table-row__col">
<div class="col-span-3 md:col-span-1"> <div class="col-span-3 md:col-span-1">
<strong class="block">{{ dateverbose }}</strong> <strong class="block">{{ dateverbose }}</strong>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="col-span-2 text-center font-light calendar-table-row__col"> <div class="col-span-2 text-center font-light calendar-table-row__col">
<a href="#"> <a href="#">
<i class="fas fa-map-marker-alt text-red-100 mr-1" aria-hidden="true"></i> <i class="fas fa-map-marker-alt text-violet-300 mr-1" aria-hidden="true"></i>
<span>Mapa</span> <span>Mapa</span>
</a> </a>
</div> </div>
......
source/_patterns/01-molecules/calendar/calendar.mustache
+ 1
− 1
View file @ 35d6d9cc
<div class="calendar grid grid-cols-4"> <div class="calendar grid grid-cols-4">
<div class="col-span-4 xl:col-span-1"> <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") }} {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
</div> </div>
<div class="col-span-4 xl:col-span-3"> <div class="col-span-4 xl:col-span-3">
{{> molecules-calendar-table-row }} {{> molecules-calendar-table-row }}
......
source/_patterns/01-molecules/pagination/pagination.mustache
+ 1
− 1
View file @ 35d6d9cc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }} {{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }}
{{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }} {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }} {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "3", classes: "btn--grey-300 btn--condensed hidden md:inline-block") }} {{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }} {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }} {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }} {{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }}
......
source/_patterns/01-molecules/utility/color-swatch.mustache 0 → 100644
+ 7
− 0
View file @ 35d6d9cc
<div class="card flex flex-col">
<div class="h-32 bg-{{ cls }}"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">{{ name }}</p>
<p>{{ hex }}</p>
</div>
</div>
source/_patterns/02-organisms/00-global/footer.mustache
+ 2
− 2
View file @ 35d6d9cc
...@@ -66,8 +66,8 @@ ...@@ -66,8 +66,8 @@
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div> </div>
<div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2"> <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }} {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }} {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div> </div>
</section> </section>
</div> </div>
......
source/_patterns/02-organisms/00-global/navbar.mustache
+ 2
− 2
View file @ 35d6d9cc
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
</ul> </ul>
</div> </div>
<div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0"> <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }} {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }} {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
</div> </div>
</div> </div>
</div> </div>
......
source/_patterns/02-organisms/00-global/subnav.mustache
+ 2
− 2
View file @ 35d6d9cc
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
<button <button
@click="toggleView('calendar')" @click="toggleView('calendar')"
class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-red-100 text-sm" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm"
:class="{'btn--activated': isCurrentView('calendar')}" :class="{'btn--activated': isCurrentView('calendar')}"
> >
<div class="btn__body"> <div class="btn__body">
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-red-100"></i> <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-orange-300"></i>
<span class="hidden md:block">Krajský kalendář</span> <span class="hidden md:block">Krajský kalendář</span>
</div> </div>
</button> </button>
......
source/_patterns/02-organisms/03-hero/elections-hero.mustache
+ 1
− 1
View file @ 35d6d9cc
<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})"> <article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center"> <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-2 lg:col-span-3 order-1"> <div class="lg:row-span-2 lg:col-span-3 order-1">
{{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }} {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
<h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1> <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
</div> </div>
<div class="lg:row-span-1 lg:col-span-3 order-3"> <div class="lg:row-span-1 lg:col-span-3 order-3">
......
source/_patterns/03-templates/pirate-center.mustache
+ 1
− 1
View file @ 35d6d9cc
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
{{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }} {{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
</p> </p>
{{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--red-100 btn--hoveractive btn--fullwidth md:btn--autowidth") }} {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--orange-300 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
</div> </div>
<div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0"> <div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
<div class="lg:card lg:elevation-10"> <div class="lg:card lg:elevation-10">
......
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