Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-04 23:34:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial Commit: Add 1st screen

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-13 23:49:18 +05:00
commit f94a1bb008
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
18 changed files with 2787 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

46
index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kentai Radiquum</title>
<link href="./static/tailwind.css" rel="stylesheet">
</head>
<body class="overflow-x-hidden bg-bg-black">
<div class="h-screen">
<div class="container mx-auto text-white h-full max-h-[60vh] relative">
<div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div>
<div class="flex items-center justify-center gap-12 px-8 py-8">
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]"/>
<div>
<h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
<p class="text-2xl font-medium lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda / Protogen</p>
</div>
</div>
</div>
<div class="container flex mx-auto text-white h-full max-h-[40vh]">
<div class="max-w-[54.75%] bg-bg-gray py-4 w-full h-full">
<div class="flex items-center justify-between gap-2 px-4">
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]"/>
<p class="text-3xl text-bg-pink">yaml</p>
</div>
<div class="bg-white w-full h-full max-h-[4px] my-4"></div>
<div class="px-4 text-2xl bio">
<p>BIO:</p>
<p class="ml-4"> Furry: <span class="text-bg-pink">true</span></p>
<p class="ml-4"> About: </p>
<p class="ml-8"> - Coder: <span class="text-bg-pink">"NEXT.js, Python"</span> </p>
<p class="ml-8"> - Photographer: <a class="text-bg-pink hover:underline" href="https://wah.su/photos">"wah.su/photos"</a></p>
<p class="ml-8"> - Self-Hosting Enthusiast: <a class="text-bg-pink hover:underline" href="https://home.wah.su">"wah.su"</a></p>
<p class="ml-4"> Listen: <a class="text-bg-pink hover:underline" href="https://last.fm/user/radiquum" id="track-name">"LOADING . . ."</a></p>
</div>
</div>
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
<a class="w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#">READ MORE</a>
<a class="w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#">LINKS</a>
</div>
</div>
</div>
<script src="./static/script.js"></script>
</body>
</html>

1386
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

5
package.json Normal file
View file

@ -0,0 +1,5 @@
{
"devDependencies": {
"tailwindcss": "^3.4.11"
}
}

31
src/input.css Normal file
View file

