From 47f6fb497fe180de6eb0ffdf8e43288eac9b84de Mon Sep 17 00:00:00 2001 From: code-fw Date: Thu, 8 Aug 2024 16:17:19 -0600 Subject: [PATCH 1/7] Structure of index --- index.html | 752 ++++++++++++++++++++++++++--------------------------- 1 file changed, 371 insertions(+), 381 deletions(-) diff --git a/index.html b/index.html index 35264911d..eecaa438c 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,32 @@ - + - - SortableJS - - - - - + - + + + + SortableJS + + + + - Fork me on GitHub -
-
- -

SortableJS

-

JavaScript library for reorderable drag-and-drop lists

+
+
+ +

SortableJS

+
JavaScript library for reorderable drag-and-drop lists
+
-
+
+
Features
  • Simple list
  • Shared lists
    • @@ -33,308 +35,291 @@
    Features
  • Handles
  • Filter
  • Thresholds
    • +
    Examples
  • Grid
  • Nested sortables
    • +
    Plugins
  • MultiDrag
  • Swap
    • -
    Comparisons
    -
    Framework Support
    -
    -
    - -
    -

    Features

    -
    -
    -
    -

    Simple list example

    -
    -
    Item 1
    -
    Item 2
    -
    Item 3
    -
    Item 4
    -
    Item 5
    -
    Item 6
    +
    +

    Comparisons

    +

    Framework Support

    -
    -
    new Sortable(example1, {
-    animation: 150,
-    ghostClass: 'blue-background-class'
+			
    
+				
    
+					
    Features
    
+					
    
+						
    Simple list example
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Item 4
    
+							
    Item 5
    
+							
    Item 6
    
+						
    
+						
    new Sortable(example1, {
+	animation: 150,
+	ghostClass: 'blue-background-class'
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Shared lists
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-			
    
-
    new Sortable(example2Left, {
-    group: 'shared', // set both lists to same group
-    animation: 150
+					
    
+					
    
+
+					
    
+						
    Shared lists
    
+						
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+						
    
+						
    new Sortable(example2Left, {
+	group: 'shared', // set both lists to same group
+	animation: 150
 });
-
+								
 new Sortable(example2Right, {
-    group: 'shared',
-    animation: 150
+	group: 'shared',
+	animation: 150
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Cloning
    
-			
    Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-			
    
-
    new Sortable(example3Left, {
-    group: {
-        name: 'shared',
-        pull: 'clone' // To clone: set pull to 'clone'
-    },
-    animation: 150
+					
    
+					
    
+
+					
    
+						
    Cloning
    
+						
    Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.
    
+						
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+						
    
+						
    new Sortable(example3Left, {
+	group: {
+		name: 'shared',
+		pull: 'clone' // To clone: set pull to 'clone'
+	},
+	animation: 150
 });
-
+			
 new Sortable(example3Right, {
-    group: {
-        name: 'shared',
-        pull: 'clone'
-    },
-    animation: 150
+	group: {
+		name: 'shared',
+		pull: 'clone'
+	},
+	animation: 150
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Disabling Sorting
    
-			
    Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-			
    
-
    new Sortable(example4Left, {
-    group: {
-        name: 'shared',
-        pull: 'clone',
-        put: false // Do not allow items to be put into this list
-    },
-    animation: 150,
-    sort: false // To disable sorting: set sort to false
+					
    
+					
    
+
+					
    
+						
    Disabling Sorting
    
+						
    Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.
    
+						
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+							
    
+								
    Item 1
    
+								
    Item 2
    
+								
    Item 3
    
+								
    Item 4
    
+								
    Item 5
    
+								
    Item 6
    
+							
    
+						
    
+						
    new Sortable(example4Left, {
+	group: {
+		name: 'shared',
+		pull: 'clone',
+		put: false // Do not allow items to be put into this list
+	},
+	animation: 150,
+	sort: false // To disable sorting: set sort to false
 });
-
+			
 new Sortable(example4Right, {
-    group: 'shared',
-    animation: 150
-});
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Handle
    
-			
    
-				
      Item 1
    
-				
      Item 2
    
-				
      Item 3
    
-				
      Item 4
    
-				
      Item 5
    
-				
      Item 6
    
-			
    
-			
    
-
    new Sortable(example5, {
-    handle: '.handle', // handle's class
-    animation: 150
+	group: 'shared',
+	animation: 150
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Filter
    
-			
    Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Filtered
    
-				
    Item 4
    
-				
    Item 5
    
-			
    
-			
    
-
    new Sortable(example6, {
-    filter: '.filtered', // 'filtered' class is not draggable
-    animation: 150
+					
    
+					
    
+
+					
    
+						
    Handle
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Item 4
    
+							
    Item 5
    
+							
    Item 6
    
+						
    
+						
    new Sortable(example5, {
+	handle: '.handle', // handle's class
+	animation: 150
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Thresholds
    
-			
    Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.
    
-			
    
-				
    
-					
-					
    
-					
-					
    1
    
-				
    
-					
-					
    
-					
-					
    2
    
-				
    
-			
    
-			
    
-				
    
-					
    
-						
-						
    
-							
+					
    
+					
    
+
+					
    
+						
    Filter
    
+						
    Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Filtered
    
+							
    Item 4
    
+							
    Item 5
    
 						
    
+						
    new Sortable(example6, {
+	filter: '.filtered', // 'filtered' class is not draggable
+	animation: 150
+});
    
 					
    
-					
    
-						
    Invert Swap
    
-						
    
-							
    
-								
+					
    
+			
+					
    
+						
    Thresholds
    
+						
    Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.
    
+						
    
+							
    
+								
+								
    
+								
+								
    1
    
+							
    
+							
    
+								
+								
    
+								
+								
    2
    
 							
    
 						
    
-					
    
-					
    
-						
-						
-					
    
-				
-			
    
-			
    
-
    new Sortable(example7, {
-    swapThreshold: 1,
-    animation: 150
+						
    
+							
    
+								
    
+									
+									
    
+										
+									
    
+								
    
+								
    
+									
    Invert Swap
    
+									
    
+										
    
+											
+										
    
+									
    
+								
    
+								
    
+									
+									
+								
    
+							
    
+						
    
+						
    new Sortable(example7, {
+	swapThreshold: 1,
+	animation: 150
 });
    
-			
    
-		
    
-
-
-		
    
-			
    Examples
    
-		
    
-		
    
-
-		
    
-			
    Grid Example
    
-			
    
-				
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16
    Item 17
    Item 18
    Item 19
    Item 20
    
-			
    
-		
    
-		
    
+					
    
 
-		
    
-			
    Nested Sortables Example
    
-			
    NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true. 
    It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).
    
-			
    
-				
    Item 1.1
-					
    
-						
    Item 2.1
    
-						
    Item 2.2
-							
    
-								
    Item 3.1
    
-								
    Item 3.2
    
-								
    Item 3.3
    
-								
    Item 3.4
    
-							
    
+					
    Examples
    
+					
    
+						
    Grid Example
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Item 4
    
+							
    Item 5
    
+							
    Item 6
    
+							
    Item 7
    
+							
    Item 8
    
+							
    Item 9
    
+							
    Item 10
    
+							
    Item 11
    
+							
    Item 12
    
+							
    Item 13
    
+							
    Item 14
    
+							
    Item 15
    
+							
    Item 16
    
+							
    Item 17
    
+							
    Item 18
    
+							
    Item 19
    
+							
    Item 20
    
 						
    
-						
    Item 2.3
    
-						
    Item 2.4
    
 					
    
-				
    
-				
    Item 1.2
    
-				
    Item 1.3
    
-				
    Item 1.4
-					
    
-						
    Item 2.1
    
-						
    Item 2.2
    
-						
    Item 2.3
    
-						
    Item 2.4
    
-					
    
-				
    
-				
    Item 1.5
    
-			
    
-			
    
-
    // Loop through each nested sortable element
+					
    
+
+					
    
+						
    Nested Sortables Example
    
+						
    NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true. 
    It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg. 0.65).
    
+						
    
+							
    Item 1.1
+								
    
+									
    Item 2.1
    
+									
    Item 2.2
+										
    
+											
    Item 3.1
    
+											
    Item 3.2
    
+											
    Item 3.3
    
+											
    Item 3.4
    
+										
    
+									
    
+									
    Item 2.3
    
+									
    Item 2.4
    
+								
    
+							
    
+							
    Item 1.2
    
+							
    Item 1.3
    
+							
    Item 1.4
+								
    
+									
    Item 2.1
    
+									
    Item 2.2
    
+									
    Item 2.3
    
+									
    Item 2.4
    
+								
    
+							
    
+							
    Item 1.5
    
+						
    
+						
    // Loop through each nested sortable element
 for (var i = 0; i < nestedSortables.length; i++) {
 	new Sortable(nestedSortables[i], {
 		group: 'nested',
@@ -343,111 +328,116 @@ 
    Nested Sortables Example
    
 		swapThreshold: 0.65
 	});
 }
    
-			
    
-		
    
-
-		
    
-			
    Plugins
    
-		
    
-		
    
+					
    
 
-		
    
-			
    MultiDrag
    
-			
    The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-			
    
-
    new Sortable(multiDragDemo, {
+					
    Plugins
    
+					
    
+						
    MultiDrag
    
+						
    The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Item 4
    
+							
    Item 5
    
+							
    Item 6
    
+						
    
+						
    new Sortable(multiDragDemo, {
 	multiDrag: true,
 	selectedClass: 'selected',
 	fallbackTolerance: 3, // So that we can select items on mobile
 	animation: 150
 });
    
-			
    
-		
    
-		
    
-
-		
    
-			
    Swap
    
-			
    The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.
    
-			
    
-				
    Item 1
    
-				
    Item 2
    
-				
    Item 3
    
-				
    Item 4
    
-				
    Item 5
    
-				
    Item 6
    
-			
    
-			
    
-
    new Sortable(swapDemo, {
+					
    
+					
    
+
+					
    
+						
    Swap
    
+						
    The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.
    
+						
    
+							
    Item 1
    
+							
    Item 2
    
+							
    Item 3
    
+							
    Item 4
    
+							
    Item 5
    
+							
    Item 6
    
+						
    
+						
    new Sortable(swapDemo, {
 	swap: true, // Enable swap plugin
 	swapClass: 'highlight', // The class applied to the hovered swap item
 	animation: 150
 });
    
+					
    
+				
    
 			
    
 		
    
-		
    
-
-
-
-		
    
-
-		
    
-			
    Comparisons
    
-		
    
-		
    
-
-
-		
    
-			
    jQuery-UI
    
-			
-
-			
    Dragula
    
-			
-		
    
 
-		
    
-
-		
    
-			
    Framework Support
    
+		
    Comparisons
    
+		
    
+			
    
+				
    jQuery-UI
    
+				
+			
    
+			
    
+				
    Dragula
    
+				
+			
    
 		
    
-		
    
-
-		
    
 
-			
    Vue
    
-			
    Vue.Draggable
    
-
-			
    React
    
-			
    react-sortablejs
    
-
-			
    Angular
    
-			
    ngx-sortablejs
    
-
-			
    jQuery
    
-			
    jquery-sortablejs
    
-
-			
    Knockout
    
-			
    knockout-sortablejs
    
-
-			
    Meteor
    
-			
    meteor-sortablejs
    
-
-			
    Polymer
    
-			
    polymer-sortablejs
    
-
-			
    Ember
    
-			
    ember-sortablejs
    
+		
    Framework Support
    
+		
    
+			
    
+				
+				
    Vue
    
+				Vue.Draggable
+			
    
+			
    
+				
+				
    React
    
+				react-sortablejs
+			
    
+			
    
+				
+				
    Angular
    
+				ngx-sortablejs
+			
    
+			
    
+				
+				
    jQuery
    
+				jquery-sortablejs
+			
    
+			
    
+				
+				
    Knockout
    
+				knockout-sortablejs
+			
    
+			
    
+				
+				
    Meteor
    
+				meteor-sortablejs
+			
    
+			
    
+				
+				
    Polymer
    
+				polymer-sortablejs
+			
    
+			
    
+				
+				
    Ember
    
+				ember-sortablejs
+			
    
 		
    
-
 	
    
-
+	
+		
+	  	
    Back to top
    
+	    
+	
 
 	
 	
@@ -457,4 +447,4 @@ 
    
 
-
+
\ No newline at end of file

From ea150f35226691ea78295616aefb0dd1eabf4182 Mon Sep 17 00:00:00 2001
From: code-fw 
Date: Thu, 8 Aug 2024 16:30:48 -0600
Subject: [PATCH 2/7] Changes on css styles

---
 st/prettify/prettify.css |   3 +-
 st/theme.css             | 422 ++++++++++++++++++++++++---------------
 2 files changed, 258 insertions(+), 167 deletions(-)

diff --git a/st/prettify/prettify.css b/st/prettify/prettify.css
index e6fe342f2..5ac90fa1b 100644
--- a/st/prettify/prettify.css
+++ b/st/prettify/prettify.css
@@ -1 +1,2 @@
-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file
+.pln{color:#fff !important}@media screen{.str{color:#60f786 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important; font-style: oblique !important;}.typ{color:#0079bf !important}.lit{color:#ff8622 !important;}.clo,.opn,.pun{color:#a93ff0 !important}.tag{color:#29e9df !important}.atn{color:#0079bf !important}.atv{color:#60f786 !important}.dec,.var{color:#0079bf !important}.fun{color: #da1747 !important;}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#60f786 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important;font-style:oblique !important;}.typ{color:#2a009c !important}.lit{color:#ff8622 !important;}
+.clo,.opn,.pun{color:#a93ff0 !important}.tag{color:#29e9df !important}.atn{color:#2a009c !important}.atv{color:#60f786 !important}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#000 !important}
\ No newline at end of file
diff --git a/st/theme.css b/st/theme.css
index 87b24343a..4c86c56bc 100644
--- a/st/theme.css
+++ b/st/theme.css
@@ -1,93 +1,208 @@
-body {
-	font-family: Helvetica Neue, Helvetica, Arial;
-	background: rgb(244,215,201); /* Old browsers */
-	background: -moz-linear-gradient(top, rgb(244,215,201) 0%, rgb(244,226,201) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	margin-bottom: 100px;
+/* Jost Font */
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
+
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
-.header {
-	margin-top: 30px;
+:root{
+	--font-primary: "Jost", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
+	--black: #000;
+	--white: #fff;
+	--primary-3: #009bf5;
+	--primary-5: #0079bf;
+	--secondary-2: #fc81b1;
+	--secondary-3: #f3648c;
+	--secondary-4: #e74569;
+	--secondary-5: #da1747;
+	--light-1: #fcf8f9;
+	--light-5: #e8e4e5;
+	--light-9: #d4d0d1;
+	--gray-1: #8c8c8c;
+	--gray-4: #6e6e6e;
+	--gray-5: #636363;
+	--gray-6: #595959;
+	--gray-8: #454545;
+	--gray-9: #3b3b3b;
+	--dark-1: #1b1e21;
+	--dark-3: #171a1c;
+	--dark-5: #131517;
 }
 
-.header h1 {
-	margin-top: 10px;
+body{
+	min-height: 100vh;
+	font-family: var(--font-primary);
+	color: var(--light-1);
+	background: var(--dark-5);
 }
 
-h4 {
-	padding-bottom: 10px;
+::-webkit-scrollbar{
+	width: 9px;
 }
 
-.prettyprinted {
-	margin-top: 5px;
-	border-top: none !important;
-	border-bottom: none !important;
-	border-right: none !important;
-	border-left: 1px solid rgba(0,0,0,.1) !important;
-	padding-left: 15px !important;
-	word-wrap: break-word !important;
-	overflow: default !important;
-	text-overflow: default !important;
+::-webkit-scrollbar-thumb{
+	background: var(--gray-6);
+	border-radius: 9px;
 }
 
-.tinted {
-	background-color: #fff6b2;
+::-webkit-scrollbar-track{
+	background: var(--dark-5);
 }
 
-.handle {
-	cursor: grab;
+h1, h2, h3, h4, h5, h6{
+	font-weight: 700;
+	line-height: 1.15;
+	letter-spacing: -0.00022em;
+}
+
+h1{font-size: 2.986rem;}
+h2{font-size: 2.488rem;}
+h3{font-size: 2.074rem;}
+h4{font-size: 1.728rem;}
+h5{font-size: 1.44rem;}
+h6{font-size: 1.2rem;}
+p{font-size: 1rem;font-weight: 500;}
+strong{font-weight: 700;}
+small{font-size: 0.833rem;}
+
+a{
+	color: var(--gray-1);
+	font-weight: 450;
+	text-decoration: none;
+	transition: .25s ease-in-out;
+
+	&:hover{
+		color: var(--white);
+	}
+
+	&.link{
+		color: var(--primary-3);
+
+		&:hover{
+			color: var(--primary-5);
+		}
+	}
+}
+
+code{
+	color: var(--secondary-3);
+	font-size: 1.009rem;
+}
+
+span.destac{
+	color: var(--secondary-4);
 }
 
-code {
-	color: #606;
+.text-subtitle{
+	color: var(--primary-5);
 }
 
-.toc {
-	background-color: rgb(255,255,255,0.5);
-	border: solid #444 1px;
-	padding: 20px;
-	margin-left: auto;
-	margin-right: auto;
+.text-secondary{
+	color: var(--light-5) !important;
+}
+
+.bg-danger{
+	background: var(--secondary-5) !important;
+}
+
+.toc{
+	background: var(--dark-1);
 	list-style: none;
+	text-align: left;
+	border-radius: 9px;
+	height: fit-content;
 }
 
-.toc h5 {
-	margin-top: 8px;
+.documentation{
+	width: 100%;
+	height: 100%;
 }
 
-.list-group-item:hover {
-	z-index: 0;
+.list-group-item{
+	color: var(--white);
+	letter-spacing: 1px;
+	background: var(--dark-3);
+	border: 1px solid var(--gray-6);
+
+	&:first-child{
+		border-radius: 9px 9px 0 0;
+	}
+
+	&:last-child{
+		border-radius: 0 0 9px 9px;
+	}
+
+	&:hover{
+		z-index: 0;
+	}
 }
 
-.input-section {
-	background-color: rgb(255,255,255,0.5);
-	padding: 20px;
+.nested-1, .nested-2, .nested-3{
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding-top: .45rem;
+	padding-bottom: .45rem;
 }
 
-.square-section {
-	background-color: rgb(255,255,255,0.5);
+.nested-1 {
+	background-color: var(--dark-3);
+}
+
+.nested-2 {
+	background-color: var(--gray-9);
+}
+
+.nested-3 {
+	background-color: var(--gray-8);
+}
+
+.tinted {
+	background-color: var(--primary-5);
 }
 
+.handle {
+	cursor: grab;
+}
+
+.prettyprint{
+	background-color: var(--dark-1);
+	overflow-x: auto;
+	scrollbar-gutter: auto;
+	padding: 1rem 1.8rem !important;
+	border-radius: 18px;
+}
+
+.square-section {
+	background: var(--dark-3);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 18px;
+	padding: 2rem;
+	gap: 2rem;
+}
 
 .square {
-	width: 20vw;
-	height: 20vw;
-	background-color: #00a2ff;
-	margin-top: 2vw;
-	margin-left: 2vw;
+	width: 270px;
+	height: 270px;
+	background: var(--secondary-5);
 	display: inline-block;
 	position: relative;
+	border-radius: 9px;
+	overflow: hidden;
 }
 
 .swap-threshold-indicator {
-	background-color: #0079bf;
+	background: var(--primary-5);
 	height: 100%;
 	display: inline-block;
 }
 
 .inverted-swap-threshold-indicator {
-	background-color: #0079bf;
+	background-color: var(--primary-5);
 	height: 100%;
 	position: absolute;
 }
@@ -109,146 +224,121 @@ code {
 	top: 50%;
 	left: 50%;
     transform: translate(-50%, -50%);
-	color: white;
+	color: var(--white);
 }
 
 .grid-square {
 	width: 100px;
 	height: 100px;
 	display: inline-block;
-	background-color: #fff;
-	border: solid 1px rgb(0,0,0,0.2);
-	padding: 10px;
+	background: linear-gradient(45deg, var(--secondary-2), var(--secondary-3), var(--secondary-4), var(--secondary-5));
+	border-radius: 9px;
+	padding: .5rem;
 	margin: 12px;
+	cursor: grab;
 }
 
-.nested-sortable, .nested-1, .nested-2, .nested-3 {
-	margin-top: 5px;
-}
+.comparisons {
+	background-color: var(--dark-1);
+	border-radius: 18px;
+	padding: 2rem;
 
-.nested-1 {
-	background-color: #e6e6e6;
+	iframe{
+		width: 100%;
+		height: 290px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9px;
+		overflow: hidden;
+	}
 }
 
-.nested-2 {
-	background-color: #cccccc;
-}
+.frameworks{
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
 
-.nested-3 {
-	background-color: #b3b3b3;
-}
+	.card-framework{
+		background: var(--dark-3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 1.8rem;
+		border-radius: 18px;
 
-.frameworks {
-	background-color: rgb(255,255,255,0.5);
-	border: solid rgb(0,0,0,0.3) 1px;
-	padding: 20px;
+		i{
+			font-size: 4.5rem;
+		}
+	}
 }
 
-.frameworks h3 {
+.prettyprinted {
 	margin-top: 5px;
-}
-
-input[type=range] {
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 3.8px 0;
-}
-input[type=range]:focus {
-  outline: none;
-}
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: rgba(48, 113, 169, 0);
-  border-radius: 1.3px;
-  border: 0.2px solid #010101;
-}
-input[type=range]::-webkit-slider-thumb {
-  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
-  border: 1.3px solid rgba(0, 0, 0, 0.7);
-  height: 16px;
-  width: 16px;
-  border-radius: 49px;
-  background: #ffffff;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -4px;
-}
-input[type=range]:focus::-webkit-slider-runnable-track {
-  background: rgba(54, 126, 189, 0);
-}
-input[type=range]::-moz-range-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: rgba(48, 113, 169, 0);
-  border-radius: 1.3px;
-  border: 0.2px solid #010101;
-}
-input[type=range]::-moz-range-thumb {
-  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
-  border: 1.3px solid rgba(0, 0, 0, 0.7);
-  height: 16px;
-  width: 16px;
-  border-radius: 49px;
-  background: #ffffff;
-  cursor: pointer;
-}
-input[type=range]::-ms-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-input[type=range]::-ms-fill-lower {
-  background: rgba(42, 100, 149, 0);
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-input[type=range]::-ms-fill-upper {
-  background: rgba(48, 113, 169, 0);
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-input[type=range]::-ms-thumb {
-  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
-  border: 1.3px solid rgba(0, 0, 0, 0.7);
-  height: 16px;
-  width: 16px;
-  border-radius: 49px;
-  background: #ffffff;
-  cursor: pointer;
-  height: 8.4px;
-}
-input[type=range]:focus::-ms-fill-lower {
-  background: rgba(48, 113, 169, 0);
-}
-input[type=range]:focus::-ms-fill-upper {
-  background: rgba(54, 126, 189, 0);
+	border-top: none !important;
+	border-bottom: none !important;
+	border-right: none !important;
+	border-left: 1px solid rgba(0,0,0,.1) !important;
+	padding-left: 15px !important;
+	word-wrap: break-word !important;
+	overflow: default !important;
+	text-overflow: default !important;
 }
 
 .blue-background-class {
-	background-color: #C8EBFB;
-}
-
-.col {
-	padding-right: 0;
-	margin-right: 15px;
+	background-color: var(--primary-3);
 }
 
 .selected {
-	background-color: #f9c7c8;
-	border: solid red 1px !important;
+	background: var(--primary-5);
+	border: 1px solid var(--light-5) !important;
 	z-index: 1 !important;
 }
 
 .highlight {
-	background-color: #B7F8C7;
+	background-color: var(--secondary-2);
 }
+
+.btn-top {
+	width: 45px;
+	height: 45px;
+	background: linear-gradient(var(--secondary-5), var(--primary-5));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 27px;
+	cursor: pointer;
+	position: fixed;
+	bottom: 2rem;
+	right: 1.27rem;
+	border: none;
+
+	.text {
+		font-size: 0.72em;
+		width: 100px;
+		position: absolute;
+		color: var(--light-1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: -36px;
+		opacity: 0;
+		transition-duration: .7s;
+	}
+
+	&:hover{
+		.text {
+			opacity: 1;
+			transition-duration: .7s;
+		}
+
+		.arrow {
+			animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		}
+	}
+}
+  
+@keyframes slide-in-bottom {
+	0%{transform: translateY(10px);opacity: 0;}
+	100%{transform: translateY(0);opacity: 1;}
+}
\ No newline at end of file

From f91938c32803cd9fdc608d5b252d7d3767f3ef1c Mon Sep 17 00:00:00 2001
From: code-fw 
Date: Thu, 8 Aug 2024 17:54:08 -0600
Subject: [PATCH 3/7] Structure HTML better for accesibility

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index eecaa438c..e9138feb2 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 	
    
 		
    
-			
+			SortableJS
 			
    SortableJS
    
 			
    JavaScript library for reorderable drag-and-drop lists
    
 		
    

From 9c00cb51a67dac6083745918d6cb9584d5bd355d Mon Sep 17 00:00:00 2001
From: code-fw 
Date: Thu, 8 Aug 2024 17:54:53 -0600
Subject: [PATCH 4/7] Style estructure and new variables

---
 st/theme.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/st/theme.css b/st/theme.css
index 4c86c56bc..3e3c0e02e 100644
--- a/st/theme.css
+++ b/st/theme.css
@@ -87,8 +87,9 @@ a{
 }
 
 code{
-	color: var(--secondary-3);
+	color: var(--secondary-2);
 	font-size: 1.009rem;
+	font-weight: 518;
 }
 
 span.destac{

From 70d997a8b6e85a0f34ee83895199de8d19e81da1 Mon Sep 17 00:00:00 2001
From: code-fw 
Date: Thu, 8 Aug 2024 17:55:16 -0600
Subject: [PATCH 5/7] Better colors for the console example

---
 st/prettify/prettify.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/st/prettify/prettify.css b/st/prettify/prettify.css
index 5ac90fa1b..e16400f26 100644
--- a/st/prettify/prettify.css
+++ b/st/prettify/prettify.css
@@ -1,2 +1,2 @@
-.pln{color:#fff !important}@media screen{.str{color:#60f786 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important; font-style: oblique !important;}.typ{color:#0079bf !important}.lit{color:#ff8622 !important;}.clo,.opn,.pun{color:#a93ff0 !important}.tag{color:#29e9df !important}.atn{color:#0079bf !important}.atv{color:#60f786 !important}.dec,.var{color:#0079bf !important}.fun{color: #da1747 !important;}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#60f786 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important;font-style:oblique !important;}.typ{color:#2a009c !important}.lit{color:#ff8622 !important;}
-.clo,.opn,.pun{color:#a93ff0 !important}.tag{color:#29e9df !important}.atn{color:#2a009c !important}.atv{color:#60f786 !important}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#000 !important}
\ No newline at end of file
+.pln{color:#fff !important}@media screen{.str{color:#6ef369 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important; font-style: oblique !important;}.typ{color:#009bf5 !important}.lit{color:#ff8622 !important;}.clo,.opn,.pun{color:#bf69f8 !important}.tag{color:#29e9df !important}.atn{color:#009bf5 !important}.atv{color:#6ef369 !important}.dec,.var{color:#009bf5 !important}.fun{color: #da1747 !important;}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#6ef369 !important}.kwd{color:#29e9df !important}.com{color:#636363 !important;font-style:oblique !important;}.typ{color:#0079bf !important}.lit{color:#ff8622 !important;}
+.clo,.opn,.pun{color:#bf69f8 !important}.tag{color:#29e9df !important}.atn{color:#0079bf !important}.atv{color:#6ef369 !important}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#000 !important}
\ No newline at end of file

From 0c92781dd2016d4006c2590dad271c0cb402ae9a Mon Sep 17 00:00:00 2001
From: esflowers 
Date: Thu, 23 Jan 2025 22:20:28 -0600
Subject: [PATCH 6/7] Edit font, and bg grid item

---
 st/theme.css | 49 +++++--------------------------------------------
 1 file changed, 5 insertions(+), 44 deletions(-)

diff --git a/st/theme.css b/st/theme.css
index 3e3c0e02e..15ee477c0 100644
--- a/st/theme.css
+++ b/st/theme.css
@@ -1,5 +1,5 @@
 /* Jost Font */
-@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Jost');
 
 *{
 	margin: 0;
@@ -8,7 +8,7 @@
 }
 
 :root{
-	--font-primary: "Jost", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
+	--font-primary: "Jost", system-ui, "Segoe UI", Arial, sans-serif;
 	--black: #000;
 	--white: #fff;
 	--primary-3: #009bf5;
@@ -51,13 +51,13 @@ body{
 	background: var(--dark-5);
 }
 
-h1, h2, h3, h4, h5, h6{
+h2, h3, h4, h5, h6{
 	font-weight: 700;
 	line-height: 1.15;
 	letter-spacing: -0.00022em;
 }
 
-h1{font-size: 2.986rem;}
+h1{font-size: 2.986rem; font-weight: 900;}
 h2{font-size: 2.488rem;}
 h3{font-size: 2.074rem;}
 h4{font-size: 1.728rem;}
@@ -232,7 +232,7 @@ span.destac{
 	width: 100px;
 	height: 100px;
 	display: inline-block;
-	background: linear-gradient(45deg, var(--secondary-2), var(--secondary-3), var(--secondary-4), var(--secondary-5));
+	background: var(--secondary-5);
 	border-radius: 9px;
 	padding: .5rem;
 	margin: 12px;
@@ -299,45 +299,6 @@ span.destac{
 .highlight {
 	background-color: var(--secondary-2);
 }
-
-.btn-top {
-	width: 45px;
-	height: 45px;
-	background: linear-gradient(var(--secondary-5), var(--primary-5));
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 27px;
-	cursor: pointer;
-	position: fixed;
-	bottom: 2rem;
-	right: 1.27rem;
-	border: none;
-
-	.text {
-		font-size: 0.72em;
-		width: 100px;
-		position: absolute;
-		color: var(--light-1);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		bottom: -36px;
-		opacity: 0;
-		transition-duration: .7s;
-	}
-
-	&:hover{
-		.text {
-			opacity: 1;
-			transition-duration: .7s;
-		}
-
-		.arrow {
-			animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-		}
-	}
-}
   
 @keyframes slide-in-bottom {
 	0%{transform: translateY(10px);opacity: 0;}

From 369fcceffbf7bf463ddea563db75298242ecab1f Mon Sep 17 00:00:00 2001
From: esflowers 
Date: Thu, 23 Jan 2025 22:20:45 -0600
Subject: [PATCH 7/7] Add position sticky to menu

---
 index.html | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index e9138feb2..7aa39ca4b 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 	
 	
 
-
+
 	    Fork me on GitHub
 
 	
    
@@ -26,7 +26,7 @@ 
    JavaScript library for reorderable 
 
 		
    
-			
    
+			
    
 				
    Features
    
 				
  • Simple list
    • 
 				
  • Shared lists
    • 
@@ -428,10 +428,7 @@ 
    Ember
    
 			
    
 		
    
 	
    
-	
-		
-	  	
    Back to top
    
-	    
+