Skip to content

Commit 782bf3e

Browse files
WilliamRagstadWilliamRagstad
committed
Move custom CSS into Theme
1 parent 75e646e commit 782bf3e

File tree

2 files changed

+114
-104
lines changed

2 files changed

+114
-104
lines changed

‎src/layouts/Layout.astro

Lines changed: 0 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -43,99 +43,6 @@ const { title } = Astro.props;
4343
overflow-x: hidden;
4444
scroll-behavior: smooth !important;
4545
}
46-
47-
.rainbow-text-gradient {
48-
--scaling: 500%;
49-
background: linear-gradient(
50-
90deg,
51-
/* #ff3b3b,
52-
#ff803b,
53-
#ffff3b,
54-
#80ff3b,
55-
#3bff3b,
56-
#3bff80,
57-
#3bffff,
58-
#3b80ff,
59-
#3b3bff,
60-
#803bff,
61-
#ff3bff,
62-
#ff3b80,
63-
#ff3b3b */
64-
#ef505c,
65-
#9c45e4,
66-
#185fee,
67-
#2ff5ec,
68-
#11d68b,
69-
#ffcc16,
70-
#ef505c
71-
);
72-
background-size: var(--scaling) 100%;
73-
background-position: 0 0;
74-
-webkit-background-clip: text;
75-
-webkit-text-fill-color: transparent;
76-
animation: rainbow 35s linear infinite;
77-
display: inline-block;
78-
/* filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 1px 1.5px #fff)
79-
brightness(1.5); */
80-
filter: saturate(0.6) brightness(1.3) drop-shadow(0 1px 1.5px #000);
81-
}
82-
83-
@keyframes rainbow {
84-
0% {
85-
background-position-x: 0%;
86-
}
87-
100% {
88-
background-position-x: var(--scaling);
89-
}
90-
}
91-
92-
.retro-text-gradient {
93-
background: linear-gradient(
94-
180deg,
95-
#f7eef1 20%,
96-
#daa9f3 30%,
97-
#5e2ec5 55%,
98-
#7400b7 80%
99-
);
100-
-webkit-background-clip: text;
101-
-webkit-text-fill-color: transparent;
102-
display: inline-block;
103-
filter: drop-shadow(0 0.75px 0 #1c0d36) drop-shadow(0 -0.75px 0 #d8a5ec);
104-
}
105-
106-
.token.plain {
107-
display: inline-block;
108-
margin-left: 1ch;
109-
}
110-
.token.plain + .token.plain {
111-
margin-left: 2ch;
112-
}
113-
.token.plain:first-child {
114-
margin-left: 2ch;
115-
}
116-
117-
pre code {
118-
overflow-x: auto;
119-
-webkit-overflow-scrolling: touch;
120-
}
121-
122-
*::-webkit-scrollbar {
123-
width: 7px;
124-
height: 7px;
125-
}
126-
127-
*::-webkit-scrollbar-thumb {
128-
background: #353535;
129-
border-radius: 10px;
130-
}
131-
132-
*::-webkit-scrollbar-thumb:hover {
133-
background: #494949;
134-
}
135-
/* Hide scrollbar edge */
136-
*::-webkit-scrollbar-corner {
137-
background: transparent;
138-
}
13946
</style>
14047
</body>
14148
</html>

‎src/styles/Theme.css

Lines changed: 114 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,146 @@
11
/* Typography */
22

33
.block-title {
4-
@apply text-primaryText text-3xl font-bold tracking-normal;
4+
@apply text-primaryText text-3xl font-bold tracking-normal;
55
}
6+
67
.block-big-title {
7-
@apply text-primaryText text-4xl xl:text-5xl font-bold tracking-normal;
8+
@apply text-primaryText text-4xl xl:text-5xl font-bold tracking-normal;
89
}
10+
911
.block-subtitle {
10-
@apply text-xs text-secondaryColor tracking-wider font-bold uppercase;
12+
@apply text-xs text-secondaryColor tracking-wider font-bold uppercase;
1113
}
14+
1215
.content-title {
13-
@apply text-primaryText text-lg font-bold tracking-normal;
16+
@apply text-primaryText text-lg font-bold tracking-normal;
1417
}
18+
1519
.content-text-white {
16-
@apply text-primaryText text-base leading-relaxed;
20+
@apply text-primaryText text-base leading-relaxed;
1721
}
22+
1823
.content-text-gray {
19-
@apply text-gray-400 text-base;
24+
@apply text-gray-400 text-base;
2025
}
2126

2227
/* Borders */
2328

2429
.main-border-gray {
25-
@apply border border-solid border-mainBorder;
30+
@apply border border-solid border-mainBorder;
2631
}
32+
2733
.main-border-gray-darker {
28-
@apply border border-solid border-mainBorderDarker;
34+
@apply border border-solid border-mainBorderDarker;
2935
}
3036

3137
/* Buttons */
3238

3339
.contained-button {
34-
@apply rounded-lg font-bold bg-primaryColor text-primaryText flex justify-center items-center hover:bg-[#7274f3] cursor-pointer transition;
40+
@apply rounded-lg font-bold bg-primaryColor text-primaryText flex justify-center items-center hover:bg-[#7274f3] cursor-pointer transition;
3541
}
42+
3643
.outlined-button {
37-
@apply text-primaryText main-border-gray rounded-xl bg-bgDark2 hover:bg-bgDark3 border-gray-700 text-sm;
44+
@apply text-primaryText main-border-gray rounded-xl bg-bgDark2 hover:bg-bgDark3 border-gray-700 text-sm;
3845
}
3946

4047
/* Preventing FOUC */
4148
@font-face {
42-
font-display: var(--fontsource-Inter-font-display, optional);
49+
font-display: var(--fontsource-Inter-font-display, optional);
50+
}
51+
52+
/* Custom */
53+
54+
.rainbow-text-gradient {
55+
--scaling: 500%;
56+
background: linear-gradient(90deg,
57+
/* #ff3b3b,
58+
#ff803b,
59+
#ffff3b,
60+
#80ff3b,
61+
#3bff3b,
62+
#3bff80,
63+
#3bffff,
64+
#3b80ff,
65+
#3b3bff,
66+
#803bff,
67+
#ff3bff,
68+
#ff3b80,
69+
#ff3b3b */
70+
#ef505c,
71+
#9c45e4,
72+
#185fee,
73+
#2ff5ec,
74+
#11d68b,
75+
#ffcc16,
76+
#ef505c);
77+
background-size: var(--scaling) 100%;
78+
background-position: 0 0;
79+
-webkit-background-clip: text;
80+
-webkit-text-fill-color: transparent;
81+
animation: rainbow 35s linear infinite;
82+
display: inline-block;
83+
/* filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 1px 1.5px #fff)
84+
brightness(1.5); */
85+
filter: saturate(0.6) brightness(1.3) drop-shadow(0 1px 1.5px #000);
86+
}
87+
88+
@keyframes rainbow {
89+
0% {
90+
background-position-x: 0%;
91+
}
92+
93+
100% {
94+
background-position-x: var(--scaling);
95+
}
96+
}
97+
98+
.retro-text-gradient {
99+
background: linear-gradient(180deg,
100+
#f7eef1 20%,
101+
#daa9f3 30%,
102+
#5e2ec5 55%,
103+
#7400b7 80%);
104+
background-clip: text;
105+
-webkit-background-clip: text;
106+
-webkit-text-fill-color: transparent;
107+
display: inline-block;
108+
filter: drop-shadow(0 0.75px 0 #1c0d36) drop-shadow(0 -0.75px 0 #d8a5ec);
109+
}
110+
111+
.token.plain {
112+
display: inline-block;
113+
margin-left: 1ch;
114+
}
115+
116+
.token.plain+.token.plain {
117+
margin-left: 2ch;
118+
}
119+
120+
.token.plain:first-child {
121+
margin-left: 2ch;
122+
}
123+
124+
pre code {
125+
overflow-x: auto;
126+
-webkit-overflow-scrolling: touch;
127+
}
128+
129+
*::-webkit-scrollbar {
130+
width: 7px;
131+
height: 7px;
132+
}
133+
134+
*::-webkit-scrollbar-thumb {
135+
background: #353535;
136+
border-radius: 10px;
137+
}
138+
139+
*::-webkit-scrollbar-thumb:hover {
140+
background: #494949;
141+
}
142+
143+
/* Hide scrollbar edge */
144+
*::-webkit-scrollbar-corner {
145+
background: transparent;
43146
}

0 commit comments

Comments
 (0)