Skip to content

Commit f771621

Browse files
mythzmythz
committed
Update angular template
1 parent 5079caf commit f771621

File tree

9 files changed

+542
-142
lines changed

9 files changed

+542
-142
lines changed

MyApp/_podcasts/2025-05-06_angular-template.md renamed to MyApp/_podcasts/2025-12-06_angular-template.md

File renamed without changes.

MyApp/_posts/2025-05-06_angular-template.md renamed to MyApp/_posts/2025-12-05_angular-template.md

Lines changed: 247 additions & 60 deletions
Large diffs are not rendered by default.

‎MyApp/wwwroot/css/app.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -673,6 +673,9 @@
673673
.m-1305 {
674674
margin: calc(var(--spacing) * 1305);
675675
}
676+
.-mx-1 {
677+
margin-inline: calc(var(--spacing) * -1);
678+
}
676679
.-mx-1\.5 {
677680
margin-inline: calc(var(--spacing) * -1.5);
678681
}
@@ -694,6 +697,9 @@
694697
.mx-auto {
695698
margin-inline: auto;
696699
}
700+
.-my-1 {
701+
margin-block: calc(var(--spacing) * -1);
702+
}
697703
.-my-1\.5 {
698704
margin-block: calc(var(--spacing) * -1.5);
699705
}
@@ -835,6 +841,9 @@
835841
.-mr-24 {
836842
margin-right: calc(var(--spacing) * -24);
837843
}
844+
.-mr-32 {
845+
margin-right: calc(var(--spacing) * -32);
846+
}
838847
.-mr-32\! {
839848
margin-right: calc(var(--spacing) * -32) !important;
840849
}
@@ -919,6 +928,9 @@
919928
.mb-\[env\(safe-area-inset-bottom\)\] {
920929
margin-bottom: env(safe-area-inset-bottom);
921930
}
931+
.-ml-0 {
932+
margin-left: calc(var(--spacing) * -0);
933+
}
922934
.-ml-0\.5 {
923935
margin-left: calc(var(--spacing) * -0.5);
924936
}
@@ -940,6 +952,9 @@
940952
.-ml-px {
941953
margin-left: -1px;
942954
}
955+
.ml-0 {
956+
margin-left: calc(var(--spacing) * 0);
957+
}
943958
.ml-0\.5 {
944959
margin-left: calc(var(--spacing) * 0.5);
945960
}
@@ -1032,9 +1047,15 @@
10321047
width: calc(var(--spacing) * 5);
10331048
height: calc(var(--spacing) * 5);
10341049
}
1050+
.h-0 {
1051+
height: calc(var(--spacing) * 0);
1052+
}
10351053
.h-0\.5 {
10361054
height: calc(var(--spacing) * 0.5);
10371055
}
1056+
.h-1 {
1057+
height: calc(var(--spacing) * 1);
1058+
}
10381059
.h-1\.5 {
10391060
height: calc(var(--spacing) * 1.5);
10401061
}
@@ -1185,6 +1206,9 @@
11851206
.w-0 {
11861207
width: calc(var(--spacing) * 0);
11871208
}
1209+
.w-1 {
1210+
width: calc(var(--spacing) * 1);
1211+
}
11881212
.w-1\/2 {
11891213
width: calc(1/2 * 100%);
11901214
}
@@ -1482,6 +1506,10 @@
14821506
--tw-translate-x: calc(var(--spacing) * 0);
14831507
translate: var(--tw-translate-x) var(--tw-translate-y);
14841508
}
1509+
.translate-x-1 {
1510+
--tw-translate-x: calc(var(--spacing) * 1);
1511+
translate: var(--tw-translate-x) var(--tw-translate-y);
1512+
}
14851513
.translate-x-1\/4 {
14861514
--tw-translate-x: calc(1/4 * 100%);
14871515
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1502,10 +1530,18 @@
15021530
--tw-translate-x: 100%;
15031531
translate: var(--tw-translate-x) var(--tw-translate-y);
15041532
}
1533+
.-translate-y-1 {
1534+
--tw-translate-y: calc(var(--spacing) * -1);
1535+
translate: var(--tw-translate-x) var(--tw-translate-y);
1536+
}
15051537
.-translate-y-1\/2 {
15061538
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
15071539
translate: var(--tw-translate-x) var(--tw-translate-y);
15081540
}
1541+
.-translate-y-3 {
1542+
--tw-translate-y: calc(var(--spacing) * -3);
1543+
translate: var(--tw-translate-x) var(--tw-translate-y);
1544+
}
15091545
.-translate-y-3\/4 {
15101546
--tw-translate-y: calc(calc(3/4 * 100%) * -1);
15111547
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1514,6 +1550,10 @@
15141550
--tw-translate-y: calc(var(--spacing) * 0);
15151551
translate: var(--tw-translate-x) var(--tw-translate-y);
15161552
}
1553+
.translate-y-1 {
1554+
--tw-translate-y: calc(var(--spacing) * 1);
1555+
translate: var(--tw-translate-x) var(--tw-translate-y);
1556+
}
15171557
.translate-y-1\/3 {
15181558
--tw-translate-y: calc(1/3 * 100%);
15191559
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1640,6 +1680,9 @@
16401680
.justify-start {
16411681
justify-content: flex-start;
16421682
}
1683+
.gap-0 {
1684+
gap: calc(var(--spacing) * 0);
1685+
}
16431686
.gap-0\.5 {
16441687
gap: calc(var(--spacing) * 0.5);
16451688
}
@@ -2007,6 +2050,9 @@
20072050
.border-blue-600 {
20082051
border-color: var(--color-blue-600);
20092052
}
2053+
.border-cyan-500 {
2054+
border-color: var(--color-cyan-500);
2055+
}
20102056
.border-cyan-500\/20 {
20112057
border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
20122058
@supports (color: color-mix(in lab, red, red)) {
@@ -2074,6 +2120,9 @@
20742120
.border-slate-700 {
20752121
border-color: var(--color-slate-700);
20762122
}
2123+
.border-slate-800 {
2124+
border-color: var(--color-slate-800);
2125+
}
20772126
.border-slate-800\/50 {
20782127
border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
20792128
@supports (color: color-mix(in lab, red, red)) {
@@ -2085,6 +2134,9 @@
20852134
.border-transparent {
20862135
border-color: transparent;
20872136
}
2137+
.border-white {
2138+
border-color: var(--color-white);
2139+
}
20882140
.border-white\/5 {
20892141
border-color: color-mix(in srgb, #fff 5%, transparent);
20902142
@supports (color: color-mix(in lab, red, red)) {
@@ -2194,6 +2246,9 @@
21942246
}
21952247
}
21962248
}
2249+
.bg-blue-950 {
2250+
background-color: var(--color-blue-950);
2251+
}
21972252
.bg-blue-950\/50 {
21982253
background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 50%, transparent);
21992254
@supports (color: color-mix(in lab, red, red)) {
@@ -2219,6 +2274,9 @@
22192274
.bg-cyan-600 {
22202275
background-color: var(--color-cyan-600);
22212276
}
2277+
.bg-cyan-950 {
2278+
background-color: var(--color-cyan-950);
2279+
}
22222280
.bg-cyan-950\/30 {
22232281
background-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 30%, transparent);
22242282
@supports (color: color-mix(in lab, red, red)) {
@@ -2414,6 +2472,9 @@
24142472
.bg-slate-200 {
24152473
background-color: var(--color-slate-200);
24162474
}
2475+
.bg-slate-400 {
2476+
background-color: var(--color-slate-400);
2477+
}
24172478
.bg-slate-400\/10 {
24182479
background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
24192480
@supports (color: color-mix(in lab, red, red)) {
@@ -2563,6 +2624,10 @@
25632624
--tw-gradient-from: #80caff;
25642625
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
25652626
}
2627+
.from-black {
2628+
--tw-gradient-from: var(--color-black);
2629+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2630+
}
25662631
.from-black\/70 {
25672632
--tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
25682633
@supports (color: color-mix(in lab, red, red)) {
@@ -2600,6 +2665,14 @@
26002665
--tw-gradient-from: var(--color-sky-400);
26012666
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26022667
}
2668+
.from-slate-50 {
2669+
--tw-gradient-from: var(--color-slate-50);
2670+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2671+
}
2672+
.from-slate-200 {
2673+
--tw-gradient-from: var(--color-slate-200);
2674+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2675+
}
26032676
.from-slate-200\/0 {
26042677
--tw-gradient-from: color-mix(in srgb, oklch(92.9% 0.013 255.508) 0%, transparent);
26052678
@supports (color: color-mix(in lab, red, red)) {
@@ -2613,6 +2686,10 @@
26132686
--tw-gradient-from: var(--color-slate-900);
26142687
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26152688
}
2689+
.from-teal-100 {
2690+
--tw-gradient-from: var(--color-teal-100);
2691+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2692+
}
26162693
.from-teal-100\/60 {
26172694
--tw-gradient-from: color-mix(in srgb, oklch(95.3% 0.051 180.801) 60%, transparent);
26182695
@supports (color: color-mix(in lab, red, red)) {
@@ -2630,6 +2707,11 @@
26302707
--tw-gradient-from: var(--color-white);
26312708
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26322709
}
2710+
.via-black {
2711+
--tw-gradient-via: var(--color-black);
2712+
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
2713+
--tw-gradient-stops: var(--tw-gradient-via-stops);
2714+
}
26332715
.via-black\/20 {
26342716
--tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
26352717
@supports (color: color-mix(in lab, red, red)) {
@@ -2663,6 +2745,10 @@
26632745
--tw-gradient-to: #64d2a3;
26642746
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26652747
}
2748+
.to-blue-100 {
2749+
--tw-gradient-to: var(--color-blue-100);
2750+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2751+
}
26662752
.to-blue-100\/60 {
26672753
--tw-gradient-to: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
26682754
@supports (color: color-mix(in lab, red, red)) {
@@ -2704,6 +2790,14 @@
27042790
--tw-gradient-to: var(--color-purple-600);
27052791
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
27062792
}
2793+
.to-slate-100 {
2794+
--tw-gradient-to: var(--color-slate-100);
2795+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2796+
}
2797+
.to-slate-200 {
2798+
--tw-gradient-to: var(--color-slate-200);
2799+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2800+
}
27072801
.to-slate-200\/0 {
27082802
--tw-gradient-to: color-mix(in srgb, oklch(92.9% 0.013 255.508) 0%, transparent);
27092803
@supports (color: color-mix(in lab, red, red)) {
@@ -2747,6 +2841,9 @@
27472841
.fill-gray-600 {
27482842
fill: var(--color-gray-600);
27492843
}
2844+
.fill-gray-800 {
2845+
fill: var(--color-gray-800);
2846+
}
27502847
.fill-gray-800\/20 {
27512848
fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 20%, transparent);
27522849
@supports (color: color-mix(in lab, red, red)) {
@@ -2797,6 +2894,9 @@
27972894
.stroke-slate-700 {
27982895
stroke: var(--color-slate-700);
27992896
}
2897+
.stroke-white {
2898+
stroke: var(--color-white);
2899+
}
28002900
.stroke-white\/10 {
28012901
stroke: color-mix(in srgb, #fff 10%, transparent);
28022902
@supports (color: color-mix(in lab, red, red)) {
@@ -2889,6 +2989,9 @@
28892989
.px-12 {
28902990
padding-inline: calc(var(--spacing) * 12);
28912991
}
2992+
.py-0 {
2993+
padding-block: calc(var(--spacing) * 0);
2994+
}
28922995
.py-0\.5 {
28932996
padding-block: calc(var(--spacing) * 0.5);
28942997
}
@@ -2940,6 +3043,9 @@
29403043
.py-32 {
29413044
padding-block: calc(var(--spacing) * 32);
29423045
}
3046+
.pt-0 {
3047+
padding-top: calc(var(--spacing) * 0);
3048+
}
29433049
.pt-0\.5 {
29443050
padding-top: calc(var(--spacing) * 0.5);
29453051
}
@@ -3249,6 +3355,9 @@
32493355
.text-balance {
32503356
text-wrap: balance;
32513357
}
3358+
.text-wrap {
3359+
text-wrap: wrap;
3360+
}
32523361
.break-words {
32533362
overflow-wrap: break-word;
32543363
}
@@ -3316,6 +3425,9 @@
33163425
.text-cyan-400 {
33173426
color: var(--color-cyan-400);
33183427
}
3428+
.text-cyan-500 {
3429+
color: var(--color-cyan-500);
3430+
}
33193431
.text-cyan-500\/5 {
33203432
color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 5%, transparent);
33213433
@supports (color: color-mix(in lab, red, red)) {
@@ -3549,6 +3661,9 @@
35493661
.opacity-20 {
35503662
opacity: 20%;
35513663
}
3664+
.opacity-50 {
3665+
opacity: 50%;
3666+
}
35523667
.opacity-70 {
35533668
opacity: 70%;
35543669
}
@@ -3663,6 +3778,9 @@
36633778
}
36643779
}
36653780
}
3781+
.ring-cyan-500 {
3782+
--tw-ring-color: var(--color-cyan-500);
3783+
}
36663784
.ring-cyan-500\/30 {
36673785
--tw-ring-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
36683786
@supports (color: color-mix(in lab, red, red)) {
@@ -3677,6 +3795,9 @@
36773795
.ring-gray-300 {
36783796
--tw-ring-color: var(--color-gray-300);
36793797
}
3798+
.ring-gray-900 {
3799+
--tw-ring-color: var(--color-gray-900);
3800+
}
36803801
.ring-gray-900\/10 {
36813802
--tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
36823803
@supports (color: color-mix(in lab, red, red)) {
@@ -3699,6 +3820,9 @@
36993820
}
37003821
}
37013822
}
3823+
.ring-slate-900 {
3824+
--tw-ring-color: var(--color-slate-900);
3825+
}
37023826
.ring-slate-900\/5 {
37033827
--tw-ring-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 5%, transparent);
37043828
@supports (color: color-mix(in lab, red, red)) {
@@ -3715,6 +3839,9 @@
37153839
}
37163840
}
37173841
}
3842+
.ring-white {
3843+
--tw-ring-color: var(--color-white);
3844+
}
37183845
.ring-white\/5 {
37193846
--tw-ring-color: color-mix(in srgb, #fff 5%, transparent);
37203847
@supports (color: color-mix(in lab, red, red)) {
@@ -3792,6 +3919,10 @@
37923919
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
37933920
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
37943921
}
3922+
.backdrop-filter {
3923+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3924+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3925+
}
37953926
.transition {
37963927
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
37973928
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

‎MyApp/wwwroot/img/posts/angular-spa/bg.webp‎

164 KB
Loading

‎MyApp/wwwroot/img/posts/angular-template/bg.webp‎

-32.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)