fix!: rename alignment classes to ns-c to prevent conflict with unocss

Author: gureckis

layoutHelper.ts

@@ -34,29 +34,29 @@ export function handleBackground(background?: string, dim = false): CSSPropertie
 export function compute_alignment(val) {
   switch (val) {
     case 'ct':
-      return 'center top'
+      return 'ns-c-center ns-c-top'
     case 'cm':
-      return 'center middle'
+      return 'ns-c-center ns-c-middle'
     case 'cb':
-      return 'center bottom'
+      return 'ns-c-center ns-c-bottom'
     case 'lt':
-      return 'left top'
+      return 'ns-c-left ns-c-top'
     case 'lm':
-      return 'left middle'
+      return 'ns-c-left ns-c-middle'
     case 'lb':
-      return 'left bottom'
+      return 'ns-c-left ns-c-bottom'
     case 'rt':
-      return 'right top'
+      return 'ns-c-right ns-c-top'
     case 'rm':
-      return 'right middle'
+      return 'ns-c-right ns-c-middle'
     case 'rb':
-      return 'right bottom'
+      return 'ns-c-right ns-c-bottom'
     case 'c':
-      return 'center top'
+      return 'ns-c-center ns-c-top'
     case 'l':
-      return 'left top'
+      return 'ns-c-left ns-c-top'
     case 'r':
-      return 'right top'
+      return 'ns-c-right ns-c-top'
     default:
       return 'error'
   }

layouts/side-title.vue

@@ -50,7 +50,7 @@ const colorscheme = computed(() => {
 </script>
 <template>
   <div v-if="side == 'error' || colwidth == 'error'" class="slidev-layout default error">
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are three parameters: <code>color</code>, <code>columns</code> and <code>align</code>. Currently:

layouts/top-title-two-cols.vue

@@ -32,7 +32,7 @@ const colorscheme = computed(() => {
     v-if="colwidth == 'error' || alignment.t == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are three parameters: <code>columns</code>, <code>align</code>, and <code>color</code>. Currently:

layouts/top-title.vue

@@ -23,7 +23,7 @@ const colorscheme = computed(() => {
 </script>
 <template>
   <div v-if="alignment == 'error'" class="slidev-layout default error">
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are two parameters: <code>color</code> <code>align</code>. Currently:

layouts/two-cols-title.vue

@@ -54,7 +54,7 @@ const flexclass = computed(() => {
     v-if="colwidth == 'error' || alignment.t == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are four parameters: <code>columns</code>, <code>align</code>, <code>color</code>, and

layouts/two-cols.vue

@@ -35,7 +35,7 @@ const colorscheme = computed(() => {
     v-if="colwidth == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are two parameters: <code>columns</code> and <code>align</code>. Currently:

styles/base.css

@@ -129,50 +129,6 @@
   margin-top: 1.5em;
 }
 
-/* columns stuff */
-.warning {
-  color: red;
-}
-.error {
-  font-size: 0.9em;
-}
-
-.left {
-  justify-content: left; /* Left align the content */
-  text-align: left;
-  align-items: start;
-}
-
-.center {
-  justify-content: center; /* Horizontally center the content */
-  text-align: center;
-  align-items: center;
-}
-
-.right {
-  justify-content: right; /* Right align the content */
-  text-align: right;
-  align-items: end;
-}
-
-.top {
-  margin-top: 0;
-  margin-bottom: auto;
-}
-.middle {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-.bottom {
-  margin-top: auto;
-  margin-bottom: 0;
-}
-
-/* a new tight bullet list */
-/* .tight {
-  margin-top: 1em;
-} */
-
 .bwimg {
   filter: grayscale(100%) contrast(150%) brightness(120%);
   display: inline;

styles/neversink-c.css

@@ -45,6 +45,46 @@
 
 
 */
+
+/* columns stuff */
+.ns-c-warning {
+  color: red;
+}
+.ns-c-error {
+  font-size: 0.9em;
+}
+
+.ns-c-left {
+  justify-content: left; /* Left align the content */
+  text-align: left;
+  align-items: start;
+}
+
+.ns-c-center {
+  justify-content: center; /* Horizontally center the content */
+  text-align: center;
+  align-items: center;
+}
+
+.ns-c-right {
+  justify-content: right; /* Right align the content */
+  text-align: right;
+  align-items: end;
+}
+
+.ns-c-top {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+.ns-c-middle {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.ns-c-bottom {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
 /* adds a modifier class which reduces the space between bullets */
 .ns-c-tight li {
   line-height: normal;