update look of the page

This commit is contained in:
Nikola Kubiczek 2023-07-16 23:56:46 +02:00
parent d0bbe7956a
commit 25273e0db2
Signed by: yaemiku
GPG Key ID: ADC039636B3E4AAB
5 changed files with 97 additions and 69 deletions

View File

@ -10,6 +10,7 @@
},
"dependencies": {
"@fontsource/jetbrains-mono": "^4.5.12",
"@tailwindcss/typography": "^0.5.9",
"@types/crypto-js": "^4.1.1",
"@types/node": "18.15.3",
"@types/react": "18.0.28",

View File

@ -4,6 +4,9 @@ dependencies:
'@fontsource/jetbrains-mono':
specifier: ^4.5.12
version: 4.5.12
'@tailwindcss/typography':
specifier: ^0.5.9
version: 0.5.9(tailwindcss@3.2.7)
'@types/crypto-js':
specifier: ^4.1.1
version: 4.1.1
@ -302,6 +305,18 @@ packages:
tslib: 2.5.0
dev: false
/@tailwindcss/typography@0.5.9(tailwindcss@3.2.7):
resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
dependencies:
lodash.castarray: 4.4.0
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 3.2.7(postcss@8.4.21)
dev: false
/@types/crypto-js@4.1.1:
resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
dev: false
@ -412,18 +427,15 @@ packages:
acorn: 7.4.1
acorn-walk: 7.2.0
xtend: 4.0.2
dev: true
/acorn-walk@7.2.0:
resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
engines: {node: '>=0.4.0'}
dev: true
/acorn@7.4.1:
resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
engines: {node: '>=0.4.0'}
hasBin: true
dev: true
/acorn@8.8.2:
resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
@ -458,11 +470,9 @@ packages:
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
dev: true
/arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
dev: true
/argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@ -570,7 +580,6 @@ packages:
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
dev: true
/brace-expansion@1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@ -611,7 +620,6 @@ packages:
/camelcase-css@2.0.1:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
dev: true
/caniuse-lite@1.0.30001466:
resolution: {integrity: sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==}
@ -637,7 +645,6 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/client-only@0.0.1:
resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
@ -674,7 +681,6 @@ packages:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
hasBin: true
dev: true
/csstype@3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
@ -748,7 +754,6 @@ packages:
/defined@1.0.1:
resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
dev: true
/detective@5.2.1:
resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
@ -758,11 +763,9 @@ packages:
acorn-node: 1.8.2
defined: 1.0.1
minimist: 1.2.8
dev: true
/didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
dev: true
/dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@ -773,7 +776,6 @@ packages:
/dlv@1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
dev: true
/doctrine@2.1.0:
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@ -1261,7 +1263,6 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
/function-bind@1.1.1:
@ -1497,7 +1498,6 @@ packages:
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
dev: true
/is-boolean-object@1.1.2:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@ -1699,7 +1699,6 @@ packages:
/lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
dev: true
/locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@ -1708,6 +1707,14 @@ packages:
p-locate: 5.0.0
dev: false
/lodash.castarray@4.4.0:
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
dev: false
/lodash.isplainobject@4.0.6:
resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
dev: false
/lodash.merge@4.6.2:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: false
@ -1817,7 +1824,6 @@ packages:
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
dev: true
/normalize-range@0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@ -1832,7 +1838,6 @@ packages:
/object-hash@3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
dev: true
/object-inspect@1.12.3:
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@ -1976,7 +1981,6 @@ packages:
/pify@2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
engines: {node: '>=0.10.0'}
dev: true
/postcss-import@14.1.0(postcss@8.4.21):
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
@ -1988,7 +1992,6 @@ packages:
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.1
dev: true
/postcss-js@4.0.1(postcss@8.4.21):
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@ -1998,7 +2001,6 @@ packages:
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.21
dev: true
/postcss-load-config@3.1.4(postcss@8.4.21):
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@ -2015,7 +2017,6 @@ packages:
lilconfig: 2.1.0
postcss: 8.4.21
yaml: 1.10.2
dev: true
/postcss-nested@6.0.0(postcss@8.4.21):
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
@ -2025,7 +2026,14 @@ packages:
dependencies:
postcss: 8.4.21
postcss-selector-parser: 6.0.11
dev: true
/postcss-selector-parser@6.0.10:
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
engines: {node: '>=4'}
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
dev: false
/postcss-selector-parser@6.0.11:
resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
@ -2033,11 +2041,9 @@ packages:
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
dev: true
/postcss-value-parser@4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: true
/postcss@8.4.14:
resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@ -2055,7 +2061,6 @@ packages:
nanoid: 3.3.4
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@ -2081,7 +2086,6 @@ packages:
/quick-lru@5.1.1:
resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
engines: {node: '>=10'}
dev: true
/react-dom@18.2.0(react@18.2.0):
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
@ -2108,14 +2112,12 @@ packages:
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
dependencies:
pify: 2.3.0
dev: true
/readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
dev: true
/regenerator-runtime@0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
@ -2359,7 +2361,6 @@ packages:
resolve: 1.22.1
transitivePeerDependencies:
- ts-node
dev: true
/tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@ -2464,7 +2465,6 @@ packages:
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: true
/which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
@ -2517,7 +2517,6 @@ packages:
/xtend@4.0.2:
resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
engines: {node: '>=0.4'}
dev: true
/yallist@4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@ -2526,7 +2525,6 @@ packages:
/yaml@1.10.2:
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
engines: {node: '>= 6'}
dev: true
/yocto-queue@0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}

