Skip to content

Commit 79eba5b

Browse files
navneetsharmauinavneetsharmaui
committed
Updated the globale tailwindcss style
1 parent 0d58151 commit 79eba5b

File tree

1 file changed

+283
-10
lines changed

1 file changed

+283
-10
lines changed

‎src/styles/tailwind.postcss‎

Lines changed: 283 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,52 @@
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
44

5+
@layer utilities {
6+
.banner-image-container-tag-button-indicator {
7+
content: '';
8+
@apply inline-block mr-2 w-3 h-3 rounded-full transition-all duration-200 ease-in-out transform;
9+
}
10+
}
11+
12+
@font-face {
13+
font-family: 'Raleway';
14+
font-style: normal;
15+
font-weight: 400;
16+
font-display: swap;
17+
src: url('/fonts/Raleway-400-normal.woff2') format('woff2');
18+
}
19+
20+
@font-face {
21+
font-family: 'Raleway';
22+
font-style: normal;
23+
font-weight: 500;
24+
font-display: swap;
25+
src: url('/fonts/Raleway-500-normal.woff2') format('woff2');
26+
}
27+
28+
@font-face {
29+
font-family: 'Raleway';
30+
font-style: normal;
31+
font-weight: 600;
32+
font-display: swap;
33+
src: url('/fonts/Raleway-600-normal.woff2') format('woff2');
34+
}
35+
36+
@font-face {
37+
font-family: 'Raleway';
38+
font-style: normal;
39+
font-weight: 700;
40+
font-display: swap;
41+
src: url('/fonts/Raleway-700-normal.woff2') format('woff2');
42+
}
43+
44+
::-moz-selection {
45+
background-color: rgb(128, 185, 211);
46+
color: #fefefe;
47+
}
48+
549
::selection {
6-
background-color: #47a3f3;
50+
background-color: rgb(128, 185, 211);
751
color: #fefefe;
852
}
953

@@ -15,7 +59,7 @@
1559
}
1660

1761
::-webkit-scrollbar {
18-
width: 8px;
62+
width: 6px;
1963
background-color: #666666;
2064
}
2165

@@ -31,7 +75,7 @@ html {
3175
scroll-behavior: smooth;
3276
}
3377

34-
#sveltekit-blog {
78+
#navneetsharma-blog {
3579
display: flex;
3680
flex-direction: column;
3781
min-height: 100vh;
@@ -41,7 +85,7 @@ html {
4185
position: sticky;
4286
z-index: 10;
4387
top: 0;
44-
backdrop-filter: saturate(180%) blur(20px);
88+
backdrop-filter: blur(10px);
4589
transition: background-color 0.1s ease-in-out;
4690
}
4791

@@ -62,8 +106,8 @@ main {
62106

63107
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
64108
.sticky-nav {
65-
-webkit-backdrop-filter: saturate(180%) blur(20px);
66-
backdrop-filter: saturate(180%) blur(20px);
109+
-webkit-backdrop-filter: blur(10px);
110+
backdrop-filter: blur(10px);
67111
}
68112
}
69113

@@ -75,6 +119,10 @@ main {
75119
@apply visible no-underline;
76120
}
77121

122+
.prose a {
123+
@apply text-blue-600 font-semibold underline;
124+
}
125+
78126
.prose .anchor:after {
79127
@apply text-gray-600 dark:text-gray-300;
80128
}
@@ -219,13 +267,238 @@ table {
219267
}
220268

221269
.sticky-theme-mode-button {
222-
position: fixed;
223-
top: 15px;
224-
right: 15px;
225-
z-index: 1000;
270+
position: absolute;
271+
top: 10px;
272+
right: 10px;
226273
}
227274