@ -0,0 +1,31 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Inter';
src: url('/static/fonts/Inter/Inter-VariableFont.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono Bold';
src: url('/static/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono Medium';
src: url('/static/fonts/Fira_Mono/FiraMono-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono';
src: url('/static/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
}
body {
font-family: 'Inter', sans-serif;
}
.bio {
font-family: 'Fira Mono', monospace;
}

BIN
static/avatar_512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

3
static/file_icon.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="30" height="37" viewBox="0 0 30 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.75 0H3.75C2.75544 0 1.80161 0.38982 1.09835 1.0837C0.395088 1.77759 0 2.7187 0 3.7V33.3C0 35.3535 1.66875 37 3.75 37H26.25C28.3313 37 30 35.3535 30 33.3V11.1L18.75 0ZM26.25 33.3H3.75V3.7H16.875V12.95H26.25V33.3ZM10.3875 25.2525L14.3063 29.119L11.9063 31.45L5.625 25.2525L11.9063 19.055L14.3063 21.386L10.3875 25.2525ZM24.375 25.2525L18.0937 31.45L15.7125 29.119L19.6313 25.2525L15.7125 21.386L18.0937 19.055L24.375 25.2525Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 556 B

BIN
static/fonts/Fira_Mono/FiraMono-Bold.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Fira_Mono/FiraMono-Medium.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Fira_Mono/FiraMono-Regular.ttf Normal file
View file

Binary file not shown.

93
static/fonts/Fira_Mono/OFL.txt Normal file
View file

@ -0,0 +1,93 @@
Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
static/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Inter/Inter-VariableFont.ttf Normal file
View file

Binary file not shown.

93
static/fonts/Inter/OFL.txt Normal file
View file

@ -0,0 +1,93 @@
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

118
static/fonts/Inter/README.txt Normal file
View file

@ -0,0 +1,118 @@
Inter Variable Font
===================
This download contains Inter as both variable fonts and static fonts.
Inter is a variable font with these axes:
opsz
wght
This means all the styles are contained in these files:
Inter/Inter-VariableFont_opsz,wght.ttf
Inter/Inter-Italic-VariableFont_opsz,wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Inter:
Inter/static/Inter_18pt-Thin.ttf
Inter/static/Inter_18pt-ExtraLight.ttf
Inter/static/Inter_18pt-Light.ttf
Inter/static/Inter_18pt-Regular.ttf
Inter/static/Inter_18pt-Medium.ttf
Inter/static/Inter_18pt-SemiBold.ttf
Inter/static/Inter_18pt-Bold.ttf
Inter/static/Inter_18pt-ExtraBold.ttf
Inter/static/Inter_18pt-Black.ttf
Inter/static/Inter_24pt-Thin.ttf
Inter/static/Inter_24pt-ExtraLight.ttf
Inter/static/Inter_24pt-Light.ttf
Inter/static/Inter_24pt-Regular.ttf
Inter/static/Inter_24pt-Medium.ttf
Inter/static/Inter_24pt-SemiBold.ttf
Inter/static/Inter_24pt-Bold.ttf
Inter/static/Inter_24pt-ExtraBold.ttf
Inter/static/Inter_24pt-Black.ttf
Inter/static/Inter_28pt-Thin.ttf
Inter/static/Inter_28pt-ExtraLight.ttf
Inter/static/Inter_28pt-Light.ttf
Inter/static/Inter_28pt-Regular.ttf
Inter/static/Inter_28pt-Medium.ttf
Inter/static/Inter_28pt-SemiBold.ttf
Inter/static/Inter_28pt-Bold.ttf
Inter/static/Inter_28pt-ExtraBold.ttf
Inter/static/Inter_28pt-Black.ttf
Inter/static/Inter_18pt-ThinItalic.ttf
Inter/static/Inter_18pt-ExtraLightItalic.ttf
Inter/static/Inter_18pt-LightItalic.ttf
Inter/static/Inter_18pt-Italic.ttf
Inter/static/Inter_18pt-MediumItalic.ttf
Inter/static/Inter_18pt-SemiBoldItalic.ttf
Inter/static/Inter_18pt-BoldItalic.ttf
Inter/static/Inter_18pt-ExtraBoldItalic.ttf
Inter/static/Inter_18pt-BlackItalic.ttf
Inter/static/Inter_24pt-ThinItalic.ttf
Inter/static/Inter_24pt-ExtraLightItalic.ttf
Inter/static/Inter_24pt-LightItalic.ttf
Inter/static/Inter_24pt-Italic.ttf
Inter/static/Inter_24pt-MediumItalic.ttf
Inter/static/Inter_24pt-SemiBoldItalic.ttf
Inter/static/Inter_24pt-BoldItalic.ttf
Inter/static/Inter_24pt-ExtraBoldItalic.ttf
Inter/static/Inter_24pt-BlackItalic.ttf
Inter/static/Inter_28pt-ThinItalic.ttf
Inter/static/Inter_28pt-ExtraLightItalic.ttf
Inter/static/Inter_28pt-LightItalic.ttf
Inter/static/Inter_28pt-Italic.ttf
Inter/static/Inter_28pt-MediumItalic.ttf
Inter/static/Inter_28pt-SemiBoldItalic.ttf
Inter/static/Inter_28pt-BoldItalic.ttf
Inter/static/Inter_28pt-ExtraBoldItalic.ttf
Inter/static/Inter_28pt-BlackItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.

23
static/script.js Normal file
View file

@ -0,0 +1,23 @@
function updatePlayingTrack() {
const trackName = document.getElementById("track-name");
fetch("https://lastfm-last-played.biancarosa.com.br/radiquum/latest-song")
.then((res) => {
if (!res.ok) {
throw new Error("Error Fetching Data");
}
return res.json();
})
.then((data) => {
trackName.innerHTML = `"${data.track.artist['#text']} - ${data.track.name}"`;
})
.catch((err) => {
trackName.innerHTML = "\"ERROR: last.fm is not reachable\"";
console.log(err);
});
}
window.onload = () => {
updatePlayingTrack();
setInterval(updatePlayingTrack, 360000);
}

973
static/tailwind.css Normal file
View file

@ -0,0 +1,973 @@
/*
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.right-0 {
right: 0px;
}
.top-0 {
top: 0px;
}
.-z-10 {
z-index: -10;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-\[3\%\] {
margin-bottom: 3%;
}
.ml-4 {
margin-left: 1rem;
}
.ml-8 {
margin-left: 2rem;
}
.mt-8 {
margin-top: 2rem;
}
.flex {
display: flex;
}
.h-\[37px\] {
height: 37px;
}
.h-\[75px\] {
height: 75px;
}
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.max-h-\[40\%\] {
max-height: 40%;
}
.max-h-\[4px\] {
max-height: 4px;
}
.max-h-\[60vh\] {
max-height: 60vh;
}
.max-h-\[40vh\] {
max-height: 40vh;
}
.min-h-screen {
min-height: 100vh;
}
.w-\[256px\] {
width: 256px;
}
.w-\[30px\] {
width: 30px;
}
.w-\[320px\] {
width: 320px;
}
.w-full {
width: 100%;
}
.w-\[300px\] {
width: 300px;
}
.w-\[280px\] {
width: 280px;
}
.max-w-\[45\%\] {
max-width: 45%;
}
.max-w-\[55\%\] {
max-width: 55%;
}
.max-w-\[45\.25\%\] {
max-width: 45.25%;
}
.max-w-\[54\.75\%\] {
max-width: 54.75%;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-col {
flex-direction: column;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.bg-bg-black {
--tw-bg-opacity: 1;
background-color: rgb(30 30 30 / var(--tw-bg-opacity));
}
.bg-bg-blue {
--tw-bg-opacity: 1;
background-color: rgb(41 143 245 / var(--tw-bg-opacity));
}
.bg-bg-gray {
--tw-bg-opacity: 1;
background-color: rgb(72 72 72 / var(--tw-bg-opacity));
}
.bg-bg-pink {
--tw-bg-opacity: 1;
background-color: rgb(255 71 139 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-8 {
padding: 2rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.text-bg-pink {
--tw-text-opacity: 1;
color: rgb(255 71 139 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-black {
--tw-shadow-color: #000;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-bg-blue {
--tw-shadow-color: #298FF5;
--tw-shadow: var(--tw-shadow-colored);
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@font-face {
font-family: 'Inter';
src: url('/static/fonts/Inter/Inter-VariableFont.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono Bold';
src: url('/static/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono Medium';
src: url('/static/fonts/Fira_Mono/FiraMono-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Mono';
src: url('/static/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
}
body {
font-family: 'Inter', sans-serif;
}
.bio {
font-family: 'Fira Mono', monospace;
}
.hover\:bg-opacity-90:hover {
--tw-bg-opacity: 0.9;
}
.hover\:bg-opacity-85:hover {
--tw-bg-opacity: 0.85;
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
.lg\:w-\[372px\] {
width: 372px;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
@media (min-width: 1280px) {
.xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.xl\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 1536px) {
.\32xl\:w-\[512px\] {
width: 512px;
}
.\32xl\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.\32xl\:text-8xl {
font-size: 6rem;
line-height: 1;
}
}

15
tailwind.config.js Normal file
View file

@ -0,0 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
extend: {
colors: {
'bg-pink': '#FF478B',
'bg-blue': '#298FF5',
'bg-black': '#1E1E1E',
'bg-gray': '#484848'
},
},
},
plugins: [],
}