update

zumerlab · Jul 20, 2024 · f065823 · f065823
1 parent dc9b4ad
commit f065823
Show file tree

Hide file tree

Showing 10 changed files with 325 additions and 12 deletions.
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/assets/orbit-logo.svg b/assets/orbit-logo.svg
diff --git a/examples/logo.html b/examples/logo.html
@@ -0,0 +1,116 @@
+<!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="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../assets/css/orbit.min.css" type="text/css" defer />
+  <script type="module" src="../src/orbit.js" defer></script>
+  <title>Orbit</title>
+  <style>
+    .orbit-5, .orbit-6 {
+      border: 1px solid rgba(0, 0, 0, 0.425) !important;
+    }
+    .orbit-4.inner {
+      border: 1px dashed rgba(0, 0, 0, 0.425) !important;
+    }
+    .orbit-3, .text {
+      border: 0px dashed rgba(0, 0, 0, 0.425) !important;
+    }
+    .satellite {
+      border: 1px solid white;
+      background-color: white;
+    }
+    .orbit-5 > .shape {
+      border: 1px solid white;
+      outline: 10px solid white;
+      background-color: white;
+    }
+
+    .big {
+      border: 16px solid black;
+      background-color: white;
+    }
+    .circle, .box {
+      border: 1px solid black !important;
+    }
+
+    .text {
+      font-family: Roboto, 'Open Sans', sans-serif;
+      font-size: 34px;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div class="orbit-zone">
+    <div class="orbit-6"></div>
+    <div class="orbit-5 ccw range-240 fit-range">
+      <div class="satellite shape">
+        <div class="capsule ">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4">
+            <path d="M 0 0 L 4 0 L 2 4 z" stroke="black" stroke-width="0.2" fill="none"/>
+          </svg>
+        </div>
+
+    </div>
+      <div class="satellite shape circle"></div>
+      <div class="satellite shape box"></div>
+      <div class="satellite shape circle"></div>
+    </div>
+    <div class="orbit-6 text">
+      <div class="satellite  angle-90 grow-7x">
+      </div>
+    </div>
+    <div class="orbit-4 inner">
+
+    </div>
+    <div class="orbit-5 text">
+      <div class="satellite  angle-90 ">
+        r
+      </div>
+    </div>
+
+    <div class="orbit-6 text">
+      <div class="satellite  angle-90 ">
+        b
+      </div>
+    </div>
+    <div class="orbit-7 text">
+      <div class="satellite  angle-90 ">
+        i
+      </div>
+    </div>
+    <div class="orbit-8 text">
+      <div class="satellite  angle-90 ">
+        t
+      </div>
+    </div>
+    <div class="orbit-4 text">
+      <div class="satellite  angle-90 ">
+        O
+      </div>
+    </div>
+    <div class="orbit-0 gooey-fx ">
+      <div class="satellite grow-6x big">
+        <div class="orbit-zone">
+          <div class="orbit-3 reduce-10">
+            <div class="satellite big quarter-outer-orbit angle-299" style="--o-size-ratio: 2.5;"></div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+
+  </script>
+</body>
+
+</html>
diff --git a/examples/watch.html b/examples/watch.html
@@ -8,6 +8,10 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&display=swap" rel="stylesheet">
+  <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"
+>
   <link rel="stylesheet" href="../assets/css/orbit.min.css" type="text/css" defer />
   <script type="module" src="../src/orbit.js" defer></script>
   <title>Orbit</title>
@@ -593,6 +597,7 @@
       </div>
     </div>
   </div>
+
   <!-- <script type="module" defer>
     import {Orbit} from '../src/js/orbit-resize.js'
     Orbit.resize('body')

diff --git a/src/scss/_color-theme.scss b/src/scss/_color-theme.scss
@@ -91,4 +91,177 @@
   --o-gray-dark: color-mix(in oklab, var(--o-gray), black 20%);
   --o-gray-darker: color-mix(in oklab, var(--o-gray), black 40%);
   --o-gray-black: color-mix(in oklab, var(--o-gray), black 78%);
+
+   /* Primary Colors */
+   --primary-color: #fffffe; /* Main primary color, here for overall bg */
+
+   /* Secondary Colors */
+   --secondary-color: #90b4ce; /* Secondary button, link color */
+   --tertiary-color: #d8eefe; /* Main primary color, here for overall bg */
+
+   /* Accent Colors */
+   --accent-color: #ef4565; /* Alerts, notifications, call-to-action */
+
+   /* Highlight Colors */
+   --highlight-color: #3da9fc; /* Highlighted elements, important details */
+
+   /* Stroke Colors */
+   --border-color: #094067; /* Borders, outlines, separators, titles */
+
+   /* Neutral Colors */
+   --dark-color: #5f6c7b; /* Used for dark text, icons */
+
+   --light-color: var(--primary-color); /* Used for light backgrounds, contrasts */
+
+   /* light theme regular use for pages */
+
+   --background: var(--primary-color);
+
+   --headline: var(--border-color);
+
+   --dark-text: var(--dark-color);
+
+   --light-text: var(--light-color);
+
+   --button: var(--highlight-color);
+
+   /* dark section theme regular use for pages */
+
+   --background: var(--tertiary-color);
+
+   --card-background: var(--primary-color);
+
+   --headline: var(--border-color);
+
+   --dark-text: var(--dark-color);
+
+   --light-text: var(--light-color);
+
+   --button: var(--highlight-color);
+
+   /* light section theme regular use for pages */
+
+   --background: var(--primary-color);
+
+   --card-background: var(--border-color);
+
+   --headline: var(--border-color);
+
+   --dark-text: var(--dark-color);
+
+   --light-text: var(--light-color);
+
+   --button: var(--highlight-color);
+
+  /* 
+sections
+
+This sections hues
+Click to copy the hex code to your clipboard
+Elements
+Background
+#d8eefe
+Headline
+#094067
+Sub headline
+#5f6c7b
+Card background
+#fffffe
+Card heading
+#094067
+Card paragraph
+#5f6c7b
+Icons
+Stroke
+#094067
+Main
+#fffffe
+Highlight
+#3da9fc
+Secondary
+#90b4ce
+Tertiary
+#ef4565
+
+
+cards
+
+This sections hues
+Click to copy the hex code to your clipboard
+Background
+#fffffe
+Headline
+#094067
+Paragraph
+#5f6c7b
+Card background
+#094067
+Card headline
+#fffffe
+Card paragraph
+#5f6c7b
+Card tag background
+#3da9fc
+Card tag text
+#fffffe
+Card highlight
+#ef4565
+
+This sections hues
+Click to copy the hex code to your clipboard
+Elements
+Background
+#d8eefe
+Headline
+#094067
+Paragraph
+#5f6c7b
+Link
+#ef4565
+Card backgroud
+#fffffe
+Card headline
+#094067
+Card paragraph
+#5f6c7b
+Newsletter
+Background
+#ef4565
+Form input
+#fffffe
+Label & placeholder
+#094067
+Form button
+#ef4565
+Form button text
+#fffffe
+
+footer
+
+This sections hues
+Click to copy the hex code to your clipboard
+Elements
+Background
+#fffffe
+Headline
+#094067
+Paragraph
+#5f6c7b
+Links
+#3da9fc
+   */
+
+
+
+
+
+
+
+   /* Background Colors */
+   --background-color: #f8f9fa; /* Overall background */
+   --section-background-color: #ffffff; /* Background for sections */
+
+   /* Text Colors */
+   --text-color: #212529; /* Primary text color */
+   --secondary-text-color: #6c757d; /* Secondary text color */
 }
