.

elankath · Sep 29, 2022 · 36d0252 · 36d0252
1 parent de0cbaa
commit 36d0252
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -51,12 +51,12 @@ $ pnpm docs:dev # test vitepress docs individually
 $ pnpm docs:build # generate/update vitepress docs
 $ pnpm icons:build # build frontend/packages/icons
 $ pnpm design:build # build frontend/packages/design
-$ pnpm ... # install/preinstall scripts trigger during project setup
+$ pnpm <(install|preinstall):(task)> # install/preinstall scripts trigger during project setup
 ```
 
 ## Directory Structure
 
-```bash
+```yaml
 .
 ├── .tools # auto-generated, development tools/CLIs
 ├── .vscode # extensions for VS Code
@@ -94,25 +94,25 @@ $ pnpm ... # install/preinstall scripts trigger during project setup
 │       │   ├── docs # auto-generated, try script `docs:build`
 │       │   ├── swagger # auto-generated, try script `swag:docs`
 │       │   ├── static.go # manage static sources
-│       │   └── ...
+│       │   └── # ...
 │       ├── air.go # special function for air to run web service individually
 │       ├── router.go # entry point of swaggo docs generator, manage routes for API
 │       └── web.go # web service
 ├── build # sources to use during wails build process
 │   ├── bin # auto-generated, try script `wails:dev` or `wails:build`
-│   └── ...
+│   └── # ...
 ├── diagrams # diagrams about 4+1 view model
 ├── docs # vitepress documentation
 ├── frontend # sources related to frontend code, workplace managed by PNPM
 │   ├── packages # frontend components, icons, etc.
 │   ├── src # wails frontend sources
 │   │   ├── vite-env.d.ts # put go struct associated types into namespace app
-│   │   └── ...
-│   └── ...
+│   │   └── # ...
+│   └── # ...
 ├── main.go # wails main application, presentations & services layer
 ├── wails_life_cycle.go # wails life cycle
 ├── wails.json # wails CLI config
-└── ...
+└── # ...
 ```
 
 ## Development View

