[chore] update style with tailwindcss

ousc · Dec 19, 2023 · a4cefeb · a4cefeb
1 parent 1bad7ed
commit a4cefeb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 56 deletions.
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/main-67FHS7ZN.js → docs/main-VFLH6R6X.js b/docs/main-67FHS7ZN.js → docs/main-VFLH6R6X.js
diff --git a/docs/styles-FM6HP6FY.css → docs/styles-KHY2OJMA.css b/docs/styles-FM6HP6FY.css → docs/styles-KHY2OJMA.css
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,18 +1,18 @@
 <article class="prose lg:prose-xl"></article>
 <div class="relative h-full pt-10">
-    <tool-bar [provider]="provider" *ngIf="editor && !editor.loading"/>
-    <div class="ctn">
-        <div class="h-full overflow-auto overscroll-none">
-            <ng-prosemirror-adapter-provider #provider>
-                <ng-milkdown
-                  *ngIf="value"
-                  [editorConfig]="config"
-                  [plugins]="plugins"
-                  [(ngModel)]="value"
-                  (ngModelChange)="onChange($event)"
-                  (onReady)="editor = $event"
-                />
-            </ng-prosemirror-adapter-provider>
-        </div>
-    </div>
+  @if (editor && !editor.loading) {
+    <tool-bar class="opacity-80" [provider]="provider"/>
+  }
+  <div class="h-full overflow-auto overscroll-none ctn left-0 right-0 mx-auto flex flex-col px-4">
+    <ng-prosemirror-adapter-provider #provider>
+      <ng-milkdown
+        *ngIf="value"
+        [editorConfig]="config"
+        [plugins]="plugins"
+        [(ngModel)]="value"
+        (ngModelChange)="onChange($event)"
+        (onReady)="editor = $event"
+      />
+    </ng-prosemirror-adapter-provider>
+  </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,16 +0,0 @@
-.ctn {
-  width: 50%;
-  margin: auto;
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  min-height: 100%;
-
-  @media (max-width: 767px) { // 应用于移动设备
-    width: 100%;
-  }
-}

diff --git a/src/index.html b/src/index.html
@@ -11,9 +11,14 @@
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
   />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
+  <style>
+    .github-fork-ribbon.right-bottom:before {
+      background-color: #333;
+    }
+  </style>
 </head>
 <body>
   <app-root></app-root>
-  <a class="github-fork-ribbon" href="https://github.com/ousc/ng-milkdown" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+  <a class="github-fork-ribbon right-bottom fixed" href="https://github.com/ousc/ng-milkdown" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
 </body>
 </html>