Skip to content

Instantly share code, notes, and snippets.

@koolkishan

koolkishan/Logo.svg

Created June 19, 2024 10:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save koolkishan/e57e314e01f81a880e83e671f63c71e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save koolkishan/e57e314e01f81a880e83e671f63c71e9 to your computer and use it in GitHub Desktop.
Download ZIP
Gist for Crypto Store App
Raw
global.css
@layer base {
:root {
--primary-background: #1d1e24;
--primary-text: #fff;
--secondary-white: #f3f3f3;
--surface: #23262b;
--custom-font: #7c7c7c;
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary-gray: #93959c;
--secondary-gray: #b5b7bf;
--secondary-black: #33363d;
--secondary-blue: #7839ee;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
/* For Webkit-based browsers (Chrome, Safari and Opera) */
/* Hide scrollbar */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* For IE, Edge and Firefox */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Style scrollbar */
::-webkit-scrollbar {
width: 6px; /* Width of the scrollbar */
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1; /* Color of the track */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #93959c; /* Color of the scroll handle */
border-radius: 3px; /* Rounded corners */
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #93959c; /* Color of the scroll handle on hover */
}
Display the source blob
Display the rendered blob
Raw
Logo.svg
<svg
fill="none"
height="48"
viewBox="0 0 44 48"
width="44"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#7839ee">
<path d="m16 8 5.0912 10.9088 10.9088 5.0912-10.9088 5.0912-5.0912 10.9088-5.0912-10.9088-10.9088-5.0912 10.9088-5.0912z" />
<path
d="m20.0469 31.3286 6.3539-1.0932 3.6 9.7646 3.6-9.7646 10.2565 1.7646-6.6564-8 6.6564-8-10.2565 1.7646-3.6-9.7646-3.6 9.7646-6.3539-1.0932 1.0442 2.2374 10.9088 5.0912-10.9088 5.0912z"
opacity=".5"
/>
</g>
</svg>
Raw
tailwind.config.ts
import type { Config } from "tailwindcss";
const config = {
darkMode: ["class"],
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: {
DEFAULT: "1rem",
lg: "1rem",
xl: "2rem",
},
},
extend: {
colors: {
"primary-text": "var(--primary-text)",
surface: "var(--surface)",
"primary-background": "var(--primary-background)",
"custom-font": "var( --custom-font)",
"secondary-white": "var(--secondary-white)",
"primary-gray": "var(--primary-gray)",
"secondary-gray": "var(--secondary-gray)",
"secondary-black": "var(--secondary-black)",
"secondary-blue": "var(--secondary-blue)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
export default config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment