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

Candidate table row + headings adjustments

parent cc6d797b
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 245 additions and 133 deletions
source/_data/data.json
+ 2
− 1
View file @ 8e250cc4
......@@ -48,7 +48,8 @@
"email": "example@example.com",
"claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
"party": "Pirátská strana",
"age": "30"
"age": "30",
"position": "1"
},
"year": {
"long": "2013",
......
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+ 8
− 0
View file @ 8e250cc4
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-grey-50"></span>
<span class="sg-label">Grey 50<br>#f7f7f7</span>
</li>
<li>
<span class="sg-swatch bg-grey-100"></span>
<span class="sg-label">Grey 100<br>#f3f3f3</span>
</li>
<li>
<span class="sg-swatch bg-grey-150"></span>
<span class="sg-label">Grey 150<br>#00000012</span>
</li>
<li>
<span class="sg-swatch bg-grey-200"></span>
<span class="sg-label">Grey 200<br>#adadad</span>
......
source/_patterns/00-atoms/00-global/04-fonts.mustache
+ 19
− 11
View file @ 8e250cc4
<p class="font-body">Primary font: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
<p class="font-body font-light">Primary font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body font-medium">Primary font medium: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body font-bold">Primary font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<div class="space-y-6">
<div>
<p class="font-body">Primary font: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
<p class="font-body font-light">Primary font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body font-medium">Primary font medium: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body font-bold">Primary font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
</div>
<p class="font-condensed">Condensed font: "Roboto Condensed", "Helvetica", "Arial", sans-serif;</p>
<p class="font-condensed"><em>Condensed font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
<p class="font-condensed font-light">Condensed font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-condensed font-bold">Condensed font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<div>
<p class="font-condensed">Condensed font: "Roboto Condensed", "Helvetica", "Arial", sans-serif;</p>
<p class="font-condensed"><em>Condensed font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
<p class="font-condensed font-light">Condensed font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-condensed font-bold">Condensed font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
</div>
<p class="font-alt">Alternate font: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>
<p class="font-alt font-bold">Alternate font bold: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>
<div>
<p class="font-alt">Alternate font: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>
<p class="font-alt font-bold">Alternate font bold: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>
</div>
</div>
source/_patterns/00-atoms/01-text/headings.mustache
+ 30
− 13
View file @ 8e250cc4
<h1 class="head-xl-alt">Largest headline</h1>
<h1 class="head-lg-alt">Large headline</h1>
<h1 class="head-md-alt">Medium headline</h1>
<h1 class="head-base-alt">Base headline</h1>
<h1 class="head-sm-alt">Small headline</h1>
<h1 class="head-xs-alt">Extra small headline</h1>
<div class="space-y-6">
<div>
<h1 class="head-alt-xl">{{ headline.short }}</h1>
<h1 class="head-alt-lg">{{ headline.short }}</h1>
<h1 class="head-alt-md">{{ headline.short }}</h1>
<h1 class="head-alt-base">{{ headline.short }}</h1>
<h1 class="head-alt-sm">{{ headline.short }}</h1>
<h1 class="head-alt-xs">{{ headline.short }}</h1>
<h1 class="head-alt-2xs">{{ headline.short }}</h1>
</div>
<h1 class="head-base">Base headline</h1>
<h1 class="head-base-heavy">Base headline heavy variant</h1>
<div>
<h1 class="head-heavy-base">{{ headline.short }}</h1>
<h1 class="head-heavy-sm">{{ headline.short }}</h1>
<h1 class="head-heavy-2xs">{{ headline.short }}</h1>
</div>
<h1 class="head-sm">Small headline</h1>
<h1 class="head-sm-heavy">Small headline heavy variant</h1>
<div>
<h1 class="head-base">{{ headline.short }}</h1>
<h1 class="head-sm">{{ headline.short }}</h1>
<h1 class="head-xs">{{ headline.short }}</h1>
<h1 class="head-2xs">{{ headline.short }}</h1>
</div>
<h1 class="head-xs">Extra small headline</h1>
<h1 class="head-xs-allcaps">Extra small headline allcaps</h1>
<h1 class="head-xxs-allcaps">Extra extra small headline allcaps</h1>
<div>
<h1 class="head-allcaps-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-3xs">{{ headline.short }}</h1>
</div>
<div>
<h1 class="head-allcaps-heavy-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-heavy-3xs">{{ headline.short }}</h1>
</div>
</div>
source/_patterns/01-molecules/00-badge/basic-badge.mustache
+ 1
− 1
View file @ 8e250cc4
<div class="badge {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--md") }}
<div class="badge__body">
<span class="head-sm-heavy">{{ person.first }} {{ person.last }}</span>
<span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
<p class="badge__occupation">{{ person.occupation }}</p>
{{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
......
source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
+ 3
− 3
View file @ 8e250cc4
......@@ -2,13 +2,13 @@
<div class="candidate-card__wrapper">
<div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
<div class="candidate-card__avatar">
<div class="candidate-card__position">1</div>
<div class="candidate-card__position">{{ person.position }}</div>
{{> atoms-basic-avatar(classes: "avatar--xl avatar--bordered") }}
</div>
<div class="card__body">
<h1 class="head-sm-alt">{{ person.first }} {{ person.last }}</h1>
<h1 class="head-alt-sm">{{ person.first }} {{ person.last }}</h1>
<div class="font-light mb-2">{{ person.email }}</div>
<h2 class="head-xxs-allcaps">{{ person.occupation }}</h2>
<h2 class="head-allcaps-3xs">{{ person.occupation }}</h2>
</div>
<div class="candidate-card__affiliation">
<div>{{ person.age }} let</div>
......
source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache 0 → 100644
+ 10
− 0
View file @ 8e250cc4
<div class="candidate-table-row">
<div class="candidate-table-row__position head-allcaps-heavy-2xs pr-4 pl-7 text-right">{{ person.position }}</div>
{{> atoms-basic-avatar(classes: "w-5 candidate-table-row__avatar") }}
<div class="candidate-table-row__name head-allcaps-heavy-2xs font-bold px-4">{{ person.first }} {{ person.last }}</div>
<div class="candidate-table-row__bio head-allcaps-3xs px-4 border-l border-grey-150">{{ person.age }} let, {{ person.occupation }}</div>
<div class="candidate-table-row__affiliation pl-4 pr-7">
{{> atoms-basic-avatar(classes: "w-3 mr-1") }}
<span class="font-bold font-condensed">{{ person.party }}</span>
</div>
</div>
source/_patterns/02-organisms/01-candidates/candidate-table.mustache 0 → 100644
+ 12
− 0
View file @ 8e250cc4
<div class="candidate-table grid-cols-5">
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
{{> molecules-candidate-table-row }}
</div>
source/css/atoms/heading.pcss
+ 45
− 20
View file @ 8e250cc4
.head-xl-alt {
.head-alt-xl {
@apply text-7xl font-alt font-normal leading-tight;
}
.head-lg-alt {
.head-alt-lg {
@apply text-6xl font-alt font-normal leading-tight;
}
.head-md-alt {
.head-alt-md {
@apply text-4xl font-alt font-normal leading-tight;
}
.head-base {
@apply text-3xl font-condensed font-medium leading-tight;
.head-alt-base {
@apply text-3xl font-alt font-normal leading-tight;
}
.head-base-alt {
@apply text-3xl font-alt font-normal leading-tight;
.head-alt-sm {
@apply text-2xl font-alt font-normal leading-tight;
}
.head-base-heavy {
@apply text-3xl font-condensed font-bold leading-tight;
.head-alt-xs {
@apply text-xl font-alt font-normal leading-tight;
}
.head-sm {
@apply text-2xl font-condensed font-medium leading-tight;
.head-alt-2xs {
@apply text-lg font-alt font-normal leading-tight;
}
.head-sm-alt {
@apply text-2xl font-alt font-normal leading-tight;
.head-base {
@apply text-3xl font-condensed font-medium leading-tight;
}
.head-sm-heavy {
@apply text-2xl font-condensed font-bold 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-2xs {
@apply text-lg font-condensed font-medium leading-tight;
}
.head-xs-alt {
@apply text-lg font-alt font-normal leading-tight;
.head-heavy-base {
@apply text-3xl font-condensed font-bold leading-tight;
}
.head-xs-heavy {
.head-heavy-sm {
@apply text-2xl font-condensed font-bold leading-tight;
}
.head-heavy-2xs {
@apply text-lg font-condensed font-bold leading-tight;
}
.head-xs-allcaps {
.head-allcaps-2xs {
@apply text-lg font-condensed uppercase leading-tight;
}
.head-xxs-allcaps {
.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-3xs {
@apply text-base font-condensed font-bold uppercase leading-tight;
}
source/css/molecules/candidate-table-row.pcss 0 → 100644
+ 17
− 0
View file @ 8e250cc4
.candidate-table-row {
/* Relative for box shadow to layer properly. */
@apply relative w-full p-sm grid grid-cols-candidate-table-row items-center;
&:after {
content: '';
@apply absolute z-10 w-full h-full transition duration-200 elevation-0;
}
&:hover:after {
@apply elevation-10;
}
}
.candidate-table-row__affiliation {
@apply flex items-center justify-start;
}
source/css/organisms/candidate-table.pcss 0 → 100644
+ 9
− 0
View file @ 8e250cc4
.candidate-table {
.candidate-table-row {
@apply bg-white;
}
.candidate-table-row:nth-child(odd) {
@apply bg-grey-50;
}
}
source/css/style.pcss
+ 2
− 0
View file @ 8e250cc4
......@@ -25,9 +25,11 @@
@import "./molecules/badge.pcss";
@import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss";
@import "./molecules/social-icon-group.pcss";
@import "./organisms/candidate-card-list.pcss";
@import "./organisms/candidate-table.pcss";
@import "./organisms/footer.pcss";
/**
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ 8e250cc4
This diff is collapsed.
tailwind.config.js
+ 86
− 83
View file @ 8e250cc4
......@@ -3,6 +3,9 @@ module.exports = {
extend: {
maxWidth: {
'xxs': '16rem',
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
}
},
fontFamily: {
......@@ -85,89 +88,89 @@ module.exports = {
},
},
variants: {},
textStyles: theme => ({ // defaults to {}
heading: {
output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
fontWeight: theme('fontWeight.bold'),
lineHeight: theme('lineHeight.tight'),
},
h1: {
extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
fontSize: theme('fontSize.5xl'),
'@screen sm': {
fontSize: theme('fontSize.6xl'),
},
},
h2: {
extends: 'heading',
fontSize: theme('fontSize.4xl'),
'@screen sm': {
fontSize: theme('fontSize.5xl'),
},
},
h3: {
extends: 'heading',
fontSize: theme('fontSize.4xl'),
},
h4: {
extends: 'heading',
fontSize: theme('fontSize.3xl'),
},
h5: {
extends: 'heading',
fontSize: theme('fontSize.2xl'),
},
h6: {
extends: 'heading',
fontSize: theme('fontSize.xl'),
},
link: {
'&:hover': {
textDecoration: 'underline',
},
},
richText: {
fontWeight: theme('fontWeight.normal'),
fontSize: theme('fontSize.base'),
lineHeight: theme('lineHeight.relaxed'),
'> * + *': {
marginTop: '1em',
},
'h1': {
extends: 'h1',
},
'h2': {
extends: 'h2',
},
'h3': {
extends: 'h3',
},
'h4': {
extends: 'h4',
},
'h5': {
extends: 'h5',
},
'h6': {
extends: 'h6',
},
'ul': {
listStyleType: 'disc',
},
'ol': {
listStyleType: 'decimal',
},
'a': {
extends: 'link',
},
'b, strong': {
fontWeight: theme('fontWeight.bold'),
},
'i, em': {
fontStyle: 'italic',
},
},
}),
// textStyles: theme => ({ // defaults to {}
// heading: {
// output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
// fontWeight: theme('fontWeight.bold'),
// lineHeight: theme('lineHeight.tight'),
// },
// h1: {
// extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
// fontSize: theme('fontSize.5xl'),
// '@screen sm': {
// fontSize: theme('fontSize.6xl'),
// },
// },
// h2: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// '@screen sm': {
// fontSize: theme('fontSize.5xl'),
// },
// },
// h3: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// },
// h4: {
// extends: 'heading',
// fontSize: theme('fontSize.3xl'),
// },
// h5: {
// extends: 'heading',
// fontSize: theme('fontSize.2xl'),
// },
// h6: {
// extends: 'heading',
// fontSize: theme('fontSize.xl'),
// },
// link: {
// '&:hover': {
// textDecoration: 'underline',
// },
// },
// richText: {
// fontWeight: theme('fontWeight.normal'),
// fontSize: theme('fontSize.base'),
// lineHeight: theme('lineHeight.relaxed'),
// '> * + *': {
// marginTop: '1em',
// },
// 'h1': {
// extends: 'h1',
// },
// 'h2': {
// extends: 'h2',
// },
// 'h3': {
// extends: 'h3',
// },
// 'h4': {
// extends: 'h4',
// },
// 'h5': {
// extends: 'h5',
// },
// 'h6': {
// extends: 'h6',
// },
// 'ul': {
// listStyleType: 'disc',
// },
// 'ol': {
// listStyleType: 'decimal',
// },
// 'a': {
// extends: 'link',
// },
// 'b, strong': {
// fontWeight: theme('fontWeight.bold'),
// },
// 'i, em': {
// fontStyle: 'italic',
// },
// },
// }),
plugins: [
require('tailwind-css-variables')(
{
......
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