feat: md style updates & using sass

stanistan · Jul 4, 2023 · 650deed · 650deed
1 parent 95c6730
commit 650deed
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 50 deletions.
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+
+  .markdown {
+    p {
+      @apply mb-2;
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+
+    h1 {
+      @apply text-2xl font-bold mb-2;
+    }
+
+    h2 {
+      @apply text-xl border-b font-bold mb-2;
+    }
+
+    h3 {
+      @apply text-lg mb-1;
+    }
+
+    h4, h5 {
+      @apply font-bold mb-1;
+    }
+
+    hr {
+      @apply my-2;
+    }
+
+    a {
+      @apply text-blue-500 underline;
+
+      &:hover {
+        @apply text-blue-400;
+      }
+    }
+
+    code {
+      @apply border rounded bg-gray-50 p-1;
+    }
+
+    ul {
+      @apply list-disc list-outside ml-3;
+    }
+
+    ol {
+      @apply list-decimal list-outside ml-3;
+    }
+
+  }
+
+}
diff --git a/frontend/components/SlideCard.vue b/frontend/components/SlideCard.vue
@@ -10,7 +10,7 @@
         </div>
       </template>
     </ComponentCard>
-    <div class="max-w-2xl mx-auto text-center">
+    <div class="max-w-[80%] mx-auto markdown">
       <MarkdownHTML>{{ commentBody }}</MarkdownHTML>
     </div>
   </div>

diff --git a/frontend/components/SlideShow.vue b/frontend/components/SlideShow.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full" @keyup.left="left">
     <div class="flex-grow" />
-    <div class="flex-0">
+    <div class="flex-0 max-w-screen-2xl mx-auto">
       <div v-if="current==0">
         <div class="text-6xl font-extrabold text-center"> 
           <span>(#{{ model.pr.number }})</span>&nbsp;

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -4,17 +4,18 @@
       <slot />
     </div>
     <div class="flex-none">
-      <footer class="pt-3 pb-5 text-center font-mono text-xs">
-        <div>
-          <NuxtLink href="https://github.com/stanistan/present-me" class="underline underline-offset-8 font-bold">
-            <em>present-me</em> by stanistan
-          </NuxtLink> 
-        </div>
-        <div class="my-4">
+      <footer class="pt-3 pb-5 font-mono text-xs flex flex-row">
+        <div class="flex-none px-3">
           <NuxtLink :href="'https://github.com/stanistan/present-me/commit/' + v.rev">
-            ({{ v. rev }})
+          ({{ v. rev }})
           </NuxtLink>
         </div>
+        <div class="flex-grow"></div>
+        <div class="flex-none px-3">
+          <NuxtLink href="https://github.com/stanistan/present-me" class="underline underline-offset-8 font-bold">
+          <em>present-me</em> by stanistan
+          </NuxtLink> 
+        </div>
       </footer>
     </div>
   </div>

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   ssr: false,
-  css: ['~/assets/css/main.css'],
+  css: ['~/assets/css/main.scss'],
   postcss: {
     plugins: {
       tailwindcss: {},

diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
   "version": "0.0.0",
   "dependencies": {
     "prismjs": "^1.29.0",
+    "sass": "^1.63.6",
     "showdown": "^2.1.0"
   },
   "packageManager": "yarn@3.5.1"

diff --git a/frontend/version.json b/frontend/version.json
@@ -1 +1 @@
-{ "rev": "development" }
+{ "rev": "dev" }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2241,7 +2241,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -4126,6 +4126,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.0
+  resolution: "immutable@npm:4.3.0"
+  checksum: bbd7ea99e2752e053323543d6ff1cc71a4b4614fa6121f321ca766db2bd2092f3f1e0a90784c5431350b7344a4f792fa002eac227062d59b9377b6c09063b58b
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -6608,6 +6615,7 @@ __metadata:
     nuxt: 3.6
     postcss: ^8.4.24
     prismjs: ^1.29.0
+    sass: ^1.63.6
     showdown: ^2.1.0
     tailwindcss: ^3.3.2
   languageName: unknown
@@ -6659,6 +6667,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.63.6":
+  version: 1.63.6
+  resolution: "sass@npm:1.63.6"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 3372319904658eeafaf78a09a6fcb3368a68e6d76fe3c43c2d009f4f72e475ab22b82ef483ef5c00fcda3ab00066846c0bd88c36b42771b855f6ab80c7eda541
+  languageName: node
+  linkType: hard
+
 "scule@npm:^1.0.0":
   version: 1.0.0
   resolution: "scule@npm:1.0.0"
@@ -6852,7 +6873,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c