This commit is contained in:
Araozu 2023-11-10 20:49:35 -05:00
parent 6bb48dbc16
commit db6648e7f9
4 changed files with 117 additions and 4 deletions

View File

@ -4,7 +4,10 @@
/* Base variables */ /* Base variables */
:root { :root {
--chicha-green: #61f908;
--chicha-yellow: #ffff00;
--chicha-orange: #ffaa00;
--chicha-pink: #ff007a;
} }
/* Dark theme by default */ /* Dark theme by default */

View File

@ -13,6 +13,13 @@ module.exports = {
colors: { colors: {
"c-bg": "var(--c-bg)", "c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)", "c-on-bg": "var(--c-on-bg)",
"c-chicha-green": "var(--chicha-green)",
"c-chicha-pink": "var(--chicha-pink)",
"c-chicha-yellow": "var(--chicha-yellow)",
"c-chicha-orange": "var(--chicha-orange)",
},
fontFamily: {
"chicha": ["Lobster", "sans-serif"],
} }
}, },
plugins: [], plugins: [],

View File

@ -9,12 +9,30 @@
<!-- tailwind --> <!-- tailwind -->
<link href="/main.css" rel="stylesheet"> <link href="/main.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<h1 class="text-4xl font-bold"> <nav class="px-2 pt-2 pb-4 border-b-2 border-c-chicha-green">
Jerguero D: <h1 class="text-4xl font-bold font-chicha">
</h1> <span class="text-c-chicha-green">
J</span><span class="text-c-chicha-orange">e</span><span class="text-c-chicha-pink">r</span><span
class="text-c-chicha-yellow">g</span><span class="text-c-chicha-green">u</span><span
class="text-c-chicha-orange">e</span><span class="text-c-chicha-pink">r</span><span
class="text-c-chicha-yellow">o</span>
</h1>
</nav>
<button
class="font-chicha bg-c-chicha-yellow text-c-bg px-2 py-2 rounded text-xl"
>
<a href="/crear">
Crear post
</a>
</button>
<button <button
class="bg-c-on-bg text-c-bg py-2 px-4 rounded-xl shadow" class="bg-c-on-bg text-c-bg py-2 px-4 rounded-xl shadow"

View File

@ -551,10 +551,30 @@ video {
border-radius: 0.75rem; border-radius: 0.75rem;
} }
.rounded {
border-radius: 0.25rem;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-c-chicha-green {
border-color: var(--chicha-green);
}
.bg-c-on-bg { .bg-c-on-bg {
background-color: var(--c-on-bg); background-color: var(--c-on-bg);
} }
.bg-c-chicha-pink {
background-color: var(--chicha-pink);
}
.bg-c-chicha-yellow {
background-color: var(--chicha-yellow);
}
.p-2 { .p-2 {
padding: 0.5rem; padding: 0.5rem;
} }
@ -573,6 +593,33 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.font-chicha {
font-family: Lobster, sans-serif;
}
.font-mono { .font-mono {
font-family: Iosevka, monospace; font-family: Iosevka, monospace;
} }
@ -582,6 +629,16 @@ video {
line-height: 2.5rem; line-height: 2.5rem;
} }
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
@ -590,6 +647,10 @@ video {
text-transform: uppercase; text-transform: uppercase;
} }
.text-\[var\(--chicha-green\)\] {
color: var(--chicha-green);
}
.text-\[white\] { .text-\[white\] {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
@ -599,6 +660,26 @@ video {
color: var(--c-bg); color: var(--c-bg);
} }
.text-c-chicha-green {
color: var(--chicha-green);
}
.text-c-chicha-orange {
color: var(--chicha-orange);
}
.text-c-chicha-pink {
color: var(--chicha-pink);
}
.text-c-chicha-yellow {
color: var(--chicha-yellow);
}
.text-c-on-bg {
color: var(--c-on-bg);
}
.shadow { .shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@ -614,6 +695,10 @@ video {
/* Base variables */ /* Base variables */
:root { :root {
--chicha-green: #61f908;
--chicha-yellow: #ffff00;
--chicha-orange: #ffaa00;
--chicha-pink: #ff007a;
} }
/* Dark theme by default */ /* Dark theme by default */