228275
iframe {
229276
width: 100%;
230277
height: 35rem;
231278
}
279+
280+
.nav-active-route {
281+
@apply border-b-2 border-gray-800 dark:border-gray-100 font-semibold;
282+
-webkit-transition: border 1s ease;
283+
transition: border 0.5s ease-in-out;
284+
}
285+
286+
.nav-inactive-route {
287+
@apply border-b-2 border-yellow-50 border-opacity-0 dark:border-black;
288+
}
289+
290+
.nav-link-divider {
291+
@apply px-2 h-4 w-4 flex justify-center items-center;
292+
}
293+
294+
.bread-crumb-active {
295+
@apply text-gray-800 dark:text-gray-500;
296+
}
297+
298+
.autocomplete-suggestion-header {
299+
@apply font-semibold text-xs bg-yellow-50 m-0 relative inline-block text-blue-600 pr-2 z-50;
300+
z-index: 9999;
301+
}
302+
303+
.blog-post-layout-container {
304+
@apply flex flex-col justify-center items-start max-w-2xl mx-auto mb-16 w-full relative;
305+
z-index: 1;
306+
}
307+
308+
.blog-post-layout-container .blog-post-layout-background-container {
309+
@apply absolute min-w-full w-full h-full min-h-full top-0 left-0;
310+
z-index: -1;
311+
}
312+
313+
.blog-post-layout-container .blog-post-layout-background-container .blog-post-layout-background {
314+
@apply flex flex-row min-w-full min-h-full h-full justify-start items-start border-l border-gray-50;
315+
z-index: 0;
316+
}
317+
318+
.blog-post-layout-container
319+
.blog-post-layout-background-container
320+
.blog-post-layout-background
321+
.blog-post-layout-background-line {
322+
@apply border-r border-gray-50 w-1/5 min-h-full h-full;
323+
}
324+
325+
.blog-post-image-container {
326+
box-shadow: rgb(0 0 0 / 15%) 0px 0px 15px;
327+
@apply rounded transition-all duration-200 ease-in-out transform w-full no-underline overflow-hidden m-0 p-0 backface-hidden max-h-48 md:max-h-96;
328+
}
329+
330+
.blog-post-image {
331+
/* box-shadow: rgb(0 0 0 / 15%) 0px 0px 15px; */
332+
@apply rounded transition-all duration-200 ease-in-out transform backface-hidden;
333+
}
334+
335+
.banner-image-container-tag-button {
336+
@apply ml-1.5 text-xs font-semibold text-gray-800 px-2.5 py-1.5 rounded border-0 opacity-100 flex flex-row no-underline whitespace-nowrap bg-yellow-50 transform shadow hover:shadow-xl justify-center items-center transition-opacity ease-in-out cursor-pointer;
337+
}
338+
339+
.banner-image-container-tag-button:first-child {
340+
@apply ml-0;
341+
}
342+
343+
.banner-image-container-tag-button-indicator-blue:before {
344+
@apply banner-image-container-tag-button-indicator bg-blue-500;
345+
}
346+
347+
.banner-image-container-tag-button-indicator-red:before {
348+
@apply banner-image-container-tag-button-indicator bg-red-500;
349+
}
350+
351+
@-webkit-keyframes slide-in-top {
352+
0% {
353+
-webkit-transform: translateY(-1000px);
354+
transform: translateY(-1000px);
355+
opacity: 0;
356+
}
357+
100% {
358+
-webkit-transform: translateY(0);
359+
transform: translateY(0);
360+
opacity: 1;
361+
}
362+
}
363+
@keyframes slide-in-top {
364+
0% {
365+
-webkit-transform: translateY(-1000px);
366+
transform: translateY(-1000px);
367+
opacity: 0;
368+
}
369+
100% {
370+
-webkit-transform: translateY(0);
371+
transform: translateY(0);
372+
opacity: 1;
373+
}
374+
}
375+
@-webkit-keyframes slide-out-top {
376+
0% {
377+
-webkit-transform: translateY(0);
378+
transform: translateY(0);
379+
opacity: 1;
380+
}
381+
100% {
382+
-webkit-transform: translateY(-1000px);
383+
transform: translateY(-1000px);
384+
opacity: 0;
385+
}
386+
}
387+
@keyframes slide-out-top {
388+
0% {
389+
-webkit-transform: translateY(0);
390+
transform: translateY(0);
391+
opacity: 1;
392+
}
393+
100% {
394+
-webkit-transform: translateY(-1000px);
395+
transform: translateY(-1000px);
396+
opacity: 0;
397+
}
398+
}
399+
@-webkit-keyframes slide-in-bottom {
400+
0% {
401+
-webkit-transform: translateY(1000px);
402+
transform: translateY(1000px);
403+
opacity: 0;
404+
}
405+
100% {
406+
-webkit-transform: translateY(0);
407+
transform: translateY(0);
408+
opacity: 1;
409+
}
410+
}
411+
@keyframes slide-in-bottom {
412+
0% {
413+
-webkit-transform: translateY(1000px);
414+
transform: translateY(1000px);
415+
opacity: 0;
416+
}
417+
100% {
418+
-webkit-transform: translateY(0);
419+
transform: translateY(0);
420+
opacity: 1;
421+
}
422+
}
423+
@-webkit-keyframes slide-out-bottom {
424+
0% {
425+
-webkit-transform: translateY(0);
426+
transform: translateY(0);
427+
opacity: 1;
428+
}
429+
100% {
430+
-webkit-transform: translateY(1000px);
431+
transform: translateY(1000px);
432+
opacity: 0;
433+
}
434+
}
435+
@keyframes slide-out-bottom {
436+
0% {
437+
-webkit-transform: translateY(0);
438+
transform: translateY(0);
439+
opacity: 1;
440+
}
441+
100% {
442+
-webkit-transform: translateY(1000px);
443+
transform: translateY(1000px);
444+
opacity: 0;
445+
}
446+
}
447+
@-webkit-keyframes slide-in-right {
448+
0% {
449+
-webkit-transform: translateX(1000px);
450+
transform: translateX(1000px);
451+
opacity: 0;
452+
}
453+
100% {
454+
-webkit-transform: translateX(0);
455+
transform: translateX(0);
456+
opacity: 1;
457+
}
458+
}
459+
@keyframes slide-in-right {
460+
0% {
461+
-webkit-transform: translateX(1000px);
462+
transform: translateX(1000px);
463+
opacity: 0;
464+
}
465+
100% {
466+
-webkit-transform: translateX(0);
467+
transform: translateX(0);
468+
opacity: 1;
469+
}
470+
}
471+
@-webkit-keyframes fade-out-right {
472+
0% {
473+
-webkit-transform: translateX(0);
474+
transform: translateX(0);
475+
opacity: 1;
476+
}
477+
100% {
478+
-webkit-transform: translateX(50px);
479+
transform: translateX(50px);
480+
opacity: 0;
481+
}
482+
}
483+
@keyframes fade-out-right {
484+
0% {
485+
-webkit-transform: translateX(0);
486+
transform: translateX(0);
487+
opacity: 1;
488+
}
489+
100% {
490+
-webkit-transform: translateX(50px);
491+
transform: translateX(50px);
492+
opacity: 0;
493+
}
494+
}
495+
496+
.alert-banner {
497+
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
498+
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
499+
}
500+
501+
.alert-banner input:checked ~ * {
502+
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
503+
animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
504+
}

0 commit comments

Comments
 (0)