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
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 @@ ...@@ -48,7 +48,8 @@
"email": "example@example.com", "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.", "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", "party": "Pirátská strana",
"age": "30" "age": "30",
"position": "1"
}, },
"year": { "year": {
"long": "2013", "long": "2013",
......
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+ 8
− 0
View file @ 8e250cc4
<ul class="sg-colors"> <ul class="sg-colors">
<li>
<span class="sg-swatch bg-grey-50"></span>
<span class="sg-label">Grey 50<br>#f7f7f7</span>
</li>
<li> <li>
<span class="sg-swatch bg-grey-100"></span> <span class="sg-swatch bg-grey-100"></span>
<span class="sg-label">Grey 100<br>#f3f3f3</span> <span class="sg-label">Grey 100<br>#f3f3f3</span>
</li> </li>
<li>
<span class="sg-swatch bg-grey-150"></span>
<span class="sg-label">Grey 150<br>#00000012</span>
</li>
<li> <li>
<span class="sg-swatch bg-grey-200"></span> <span class="sg-swatch bg-grey-200"></span>
<span class="sg-label">Grey 200<br>#adadad</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> <div class="space-y-6">
<p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p> <div>
<p class="font-body font-light">Primary font light: "Roboto", "Helvetica", "Arial", sans-serif;</p> <p class="font-body">Primary font: "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"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
<p class="font-body font-bold">Primary font bold: "Roboto", "Helvetica", "Arial", sans-serif;</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> <div>
<p class="font-condensed"><em>Condensed font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p> <p class="font-condensed">Condensed font: "Roboto Condensed", "Helvetica", "Arial", sans-serif;</p>
<p class="font-condensed font-light">Condensed font light: "Roboto", "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-bold">Condensed font bold: "Roboto", "Helvetica", "Arial", sans-serif;</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> <div>
<p class="font-alt font-bold">Alternate font bold: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p> <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> <div class="space-y-6">
<h1 class="head-lg-alt">Large headline</h1> <div>
<h1 class="head-md-alt">Medium headline</h1> <h1 class="head-alt-xl">{{ headline.short }}</h1>
<h1 class="head-base-alt">Base headline</h1> <h1 class="head-alt-lg">{{ headline.short }}</h1>
<h1 class="head-sm-alt">Small headline</h1> <h1 class="head-alt-md">{{ headline.short }}</h1>
<h1 class="head-xs-alt">Extra small headline</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> <div>
<h1 class="head-base-heavy">Base headline heavy variant</h1> <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> <div>
<h1 class="head-sm-heavy">Small headline heavy variant</h1> <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> <div>
<h1 class="head-xs-allcaps">Extra small headline allcaps</h1> <h1 class="head-allcaps-2xs">{{ headline.short }}</h1>
<h1 class="head-xxs-allcaps">Extra extra small headline allcaps</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 }}"> <div class="badge {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--md") }} {{> atoms-basic-avatar(classes: "avatar--md") }}
<div class="badge__body"> <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> <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-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", 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 @@ ...@@ -2,13 +2,13 @@
<div class="candidate-card__wrapper"> <div class="candidate-card__wrapper">
<div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200"> <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
<div class="candidate-card__avatar"> <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") }} {{> atoms-basic-avatar(classes: "avatar--xl avatar--bordered") }}
</div> </div>
<div class="card__body"> <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> <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>
<div class="candidate-card__affiliation"> <div class="candidate-card__affiliation">
<div>{{ person.age }} let</div> <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; @apply text-7xl font-alt font-normal leading-tight;
} }
.head-lg-alt { .head-alt-lg {
@apply text-6xl font-alt font-normal leading-tight; @apply text-6xl font-alt font-normal leading-tight;
} }
.head-md-alt { .head-alt-md {
@apply text-4xl font-alt font-normal leading-tight; @apply text-4xl font-alt font-normal leading-tight;
} }
.head-base { .head-alt-base {
@apply text-3xl font-condensed font-medium leading-tight; @apply text-3xl font-alt font-normal leading-tight;
} }
.head-base-alt { .head-alt-sm {
@apply text-3xl font-alt font-normal leading-tight; @apply text-2xl font-alt font-normal leading-tight;
} }
.head-base-heavy { .head-alt-xs {
@apply text-3xl font-condensed font-bold leading-tight; @apply text-xl font-alt font-normal leading-tight;
} }
.head-sm { .head-alt-2xs {
@apply text-2xl font-condensed font-medium leading-tight; @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 { .head-sm {
@apply text-2xl font-condensed font-bold leading-tight; @apply text-2xl font-condensed font-medium leading-tight;
} }
.head-xs { .head-xs {
@apply text-xl font-condensed font-medium leading-tight;
}
.head-2xs {
@apply text-lg font-condensed font-medium leading-tight; @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; @apply text-lg font-condensed font-bold leading-tight;
} }
.head-xs-allcaps {
.head-allcaps-2xs {
@apply text-lg font-condensed uppercase leading-tight; @apply text-lg font-condensed uppercase leading-tight;
} }
.head-xxs-allcaps { .head-allcaps-3xs {
@apply text-base font-condensed uppercase leading-tight; @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 @@ ...@@ -25,9 +25,11 @@
@import "./molecules/badge.pcss"; @import "./molecules/badge.pcss";
@import "./molecules/candidate-card.pcss"; @import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-table-row.pcss";
@import "./molecules/social-icon-group.pcss"; @import "./molecules/social-icon-group.pcss";
@import "./organisms/candidate-card-list.pcss"; @import "./organisms/candidate-card-list.pcss";
@import "./organisms/candidate-table.pcss";
@import "./organisms/footer.pcss"; @import "./organisms/footer.pcss";
/** /**
......
source/dist/style.pkgd.css
+ 1
− 1
View file @ 8e250cc4
Source diff could not be displayed: it is too large. Options to address this: view the blob.
tailwind.config.js
+ 86
− 83
View file @ 8e250cc4
...@@ -3,6 +3,9 @@ module.exports = { ...@@ -3,6 +3,9 @@ module.exports = {
extend: { extend: {
maxWidth: { maxWidth: {
'xxs': '16rem', 'xxs': '16rem',
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
} }
}, },
fontFamily: { fontFamily: {
...@@ -85,89 +88,89 @@ module.exports = { ...@@ -85,89 +88,89 @@ module.exports = {
}, },
}, },
variants: {}, variants: {},
textStyles: theme => ({ // defaults to {} // textStyles: theme => ({ // defaults to {}
heading: { // heading: {
output: false, // this means there won't be a "heading" component in the CSS, but it can be extended // output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
fontWeight: theme('fontWeight.bold'), // fontWeight: theme('fontWeight.bold'),
lineHeight: theme('lineHeight.tight'), // lineHeight: theme('lineHeight.tight'),
}, // },
h1: { // 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 // 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'), // fontSize: theme('fontSize.5xl'),
'@screen sm': { // '@screen sm': {
fontSize: theme('fontSize.6xl'), // fontSize: theme('fontSize.6xl'),
}, // },
}, // },
h2: { // h2: {
extends: 'heading', // extends: 'heading',
fontSize: theme('fontSize.4xl'), // fontSize: theme('fontSize.4xl'),
'@screen sm': { // '@screen sm': {
fontSize: theme('fontSize.5xl'), // fontSize: theme('fontSize.5xl'),
}, // },
}, // },
h3: { // h3: {
extends: 'heading', // extends: 'heading',
fontSize: theme('fontSize.4xl'), // fontSize: theme('fontSize.4xl'),
}, // },
h4: { // h4: {
extends: 'heading', // extends: 'heading',
fontSize: theme('fontSize.3xl'), // fontSize: theme('fontSize.3xl'),
}, // },
h5: { // h5: {
extends: 'heading', // extends: 'heading',
fontSize: theme('fontSize.2xl'), // fontSize: theme('fontSize.2xl'),
}, // },
h6: { // h6: {
extends: 'heading', // extends: 'heading',
fontSize: theme('fontSize.xl'), // fontSize: theme('fontSize.xl'),
}, // },
link: { // link: {
'&:hover': { // '&:hover': {
textDecoration: 'underline', // textDecoration: 'underline',
}, // },
}, // },
richText: { // richText: {
fontWeight: theme('fontWeight.normal'), // fontWeight: theme('fontWeight.normal'),
fontSize: theme('fontSize.base'), // fontSize: theme('fontSize.base'),
lineHeight: theme('lineHeight.relaxed'), // lineHeight: theme('lineHeight.relaxed'),
'> * + *': { // '> * + *': {
marginTop: '1em', // marginTop: '1em',
}, // },
'h1': { // 'h1': {
extends: 'h1', // extends: 'h1',
}, // },
'h2': { // 'h2': {
extends: 'h2', // extends: 'h2',
}, // },
'h3': { // 'h3': {
extends: 'h3', // extends: 'h3',
}, // },
'h4': { // 'h4': {
extends: 'h4', // extends: 'h4',
}, // },
'h5': { // 'h5': {
extends: 'h5', // extends: 'h5',
}, // },
'h6': { // 'h6': {
extends: 'h6', // extends: 'h6',
}, // },
'ul': { // 'ul': {
listStyleType: 'disc', // listStyleType: 'disc',
}, // },
'ol': { // 'ol': {
listStyleType: 'decimal', // listStyleType: 'decimal',
}, // },
'a': { // 'a': {
extends: 'link', // extends: 'link',
}, // },
'b, strong': { // 'b, strong': {
fontWeight: theme('fontWeight.bold'), // fontWeight: theme('fontWeight.bold'),
}, // },
'i, em': { // 'i, em': {
fontStyle: 'italic', // fontStyle: 'italic',
}, // },
}, // },
}), // }),
plugins: [ plugins: [
require('tailwind-css-variables')( 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