Skip to content

Commit ead591f

Browse files
realanthonycrealanthonyc
committed
v3.4.0
1 parent d24f8d6 commit ead591f

15 files changed

+1553
-1648
lines changed

‎README.md‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,22 @@ The S2 Framework is a modern Webflow-optimized framework that provides a solid f
77
**Explore and clone:** https://s2-framework.webflow.io
88

99

10-
**Full Docs:**
10+
**Full Docs**
1111
📘 https://s2-framework.gitbook.io
1212

1313

14-
**Community & Support:**
14+
**Community & Support**
1515
GitHub: https://github.com/SPACESODA/S2-Framework
1616
Reddit: https://www.reddit.com/r/S2Framework
1717
Discord: https://s2-framework.webflow.io/#discord
1818

19-
 
20-
21-
**CDN**
22-
2319
**Files by jsDelivr**
2420
https://www.jsdelivr.com/package/gh/SPACESODA/S2-Framework
2521

26-
**S2 Framework: Base CSS**
27-
Base Setup + S2 Attributes + S2 Colors & Palettes + CSS Animations
28-
https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework/webflow/css/s2.css
29-
Minified: https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework/webflow/css/s2.min.css
30-
3122
**S2 Attributes**
32-
https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework/webflow/css/s2-attributes.css
33-
Minified: https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework/webflow/css/s2-attributes.min.css
23+
https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework/webflow/css/s2-attributes.min.css
3424

35-
 
25+
<br />
3626

3727
---
3828

‎s2-framework.webflow/401.html‎

