add more examples

sam-the-programmer · Nov 14, 2021 · ac547a3 · ac547a3
1 parent 6ad0cad
commit ac547a3
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 49 deletions.
diff --git a/CSS/base.css b/CSS/base.css
@@ -9,7 +9,7 @@
 
   --orange1: hsl(27, 92%, 49%);
   --orange2: hsl(37, 92%, 49%);
-  --orange2: hsl(40, 92%, 49%);
+  --orange3: hsl(40, 92%, 49%);
 
   --yellow1: hsl(47, 92%, 49%);
   --yellow2: hsl(57, 92%, 49%);

diff --git a/CSS/bigger.css b/CSS/bigger.css
@@ -3,7 +3,7 @@
 /* Bigger Stylesets */
 .box {
   padding: 3vh;
-  box-shadow: 0 1vh 1vh -1vh hsla(0, 0%, 40%, 0.466);
+  box-shadow: 0 1vh 1vh -1vh hsla(0, 0%, 33%, 0.698);
 }
 
 .nav {
@@ -12,15 +12,13 @@
 
   display: flex;
   justify-content: space-around;
-
-  background-color: var(--red3);
 }
 
 .nav a {
   padding: 3vh;
   width: 100%;
 
-  box-shadow: 0 1vh 1vh -1vh hsla(0, 0%, 40%, 0.466);
+  box-shadow: 0 1vh 1vh -1vh hsla(0, 0%, 33%, 0.698);
 
   background-color: white;
 

diff --git a/CSS/pad.css b/CSS/pad.css
diff --git a/CSS/utils.css b/CSS/utils.css
@@ -6,6 +6,11 @@
 .sticky { position: sticky; position: -webkit-sticky; top: 0; }
 .absolute { position: absolute; }
 
+.lfloat { float: left; }
+.rfloat { float: right; }
+.tfloat { float: top; }
+.bfloat { float: bottom; }
+
 .rounded { border-radius: 3vh; }
 
 /* Overflows */
@@ -32,13 +37,13 @@
 }
 
 /* Text Utils */
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-center { text-align: center; }
+.t-left { text-align: left; }
+.t-right { text-align: right; }
+.t-center { text-align: center; }
 
-.text-left * { text-align: left; }
-.text-right * { text-align: right; }
-.text-center * { text-align: center; }
+.t-left * { text-align: left; }
+.t-right * { text-align: right; }
+.t-center * { text-align: center; }
 
 .bold { font-weight: bold; }
 .light { font-weight: lighter; }
@@ -47,7 +52,7 @@
 .small { font-size: small; }
 .mid { font-size: medium; }
 .big { font-size: large; }
-.x-big { font-size: x-large; }
+.x-big { font-size: xx-large; }
 
 /* Height and Width */
 .full-height { height: 100vh; }

