From c65e2db5270b90373e9ef46fcfee90689c7b1a31 Mon Sep 17 00:00:00 2001 From: Oops Joe <107075016+oopsjoe@users.noreply.github.com> Date: Thu, 11 Apr 2024 06:12:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _css/old/footer.css | 18 -- _css/old/global.css | 28 --- _css/old/light-dark.css | 329 ---------------------------- _css/old/light-dark.css.map | 1 - _css/old/light-dark.scss | 422 ------------------------------------ _css/old/loader.css | 115 ---------- _css/old/main-left.css | 78 ------- _css/old/main-right.css | 140 ------------ _css/old/main.css | 8 - _css/old/theme.css | 36 --- 10 files changed, 1175 deletions(-) delete mode 100644 _css/old/footer.css delete mode 100644 _css/old/global.css delete mode 100644 _css/old/light-dark.css delete mode 100644 _css/old/light-dark.css.map delete mode 100644 _css/old/light-dark.scss delete mode 100644 _css/old/loader.css delete mode 100644 _css/old/main-left.css delete mode 100644 _css/old/main-right.css delete mode 100644 _css/old/main.css delete mode 100644 _css/old/theme.css diff --git a/_css/old/footer.css b/_css/old/footer.css deleted file mode 100644 index aac63be..0000000 --- a/_css/old/footer.css +++ /dev/null @@ -1,18 +0,0 @@ -footer .footer { - width: 100%; - text-align: center; - position: fixed; - left: 0; - bottom: 0; - padding: 10px 0; - background-color: #fff; - box-shadow: rgba(0, 0, 0, 0.19) 0px 0.5px 1.5px 0px, rgba(0, 0, 0, 0.04) 0px 0px 1px 0px; -} - -footer .footer a,p { - display: inline-block; - color: #9F8582; - font-size: 14px; - font-weight: 300; - text-decoration: none; -} \ No newline at end of file diff --git a/_css/old/global.css b/_css/old/global.css deleted file mode 100644 index 55790a5..0000000 --- a/_css/old/global.css +++ /dev/null @@ -1,28 +0,0 @@ -/* 全局样式 */ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -a,p,h2 { - font-weight: 300; - color: #9F8582; - text-decoration: none; -} - -body { - /* background: linear-gradient(to bottom, #F2E8DA , #FFBE98, #DCBD9E, #EFCFBA, #FA9A85, #F97272, #DE8286, #FFB2A5); */ - background-color: #e6dcdb; - background-size: cover; -} - -li { - list-style: none; -} - -i { - color: #9F8582; -} \ No newline at end of file diff --git a/_css/old/light-dark.css b/_css/old/light-dark.css deleted file mode 100644 index 94cf36f..0000000 --- a/_css/old/light-dark.css +++ /dev/null @@ -1,329 +0,0 @@ -.right-card #nav { - position: relative; -} - -.right-card #nav .night-day-toggle { - position: absolute; - right: 20px; -} - -* { - box-sizing: border-box; -} -*:before, *:after { - box-sizing: border-box; -} - -.night-day-toggle { - cursor: pointer; - position: relative; - width: 60px; - height: 30px; - border-radius: 6rem; - transition: applyTheme 0.3s ease; -} -.night-day-toggle .planet { - position: absolute; - width: 20px; - height: 20px; - top: 5px; - left: 5px; - border-radius: 50%; - overflow: hidden; - transition: all 0.3s ease; -} -.night-day-toggle .planet .moon, -.night-day-toggle .planet .sun { - visibility: hidden; - opacity: 0; - transition: all 0.3s ease; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; -} -.night-day-toggle .planet .moon { - background: #fff; - z-index: 5; -} -.night-day-toggle .planet .moon .crater { - position: absolute; - border-radius: 50%; - background: #efefef; -} -.night-day-toggle .planet .moon .crater-1 { - width: 48%; - height: 48%; - right: 0; - top: 18%; - transform: translateX(35%); -} -.night-day-toggle .planet .moon .crater-2 { - width: 13%; - height: 13%; - top: 7%; - left: 10%; - background: #d6d6d6; -} -.night-day-toggle .planet .moon .crater-3 { - width: 25%; - height: 25%; - top: 26%; - left: 22%; -} -.night-day-toggle .planet .moon .crater-4 { - width: 22%; - height: 22%; - top: 70%; - left: 8%; -} -.night-day-toggle .planet .moon .crater-5 { - width: 15%; - height: 15%; - top: 70%; - left: 58%; -} -.night-day-toggle .planet .sun { - background: #feeb97; - border-right: 0.125rem solid #f4ce8c; - border-radius: 50%; -} -.night-day-toggle .sky { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - visibility: hidden; - opacity: 0; - transition: all 0.3s ease; -} -.night-day-toggle .sky-night .star { - position: absolute; - transform: translateX(-100%); - transition: transform 0.3s ease; -} -.night-day-toggle .sky-night .star path { - fill: #fff; -} -.night-day-toggle .sky-night .star-1 { - right: 11%; - bottom: 21%; - width: 8%; - height: 16%; -} -.night-day-toggle .sky-night .star-2 { - left: 50%; - top: 20%; - width: 7%; - height: 15%; -} -.night-day-toggle .sky-night .star-3 { - top: 19%; - right: 16%; - width: 5%; - height: 14%; -} -.night-day-toggle .sky-night .star-4 { - right: 27%; - top: 47%; - width: 5%; - height: 9%; -} -.night-day-toggle .sky-night .star-5 { - left: 55%; - bottom: 26%; - width: 4%; - height: 12%; -} -.night-day-toggle .sky-day .cloud { - position: absolute; - transform: translateX(100%); - transition: transform 0.3s ease; -} -.night-day-toggle .sky-day .cloud .cloud-bubble { - background: #fff; - border-radius: 50%; - position: absolute; -} -.night-day-toggle .sky-day .cloud .cloud-bubble:after { - content: ""; - display: block; - padding-bottom: 100%; -} -.night-day-toggle .sky-day .cloud-1 { - width: 20%; - height: 30.5%; - right: 38%; - bottom: 22%; -} -.night-day-toggle .sky-day .cloud-1 .cloud-bubble-1 { - width: 44%; - bottom: 8%; -} -.night-day-toggle .sky-day .cloud-1 .cloud-bubble-2 { - width: 44%; - bottom: 0; - left: 30%; -} -.night-day-toggle .sky-day .cloud-1 .cloud-bubble-3 { - width: 44%; - right: 0; - bottom: 10%; -} -.night-day-toggle .sky-day .cloud-1 .cloud-bubble-4 { - width: 42%; - right: 20%; - top: 0; -} -.night-day-toggle .sky-day .cloud-1 .cloud-bubble-5 { - width: 44%; - left: 10%; - top: 0; -} -.night-day-toggle .sky-day .cloud-2 { - width: 11.5%; - height: 18%; - left: 12%; - top: 22%; -} -.night-day-toggle .sky-day .cloud-2 .cloud-bubble-1 { - width: 44%; - bottom: 10%; -} -.night-day-toggle .sky-day .cloud-2 .cloud-bubble-2 { - width: 40%; - bottom: 0; - left: 32%; -} -.night-day-toggle .sky-day .cloud-2 .cloud-bubble-3 { - width: 42%; - right: 0; - bottom: 18%; -} -.night-day-toggle .sky-day .cloud-2 .cloud-bubble-4 { - width: 40%; - right: 18%; - top: 5%; -} -.night-day-toggle .sky-day .cloud-2 .cloud-bubble-5 { - width: 44%; - left: 12%; - top: 0; -} -.night-day-toggle .sky-day .cloud-3 { - width: 11.5%; - height: 16%; - left: 42%; - top: 12%; -} -.night-day-toggle .sky-day .cloud-3 .cloud-bubble-1 { - width: 44%; - left: 0; - bottom: 16%; -} -.night-day-toggle .sky-day .cloud-3 .cloud-bubble-2 { - width: 42%; - bottom: 0; - left: 30%; -} -.night-day-toggle .sky-day .cloud-3 .cloud-bubble-3 { - width: 44%; - right: 0; - bottom: 14%; -} -.night-day-toggle .sky-day .cloud-3 .cloud-bubble-4 { - width: 40%; - top: 0; - right: 14%; -} -.night-day-toggle .sky-day .cloud-3 .cloud-bubble-5 { - width: 32%; - left: 23%; - top: 4%; -} -.night-day-toggle .sky-day .cloud-4 { - left: 15%; - bottom: 22%; - width: 10%; - height: 13%; -} -.night-day-toggle .sky-day .cloud-4 .cloud-bubble-1 { - width: 42%; - left: 0; - bottom: 17%; -} -.night-day-toggle .sky-day .cloud-4 .cloud-bubble-2 { - width: 45%; - bottom: 0; - left: 25%; -} -.night-day-toggle .sky-day .cloud-4 .cloud-bubble-3 { - width: 44%; - bottom: 0; - right: 0; -} -.night-day-toggle .sky-day .cloud-4 .cloud-bubble-4 { - width: 40%; - top: 0; - right: 5%; -} -.night-day-toggle .sky-day .cloud-4 .cloud-bubble-5 { - width: 36%; - left: 28%; - top: 5%; -} -.night-day-toggle input[type=checkbox] { - width: 0; - height: 0; - overflow: hidden; - position: absolute; -} -.night-day-toggle.night { - background: #3c4360; -} -.night-day-toggle.night .planet .moon { - visibility: visible; - opacity: 1; -} -.night-day-toggle.night .sky-night { - visibility: visible; - opacity: 1; -} -.night-day-toggle.night .sky-night .star { - transform: translateX(0); -} -.night-day-toggle.day { - background: #afdfeb; -} -.night-day-toggle.day .planet { - transform: translateX(30px); -} -.night-day-toggle.day .planet .sun { - visibility: visible; - opacity: 1; -} -.night-day-toggle.day .sky-day { - visibility: visible; - opacity: 1; -} -.night-day-toggle.day .sky-day .cloud { - transform: translateX(0); -} - -body { - /* --background-night: #3B5276; - --background-day: #ffe7c0; - --background: var(--background-day); */ - display: flex; - justify-content: center; - align-items: center; - margin: 0; - min-height: 100vh; - /* background: var(--background); */ - transition: background 0.3s ease; -} -/*# sourceMappingURL=light-dark.css.map */ \ No newline at end of file diff --git a/_css/old/light-dark.css.map b/_css/old/light-dark.css.map deleted file mode 100644 index d9fa512..0000000 --- a/_css/old/light-dark.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["light-dark.scss","light-dark.css"],"names":[],"mappings":"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","file":"light-dark.css"} \ No newline at end of file diff --git a/_css/old/light-dark.scss b/_css/old/light-dark.scss deleted file mode 100644 index bd9b4df..0000000 --- a/_css/old/light-dark.scss +++ /dev/null @@ -1,422 +0,0 @@ -$size: 6rem; -$size-multiplier: 2; -$padding: .5rem; -$background-night: #f5f5f5; -$background-day: #ffe7c0; -$toggle-background-night: #3c4360; -$toggle-background-day: #afdfeb; -$moon-color: #fff; -$moon-crater-color: #efefef; -$sun-color: #feeb97; -$sun-accent-color: #f4ce8c; -$clouds-color: #fff; -$stars-color: #fff; -$anim-dur: .3s; -$easing: ease; - -* { - box-sizing: border-box; - - &:before, - &:after { - box-sizing: border-box; - } -} - -.night-day-toggle { - cursor: pointer; - position: relative; - width: $size * $size-multiplier; - height: $size; - border-radius: $size; - transition: background $anim-dur ease; - - .planet { - position: absolute; - width: $size - $padding * 2; - height: $size - $padding * 2; - top: $padding; - left: $padding; - border-radius: 50%; - overflow: hidden; - transition: all $anim-dur $easing; - - .moon, - .sun { - visibility: hidden; - opacity: 0; - transition: all $anim-dur $easing; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - } - - .moon { - background: $moon-color; - z-index: 5; - - .crater { - position: absolute; - border-radius: 50%; - background: $moon-crater-color; - } - - .crater-1 { - width: 48%; - height: 48%; - right: 0; - top: 18%; - transform: translateX(35%); - } - - .crater-2 { - width: 13%; - height: 13%; - top: 7%; - left: 10%; - background: darken($moon-crater-color, 10%); - } - - .crater-3 { - width: 25%; - height: 25%; - top: 26%; - left: 22%; - } - - .crater-4 { - width: 22%; - height: 22%; - top: 70%; - left: 8%; - } - - .crater-5 { - width: 15%; - height: 15%; - top: 70%; - left: 58%; - } - } - - .sun { - background: $sun-color; - border-right: .25rem solid $sun-accent-color; - border-radius: 50%; - } - } - - .sky { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - visibility: hidden; - opacity: 0; - transition: all $anim-dur $easing; - } - - .sky-night { - .star { - position: absolute; - transform: translateX(-100%); - transition: transform $anim-dur $easing; - - path { - fill: $stars-color; - } - } - - .star-1 { - right: 11%; - bottom: 21%; - width: 8%; - height: 16%; - } - - .star-2 { - left: 50%; - top: 20%; - width: 7%; - height: 15%; - } - - .star-3 { - top: 19%; - right: 16%; - width: 5%; - height: 14%; - } - - .star-4 { - right: 27%; - top: 47%; - width: 5%; - height: 9%; - } - - .star-5 { - left: 55%; - bottom: 26%; - width: 4%; - height: 12%; - } - } - - .sky-day { - .cloud { - position: absolute; - transform: translateX(100%); - transition: transform $anim-dur $easing; - - .cloud-bubble { - background: $clouds-color; - border-radius: 50%; - position: absolute; - - &:after { - content: ""; - display: block; - padding-bottom: 100%; - } - } - } - - .cloud-1 { - width: 20%; - height: 30.5%; - right: 38%; - bottom: 22%; - - .cloud-bubble-1 { - width: 44%; - bottom: 8%; - } - - .cloud-bubble-2 { - width: 44%; - bottom: 0; - left: 30%; - } - - .cloud-bubble-3 { - width: 44%; - right: 0; - bottom: 10%; - } - - .cloud-bubble-4 { - width: 42%; - right: 20%; - top: 0; - } - - .cloud-bubble-5 { - width: 44%; - left: 10%; - top: 0; - } - } - - .cloud-2 { - width: 11.5%; - height: 18%; - left: 12%; - top: 22%; - - .cloud-bubble-1 { - width: 44%; - bottom: 10%; - } - - .cloud-bubble-2 { - width: 40%; - bottom: 0; - left: 32%; - } - - .cloud-bubble-3 { - width: 42%; - right: 0; - bottom: 18%; - } - - .cloud-bubble-4 { - width: 40%; - right: 18%; - top: 5%; - } - - .cloud-bubble-5 { - width: 44%; - left: 12%; - top: 0; - } - } - - .cloud-3 { - width: 11.5%; - height: 16%; - left: 42%; - top: 12%; - - .cloud-bubble-1 { - width: 44%; - left: 0; - bottom: 16%; - } - - .cloud-bubble-2 { - width: 42%; - bottom: 0; - left: 30%; - } - - .cloud-bubble-3 { - width: 44%; - right: 0; - bottom: 14%; - } - - .cloud-bubble-4 { - width: 40%; - top: 0; - right: 14%; - } - - .cloud-bubble-5 { - width: 32%; - left: 23%; - top: 4%; - } - } - - .cloud-4 { - left: 15%; - bottom: 22%; - width: 10%; - height: 13%; - - .cloud-bubble-1 { - width: 42%; - left: 0; - bottom: 17%; - } - - .cloud-bubble-2 { - width: 45%; - bottom: 0; - left: 25%; - } - - .cloud-bubble-3 { - width: 44%; - bottom: 0; - right: 0; - } - - .cloud-bubble-4 { - width: 40%; - top: 0; - right: 5%; - } - - .cloud-bubble-5 { - width: 36%; - left: 28%; - top: 5%; - } - } - } - - input[type="checkbox"] { - width: 0; - height: 0; - overflow: hidden; - position: absolute; - } - - &.night { - background: $toggle-background-night; - - .planet { - .moon { - visibility: visible; - opacity: 1; - } - } - - .sky-night { - visibility: visible; - opacity: 1; - - .star { - transform: translateX(0); - } - } - } - - &.day { - background: $toggle-background-day; - - .planet { - transform: translateX($size * $size-multiplier - $size); - - .sun { - visibility: visible; - opacity: 1; - } - } - - .sky-day { - visibility: visible; - opacity: 1; - - .cloud { - transform: translateX(0); - } - } - } -} - -// Social Media & centering -body { - --background-night: #{$background-night}; - --background-day: #{$background-day}; - --background: var(--background-night); - display: flex; - justify-content: center; - align-items: center; - margin: 0; - min-height: 100vh; - background: var(--background); - transition: background $anim-dur $easing; - - .social-media { - position: fixed; - bottom: 1rem; - right: 1rem; - opacity: .85; - transition: all .3s ease; - cursor: pointer; - font-size: 1.25rem; - - a { - display: inline-block; - color: #1a1a1a; - - &:not(:last-of-type) { - margin-right: .5rem; - } - } - - &:hover { - opacity: 1; - } - } -} \ No newline at end of file diff --git a/_css/old/loader.css b/_css/old/loader.css deleted file mode 100644 index adb15fd..0000000 --- a/_css/old/loader.css +++ /dev/null @@ -1,115 +0,0 @@ -.cat { - position: relative; - width: 100%; - max-width: 20em; - overflow: hidden; - background-color: #e6dcdc; -} - -.cat::before { - content: ''; - display: block; - padding-bottom: 100%; -} - -.cat:hover>*, -.cat:active>* { - animation-play-state: paused; -} - -.cat__head, -.cat__tail, -.cat__body { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite; -} - -.cat__head::before { - content: ''; - position: absolute; - width: 50%; - height: 50%; - background-size: 200%; - background-repeat: no-repeat; - background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il'); - top: -1px; - right: -1px; - background-position: 100% 0%; - transform-origin: 0% 100%; - transform: rotate(90deg); -} - -.cat__tail::before { - content: ''; - position: absolute; - width: 50%; - height: 50%; - background-size: 200%; - background-repeat: no-repeat; - background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il'); - left: 0; - bottom: 0; - background-position: 0% 100%; - transform-origin: 100% 0%; - transform: rotate(-30deg); -} - -.cat__body::before { - content: ''; - position: absolute; - width: 50%; - height: 50%; - background-size: 200%; - background-repeat: no-repeat; - background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il'); - right: 0; - bottom: 0; - background-position: 100% 100%; - transform-origin: 0% 0%; -} - -/* .cat__body { - animation-delay: .1s; -} - -.cat__body:nth-of-type(2) { - animation-delay: .2s; -} */ - -@keyframes rotating { - from { - transform: rotate(720deg); - } - - to { - transform: none; - } -} - -@keyframes fadeOut { - to { - opacity: 0; - } -} - -.box.fadeOut { - animation: fadeOut 1s ease forwards; -} - - -.box { - display: flex; - justify-content: center; - align-items: center; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: #e6dcdc; - z-index: 1000; -} \ No newline at end of file diff --git a/_css/old/main-left.css b/_css/old/main-left.css deleted file mode 100644 index f6ad7de..0000000 --- a/_css/old/main-left.css +++ /dev/null @@ -1,78 +0,0 @@ -/* left-main 样式 */ -main .card .left-card { - width: 300px; - display: flex; - flex-direction: column; -} - -/* 搜索引擎 */ -main .card .left-card mdui-text-field[label="Search"]::part(container) { - margin-bottom: 20px; - width: 100%; - max-width: 300px; - background-color: #fff; - border-radius: 0.75rem; - box-shadow: rgb(192, 175, 173) 0px -1.98122px 0px 0px inset; -} - -main .card .left-card mdui-text-field[label="Search"]::part(container):focus-within { - box-shadow: rgb(159, 133, 130) 0px -1.98122px 0px 0px inset; -} - -main .card .left-card mdui-text-field[label="Search"]::part(label) { - color: #E6DCDB; - caret-color: #000; -} - -main .card .left-card mdui-text-field[label="Search"]::part(input) { - caret-color: #C0AFAD; - color: #9F8582; -} - -/* 个人信息 */ -main .card .left-card mdui-card[variant="elevated"] { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 20px; - width: 100%; - max-width: 300px; - height: 400px; - background-color: #fff; - text-align: center; -} - -main .card .left-card mdui-card[variant="elevated"] img { - width: 150px; - align-self: center; -} - -main .card .left-card mdui-card[variant="elevated"] h1 { - font-size: 20px; - margin-bottom: 20px; - color: #9F8582; -} - -main .card .left-card mdui-card[variant="elevated"] p { - font-size: 15px; - color: #9F8582; -} - -main .card .left-card mdui-card[variant="elevated"] mdui-button[variant="elevated"] { - width: 150px; - margin: 0 auto; - margin-top: auto; - border-radius: 0.75rem; - background-color: #FFFBFB; - color: #9F8582; - font-weight: 300; -} - -main .card .left-card mdui-card[variant="elevated"] .link { - margin-top: 20px; -} - -main .card .left-card mdui-card[variant="elevated"] .link a { - font-size: 20px; - margin: 5px; -} \ No newline at end of file diff --git a/_css/old/main-right.css b/_css/old/main-right.css deleted file mode 100644 index 8804625..0000000 --- a/_css/old/main-right.css +++ /dev/null @@ -1,140 +0,0 @@ -/* right-main 样式 */ -main .card .right-card { - margin-left: 20px; - display: flex; - width: 600px; - height: 476px; - flex-direction: column; -} - -@media (max-width: 960px) { - main .card .right-card { - display: none; - } -} - -main .card .right-card mdui-card[variant="elevated"] { - /* padding: 12px 20px 20px 20px; */ - width: 100%; - max-width: 600px; - height: 476px; - background-color: #FFF; - text-align: center; - flex-direction: column; - display: flex; -} - -/* 右侧菜单样式 */ -main .card .right-card #nav { - position: relative; - border: none; - padding: 12px 20px; - height: 54px; - display: flex; - background-color: #FFFBFB; - box-shadow: rgba(0, 0, 0, 0.19) 0px 0.5px 1.5px 0px, rgba(0, 0, 0, 0.04) 0px 0px 1px 0px; - align-items: center; -} - -main .card .right-card #nav li a { - position: relative; - padding: 12px 5px; - font: 300 14px '优设标题黑'; - border: none; - outline: none; - color: #9F8582; - display: inline-block; - text-decoration: none; - z-index: 3; -} - -main .card .right-card #nav li { - color: #9F8582; - /* font-weight: 300; */ - margin-right: 10px; - /* font-size: 22.88px; */ -} - -main .card .right-card #nav .menu-icon { - display: flex; - align-items: center; - padding-right: 20px; - font-size: 22.88px; - color: #9F8582; -} - -.slide1, -.slide2 { - position: absolute; - display: inline-block; - height: 30px; - border-radius: 0.5rem; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05); -} - -.slide1 { - background-color: rgb(233, 222, 220); - z-index: 2; - box-shadow: rgb(192, 175, 173) 0px -1.98122px 0px 0px inset; -} - -.slide2 { - opacity: 0; - background-color: rgba(192, 175, 173, .3); - z-index: 1; - box-shadow: 0 0 20px #ffffffaa inset; -} - -.squeeze { - transform: scale(0.9); -} - -/* 右卡片内容样式 */ - -main .card .right-card .content { - margin: 22px 20px 20px 20px; -} - -main .card .right-card #content2 { - width: 560px; - height: 380px; - display: flex; - flex-wrap: wrap; - /* 允许内容换行 */ - justify-content: space-between; - /* 子元素水平间距平均分布 */ - align-content: space-between; -} - -main .card .right-card #content2 mdui-card { - display: flex; - padding: 5px; - width: 125px; - /* 调整宽度 */ - height: 80px; - /* 调整高度 */ - border-radius: 0.75rem; - /* 圆角 */ - background-color: #FFFBFB; - /* 背景色 */ - text-align: center; - /* 文本居中 */ -} - - -main .card .right-card #content2 mdui-card img { - display: block; - /* 或者 inline-block */ - margin: 0 auto; - /* 水平居中并且清除外边距 */ - width: 30px; - /* 维持你的宽度设置 */ -} - -main .card .right-card #content2 mdui-card span { - display: block; - margin-top: 15px; - font-size: 12px; - font-weight: 300; - color: #9F8582; -} \ No newline at end of file diff --git a/_css/old/main.css b/_css/old/main.css deleted file mode 100644 index 92ab21b..0000000 --- a/_css/old/main.css +++ /dev/null @@ -1,8 +0,0 @@ -/* main 样式 */ - -main .card { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} \ No newline at end of file diff --git a/_css/old/theme.css b/_css/old/theme.css deleted file mode 100644 index 1a0277c..0000000 --- a/_css/old/theme.css +++ /dev/null @@ -1,36 +0,0 @@ -/* 主题样式 */ -/* 主题分为两套颜色:day-theme 和 night-theme */ -:root { - /* 亮色主题 day-theme */ - --bd-day: #ffe7c0; - --icon-day: ; - --search-day: ; - --info-day: ; - --logo-day: ; - --h1-day: ; - --h2-day: ; - --a-day: ; - --span-day: ; - --p-day: ; - --botton-day: ; - --nav-day: ; - --content-day: ; - --weblist-day: ; - - /* 暗色主题 night-theme */ - --bd-night: ; - --icon-night: ; - --search-night: ; - --info-night: ; - --logo-night: ; - --h1-night: ; - --h2-night: ; - --a-night: ; - --span-night: ; - --p-night: ; - --botton-night: ; - --nav-night: ; - --content-night: ; - --weblist-night: ; -} -