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 @@
@layer components {
.sidebar .block { .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,3 +1,4 @@
@layer components {
.button { .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;
@ -8,3 +9,4 @@
@apply bg-white text-blue-600 @apply bg-white text-blue-600
} }
} }
}

View file

@ -1,3 +1,5 @@
@layer components {
.container { .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 @@
@layer components {
p.lead { p.lead {
@screen md { @apply md:text-lg
@apply text-lg
} }
} }

View file

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

View file

@ -1,3 +1,4 @@
@layer components {
.note { .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;
@ -9,3 +10,4 @@
@apply underline hover:no-underline @apply underline hover:no-underline
} }
} }
}

View file

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

View file

@ -1,3 +1,4 @@
@layer components {
.table { .table {
@apply w-full; @apply w-full;
@ -16,3 +17,4 @@ table.is-striped {
@apply bg-gray-100 @apply bg-gray-100
} }
} }
}

View file

@ -1,3 +1,4 @@
@layer components {
.video-full { .video-full {
@apply w-full relative; @apply w-full relative;
padding-top: 56.25%; padding-top: 56.25%;
@ -7,3 +8,4 @@
@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 @@
@layer components {
.widget { .widget {
@apply block mb-6 @apply block mb-6
} }
}

View file

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