diff --git a/Scripts/pad_margin.go b/Scripts/pad_margin.go
@@ -56,33 +56,32 @@ func gen_pad_margin(output string) string {
 	output += NEWLINE + ".mr-half{margin-right: .5vh;}"
 
 	for i := 0; i < 6; i++ {
-		output += NEWLINE + ".p-" + strconv.Itoa(i) + "{padding: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pb-" + strconv.Itoa(i) + "{padding-bottom: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pt-" + strconv.Itoa(i) + "{padding-top: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pl-" + strconv.Itoa(i) + "{padding-left: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pr-" + strconv.Itoa(i) + "{padding-right: " + strconv.Itoa(i) + "vh;}"
-
-		output += NEWLINE + ".m-" + strconv.Itoa(i) + "{margin: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mb-" + strconv.Itoa(i) + "{margin-bottom: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mt-" + strconv.Itoa(i) + "{margin-top: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".ml-" + strconv.Itoa(i) + "{margin-left: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mr-" + strconv.Itoa(i) + "{margin-right: " + strconv.Itoa(i) + "vh;}"
+		output = _gen(output, 9)
 	}
 
 	for i := 6; i < 20; i = i + 2 {
-		output += NEWLINE + ".p-" + strconv.Itoa(i) + "{padding: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pb-" + strconv.Itoa(i) + "{padding-bottom: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pt-" + strconv.Itoa(i) + "{padding-top: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pl-" + strconv.Itoa(i) + "{padding-left: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".pr-" + strconv.Itoa(i) + "{padding-right: " + strconv.Itoa(i) + "vh;}"
-
-		output += NEWLINE + ".m-" + strconv.Itoa(i) + "{margin: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mb-" + strconv.Itoa(i) + "{margin-bottom: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mt-" + strconv.Itoa(i) + "{margin-top: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".ml-" + strconv.Itoa(i) + "{margin-left: " + strconv.Itoa(i) + "vh;}"
-		output += NEWLINE + ".mr-" + strconv.Itoa(i) + "{margin-right: " + strconv.Itoa(i) + "vh;}"
+		output = _gen(output, i)
 	}
 
+	for i := 50; i < 101; i = i + 10 {
+		output = _gen(output, i)
+	}
+
+	return output
+}
+
+func _gen(output string, i int) string {
+	output += NEWLINE + ".p-" + strconv.Itoa(i) + "{padding: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".pb-" + strconv.Itoa(i) + "{padding-bottom: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".pt-" + strconv.Itoa(i) + "{padding-top: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".pl-" + strconv.Itoa(i) + "{padding-left: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".pr-" + strconv.Itoa(i) + "{padding-right: " + strconv.Itoa(i) + "vh;}"
+
+	output += NEWLINE + ".m-" + strconv.Itoa(i) + "{margin: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".mb-" + strconv.Itoa(i) + "{margin-bottom: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".mt-" + strconv.Itoa(i) + "{margin-top: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".ml-" + strconv.Itoa(i) + "{margin-left: " + strconv.Itoa(i) + "vh;}"
+	output += NEWLINE + ".mr-" + strconv.Itoa(i) + "{margin-right: " + strconv.Itoa(i) + "vh;}"
 	return output
 }
 

diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
 
     <section>
         <div>
-            <p class="m-2 p-3 text-center">
+            <p class="m-2 p-3 t-center">
                 superCSS is a utility-based CSS framework designed to allow
                 you to create beautiful-looking, infinitely customisable
                 without the time overheads of plain CSS.
@@ -34,16 +34,17 @@
     </section>
 
     <div class="flex row space-around full-width bg-black3 t-white m-0 pb-6">
-            <div class="flex column text-center">
+            <div class="flex column t-center">
                 <h5>Our Site</h5>
                 <a class="small" href="./">Home</a>
                 <a class="small" href="./">Examples</a>
             </div>
-            <div class="flex column text-center">
-                <h5 class="text-center">Our Code</h5>
+            <div class="flex column t-center">
+                <h5 class="t-center">Our Code</h5>
                 <a class="small" href="https://github.com/the-supercss-project">GitHub</a>
+                <a class="small" href="https://github.com/the-supercss-project/superCSS">superCSS Source</a>
             </div>
-            <div class="flex column text-center">
+            <div class="flex column t-center">
                 <h5>Our Inspirations</h5>
                 <a class="small" href="https://tailwindcss.com">TailwindCSS</a>
                 <a class="small" href="https://getbootstrap.com/">Bootstrap</a>

diff --git a/pages/examples/business/index.html b/pages/examples/business/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../../../CSS/super.css">
+    <link rel="shortcut icon" href="../../../SVGs/logo circle.png" type="image/x-icon">
+    <title>superCSS Examples</title>
+</head>
+
+<body class="over-xhide">
+
+    <div class="box">
+        <img src="https://images.unsplash.com/photo-1634097537825-b446635b2f7f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
+            alt="business image from unsplash.com" class="top left absolute full-height">
+        <h1 class="absolute left top x-big ml-12 mt-16 pt-10 t-white">Your Business</h1>
+        <h2 class="absolute top big ml-12 mt-18 pt-18 t-white">Standing out with superCSS</h2>
+    </div>
+
+    <div class="rounded box relative mt-100 p-10 hover-bob">
+        <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore sint facilis non eveniet accusantium officia
+            dicta, eum assumenda quaerat similique voluptas, aspernatur ipsum et. Expedita, praesentium aut eaque minus non
+            ab vero quibusdam, cupiditate nulla id natus asperiores inventore dolores quasi nihil nam minima, corporis
+            architecto obcaecati optio odio. Cumque, rem voluptatibus natus architecto iste at officiis similique laboriosam
+            fuga? Dolores veniam labore eligendi expedita atque, deserunt quia eius, numquam, dolor quis est dolorem
+            architecto deleniti ut delectus ab cupiditate illum vel! Consequuntur doloremque exercitationem eligendi modi
+            blanditiis cupiditate labore ea, sint iste nobis? Iusto ipsum distinctio alias est quod?
+        </p>
+    </div>
+    <hr>
+</body>
+
+</html>
diff --git a/pages/examples/dashboard/index.html b/pages/examples/dashboard/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../../../CSS/super.css">
+    <link rel="shortcut icon" href="../../../SVGs/logo circle.png" type="image/x-icon">
+    <title>superCSS Examples</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/pages/examples/gallery/index.html b/pages/examples/gallery/index.html