Skip to content

Commit 46c5dd1

Browse files
OhsweddOhswedd
committed
Sections Utils
1 parent f0e0937 commit 46c5dd1

File tree

6 files changed

+548
-59
lines changed

6 files changed

+548
-59
lines changed

‎demo.html‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353

5454

5555

56-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
56+
<section class="">
5757
<h2 class="font-lg text-primary my-4">Alert Component Showcase</h2>
5858

5959
<!-- Success Alerts -->
@@ -70,7 +70,7 @@ <h2 class="font-lg text-primary my-4">Alert Component Showcase</h2>
7070

7171
</section>
7272

73-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
73+
<section class="">
7474
<h2 class="font-lg text-primary my-4">Accordion Component Showcase</h2>
7575

7676
<div class="kroma-accordion-container" data-variant="primary" data-responsive="auto" data-background="none">
@@ -83,7 +83,7 @@ <h2 class="font-lg text-primary my-4">Accordion Component Showcase</h2>
8383

8484
</section>
8585

86-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
86+
<section class="">
8787
<h2 class="font-lg text-primary my-4">Avatar Component Showcase</h2>
8888

8989
<!-- Small Avatars -->
@@ -150,7 +150,7 @@ <h2 class="font-lg text-primary my-4">Avatar Component Showcase</h2>
150150
</div>
151151
</section>
152152

153-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
153+
<section class="">
154154
<h2 class="font-lg text-primary my-4">Badge Component Showcase</h2>
155155

156156
<!-- Primary Badges -->
@@ -183,7 +183,7 @@ <h2 class="font-lg text-primary my-4">Badge Component Showcase</h2>
183183
</div>
184184
</section>
185185

186-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
186+
<section class="">
187187
<h2 class="font-lg text-primary my-4">Breadcrumb Component Showcase</h2>
188188

189189
<!-- Primary Breadcrumbs with Slash Separator -->
@@ -224,7 +224,7 @@ <h2 class="font-lg text-primary my-4">Breadcrumb Component Showcase</h2>
224224
</nav>
225225
</section>
226226

227-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
227+
<section class="">
228228
<h2 class="font-lg text-primary my-4">Button Component Showcase</h2>
229229

230230
<!-- Primary Button -->
@@ -271,7 +271,7 @@ <h2 class="font-lg text-primary my-4">Button Component Showcase</h2>
271271

272272
</section>
273273

274-
<section class="p-6 bg-neutral-50 shadow-md rounded-lg my-8">
274+
<section class="">
275275
<h2 class="font-lg text-primary my-6 text-center">Kroma Card Component Showcase</h2>
276276

277277
<div class="grid grid-loose">
@@ -352,7 +352,7 @@ <h3 class="font-md text-secondary mt-8 mb-4 text-center">Scrollable Cards</h3>
352352
</div>
353353
</section>
354354

355-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
355+
<section class="">
356356
<h2 class="font-lg text-primary my-4">DateTime Picker Component Showcase</h2>
357357

358358
<!-- Containers for each DateTimePicker instance with specific data attributes -->
@@ -369,7 +369,7 @@ <h2 class="font-lg text-primary my-4">DateTime Picker Component Showcase</h2>
369369
<div id="picker-info" class="kroma-datetime-picker-container my-4" data-variant="info" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
370370
</section>
371371

372-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
372+
<section class="">
373373
<h2 class="font-lg text-primary my-4">Dropdown Component Showcase</h2>
374374

375375
<!-- Example Dropdown over Kroma Avatar -->
@@ -401,7 +401,7 @@ <h2 class="font-lg text-primary my-4">Dropdown Component Showcase</h2>
401401

402402
</section>
403403

404-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
404+
<section class="">
405405
<h2 class="font-lg text-primary my-4">Form Showcase</h2>
406406

407407
<!-- Primary Variant Form Group -->
@@ -471,7 +471,7 @@ <h2 class="font-lg text-primary my-4">Form Showcase</h2>
471471
</div>
472472
</section>
473473

474-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
474+
<section class="">
475475
<h2 class="font-lg text-primary my-4">Hero Showcase</h2>
476476
<!-- Basic Primary Hero with Overlay -->
477477
<div class="kroma-hero" data-variant="primary" data-overlay="dark" data-size="md" data-spacing="md" data-radius="lg" data-shadow="lg" data-hover="lift">
@@ -514,7 +514,7 @@ <h2>Accent Hero</h2>
514514
</div>
515515
</section>
516516

517-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
517+
<section class="">
518518
<h2 class="font-lg text-primary my-4">Hologram Component Demo</h2>
519519
<p>Click the buttons below to view different hologram styles and intensities.</p>
520520

@@ -537,7 +537,7 @@ <h2 class="font-lg text-primary my-4">Hologram Component Demo</h2>
537537
</div>
538538
</section>
539539

540-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
540+
<section class="">
541541
<h2 class="font-lg text-primary my-4">Kroma Modal Component Demo</h2>
542542
<p>Click the buttons below to see modals with different styles and configurations.</p>
543543
<div style="display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-6);">
@@ -609,7 +609,7 @@ <h3 class="kroma-modal-title">Fullscreen Modal</h3>
609609
</div>
610610
</div>
611611