diff --git a/frontend/public/github-markdown.css b/frontend/public/github-markdown.css
@@ -1,3 +1,7 @@
+/**
+ * @author Sindre Sorhus https://github.com/sindresorhus/github-markdown-css
+ * Edited by jinyaoMa
+ */
 @media (prefers-color-scheme: dark) {
   .markdown-body {
     color-scheme: dark;

diff --git a/frontend/public/prism-github.css b/frontend/public/prism-github.css
@@ -1,80 +1,143 @@
 /**
  * Github-like theme for Prism.js
  * @author Luke Askew http://github.com/lukeaskew
+ * Edited by jinyaoMa
  */
- code,
- code[class*='language-'],
- pre[class*='language-'] {
-   color: #333;
-   text-align: left;
-   white-space: pre;
-   word-spacing: normal;
-   tab-size: 4;
-   hyphens: none;
-   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-   line-height: 1.4;
-   direction: ltr;
-   cursor: text;
- }
+@media (prefers-color-scheme: light) {
+  .markdown-body {
+    --color-prism-txt: #333;
+    --color-prism-bg: #f7f7f7;
+    --color-prism-1: #969896;
+    --color-prism-2: #183691;
+    --color-prism-3: #63a35c;
+    --color-prism-4: #0086b3;
+    --color-prism-5: #795da3;
+    --color-prism-6: #a71d5d;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .markdown-body {
+    --color-prism-txt: #333;
+    --color-prism-bg: #f7f7f7;
+    --color-prism-1: #969896;
+    --color-prism-2: #183691;
+    --color-prism-3: #63a35c;
+    --color-prism-4: #0086b3;
+    --color-prism-5: #795da3;
+    --color-prism-6: #a71d5d;
+  }
+}
+:root.my-theme-light .markdown-body {
+  --color-prism-txt: #333;
+  --color-prism-bg: #f7f7f7;
+  --color-prism-1: #969896;
+  --color-prism-2: #183691;
+  --color-prism-3: #63a35c;
+  --color-prism-4: #0086b3;
+  --color-prism-5: #795da3;
+  --color-prism-6: #a71d5d;
+}
+:root.my-theme-dark .markdown-body {
+  --color-prism-txt: #dbe0e6;
+  --color-prism-bg: #171717;
+  --color-prism-1: #afb1af;
+  --color-prism-2: #557df7;
+  --color-prism-3: #91c289;
+  --color-prism-4: #4dd2ff;
+  --color-prism-5: #9e5dff;
+  --color-prism-6: #e467a2;
+}
 
- pre[class*='language-'] {
-   overflow: auto;
-   margin: 1em 0;
-   padding: 1.2em;
-   border-radius: 3px;
-   font-size: 85%;
- }
+code,
+code[class*="language-"],
+pre[class*="language-"] {
+  color: var(--color-prism-txt);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  tab-size: 4;
+  hyphens: none;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  line-height: 1.4;
+  direction: ltr;
+  cursor: text;
+}
 
- p code,
- li code,
- table code {
-   margin: 0;
-   border-radius: 3px;
-   padding: 0.2em 0;
-   font-size: 85%;
- }
- p code:before, p code:after,
- li code:before,
- li code:after,
- table code:before,
- table code:after {
-   letter-spacing: -0.2em;
-   content: '\00a0';
- }
+pre[class*="language-"] {
+  overflow: auto;
+  margin: 1em 0;
+  padding: 1.2em;
+  border-radius: 3px;
+  font-size: 85%;
+}
 
- code,
- :not(pre) > code[class*='language-'],
- pre[class*='language-'] {
-   background: #f7f7f7;
- }
+p code,
+li code,
+table code {
+  margin: 0;
+  border-radius: 3px;
+  padding: 0.2em 0;
+  font-size: 85%;
+}
+p code:before,
+p code:after,
+li code:before,
+li code:after,
+table code:before,
+table code:after {
+  letter-spacing: -0.2em;
+  content: "\00a0";
+}
 
- :not(pre) > code[class*='language-'] {
-   padding: 0.1em;
-   border-radius: 0.3em;
- }
+code,
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: var(--color-prism-bg);
+}
 
- .token.comment, .token.prolog, .token.doctype, .token.cdata {
-   color: #969896;
- }
- .token.punctuation, .token.string, .token.atrule, .token.attr-value {
-   color: #183691;
- }
- .token.property, .token.tag {
-   color: #63a35c;
- }
- .token.boolean, .token.number {
-   color: #0086b3;
- }
- .token.selector, .token.attr-name, .token.attr-value .punctuation:first-child, .token.keyword, .token.regex, .token.important {
-   color: #795da3;
- }
- .token.operator, .token.entity, .token.url, .language-css .token.string {
-   color: #a71d5d;
- }
- .token.entity {
-   cursor: help;
- }
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
 
- .namespace {
-   opacity: 0.7;
- }
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--color-prism-1);
+}
+.token.punctuation,
+.token.string,
+.token.atrule,
+.token.attr-value {
+  color: var(--color-prism-2);
+}
+.token.property,
+.token.tag {
+  color: var(--color-prism-3);
+}
+.token.boolean,
+.token.number {
+  color: var(--color-prism-4);
+}
+.token.selector,
+.token.attr-name,
+.token.attr-value .punctuation:first-child,
+.token.keyword,
+.token.regex,
+.token.important {
+  color: var(--color-prism-5);
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string {
+  color: var(--color-prism-6);
+}
+.token.entity {
+  cursor: help;
+}
+
+.namespace {
+  opacity: 0.7;
+}
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
@@ -21,7 +21,7 @@ const { t } = useI18n();
       </a>
       <div class="divider"></div>
       <a href="https://vitejs.dev" target="_blank">
-        <img src="../assets/vite.svg" class="logo" alt="Vite logo" />
+        <img src="../assets/vite.svg" class="logo vite" alt="Vite logo" />
       </a>
       <div class="divider"></div>
       <a href="https://vuejs.org/" target="_blank">
@@ -54,21 +54,29 @@ const { t } = useI18n();
   will-change: filter;
   transition: filter 0.2s;
 
-  &:hover {
-    filter: drop-shadow(0 0 2em #46adeaaa);
-  }
   &.wails:hover {
-    filter: drop-shadow(0 0 1em #e55555aa);
+    filter: drop-shadow(0 0 0.5em #ff6767aa);
+  }
+  &.avatar:hover {
+    filter: drop-shadow(0 0 1em #66c7ffaa);
+  }
+  &.vite:hover {
+    filter: drop-shadow(0 0 1em #636bfaaa);
+  }
+  &.vue:hover {
+    filter: drop-shadow(0 0 1em #66ffbaaa);
   }
 }
 .divider {
   height: 3em;
-  margin-bottom: 2.3em;
+  margin-bottom: 1.5em;
   border-left: var(--my-border-width) solid var(--my-color-border-light);
 }
 .appname {
   text-align: center;
   font-size: 3em;
+  line-height: var(--my-line-height-sm);
+  margin-top: 0.5em;
 }
 .by {
   text-align: center;

diff --git a/frontend/src/views/Test.vue b/frontend/src/views/Test.vue
@@ -70,6 +70,9 @@ a {
 }
 a:hover {
   color: #535bf2;
+  @media (prefers-color-scheme: light) {
+    color: #747bff;
+  }
 }
 
 h1 {
@@ -84,7 +87,10 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #f3f2f1;
+  background-color: #1a1a1a;
+  @media (prefers-color-scheme: light) {
+    background-color: #f9f9f9;
+  }
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -120,4 +126,13 @@ button:focus-visible {
 .card {
   padding: 2em;
 }
+
+:root.my-theme-light {
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
 </style>