generated from theodorusclarence/ts-nextjs-tailwind-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 60
/
globals.css
120 lines (106 loc) · 3.37 KB
/
globals.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
/* #region /**=========== Primary Color =========== */
/* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
--tw-clr-primary-50: 236, 253, 245;
--tw-clr-primary-100: 209, 250, 229;
--tw-clr-primary-200: 167, 243, 208;
--tw-clr-primary-300: 110, 231, 183;
--tw-clr-primary-400: 52, 211, 153;
--tw-clr-primary-500: 16, 185, 129;
--tw-clr-primary-600: 5, 150, 105;
--tw-clr-primary-700: 4, 120, 87;
--tw-clr-primary-800: 6, 95, 70;
--tw-clr-primary-900: 6, 78, 59;
--clr-primary-50: rgb(var(--tw-clr-primary-50)); /* #ecfdf5 */
--clr-primary-100: rgb(var(--tw-clr-primary-100)); /* #d1fae5 */
--clr-primary-200: rgb(var(--tw-clr-primary-200)); /* #a7f3d0 */
--clr-primary-300: rgb(var(--tw-clr-primary-300)); /* #6ee7b7 */
--clr-primary-400: rgb(var(--tw-clr-primary-400)); /* #34d399 */
--clr-primary-500: rgb(var(--tw-clr-primary-500)); /* #10b981 */
--clr-primary-600: rgb(var(--tw-clr-primary-600)); /* #059669 */
--clr-primary-700: rgb(var(--tw-clr-primary-700)); /* #047857 */
--clr-primary-800: rgb(var(--tw-clr-primary-800)); /* #065f46 */
--clr-primary-900: rgb(var(--tw-clr-primary-900)); /* #064e3b */
/* #endregion /**======== Primary Color =========== */
}
@layer base {
/* inter var - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url('/fonts/inter-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
.cursor-newtab {
cursor: url('/images/new-tab.png') 10 10, pointer;
}
/* #region /**=========== Typography =========== */
.h0 {
@apply font-primary text-3xl font-bold md:text-5xl;
}
h1,
.h1 {
@apply font-primary text-2xl font-bold md:text-4xl;
}
h2,
.h2 {
@apply font-primary text-xl font-bold md:text-3xl;
}
h3,
.h3 {
@apply font-primary text-lg font-bold md:text-2xl;
}
h4,
.h4 {
@apply font-primary text-base font-bold md:text-lg;
}
body,
.p {
@apply font-primary text-sm md:text-base;
}
/* #endregion /**======== Typography =========== */
.layout {
/* 1100px */
max-width: 68.75rem;
@apply mx-auto w-11/12;
}
.bg-dark a.custom-link {
@apply border-gray-200 hover:border-gray-200/0;
}
/* Class to adjust with sticky footer */
.min-h-main {
@apply min-h-[calc(100vh-56px)];
}
}
@layer utilities {
.animated-underline {
background-image: linear-gradient(#33333300, #33333300),
linear-gradient(to right, var(--clr-primary-400), var(--clr-primary-500));
background-size: 100% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
.animated-underline {
transition: 0.3s ease;
transition-property: background-size, color, background-color,
border-color;
}
}
.animated-underline:hover,
.animated-underline:focus-visible {
background-size: 0 2px, 100% 2px;
}
}
/* #region /**=========== Default Theme =========== */
.default .accent-gradient {
@apply from-emerald-400 to-amber-400;
}
/* #endregion /**======== Default Theme =========== */