first commit
This commit is contained in:
295
src/styles/global.css
Normal file
295
src/styles/global.css
Normal 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user