update web

TakWolf · Jun 29, 2024 · ebcdd23 · ebcdd23
1 parent 086f8f4
commit ebcdd23
Show file tree

Hide file tree

Showing 5 changed files with 498 additions and 4 deletions.
diff --git a/www/css/style.css b/www/css/style.css
diff --git a/www/css/style.css.map b/www/css/style.css.map
diff --git a/www/css/style.scss b/www/css/style.scss
@@ -3,3 +3,195 @@
     padding: 0;
     box-sizing: border-box;
 }
+
+@font-face {
+    font-family: Sans-CN;
+    src: url("../fonts/sans/SourceHanSansSC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Sans-HK;
+    src: url("../fonts/sans/SourceHanSansHC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Sans-TW;
+    src: url("../fonts/sans/SourceHanSansTC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Sans-JP;
+    src: url("../fonts/sans/SourceHanSans-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Sans-KR;
+    src: url("../fonts/sans/SourceHanSansK-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Serif-CN;
+    src: url("../fonts/serif/SourceHanSerifSC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Serif-HK;
+    src: url("../fonts/serif/SourceHanSerifHC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Serif-TW;
+    src: url("../fonts/serif/SourceHanSerifTC-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Serif-JP;
+    src: url("../fonts/serif/SourceHanSerif-VF.otf.woff2");
+}
+
+@font-face {
+    font-family: Serif-KR;
+    src: url("../fonts/serif/SourceHanSerifK-VF.otf.woff2");
+}
+
+.nav {
+    background-color: deepskyblue;
+    box-shadow: 0 0 8px gray;
+    .title {
+        margin-left: 16px;
+        margin-right: 16px;
+        color: white;
+        font-size: 24px;
+        line-height: 48px;
+    }
+}
+
+.main {
+    .error-tip {
+        color: red;
+        font-size: 32px;
+        line-height: 96px;
+        text-align: center;
+    }
+    .loading-tip {
+        font-size: 32px;
+        line-height: 96px;
+        text-align: center;
+    }
+    .input {
+        padding: 8px;
+        display: block;
+        input {
+            width: 100%;
+            padding: 8px;
+            font-size: 16px;
+            resize: none;
+        }
+    }
+    .checkbox-line {
+        padding-left: 8px;
+        padding-right: 8px;
+        .checkbox {
+            .name {
+                margin-left: 6px;
+                margin-right: 20px;
+                font-size: 16px;
+            }
+        }
+    }
+    .search-result {
+        .item {
+            margin: 8px;
+            border-style: solid;
+            border-width: 1px;
+            border-color: gray;
+            .title {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                align-items: center;
+                .code-point {
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    color: white;
+                    background-color: black;
+                    font-size: 16px;
+                    font-weight: bold;
+                    line-height: 32px;
+                }
+                .char {
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    font-size: 20px;
+                    font-weight: bold;
+                }
+                .tag {
+                    margin: 4px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    font-size: 14px;
+                    line-height: 20px;
+                    border-style: solid;
+                    border-width: 1px;
+                    border-color: gray;
+                    border-radius: 10px;
+                }
+            }
+            .glyphs {
+                padding: 4px;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                .glyph {
+                    margin: 4px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    border-style: solid;
+                    border-width: 1px;
+                    border-color: gray;
+                    .title {
+                        width: 100%;
+                        display: flex;
+                        justify-content: space-between;
+                        .language-flavor {
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            color: white;
+                            background-color: gray;
+                            font-size: 14px;
+                            font-weight: bold;
+                            line-height: 28px;
+                        }
+                        .glyph-name {
+                            margin-left: 8px;
+                            margin-right: 8px;
+                            font-size: 14px;
+                        }
+                    }
+                    .char {
+                        padding-left: 16px;
+                        padding-right: 16px;
+                    }
+                }
+                .sans-background {
+                    background-color: beige;
+                }
+                .serif-background {
+                    background-color: linen;
+                }
+            }
+        }
+    }
+}
+
+.footer {
+    padding-top: 8px;
+    padding-bottom: 12px;
+    display: flex;
+    justify-content: center;
+    .separate {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+}