612-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
612+
<section class="">
613613
<h2 class="font-lg text-primary my-4">Kroma MultiSelect Component Demo</h2>
614614

615615
<p>Explore the MultiSelect component with different variants and configurations.</p>
@@ -675,7 +675,7 @@ <h2 class="font-lg text-primary my-4">Kroma MultiSelect Component Demo</h2>
675675
</div>
676676
</section>
677677

678-
<section class="p-6 bg-neutral-50 shadow-lg rounded-lg my-8">
678+
<section class="">
679679
<h2 class="font-xl text-primary mb-6">Toggle Component Demo</h2>
680680

681681
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -723,7 +723,7 @@ <h2 class="font-xl text-primary mb-6">Toggle Component Demo</h2>
723723
</div>
724724
</section>
725725

726-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
726+
<section class="">
727727
<h2 class="font-lg text-primary my-4">Progress Component Demo</h2>
728728

729729
<!-- Default Progress -->
@@ -749,7 +749,7 @@ <h2 class="font-lg text-primary my-4">Progress Component Demo</h2>
749749
</div>
750750
</section>
751751

752-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
752+
<section class="">
753753
<h2 class="font-lg text-primary my-4">Separator Component Demo</h2>
754754

755755
<!-- Basic Solid Separator with Primary Color -->
@@ -778,7 +778,7 @@ <h2 class="font-lg text-primary my-4">Separator Component Demo</h2>
778778

779779
</section>
780780

781-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
781+
<section class="">
782782
<h2 class="font-lg text-primary my-4">Skeleton Component Demo</h2>
783783

784784
<!-- Rectangular Skeleton with Primary Variant -->
@@ -804,7 +804,7 @@ <h2 class="font-lg text-primary my-4">Skeleton Component Demo</h2>
804804
</section>
805805

806806

807-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
807+
<section class="">
808808
<h2 class="font-lg text-primary my-4">Table Component Demo</h2>
809809

810810
<div class="kroma-table-container">
@@ -877,7 +877,7 @@ <h2 class="font-lg text-primary my-4">Table Component Demo</h2>
877877

878878
</section>
879879

880-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
880+
<section class="">
881881
<h2 class="font-lg text-primary my-4">Tooltip Component Demo</h2>
882882

883883
<!-- Primary Tooltip -->
@@ -911,7 +911,7 @@ <h2 class="font-lg text-primary my-4">Tooltip Component Demo</h2>
911911
</div>
912912
</section>
913913

914-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
914+
<section class="">
915915
<h2 class="font-lg text-primary my-4">Tabs Component Demo</h2>
916916
<div class="kroma-tabs-container" id="example-tabs" data-layout="horizontal" data-style="pill" data-variant="accent">
917917
<div class="kroma-tabs">
@@ -931,7 +931,7 @@ <h2 class="font-lg text-primary my-4">Tabs Component Demo</h2>
931931
</div>
932932
</section>
933933

934-
<section class="kroma-section p-4 bg-neutral-50 shadow-md rounded my-6">
934+
<section class="">
935935
<h2 class="kroma-heading font-lg text-primary my-4">Toast Component Demo</h2>
936936
<p class="kroma-text text-neutral-800">Click the buttons below to see toasts with different styles, positions, and configurations.</p>
937937
<div class="kroma-btn-container" style="display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-6);">
@@ -962,7 +962,7 @@ <h2 class="kroma-heading font-lg text-primary my-4">Toast Component Demo</h2>
962962
</div>
963963
</section>
964964

965-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
965+
<section class="">
966966
<h2 class="font-lg text-primary my-4">Pagination Component Demo</h2>
967967

968968
<!-- Default Pagination -->
@@ -998,7 +998,7 @@ <h2 class="font-lg text-primary my-4">Pagination Component Demo</h2>
998998
</nav>
999999
</section>
10001000

1001-
<section class="p-6 bg-neutral-50 shadow-md rounded-xl my-8">
1001+
<section class="">
10021002
<h2 class="font-xl text-primary mb-6 text-center">Stat Box Component Showcase</h2>
10031003
<div class="grid grid-loose">
10041004
<!-- Primary Variant -->
@@ -1055,7 +1055,7 @@ <h2 class="font-xl text-primary mb-6 text-center">Stat Box Component Showcase</h
10551055
</div>
10561056
</section>
10571057

1058-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1058+
<section class="">
10591059
<h2 class="font-lg text-primary my-4">Timeline Component Showcase</h2>
10601060
<p class="mb-6">
10611061
Explore different styles and variants of the timeline component, including vertical and horizontal timelines.
@@ -1148,7 +1148,7 @@ <h4 class="kroma-timeline-title">Default Active Event</h4>
11481148
</ul>
11491149
</section>
11501150

1151-
<section class="kroma-section p-4 bg-neutral-50 shadow-md rounded my-6">
1151+
<section class="">
11521152
<h2 class="font-lg text-primary my-4">Kroma Rating Component Demo</h2>
11531153

