changes

Author: lbliii

themes/elby/assets/css/core.css

@@ -19,13 +19,13 @@ b {
 
 /* Code */ 
 
-code, pre > * { white-space: pre-wrap;
-}
 
-pre, pre > code {
-    padding: .7em;
-    margin: .7em;
-    letter-spacing: -.07rem;
+code {
+  color: var(--is-code-color);
+  white-space: pre;
+  padding: 2px;
+  margin: 2px;
+  font-weight:  var(--code-text);
 }
 
 
@@ -87,4 +87,4 @@ table > tbody > tr {
 
 ul, ol { padding-inline-start: 1vw; }
 
-ol > li { list-style: decimal inside; }
+:is(ol,ul) > li { margin-left: 1vw; } /* Flexbox Layout System */

themes/elby/assets/css/layout.css

@@ -159,7 +159,15 @@
     overflow-x: scroll;
 }
 
-.slide > * {
+.slide-reverse {
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    scroll-snap-type: x mandatory;
+    overflow-x: scroll;
+}
+
+:is(.slide, .slide-reverse) > * {
     flex-shrink: 0;
     scroll-snap-align: center;
 }
+

themes/elby/assets/css/objects.css

@@ -2,6 +2,21 @@
 
 :is(.content) > :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--xxxlarge-text); }
 
+.content {
+overflow-x: hidden;
+}
+
+.content  img {
+max-width: 100%;
+}
+
+.content  pre { 
+max-width: 100%;
+white-space: pre-wrap;
+padding: 1ch;
+overflow-x: scroll;
+}
+
 /* breadcrumb */
 
 .breadcrumbs {
@@ -46,6 +61,20 @@ button, .button {
     color: inherit;
 }
 
+/* Modals */
+
+.modal { 
+  position: fixed; 
+  z-index: 1; 
+  top: var(--modal-top);
+  bottom: var(--modal-bottom);
+  right: var(--modal-right);
+  left: var(--modal-left);
+  width: 100%; 
+  height: 100%; 
+  overflow-y: scroll; 
+}
+
 /* Images */
 
 .image {
@@ -92,4 +121,67 @@ button, .button {
     float: left;
     margin-left: -1ch;
 
+}
+
+/* Notice Utilities */
+
+
+.attention {
+    background-color: var(--is-attention-color);
+    color: var(--is-attention-text);
+}
+
+.danger {
+  background-color: var(--is-danger-color);
+  color: var(--is-danger-text);
+}
+
+.info {
+  background-color: var(--is-info-color);
+  color: var(--is-info-text);
+}
+
+.note {
+  background-color: var(--is-note-color);
+  color: var(--is-note-text);
+}
+
+.success {
+  background-color: var(--is-success-color);
+  color: var(--is-success-text);
+}
+
+.tip {
+  background-color: var(--is-tip-color);
+  color: var(--is-tip-text);
+}
+
+.warning { 
+  background-color: var(--is-warning-color);
+  color: var(--is-warning-text);
+}
+
+/* Dropdowns */
+
+.dropdown {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  z-index: 1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Tables */
+
+.tableWrapper {
+  overflow-x: auto;
+  max-width: 100%;
 }

themes/elby/assets/css/root.css

@@ -10,6 +10,7 @@
     --xlarge-text: calc(16px + 3vw);
     --xxlarge-text: calc(16px + 4vw);
     --xxxlarge-text: calc(16px + 6vw);  
+    --code-text: var(--small-text);
 
     --spacing-1: 90;
     --spacing-2: 60;
@@ -23,6 +24,24 @@
     --is-text-color-inverted: #ffffff;
     --is-header-text-color: #000000;
     --is-header-text-color-inverted: #ffffff;
+    --is-code-color: var(--is-text-color-inverted);
+
+    --is-attention-color: var(--is-pink);
+    --is-attention-text: var(--is-text-color-inverted);
+    --is-info-color: var(--is-blue);
+    --is-info-text: var(--is-text-color-inverted);
+    --is-note-color: var(--is-yellow);
+    --is-note-text: var(--is-text-color-inverted);
+    --is-success-color: var(--is-green);
+    --is-success-text: var(--is-text-color-inverted);
+    --is-warning-color: var(--is-orange);
+    --is-warning-text: var(--is-text-color-inverted);
+    --is-tip-color: var(--is-purple);
+    --is-tip-text: var(--is-text-color-inverted);
+    --is-danger-color: var(--is-red);
+    --is-danger-text: var(--is-text-color-inverted);
+
+
     --is-shadow-color: var(--is-dark-gray);
     --is-highlight-color: var(--is-purple);
     --is-red: #ff0000;
@@ -61,6 +80,11 @@
     --layer-angle-1: 1deg;
     --layer-angle-2: -1deg;
 
+    --modal-top: 0;
+    --modal-bottom: 0;
+    --modal-left: 0;
+    --modal-right: 0;
+
     --ghoul-1: 10px;
     --ghoul-2: 20px;
     --ghoul-3: 30px;

themes/elby/assets/css/traits.css

@@ -103,6 +103,15 @@
 .pinned-bottom {
     align-self: flex-end;
 }
+
+.pinned-end {
+  float: right;
+}
+
+.pinned-start {
+  float: left;
+}
+
 .stretched {
   display: flex;
   align-self: stretch;
@@ -381,4 +390,17 @@
 
 .fill-h {
     height: max-content;
+}
+
+/* horizontal scroll */
+
+.h-scroll {
+  height: 600px;
+  overflow-y: scroll;
+}
+
+/* absolute */
+
+.absolute {
+  position: absolute;
 }