View File

@ -1,9 +1,15 @@
@import 'node_modules/@fontsource/jetbrains-mono/index.css';
@import "node_modules/@fontsource/jetbrains-mono/index.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
a {
@apply underline;
}
a:hover {
@apply saturate-50;
}
}

View File

@ -60,21 +60,21 @@ export default function Home() {
];
return (
<div className="max-w-screen-md p-4 mx-auto mt-4 prose prose-zinc prose-invert">
<header className="flex flex-col items-center justify-around px-4">
<div className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
<header className="flex flex-col items-center justify-around px-base">
<div>
<motion.div
animate={{
left: 0,
right: 0,
}}
className="flex flex-col max-w-[100vw] absolute h-16 my-28 z-10 shadow-2xl"
className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
>
<div className="grow bg-[#55CDFC] z-0"></div>
<div className="grow bg-[#F7A8B8] z-0"></div>
<div className="z-0 grow bg-trans-blue"></div>
<div className="z-0 grow bg-trans-pink"></div>
<div className="z-0 bg-white grow"></div>
<div className="grow bg-[#F7A8B8] z-0"></div>
<div className="grow bg-[#55CDFC] z-0"></div>
<div className="z-0 grow bg-trans-pink"></div>
<div className="z-0 grow bg-trans-blue"></div>
</motion.div>
<div className="relative z-20 mx-auto w-72">
<Image
@ -85,8 +85,8 @@ export default function Home() {
/>
</div>
</div>
<div className="flex flex-col items-center w-full my-4 gap-y-4">
<h1 className="flex mb-0 text-4xl select-none gap-x-2">
<div className="flex flex-col items-center w-full my-base gap-small mt-big">
<h1 className="flex text-3xl select-none mb-none gap-small">
<span className="my-auto">
<a
href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@ -97,8 +97,8 @@ export default function Home() {
</a>
</span>
<div className="flex flex-col text-center">
<span>Nikola Kubiczek</span>
<span className="text-sm font-semibold text-zinc-500">
<span className=''>Nikola Kubiczek</span>
<span className="text-xs font-semibold text-zinc-500">
(she/her)
</span>
</div>
@ -113,24 +113,24 @@ export default function Home() {
</span>
</h1>
<b className="font-jetbrains">
<p className="flex flex-col items-center my-0 font-light text-lime-50">
<span>me<span className='mx-1'>@</span>yaemiku.dev</span>
<p className="flex flex-col items-center font-light my-none text-lime-50">
<span>me<span className='mx-xs'>@</span>yaemiku.dev</span>
<a href="public.asc" target="_blank">
pgp key
</a>
<span className="mt-2 text-xs">click on the emojis !!</span>
<span className="text-xs mt-small">click on the emojis !!</span>
</p>
</b>
</div>
</header>
<main className="flex flex-col items-center justify-around px-4">
<figure className="flex flex-col max-w-screen-sm my-6 gap-y-6">
<blockquote className="text-2xl text-center bg-clip-text text-transparent bg-gradient-to-br from-[#55CDFC] via-[#F7A8B8] to-[#FFFFFF]">
<figure className="flex flex-col max-w-screen-sm my-big gap-big">
<blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
Why be serious when you can just be silly ???
</blockquote>
<div className="grid gap-4 text-sm md:grid-cols-2 font-jetbrains">
<div className="text-center transition transform-gpu ease-in-out col-span-full p-2 rounded-md border border-zinc-500 bg-gradient-to-r from-[#D60270] via-[#9B4F96] to-[#0038A8]">
<div className="grid text-sm gap-base md:grid-cols-2 font-jetbrains">
<div className="text-center transition ease-in-out border rounded-md transform-gpu col-span-full p-small border-zinc-700 bg-gradient-to-r from-bi-red via-bi-violet to-bi-blue">
<h1 className="font-semibold">My blog !!</h1>
<a href="https://blog.yaemiku.dev" target="_blank">
https://blog.yaemiku.dev
@ -139,7 +139,7 @@ export default function Home() {
{items.map(({ name, class_, link, git, full, desc }, i) => (
<div
className={`${git ? 'flex' : ''
} transition transform-gpu ease-in-out p-2 rounded-md ${!!full ? 'col-span-full' : ''
} transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
} border border-zinc-700 bg-zinc-800 ${class_}`}
key={i}
>
@ -174,7 +174,7 @@ export default function Home() {
style={{ backgroundColor: `#${RGB}` }}
onClick={() => setCOTD(!COTD)}
title='How does it work?'
className="flex flex-col items-center col-span-full p-2 rounded-md border border-zinc-700 hover:border-[#7f7f84] cursor-pointer"
className="flex flex-col items-center col-span-full p-small rounded-md border border-zinc-700 hover:border-[#7f7f84] cursor-pointer"
>
<motion.a className="font-semibold">Color of the day!</motion.a>
<motion.div
@ -185,7 +185,7 @@ export default function Home() {
closed: { opacity: 0, display: "none" }
}}
>
<div className='flex flex-col items-center gap-2'>
<div className='flex flex-col items-center gap-small'>
<span>Take the current date:</span>
<span className='font-semibold'>{day}.{month}.{year}</span>
<span>Apply MD5:</span>
@ -211,14 +211,14 @@ export default function Home() {
<Image
src={blahaj}
alt="blahaj"
className="mx-auto mt-6 rounded-md"
className="mx-auto rounded-md mt-big"
/>
<figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
<figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
u/markyminkk on r/BLAHAJ
</figcaption>
</figure>
</main>
<footer className="my-2 text-center">
<footer className="text-center my-small">
<em>
<a href="https://gitlab.com/yaemiku" target="_blank">
yaemiku
@ -248,7 +248,7 @@ export default function Home() {
picrew
</a>
</em>
<figure className="max-w-screen-md my-6 select-none">
<figure className="max-w-screen-md select-none my-big">
<blockquote className="text-xs text-justify text-zinc-400">
Oh, wretched memory that compels us to remember the paths we took to
arrive at the present state of affairs! Further: as I lay awake but
@ -265,7 +265,7 @@ export default function Home() {
hold back. I was halfway down the path of my life when I found
myself in a dark forest.
</blockquote>
<figcaption className="mt-2 text-xs text-right text-zinc-700">
<figcaption className="text-xs text-right mt-small text-zinc-700">
Witold Gombrowicz, Ferdydurke
</figcaption>
</figure>

View File

@ -1,14 +1,37 @@
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
content: ["./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
extend: {
fontFamily: {
jetbrains: ['JetBrains Mono', 'sans-serif'],
},
backgroundImage: {
'gothic-pattern': "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')"
}
"gothic-pattern":
"linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')",
},
colors: {
'trans-blue': '#55cdfc',
'trans-pink': '#f7a8b8',
'bi-red': '#d60270',
'bi-violet': '#9b4f96',
'bi-blue': '#0038a8'
},
fontFamily: {
jetbrains: ["JetBrains Mono", "sans-serif"],
},
maxWidth: {
'vw': '100vw'
},
spacing: {
none: '0',
xs: '0.25em',
sm: '0.5em',
small: '0.5em',
md: '0.75em',
lg: '1em',
base: '1em',
big: '1.5em',
xl: '1.25em',
},
},
},
plugins: [],