Wrap all custom components in layers

This commit is contained in:
Oliver Davies 2020-12-17 01:51:53 +00:00
parent 4cfc932f77
commit 9fba0b7292
11 changed files with 70 additions and 54 deletions

View file

@ -1,3 +1,5 @@
.sidebar .block { @layer components {
.sidebar .block {
@apply p-6 rounded bg-gray-100 dark:bg-gray-750 @apply p-6 rounded bg-gray-100 dark:bg-gray-750
}
} }

View file

@ -1,4 +1,5 @@
.button { @layer components {
.button {
@apply py-2 px-3 inline-block border border-blue-600; @apply py-2 px-3 inline-block border border-blue-600;
@apply text-sm text-white no-underline bg-blue-600 rounded; @apply text-sm text-white no-underline bg-blue-600 rounded;
@ -7,4 +8,5 @@
&:hover { &:hover {
@apply bg-white text-blue-600 @apply bg-white text-blue-600
} }
}
} }

View file

@ -1,3 +1,5 @@
.container { @layer components {
.container {
@apply w-full max-w-5xl px-4 mx-auto @apply w-full max-w-5xl px-4 mx-auto
}
} }

View file

@ -1,5 +1,5 @@
p.lead { @layer components {
@screen md { p.lead {
@apply text-lg @apply md:text-lg
} }
} }

View file

@ -1,7 +1,5 @@
#block-opdavies-branding img { @layer components {
@apply h-8; #block-opdavies-branding img {
@apply h-8 md:h-12
@screen md {
@apply h-12
} }
} }

View file

@ -1,4 +1,5 @@
.note { @layer components {
.note {
@apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark; @apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
* { * {
@ -8,4 +9,5 @@
p a { p a {
@apply underline hover:no-underline @apply underline hover:no-underline
} }
}
} }

View file

@ -1,5 +1,7 @@
.recommendation { @layer components {
.recommendation {
.photo img { .photo img {
@apply rounded-full @apply rounded-full
} }
}
} }

View file

@ -1,4 +1,5 @@
.table { @layer components {
.table {
@apply w-full; @apply w-full;
th { th {
@ -9,10 +10,11 @@
td { td {
@apply px-4 py-2 border border-solid border-gray-200 @apply px-4 py-2 border border-solid border-gray-200
} }
} }
table.is-striped { table.is-striped {
tbody > tr:not(:nth-child(odd)) td { tbody > tr:not(:nth-child(odd)) td {
@apply bg-gray-100 @apply bg-gray-100
} }
}
} }

View file

@ -1,4 +1,5 @@
.video-full { @layer components {
.video-full {
@apply w-full relative; @apply w-full relative;
padding-top: 56.25%; padding-top: 56.25%;
@ -6,4 +7,5 @@
embed { embed {
@apply absolute h-full left-0 top-0 w-full @apply absolute h-full left-0 top-0 w-full
} }
}
} }

View file

@ -1,3 +1,5 @@
.widget { @layer components {
.widget {
@apply block mb-6 @apply block mb-6
}
} }

View file

@ -1,7 +1,9 @@
.wrap { @layer components {
.wrap {
@apply w-full max-w-3xl mx-auto; @apply w-full max-w-3xl mx-auto;
&.is-wide { &.is-wide {
@apply max-w-5xl @apply max-w-5xl
} }
}
} }