diff --git a/src/scss/_orbit-class_theme.scss b/src/scss/_orbit-class_theme.scss
@@ -1,6 +1,6 @@
 /* 
   .orbit theme 
 */
-.orbit, [class*='orbit-'] {
+.orbit, [class*='orbit-']:not(.orbit-zone) {
   border: 1px solid #007bff;
 }
diff --git a/src/scss/_settings.scss b/src/scss/_settings.scss
@@ -51,13 +51,13 @@ When start a new Orbit project following css variables are declared:
 /* Orbit basic reset */
 
 .orbit-zone * {
-  *, *::before, *::after {
+  ::before, ::after {
     box-sizing: border-box;
   }
+
+  box-sizing: border-box;
 
-  * {
-    margin: 0;
-  }
+  margin: 0;
 
   input, button, textarea, select {
     font: inherit;
@@ -66,5 +66,9 @@ When start a new Orbit project following css variables are declared:
   p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
   }
+
+  img, picture, video, canvas, svg {
+    max-width: unset;
+  }
 
 }
diff --git a/src/scss/_support.scss b/src/scss/_support.scss
@@ -49,7 +49,8 @@ Orbit incorporates visual cues to identify and warn developers of invalid nested
 
 }
 
-@supports  not (fill: 'context-stroke') {
+@supports  not (fill: context-stroke) {
+
   .orbit-zone {
     border: 3px dotted red!important;
     color: white;

diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
@@ -204,11 +204,11 @@ o-progress.rounded,o-label.rounded {
   --o-linecap: round;
 }
 
-.orbit.gooey-fx, [class*='orbit-'].gooey-fx{
+.gooey-fx{
   filter: url('data:image/svg+xml,\
   <svg xmlns="http://www.w3.org/2000/svg">\
   <filter id="fancy-goo">\
-  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />\
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />\
   <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />\
   <feComposite in="SourceGraphic" in2="goo" operator="atop" />\
   </filter>\