first commit

This commit is contained in:
EFEELE
2025-04-07 15:50:13 -06:00
commit c2421d79c5
124 changed files with 12129 additions and 0 deletions

295
src/styles/global.css Normal file
View File

@@ -0,0 +1,295 @@
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-montserrat: "Montserrat", sans-serif;
--font-roboto: "Roboto", sans-serif;
--font-opensans: "Open Sans", sans-serif;
--color-blacktext: #171717;
--color-mint-50: #ecfdf5;
--color-mint-100: #d0fbe5;
--color-mint-200: #a4f4cf;
--color-mint-300: #6ce9b7;
--color-mint-400: #31d69a;
--color-mint-500: #0dbc82;
--color-mint-600: #03986a;
--color-mint-700: #027a58;
--color-mint-800: #056047;
--color-mint-900: #054f3c;
--color-mint-950: #012d22;
--color-riptide-50: #f0fdfa;
--color-riptide-100: #cbfcf1;
--color-riptide-200: #96f7e4;
--color-riptide-300: #5cecd5;
--color-riptide-400: #2bd6c1;
--color-riptide-500: #12baa8;
--color-riptide-600: #0b9689;
--color-riptide-700: #0e776f;
--color-riptide-800: #105f5a;
--color-riptide-900: #124f4b;
--color-riptide-950: #03302f;
--animate-rotate: rotate 10s linear infinite;
--animate-rotate-border: border-rotate 3s linear infinite;
@keyframes border-rotate {
to {
--border-angle: 360deg;
}
}
}
@property --border-angle{
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
::selection {
@apply text-white bg-mint-500;
}
*::-webkit-scrollbar-thumb{
border-radius: 20px;
}
.dark *{
scrollbar-color: #6ce9b7 #012d22;
scrollbar-width: thin;
}
*{
scrollbar-color: #6ce9b7 #d0fbe5;
scrollbar-width: thin;
}
pre, .dark pre {
scrollbar-color: #686868 #424242;
scrollbar-width:initial;
}
@keyframes rotate {
0% {
transform: rotate(0deg) scale(10);
}
100% {
transform: rotate(-360deg) scale(10);
}
}
a.inline-block.leading-5.pl-12{
@apply text-sm;
}
#toc-list a[href="#"]{
@apply font-bold dark:text-white text-blacktext;
}
.markdown h2 {
@apply dark:text-white text-blacktext text-3xl font-bold mt-16 mb-10;
}
.markdown h3 {
@apply text-2xl font-bold dark:text-white text-blacktext mt-6 mb-4;
}
.markdown h4 {
@apply text-xl dark:text-white text-blacktext font-bold mt-16 mb-10;
}
.markdown h5 {
@apply text-lg font-bold dark:text-white text-blacktext mt-6 mb-4;
}
.markdown h6 {
@apply text-base font-bold dark:text-white text-blacktext mt-6 mb-4;
}
.markdown p {
@apply tracking-normal font-montserrat text-pretty text-xl max-md:text-lg text-blacktext dark:text-gray-200 mb-8 leading-8;
}
.markdown a {
@apply text-xl max-md:text-lg font-semibold dark:!text-riptide-300 !text-mint-500 underline hover:!text-riptide-400 transition-all;
}
.markdown ul, .markdown ol{
@apply text-xl dark:text-gray-200 text-blacktext max-md:text-lg list-disc list-inside pl-4 py-6;
}
.markdown li {
@apply text-xl dark:text-gray-200 text-blacktext max-md:text-lg py-1;
}
.markdown hr {
@apply dark:text-mint-300/50 text-blacktext/30;
}
.markdown blockquote {
@apply py-4 border-l-4 border-mint-500 pl-4 italic text-blacktext dark:text-mint-200 bg-mint-50 dark:bg-mint-900/20 backdrop-blur-lg;
}
.markdown blockquote p {
@apply mb-0;
}
.markdown blockquote {
@apply mb-8;
}
.markdown :not(pre)>code {
@apply px-2 py-0.5;
}
/* .markdown pre {
@apply dark:!bg-zinc-900 !bg-slate-900 backdrop-blur-lg mb-8 px-10 pt-12 pb-8 border dark:border-mint-300/10 border-slate-500;
} */
.markdown pre {
@apply w-full h-full px-8 py-12 ;
}
.code-block-efe {
@apply w-full rounded-lg h-auto overflow-hidden my-8 ;
}
.markdown strong{
@apply font-bold;
}
.contains-task-list {
@apply space-y-2;
}
.task-list-item {
@apply flex items-center gap-4;
}
.task-list-item input[type="checkbox"] {
@apply w-5 h-5 accent-mint-300;
}
.task-list-item input[type="checkbox"]:checked + span {
@apply line-through text-mint-600;
}
.task-list-item span {
@apply text-gray-800;
}
.expanded {
@apply transition-all duration-700 w-full !flex !flex-col left-0 top-full mt-4 absolute shadow-xl dark:text-zinc-300 bg-gradient-to-t from-white to-white/90 dark:from-zinc-950 dark:to-zinc-950/80 bg-clip-padding backdrop-filter backdrop-blur backdrop-saturate-100 backdrop-contrast-100;
}
.hamburger-icon {
display: none;
}
.hamburger .bars-icon {
display: block; /* Show 'bars' icon by default */
}
.hamburger.active .bars-icon {
display: none; /* Hide 'bars' icon when .active is present */
}
.hamburger.active .xmark-icon {
display: block; /* Show 'xmark' icon when .active is present */
}
* {
box-sizing: border-box;
}
/* Navigation bar styles */
.hamburger {
cursor: pointer;
}
.nav-links {
display: none;
}
@media screen and (min-width: 768px) {
.nav-links {
display: flex;
}
.hamburger {
display: none;
}
}
.blur-circle::after {
content: "";
display: block;
width: 400px;
height: 400px;
background: #31d69a40;
bottom: -400px;
right: -300px;
position: fixed;
z-index: -1;
border-radius: 50%;
filter: blur(159px);
}
.blur-circle {
background-color: rgba(87, 253, 228, 0.29);
position: absolute;
width: 200px;
height: 200px;
top: 100px;
right: 100px;
border-radius: 999px;
filter: blur(150px);
overflow: hidden;
z-index: -1;
}
.dark .blur-circle::after {
content: "";
display: block;
width: 500px;
height: 500px;
background: #31d69945 !important;
bottom: 00px;
right: 0px;
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(50px);
}
.dark .blur-circle::after {
content: "";
display: block;
width: 500px;
height: 500px;
background: #50fd8f25 !important;
bottom: -150px;
right: -150px;
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(10px);
}
.copy-code svg{
@apply size-5;
}
.copy-code{
@apply absolute text-slate-400 text-xs cursor-pointer bg-slate-600/50 border hover:bg-transparent border-slate-500 p-2.5 rounded-md top-4 right-4 flex transition-all duration-300 max-md:opacity-100 min-md:opacity-0 group-hover:opacity-100 items-center justify-center;
}