Lines changed: 148 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><!-- Last Published: Sat Dec 13 2025 13:20:53 GMT+0000 (Coordinated Universal Time) -->
1+
<!DOCTYPE html><!-- Last Published: Sat Dec 20 2025 03:43:19 GMT+0000 (Coordinated Universal Time) -->
22
<html data-wf-page="66009eb8d493d5a53c375a0d" data-wf-site="66009eb8d493d5a53c3759bf">
33
<head>
44
<meta charset="utf-8">
@@ -382,11 +382,145 @@
382382
</div>
383383
<div class="w-embed">
384384
<style>
385-
/* ----------------- */
386-
/* -- S2 Features -- */
387-
/* ----------------- */
388-
/* Custom CSS required to support certain features */
389-
/* html-table */
385+
/* ------------------- */
386+
/* -- Custom Styles -- */
387+
/* ------------------- */
388+
/* Global custom styles for enhancements and some S2 Framework features */
389+
/* == html and body == */
390+
html:not(.wf-design-mode) ::selection {
391+
background: var(--colors--primary);
392+
color: #fff;
393+
}
394+
/* == main-nav_button == */
395+
.main-nav_button path {
396+
transition: transform 300ms ease;
397+
transform-origin: center;
398+
}
399+
.main-nav_button path {
400+
transform: translateY(-8%) rotate(-45deg);
401+
}
402+
.main-nav_button path:last-child {
403+
transform: translateY(11%) rotate(45deg);
404+
}
405+
.main-nav_button.w--open path {
406+
transform: translateY(0%) rotate(0deg);
407+
}
408+
/* == better sup and sub on headings == */
409+
:is(h1, .h1, h2, .h2, h3, .h3) :is(sup, sub) {
410+
margin: 0 -0.275ch;
411+
}
412+
/* == select element: custom arrow == */
413+
:root {
414+
--select-arrow-size: 0.375em;
415+
}
416+
.select-wrapper select {
417+
-webkit-appearance: none;
418+
-moz-appearance: none;
419+
appearance: none;
420+
}
421+
.select-wrapper::after {
422+
content: "";
423+
position: absolute;
424+
top: 50%;
425+
inset-inline-end: calc(0.75rem + var(--select-arrow-size));
426+
width: var(--select-arrow-size);
427+
height: var(--select-arrow-size);
428+
border-right: 0.125em solid currentColor;
429+
border-bottom: 0.125em solid currentColor;
430+
border-radius: 0 0 25% 0;
431+
transform: translateY(-65%) rotate(45deg);
432+
transition: transform 0.2s ease, border-color 0.2s ease;
433+
opacity: 0.6;
434+
pointer-events: none;
435+
}
436+
.input-field.is-boxed .select-wrapper::after {
437+
inset-inline-end: var(--select-arrow-size);
438+
}
439+
/* == styles for other form elements == */
440+
.input-field.is-boxed:focus-within {
441+
border-color: var(--colors--primary);
442+
box-shadow: 0 0 0 var(--_sizes---outline--bold) var(--colors--focus-subtle);
443+
}
444+
.richtext-list ul li::before {
445+
position: absolute;
446+
margin-inline-start: -1.65em;
447+
content: '\2713\0020';
448+
color: var(--colors--primary);
449+
}
450+
/* == toggle ui == */
451+
.toggle:active .toggle-button {
452+
width: 1.85em;
453+
}
454+
/* == mode switching ui == */
455+
/* toggle */
456+
body.u-dark-mode .toggle {
457+
justify-content: flex-end;
458+
}
459+
/* mode-switch style */
460+
:root {
461+
--light-mode-on: rgba(255, 255, 255, 0.55);
462+
--dark-mode-on: rgba(0, 0, 0, 0.35);
463+
}
464+
body.u-system-mode .mode-switch [data-button]:not([data-button="color-mode-system"]) {
465+
background-color: transparent;
466+
}
467+
body.u-system-mode.u-light-mode .mode-switch [data-button="color-mode-system"] {
468+
background-color: var(--light-mode-on);
469+
}
470+
body.u-system-mode.u-dark-mode .mode-switch [data-button="color-mode-system"] {
471+
background-color: var(--dark-mode-on);
472+
}
473+
body.u-light-mode .mode-switch [data-button="color-mode-light"] {
474+
background-color: var(--light-mode-on);
475+
}
476+
body.u-dark-mode .mode-switch [data-button="color-mode-dark"] {
477+
background-color: var(--dark-mode-on);
478+
}
479+
body.u-light-mode .mode-switch .mode-switch_button:hover {
480+
background-color: rgba(170, 170, 170, 1);
481+
color: rgba(240, 240, 240, 1);
482+
}
483+
body.u-dark-mode .mode-switch .mode-switch_button:hover {
484+
background-color: rgba(210, 210, 210, 1);
485+
color: rgba(130, 130, 130, 1);
486+
}
487+
/* == better modal == */
488+
dialog.modal[open] {
489+
animation: fadeIn 480ms ease-out forwards;
490+
}
491+
dialog.modal::backdrop {
492+
background: rgba(0, 0, 0, 0.8);
493+
cursor: pointer;
494+
}
495+
dialog button:focus,
496+
dialog button:focus-visible {
497+
outline: none !important;
498+
box-shadow: none;
499+
}
500+
.modal.is-open {
501+
display: block;
502+
position: fixed;
503+
inset: 0;
504+
}
505+
/* == slider nav == */
506+
.w-slider-nav.w-round>div {
507+
border-radius: 999rem;
508+
transition: background-color 600ms ease, width 200ms cubic-bezier(0.4, 0, 0.2, 1);
509+
}
510+
.slider_nav.is-overlay>div {
511+
background-color: rgba(255, 255, 255, 0.5);
512+
}
513+
.slider_nav.is-overlay>div.w-active {
514+
background-color: rgba(255, 255, 255, 1);
515+
}
516+
.slider_nav[slider-nav-style="bar"]>div {
517+
width: 0.375rem;
518+
height: 0.375rem;
519+
}
520+
.slider_nav[slider-nav-style="bar"]>div.w-active {
521+
width: 1.5rem;
522+
}
523+
/* == html-table == */
390524
/* base styles for html-table */
391525
.html-table {
392526
width: 100%;
@@ -413,8 +547,8 @@
413547
color: inherit;
414548
text-align: inherit;
415549
}
416-
.html-table thead th {}
417-
.html-table tfoot td {}
550+
/* .html-table thead th {} */
551+
/* .html-table tfoot td {} */
418552
.html-table caption {
419553
caption-side: top;
420554
font-weight: normal;
@@ -491,57 +625,11 @@
491625
left: -1px;
492626
z-index: 997;
493627
}
494-
/* toggle ui */
495-
.toggle:active .toggle-button {
496-
width: 1.85em;
497-
}
498-
/* mode switching ui */
499-
/* toggle style */
500-
body.u-dark-mode .toggle {
501-
justify-content: flex-end;
502-
}
503-
/* mode-switch style */
504-
:root {
505-
--light-mode-on: rgba(255, 255, 255, 0.55);
506-
--dark-mode-on: rgba(0, 0, 0, 0.35);
507-
}
508-
body.u-system-mode .mode-switch [data-button]:not([data-button="color-mode-system"]) {
509-
background-color: transparent;
510-
}
511-
body.u-system-mode.u-light-mode .mode-switch [data-button="color-mode-system"] {
512-
background-color: var(--light-mode-on);
513-
}
514-
body.u-system-mode.u-dark-mode .mode-switch [data-button="color-mode-system"] {
515-
background-color: var(--dark-mode-on);
516-
}
517-
body.u-light-mode .mode-switch [data-button="color-mode-light"] {
518-
background-color: var(--light-mode-on);
519-
}
520-
body.u-dark-mode .mode-switch [data-button="color-mode-dark"] {
521-
background-color: var(--dark-mode-on);
522-
}
523-
body.u-light-mode .mode-switch .mode-switch_button:hover {
524-
background-color: rgba(170, 170, 170, 1);
525-
color: rgba(240, 240, 240, 1);
526-
}
527-
body.u-dark-mode .mode-switch .mode-switch_button:hover {
528-
background-color: rgba(210, 210, 210, 1);
529-
color: rgba(130, 130, 130, 1);
530-
}
531-
</style>
532-
</div>
533-
<div class="w-embed">
534-
<style>
535-
/* ------------------- */
536-
/* -- Custom Styles -- */
537-
/* ------------------- */
538-
/* The most essential global custom styles */
539-
/* html and body */
540-
html:not(.wf-design-mode) ::selection {
541-
background: var(--colors--primary);
542-
color: #fff;
628+
/* == code == */
629+
code {
630+
font-family: "Lucida Console", "Consolas", "Liberation Mono", monospace !important;
543631
}
544-
/* accessibility */
632+
/* == accessibility == */
545633
html:not(.wf-design-mode) :focus-visible:not(input, textarea, select, section, .section, .container, .w-tab-link),
546634
[tabindex]:not([tabindex="-1"]):focus-visible,
547635
[aria-label]:not(input, textarea, select):focus-visible,
@@ -558,105 +646,11 @@
558646
[contenteditable]:focus-visible {
559647
outline: none;
560648
}
561-
/* main-nav_button */
562-
.main-nav_button path {
563-
transition: transform 300ms ease;
564-
transform-origin: center;
565-
}
566-
.main-nav_button path {
567-
transform: translateY(-8%) rotate(-45deg);
568-
}
569-
.main-nav_button path:last-child {
570-
transform: translateY(11%) rotate(45deg);
571-
}
572-
.main-nav_button.w--open path {
573-
transform: translateY(0%) rotate(0deg);
574-
}
575-
/* slider nav */
576-
.w-slider-nav.w-round>div {
577-
border-radius: 999rem;
578-
transition: background-color 600ms ease, width 200ms cubic-bezier(0.4, 0, 0.2, 1);
579-
}
580-
.slider_nav.is-overlay>div {
581-
background-color: rgba(255, 255, 255, 0.5);
582-
}
583-
.slider_nav.is-overlay>div.w-active {
584-
background-color: rgba(255, 255, 255, 1);
585-
}
586-
.slider_nav[slider-nav-style="bar"]>div {
587-
width: 0.375rem;
588-
height: 0.375rem;
589-
}
590-
.slider_nav[slider-nav-style="bar"]>div.w-active {
591-
width: 1.5rem;
592-
}
593-
/* better sup and sub on headings */
594-
:is(h1, .h1, h2, .h2, h3, .h3) :is(sup, sub) {
595-
margin: 0 -0.275ch;
596-
}
597-
/* better modal */
598-
dialog.modal[open] {
599-
animation: fadeIn 480ms ease-out forwards;
600-
}
601-
dialog.modal::backdrop {
602-
background: rgba(0, 0, 0, 0.8);
603-
cursor: pointer;
604-
}
605-
dialog button:focus,
606-
dialog button:focus-visible {
607-
outline: none !important;
608-
box-shadow: none;
609-
}
610-
.modal.is-open {
611-
display: block;
612-
position: fixed;
613-
inset: 0;
614-
}
615-
/* select element: custom arrow */
616-
:root {
617-
--select-arrow-size: 0.375em;
618-
}
619-
.select-wrapper select {
620-
appearance: none;
621-
-webkit-appearance: none;
622-
-moz-appearance: none;
623-
}
624-
.select-wrapper::after {
625-
content: "";
626-
position: absolute;
627-
top: 50%;
628-
inset-inline-end: calc(0.75rem + var(--select-arrow-size));
629-
width: var(--select-arrow-size);
630-
height: var(--select-arrow-size);
631-
border-right: 0.125em solid currentColor;
632-
border-bottom: 0.125em solid currentColor;
633-
border-radius: 0 0 25% 0;
634-
transform: translateY(-65%) rotate(45deg);
635-
transition: transform 0.2s ease, border-color 0.2s ease;
636-
opacity: 0.6;
637-
pointer-events: none;
638-
}
639-
.input-field.is-boxed .select-wrapper::after {
640-
inset-inline-end: var(--select-arrow-size);
641-
}
642-
/* other styles */
643-
.input-field.is-boxed:focus-within {
644-
border-color: var(--colors--primary);
645-
box-shadow: 0 0 0 var(--_sizes---outline--bold) var(--colors--focus-subtle);
646-
}
647-
.richtext-list ul li::before {
648-
position: absolute;
649-
margin-inline-start: -1.65em;
650-
content: '\2713\0020';
651-
color: var(--colors--primary);
652-
}
653-
code {
654-
font-family: "Lucida Console", "Consolas", "Liberation Mono", monospace !important;
655-
}
656-
/* styles for RTL layout */
649+
/* == styles for RTL layout == */
657650
[dir="rtl"] .list-item_icon {
658651
background-position: 100% 0%;
659652
}
653+
/* == other global custom styles go here == */
660654
</style>
661655
</div>
662656
<div class="w-embed">

0 commit comments

Comments
 (0)