diff options
Diffstat (limited to 'assets/scss/input.css')
| -rw-r--r-- | assets/scss/input.css | 58 |
1 files changed, 57 insertions, 1 deletions
diff --git a/assets/scss/input.css b/assets/scss/input.css index 198badf..378b47c 100644 --- a/assets/scss/input.css +++ b/assets/scss/input.css @@ -19,7 +19,7 @@ blockquote::before { @layer base { blockquote { - @apply border-l-4 p-6 pb-1 mx-8 relative border-lime-500 baskerville; + @apply border-l-4 p-6 py-1 m-8 relative border-lime-500 baskerville; } blockquote p:last-of-type { @apply text-center uppercase mt-4 tracking-wide; @@ -36,6 +36,12 @@ blockquote::before { h4 { @apply text-2xl font-bold my-4; } + h5 { + @apply text-xl font-bold my-4; + } + h6 { + @apply text-lg font-bold my-4; + } } @layer components { @@ -45,4 +51,54 @@ blockquote::before { .main-content p { @apply my-4 text-xl; } + .main-content p code { + @apply text-blue-500 px-1; + } + .main-content a { + @apply px-1 text-lime-500; + } + .main-content a[href^="http"]::after { + content: ""; + width: 11px; + height: 11px; + margin-left: 4px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + } + .main-content dl { + @apply px-8 text-xl; + } + .main-content dt { + @apply font-bold; + } + .main-content dd { + @apply ml-8; + } + /* The following one are post render thus I need to build them */ + .main-content .highlight .chroma { + @apply p-1 overflow-x-scroll; + } +} + +@layer utilities { + @font-face { + font-family: "BerkshireSwash-Regular"; + font-display: optional; + src: + url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"), + url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular") + format("svg"), + url("/css/fonts/BerkshireSwash-Regular.ttf.eot"), + url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix") + format("embedded-opentype"); + font-weight: normal; + font-style: normal; + } + + .berkshire-swash { + font-family: "BerkshireSwash-Regular"; + } } |