diff options
Diffstat (limited to 'assets/css/input.css')
| -rw-r--r-- | assets/css/input.css | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/assets/css/input.css b/assets/css/input.css new file mode 100644 index 0000000..b9875df --- /dev/null +++ b/assets/css/input.css @@ -0,0 +1,202 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "./cv.css" layer(components); +@import "tailwindcss/utilities"; +@import "./academicons.css" layer(utilities); +@import "./fontawesome.css" layer(utilities); + +@layer base { + blockquote { + @apply border-l-4 p-4 m-8 relative border-lime-500 baskerville; + } + + blockquote::before { + font-family: "Font Awesome 6 Free"; + color: #79c753; + content: "\f10d"; + font-weight: 900; + font-size: 2rem; + position: absolute; + left: 10px; + top: -15px; + } + + blockquote p:last-of-type { + @apply text-center uppercase mt-4 tracking-wide; + } + p { + @apply my-2 text-lg; + } + + 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 { + .baskerville { + font-family: baskerville, serif; + } + .menu { + transition: max-height 0.2s ease-out; + overflow: hidden; + display: flex; + /* this parts must be overridden on non small */ + flex-direction: column; + width: 100%; + position: fixed; + max-height: 0px; + } + .menu-btn:checked ~ .menu { + max-height: 240px; + z-index: 2; + } + /* What comes next is only to style the ham menu to an X when clicking */ + .menu-icon { + .navicon { + display: block; + height: 2px; + position: relative; + transition: background 0.2s ease-out; + width: 18px; + } + .navicon:before, + .navicon:after { + background: #ebdbb2; + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; + } + .navicon:before { + top: 6px; + } + .navicon:after { + top: -6px; + } + } + .menu-btn:checked { + ~ .menu-icon .navicon { + background: 0 0; + } + ~ .menu-icon .navicon:before { + transform: rotate(-45deg); + } + ~ .menu-icon .navicon:after { + transform: rotate(45deg); + } + ~ .menu-icon:not(.steps) .navicon:before, + ~ .menu-icon:not(.steps) .navicon:after { + top: 0; + } + } + + #hero { + text-shadow: 2px 2px 3px black; + } + .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; + } + dt { + @apply font-bold; + } + dd { + @apply ml-8; + } + .highlight { + .chroma { + @apply p-1 overflow-x-scroll; + } + } + } + .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("/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"), + url("/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular") + format("svg"), + url("/fonts/BerkshireSwash-Regular.ttf.eot"), + url("/fonts/BerkshireSwash-Regular.ttf.eot?#iefix") + format("embedded-opentype"); + font-weight: normal; + font-style: normal; + } + + .berkshire-swash { + font-family: "BerkshireSwash-Regular"; + } +} |