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

Revamp spacing scale

parent 72e2fdd1
Branches
Tags
No related merge requests found
Pipeline #750 passed
.banner { .banner {
@apply p-4 flex flex-wrap flex-col; @apply p-8 flex flex-wrap flex-col;
} }
.banner__icon { .banner__icon {
...@@ -19,5 +19,5 @@ ...@@ -19,5 +19,5 @@
} }
.banner__cta { .banner__cta {
@apply mt-4; @apply mt-8;
} }
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
} }
.calendar-table-row__col { .calendar-table-row__col {
@apply h-full border-r border-grey-150 p-1 flex justify-center items-center; @apply h-full border-r border-grey-150 p-2 flex justify-center items-center;
&:first-child { &:first-child {
@apply border-l; @apply border-l;
......
...@@ -7,26 +7,26 @@ ...@@ -7,26 +7,26 @@
} }
.candidate-card__avatar { .candidate-card__avatar {
@apply relative w-8 py-2; @apply relative w-24 py-4;
grid-area: avatar; grid-area: avatar;
} }
.candidate-card__position { .candidate-card__position {
@apply w-4 h-4 absolute bg-black text-white text-base rounded-full font-normal font-alt text-center; @apply w-8 h-8 absolute bg-black text-white text-base rounded-full font-normal font-alt text-center;
top: 1rem; top: 1rem;
left: 0.5rem; left: 0.5rem;
line-height: 2rem; line-height: 2rem;
} }
.candidate-card__bio { .candidate-card__bio {
@apply px-1 py-2; @apply px-2 py-4;
} }
.candidate-card__affiliation { .candidate-card__affiliation {
@apply text-sm bg-grey-50 flex border-t border-b border-grey-150; @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;
> div { > div {
@apply py-1 px-2 flex items-center justify-center; @apply py-2 px-4 flex items-center justify-center;
&:not(:first-child) { &:not(:first-child) {
@apply border-l border-grey-150; @apply border-l border-grey-150;
...@@ -65,16 +65,16 @@ ...@@ -65,16 +65,16 @@
} }
.candidate-card__bio { .candidate-card__bio {
@apply p-2; @apply p-4;
} }
.candidate-card__avatar { .candidate-card__avatar {
@apply inline-block relative m-auto w-9 py-0; @apply inline-block relative m-auto w-32 py-0;
margin-top: -3rem; margin-top: -3rem;
} }
.candidate-card__position { .candidate-card__position {
@apply w-5 h-5 text-xl; @apply w-10 h-10 text-xl;
top: 1.75rem; top: 1.75rem;
left: -0.5rem; left: -0.5rem;
line-height: 2.5rem; line-height: 2.5rem;
......
.candidate-table-row { .candidate-table-row {
/* Relative for box shadow to layer properly. */ /* Relative for box shadow to layer properly. */
@apply relative w-full py-2 grid items-center; @apply relative w-full py-4 grid items-center;
grid-template-areas: "position avatar name" grid-template-areas: "position avatar name"
"position avatar bio" "position avatar bio"
...@@ -17,53 +17,53 @@ ...@@ -17,53 +17,53 @@
} }
.candidate-table-row__position { .candidate-table-row__position {
@apply px-3; @apply px-6;
grid-area: position; grid-area: position;
} }
.candidate-table-row__avatar { .candidate-table-row__avatar {
@apply w-7; @apply w-16;
grid-area: avatar; grid-area: avatar;
} }
.candidate-table-row__name { .candidate-table-row__name {
@apply px-3; @apply px-6;
grid-area: name; grid-area: name;
} }
.candidate-table-row__bio { .candidate-table-row__bio {
@apply truncate py-sm px-3; @apply truncate py-1 px-6;
grid-area: bio; grid-area: bio;
} }
.candidate-table-row__affiliation { .candidate-table-row__affiliation {
@apply flex items-center justify-start whitespace-no-wrap px-3; @apply flex items-center justify-start whitespace-no-wrap px-6;
grid-area: affiliation; grid-area: affiliation;
} }
@screen md { @screen md {
.candidate-table-row { .candidate-table-row {
@apply py-sm grid-cols-candidate-table-row; @apply py-1 grid-cols-candidate-table-row;
grid-template-areas: "position avatar name bio affiliation"; grid-template-areas: "position avatar name bio affiliation";
} }
.candidate-table-row__avatar { .candidate-table-row__avatar {
@apply w-5; @apply w-10;
} }
.candidate-table-row__name { .candidate-table-row__name {
@apply px-4; @apply px-8;
} }
.candidate-table-row__position { .candidate-table-row__position {
@apply pl-7; @apply pl-16;
} }
.candidate-table-row__bio { .candidate-table-row__bio {
@apply border-l border-grey-150 py-0 px-4; @apply border-l border-grey-150 py-0 px-8;
} }
.candidate-table-row__affiliation { .candidate-table-row__affiliation {
@apply pl-4 pr-7; @apply pl-8 pr-16;
} }
} }
.switch { .switch {
@apply inline-flex bg-black p-sm; @apply inline-flex bg-black p-1;
} }
.switch__item { .switch__item {
@apply py-2 px-4 font-alt font-normal text-xl text-white text-center; @apply py-4 px-8 font-alt font-normal text-xl text-white text-center;
&:hover { &:hover {
@apply no-underline bg-grey-700; @apply no-underline bg-grey-700;
......
.candidate-card-list { .candidate-card-list {
@apply grid grid-flow-row gap-0 row-gap-2; @apply grid grid-flow-row gap-0 row-gap-4;
} }
@responsive { @responsive {
.candidate-card-list__item-wrapper { .candidate-card-list__item-wrapper {
@apply px-1 border-r border-grey-100; @apply px-2 border-r border-grey-100;
} }
.candidate-card-list__item-wrapper--border { .candidate-card-list__item-wrapper--border {
......
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
} }
.footer-section { .footer-section {
@apply py-3; @apply py-6;
@screen md { @screen md {
@apply py-6; @apply py-12;
&.footer-section--dense { &.footer-section--dense {
@apply py-3; @apply py-6;
} }
} }
} }
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
} }
.footer-copy { .footer-copy {
@apply pr-7; @apply pr-16;
order: -2; order: -2;
@screen sm { @screen sm {
......
.hero { .hero {
@apply py-2; @apply py-4;
@screen md { @screen md {
@apply py-8; @apply py-24;
} }
} }
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
} }
.navbar__section--expandable { .navbar__section--expandable {
@apply bg-black px-4 py-2; @apply bg-black px-8 py-4;
margin: 0 -2rem; margin: 0 -2rem;
} }
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
} }
.navbar-menu__submenu .navbar-menu__link { .navbar-menu__submenu .navbar-menu__link {
@apply text-lg text-grey-200 font-body normal-case leading-normal pl-2; @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4;
} }
.navbar-menu__link, .navbar-menu__link,
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
@screen lg { @screen lg {
.navbar { .navbar {
@apply py-4; @apply py-8;
} }
.navbar__content { .navbar__content {
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
@apply inline-block; @apply inline-block;
&:not(:first-child) { &:not(:first-child) {
@apply ml-2; @apply ml-4;
} }
} }
...@@ -96,14 +96,14 @@ ...@@ -96,14 +96,14 @@
} }
.navbar-menu__submenu-toggle:after { .navbar-menu__submenu-toggle:after {
@apply ml-1; @apply ml-2;
} }
} }
@screen 2xl { @screen 2xl {
.navbar-menu__item:not(:first-child) { .navbar-menu__item:not(:first-child) {
@apply ml-3; @apply ml-6;
} }
.navbar-menu__link { .navbar-menu__link {
......
.subnav { .subnav {
@apply bg-black text-white font-condensed py-1; @apply bg-black text-white font-condensed py-2;
} }
Source diff could not be displayed: it is too large. Options to address this: view the blob.
...@@ -12,6 +12,14 @@ module.exports = { ...@@ -12,6 +12,14 @@ module.exports = {
}, },
lineHeight: { lineHeight: {
'negative': '0.9', 'negative': '0.9',
},
spacing: {
'0/5': '0.125rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
'52': '13rem',
'80': '20rem'
} }
}, },
// Breakpoints // Breakpoints
...@@ -78,26 +86,26 @@ module.exports = { ...@@ -78,26 +86,26 @@ module.exports = {
'linkedin': '#0066a9', 'linkedin': '#0066a9',
} }
}, },
spacing: { // spacing: {
'0': '0', // '0': '0',
'xs': '0.15rem', // 'xs': '0.15rem',
'sm': '0.25rem', // 'sm': '0.25rem',
'1': '0.5rem', // '1': '0.5rem',
'2': '1rem', // '2': '1rem',
'3': '1.5rem', // '3': '1.5rem',
'4': '2rem', // '4': '2rem',
'5': '2.5rem', // '5': '2.5rem',
'6': '3rem', // '6': '3rem',
'7': '4rem', // '7': '4rem',
'8': '6rem', // '8': '6rem',
'9': '8rem', // '9': '8rem',
'10': '10rem', // '10': '10rem',
'11': '12rem', // '11': '12rem',
'11': '16rem', // '11': '16rem',
'12': '20rem', // '12': '20rem',
'13': '24rem', // '13': '24rem',
'14': '30rem', // '14': '30rem',
}, // },
container: { container: {
center: true, center: true,
padding: { padding: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment