diff options
Diffstat (limited to 'assets/css/input.css')
| -rw-r--r-- | assets/css/input.css | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/assets/css/input.css b/assets/css/input.css new file mode 100644 index 0000000..6243110 --- /dev/null +++ b/assets/css/input.css @@ -0,0 +1,214 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +.baskerville { + font-family: baskerville, serif; +} + +blockquote::before { + font-family: "Font Awesome 6 Free"; + color: #79c753; + content: "\f10d"; + font-weight: 900; + font-size: 2rem; + position: absolute; + left: 10px; + top: -15px; +} + +@layer base { + blockquote { + @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; + } + h1 { + @apply text-5xl font-bold my-4; + } + h2 { + @apply text-4xl font-bold my-4; + } + h3 { + @apply text-3xl font-bold my-4; + } + 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 { + #hero { + text-shadow: 2px 2px 3px black; + } + .main-content { + p { + @apply my-4 text-xl; + 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; + } + dt { + @apply font-bold; + } + dd { + @apply ml-8; + } + .highlight { + .chroma { + @apply p-1 overflow-x-scroll; + } + } + } + .cv-entry, + .cv-honor { + @apply ml-4 pl-8 pb-2 relative; + .cv-role { + @apply m-0; + } + .cv-host, + .cv-date, + .cv-location { + @apply font-light m-0 p-0; + } + .cv-host::before { + font-family: "Font Awesome 6 Free"; + content: "\f1ad"; + font-weight: 900; + margin: 0 0.5rem; + } + .cv-location::before { + font-family: "Font Awesome 6 Free"; + content: "\f041"; + font-weight: 900; + margin: 0 0.5rem; + } + p { + @apply text-base my-2; + } + ul { + all: revert; + } + } + .cv-entry { + @apply border-l border-gray-400; + .cv-role::before { + content: ""; + position: absolute; + width: 2rem; + height: 2rem; + background-color: #79c753; + border-radius: 50%; + transform: translateX(-50%); + left: 0; + } + .cv-date, + .cv-location { + @apply inline-block; + } + .cv-date::before { + font-family: "Font Awesome 6 Free"; + content: "\f133"; + font-weight: 900; + margin: 0 0.5rem; + } + } + + .cv-honor { + .cv-role { + @apply ml-12 text-xl; + } + .cv-date { + top: 0.05rem; + @apply absolute left-0 text-xl; + } + .cv-date::before { + font-family: "Font Awesome 6 Free"; + color: #ffb700; + content: "\f559"; + font-weight: 900; + margin: 0 0.5rem; + } + } + .comment { + @apply my-2 pl-4 border-l border-lime-500 relative; + h3, + h4, + h5, + h6 { + @apply my-0 pl-2; + &::before { + font-family: "Font Awesome 6 Free"; + color: #79c753; + content: "\f075"; + font-weight: 900; + font-size: 2rem; + position: absolute; + left: -0.75rem; + top: -1rem; + transform: scaleX(-1); + } + } + } + + /* https://lubna.dev/articles/create-css-only-image-gallery/ */ + .gallery { + --max-img-width: 72rem; + --max-img-height: 48rem; + max-width: var(--max-img-width); + padding-top: min(66%, var(--max-img-height)); + + input:checked + img { + opacity: 1; + } + input:checked ~ label > img { + @apply shadow-md shadow-lime-500; + } + } +} + +@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"; + } +} |