11541154
<!-- Primary Rating -->
@@ -1180,7 +1180,7 @@ <h2 class="font-lg text-primary my-4">Kroma Rating Component Demo</h2>
11801180
</section>
11811181

11821182

1183-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1183+
<section class="">
11841184
<h2 class="font-lg text-primary my-4">Stepper Component Demo</h2>
11851185

11861186
<!-- Horizontal Stepper -->
@@ -1220,7 +1220,7 @@ <h2 class="font-lg text-primary my-4">Stepper Component Demo</h2>
12201220
</div>
12211221
</section>
12221222

1223-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1223+
<section class="">
12241224
<h2 class="font-lg text-danger my-4">Danger Variant Calendar Demo</h2>
12251225

12261226
<!-- Calendar Component with Danger Variant -->
@@ -1237,7 +1237,7 @@ <h2 class="font-lg text-danger my-4">Danger Variant Calendar Demo</h2>
12371237
</div>
12381238
</section>
12391239

1240-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
1240+
<section class="">
12411241
<h2 class="font-lg text-info my-4">Calendar with Events (November 2024)</h2>
12421242

12431243
<!-- Calendar Component with with-items Variant and Predefined Events -->
@@ -1252,7 +1252,7 @@ <h2 class="font-lg text-info my-4">Calendar with Events (November 2024)</h2>
12521252
</div>
12531253
</section>
12541254

1255-
<section class="kroma-section p-4 bg-neutral-50 shadow-md rounded my-6">
1255+
<section class="">
12561256
<h2 class="font-lg text-primary my-4">Kroma File Upload Component Demo</h2>
12571257

12581258
<!-- Single File Upload -->
@@ -1291,7 +1291,7 @@ <h2 class="font-lg text-primary my-4">Kroma File Upload Component Demo</h2>
12911291
</div>
12921292
</section>
12931293

1294-
<section class="p-6 bg-neutral-50 shadow-md rounded my-6">
1294+
<section class="">
12951295
<h2 class="text-lg text-primary mb-4">Command Palette Showcase</h2>
12961296
<button class="kroma-btn" data-open-palette="palette1">Open Command Palette</button>
12971297

@@ -1313,7 +1313,7 @@ <h2 class="text-lg text-primary mb-4">Command Palette Showcase</h2>
13131313
</div>
13141314
</div>
13151315
</section>
1316-
<section class="p-6 bg-neutral-50 shadow-md rounded my-6">
1316+
<section class="">
13171317
<h2 class="text-lg text-primary mb-4">Codeblock Component Showcase</h2>
13181318
<div class="kroma-code-block" data-variant="secondary" data-size="xl" aria-label="Python Code Block">
13191319
<div class="kroma-code-block-content">
@@ -1328,7 +1328,7 @@ <h2 class="text-lg text-primary mb-4">Codeblock Component Showcase</h2>
13281328
</div>
13291329
</div>
13301330
</section>
1331-
<section class="p-6 bg-neutral-50 shadow-md rounded my-6" style="height:clamp(300px,35vw,600px);">
1331+
<section class="" style="height:clamp(300px,35vw,600px);">
13321332
<div class="kroma-slideshow rounded"
13331333
data-autoscroll="true"
13341334
data-waitime="3000"

‎src/css/base.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Base Reset */
12
*,
23
*::before,
34
*::after {
@@ -15,8 +16,31 @@ body {
1516
max-width: 100vw;
1617
margin: auto;
1718
background: var(--neutral-50);
19+
color: var(--neutral-900);
20+
font-family: var(--font-sans);
21+
line-height: 1.5;
22+
transition: background-color var(--transition-colors), color var(--transition-colors);
1823
}
1924

25+
/* Fullscreen Fixed */
26+
body.fullscreen-fixed {
27+
position: fixed;
28+
inset: 0;
29+
margin: 0;
30+
overflow: hidden;
31+
}
32+
33+
/* Utility Styles for Flexbox */
34+
body.flex {
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: flex-start;
38+
align-items: center;
39+
gap: var(--space-4);
40+
padding: var(--space-6);
41+
}
42+
43+
/* Adjustments for Media */
2044
img,
2145
picture,
2246
video,
@@ -26,3 +50,34 @@ svg {
2650
max-width: 100%;
2751
height: auto;
2852
}
53+
54+
/* Fullscreen Media Layout */
55+
body.fullscreen-media img,
56+
body.fullscreen-media video {
57+
width: 100%;
58+
height: 100%;
59+
object-fit: cover;
60+
}
61+
62+
/* Typography Variants */
63+
body.typography-light {
64+
font-family: var(--font-sans);
65+
font-size: clamp(0.875rem, 1vw, 1rem);
66+
line-height: 1.5;
67+
letter-spacing: 0.02em;
68+
}
69+
70+
body.typography-bold {
71+
font-family: var(--font-serif);
72+
font-size: clamp(1rem, 1.2vw, 1.5rem);
73+
line-height: 1.75;
74+
letter-spacing: 0.05em;
75+
}
76+
77+
/* Responsive Adjustments */
78+
@media (max-width: 768px) {
79+
body {
80+
font-size: 0.875rem;
81+
line-height: 1.4;
82+
}
83+
}

0 commit comments

Comments
 (0)