(#360) Styles to Support the Use Cases > Server

README.md

@@ -174,6 +174,7 @@ Choco-theme contains many external libraries in which it depends on for various
 | typeahead.js                  | :heavy_minus_sign: | :clock3:           | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
 | jQuery Validation             | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question:    | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
 | jQuery Validation Unobtrusive | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question:    | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
+| Balance Text                  | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
 
 ### Custom JavaScript and TypeScript
 

getting-started/_package.json

@@ -12,7 +12,7 @@
   },
   "homepage": "https://github.com/chocolatey/chocolatey.org#readme",
   "devDependencies": {
-    "choco-theme": "0.5.14"
+    "choco-theme": "0.5.15"
   },
   "resolutions": {
     "glob-parent": "^6.0.2",

js/init/chocolatey-org.js

@@ -1,5 +1,6 @@
 import { Alert, Button, Carousel, Collapse, Modal, Offcanvas, Tab } from 'bootstrap';
 import { atcb_init } from 'add-to-calendar-button'; // eslint-disable-line camelcase
+import balanceText from 'balance-text';
 import '../lib/prism.min.js';
 import '../chocolatey-alerts.js';
 import '../chocolatey-announcements.js';
@@ -28,3 +29,4 @@ import '../chocolatey-terminal.js';
 import '../chocolatey-theme-toggle.js';
 import '../chocolatey-toggle-fade-show.js';
 atcb_init();
+balanceText();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choco-theme",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "description": "The global theme for Chocolatey Software.",
   "repository": {
     "type": "git",
@@ -35,6 +35,7 @@
     "add-to-calendar-button": "^1.18.8",
     "anchor-js": "^4.3.1",
     "babelify": "^10.0.0",
+    "balance-text": "^3.3.1",
     "bootstrap": "5.2.3",
     "browserify": "^17.0.0",
     "canvas-confetti": "^1.5.1",

scss/_backgrounds-headers.scss

@@ -124,6 +124,14 @@ a.circle.text-bg-theme-contrast:hover {
     background: $primary-opacity-90 !important;
 }
 
+.bg-danger-opacity {
+    background: var(--choco-theme-red-light) !important;
+}
+
+.bg-success-opacity {
+    background: var(--choco-theme-green-light) !important;
+}
+
 .bg-gradient-body-elevation-1 {
     background-image: linear-gradient(-180deg, var(--choco-theme-background), var(--choco-theme-elevation-1));
 }

scss/_terminal.scss

@@ -19,7 +19,7 @@
             font-size: calc(1.325rem + .9vw);
         }
 
-        .terminal-cursor {
+        .terminal-cursor:not(.terminal-sm-cursor) {
             height: calc(1.325rem + .9vw);
         }
     }
@@ -31,7 +31,7 @@
             font-size: calc(1.375rem + 1.5vw);
         }
 
-        .terminal-cursor {
+        .terminal-cursor:not(.terminal-sm-cursor) {
             height: calc(1.375rem + 1.5vw);
         }
     }
@@ -43,7 +43,7 @@
             font-size: 3.4rem;
         }
 
-        .terminal-cursor {
+        .terminal-cursor:not(.terminal-sm-cursor) {
             height: 3.4rem;
         }
     }
@@ -55,7 +55,7 @@
             font-size: 4rem;
         }
 
-        .terminal-cursor {
+        .terminal-cursor:not(.terminal-sm-cursor) {
             height: 4rem;
         }
     }

scss/_text.scss

@@ -53,6 +53,11 @@
     word-break: keep-all;
 }
 
+/* Plugin looks for elements with class named "balance-text" */
+.balance-text {
+    text-wrap: balance;  /* Apply (proposed) CSS style */
+}
+
 .text-shiny {
     --text-shiny-shine: #{$primary};
     --text-shiny-color: var(--choco-theme-text);
@@ -64,11 +69,28 @@
     background-clip: text;
     background-size: 260% auto;
     -webkit-text-fill-color: transparent;
-    animation: text-shine 2.5s ease-out;
+    animation: text-shine 3s ease-out .5s;
 }
 
 @keyframes text-shine {
     to {
         background-position: -200%;
     }
 }
+
+.fade-in {
+    opacity: 0;
+    animation-name: fade-in;
+    animation-duration: .25s;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

scss/_utilities.scss

@@ -138,14 +138,6 @@
 }
 
 /* Borders */
-.border:not(.border-primary),
-.border-bottom,
-.border-top,
-.border-start,
-.border-end {
-    border-color: var(--choco-theme-border) !important;
-}
-
 hr {
     color: var(--choco-theme-border);
     opacity: 1;

scss/variables/_global.scss

@@ -408,6 +408,9 @@ $input-btn-padding-y-sm: 0;
 $input-btn-padding-x-sm: 6px;
 $btn-font-weight: 700;
 
+// Borders
+$border-color:                var(--choco-theme-border);
+
 // Close Button
 $btn-close-bg: none;
 $btn-close-color: var(--choco-theme-contrast);