fix: 3项问题，包含 #44

1. 全站字体过于小的问题，由于以前直接把px转成rem，转化率太大了，抱歉！ 2. 首页标题能够点击的问题 3. 首页幻灯片子标题无法作用样式
dyedd · Nov 4, 2023 · e82d08c · e82d08c
1 parent fb25488
commit e82d08c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 46 deletions.
diff --git a/assets/css/comments.css b/assets/css/comments.css
@@ -30,16 +30,15 @@
     min-width: 24rem;
     display: block;
     outline: none;
-    font-size: 0.9rem;
-    font-family: inherit;
+    font-size: 1.4rem;
     letter-spacing: .2rem;
     border-radius: .5rem;
     border: solid .1rem var(--border);
     transition: all .6s ease-out;
     width: 100%;
 }
 .comments-row {
-    margin-top: 3rem;
+    font-size: 1.5rem;
 }
 .comments-toolbar {
     position: relative;
@@ -125,7 +124,7 @@ li.comment-by-author > .comment-author span:after {
     margin-top: -2rem;
 }
 #comments .comment-list > li .comment-meta a {
-    font-size: 0.8rem;
+    font-size: 1.2rem;
     color: #8f949e;
 }
 #comments .comment-list > li .comment-content {
@@ -204,7 +203,7 @@ li.comment-by-author > .comment-author span:after {
     display: none;
 }
 .comment-ua {
-    font-size: 1rem;
+    font-size: 1.3rem;
     color: var(--text2);
     margin-left: -1rem;
 }

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -109,6 +109,7 @@ a, a:hover {
     padding: 1rem 0;
     position: relative;
     font-weight: 700;
+    font-size: 1.25rem;
 }
 
 .collapse-item.active {
@@ -382,7 +383,7 @@ ol.carousel-indicators li.active {
 .content .created {
     color: var(--text2);
     float: right;
-    font-size: 0.8rem;
+    font-size: 1.2rem;
 }
 
 .categories-avatar {
@@ -400,19 +401,22 @@ ol.carousel-indicators li.active {
 }
 
 .article-name {
-    font-size: 2.5rem;
     word-break: break-all;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     overflow: hidden;
+}
+
+.article-name a {
+    font-size: 2.5rem;
     color: var(--theme-text-color);
     font-weight: 600;
 }
 
 .describe {
-    font-size: 1.9rem;
+    font-size: 1.25rem!important;
     margin-top: 1rem;
     color: var(--theme-text-color);
     line-height: 1.5;
@@ -478,6 +482,7 @@ ol.carousel-indicators li.active {
 }
 
 .index-comments-list .author {
+    font-size: 1.25rem;
     max-width: 25%;
     word-break: keep-all;
     overflow: hidden;
@@ -492,7 +497,7 @@ ol.carousel-indicators li.active {
 }
 
 .index-comments-list .text {
-    font-size: 0.9rem;
+    font-size: 1.5rem;
     color: var(--text2);
     overflow: hidden;
     flex: 1;
@@ -503,7 +508,7 @@ ol.carousel-indicators li.active {
 .index-comments-list .created {
     margin-left: .5rem;
     color: var(--text3);
-    font-size: 0.8rem;
+    font-size: 1.2rem;
     text-align: right;
 }
 
@@ -527,7 +532,7 @@ ol.carousel-indicators li.active {
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
-    font-size: .85rem;
+    font-size: 1.35rem;
 }
 
 .related .extra {
@@ -573,6 +578,7 @@ ol.carousel-indicators li.active {
 }
 
 .nav-search-input {
+    font-size: 1.2rem;
     padding: 0 1rem;
     width: 100%;
     border: .1rem solid #e3e5e7;
@@ -675,7 +681,7 @@ ol.carousel-indicators li.active {
 .time-text {
     text-align: center;
     color: #b5b5b5;
-    font-size: .6rem;
+    font-size: 1.25rem;
     margin: .2rem 0;
 }
 
@@ -705,6 +711,7 @@ ol.carousel-indicators li.active {
 }
 
 .sidebar-box {
+    font-size: 1.25rem;
     border: 0.1rem solid #e9ecef;
     padding: 1rem 0;
     background-color: #fff;
@@ -716,6 +723,10 @@ ol.carousel-indicators li.active {
     box-shadow: var(--box-shadow);
 }
 
+.sidebar-box h6 {
+    font-size: 1.5rem;
+}
+
 .card-text {
     margin-bottom: -.5rem;
 }
@@ -752,12 +763,12 @@ ol.carousel-indicators li.active {
 }
 
 .sidebar-rand-footer {
-    font-size: 0.75rem;
+    font-size: 1.2rem;
     color: white;
 }
 
 .sidebar-rand-body a {
-    font-size: 0.9375rem;
+    font-size: 1.25rem;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -793,7 +804,7 @@ ol.carousel-indicators li.active {
     flex-direction: column;
     align-items: center;
     color: var(--routine);
-    font-size: .6rem;
+    font-size: 1.2rem;
 }
 
 .count .item:not(:last-of-type) {
@@ -806,12 +817,16 @@ ol.carousel-indicators li.active {
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: 500;
-    font-size: 1rem;
+    font-size: 1.25rem;
     color: var(--theme-text-color);
     margin-bottom: 0.1875rem;
     text-shadow: var(--text-shadow);
 }
 
+footer.container.footer {
+    font-size: 1.45rem;
+}
+
 /* 返回顶部 */
 @media (max-width: 62.5rem) {
     .tools {
@@ -828,19 +843,15 @@ ol.carousel-indicators li.active {
 
 .tools div {
     margin-top: 1rem;
-    width: 3.5rem;
-    height: 3.5rem;
-    line-height: 3.5rem;
+    width: 5.5rem;
+    height: 5.5rem;
+    line-height: 5.5rem;
     text-align: center;
     background: #fff;
     box-shadow: 0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 20%), 0 0.375rem 0.625rem 0 rgb(0 0 0 / 14%), 0 0.0625rem 1.125rem 0 rgb(0 0 0 / 12%);
     border-radius: 50%;
 }
 
-.tools .icon {
-    width: 1.6rem;
-    height: 1.6rem;
-}
 
 /* fix*/
 .is-fixed {
@@ -881,7 +892,7 @@ ol.carousel-indicators li.active {
     display: inline-block;
     width: 8rem;
     text-align: center;
-    font-size: 0.75rem;
+    font-size: 1.5rem;
     line-height: 2.5rem;
     border-radius: 6.25rem;
     transition: 0.3s ease-in-out;

diff --git a/assets/css/post.css b/assets/css/post.css
@@ -1,16 +1,15 @@
 /*写着写着就想你了*/
 .breadcrumb {
     margin-bottom: -1rem;
-    font-size: .9rem;
+    font-size: 1.25rem;
 }
 .breadcrumb svg.icon {
     width: 2rem;
     height: 2rem;
 }
-.breadcrumb-item span,.breadcrumb-item a {
-    vertical-align: middle;
+.breadcrumb-item {
+    margin: 0 .2rem;
 }
-
 .article-info {
     position: relative;
 }
@@ -82,7 +81,7 @@
 }
 .post-info .created {
     float: right;
-    font-size: 0.8rem;
+    font-size: 1.25rem;
     color: var(--text2);
 }
 .post-info .avatar {
@@ -98,15 +97,15 @@
     border-radius: .8rem;
 }
 .post-info .display .name {
-    font-size: 1rem;
+    font-size: 1.25rem;
 }
 .post-info .extra {
     display: flex;
     align-items: center;
-    font-size: 0.95rem;
+    font-size: 1.3rem;
 }
 .post-info-icon {
-    margin-top: 1rem;
+    margin-top: .5rem;
     margin-right: 1rem;
 }
 .article-title {
@@ -129,7 +128,7 @@
     border-radius: var(--radius);
 }
 .license .content .item {
-    font-size: 0.875rem;
+    font-size: 1.25rem;
     color: #909399;
     line-height: 1.625rem;
     white-space: nowrap;
@@ -158,10 +157,16 @@
 }
 .article-action-item .icon {
     transition: .3s ease-out;
+    width: 3.5rem;
+    height: 3.5rem;
 }
 .article-action-item .icon:hover {
     transform: scale(1.05) rotate(1deg);
 }
+span.agree-num {
+    font-size: 2rem;
+    margin-left: .5rem;
+}
 .article-category a {
     color: #9b9b9b;
 }
@@ -172,17 +177,17 @@
     margin: 2rem;
 }
 .tags a {
-    border: 0.0625rem solid #999;
+    border: 0.1rem solid #999;
     border-radius: 6.25rem;
     box-sizing: border-box;
     transition: .5s;
     color: #999;
-    font-size: .55rem;
-    padding: 0.2rem .3rem;
+    font-size: 1.2rem;
+    padding: .3rem .4rem;
     margin-right: .5rem;
 }
 .tags a:hover {
-    border: 0.0625rem solid #00a1d6;
+    border: 0.1rem solid #00a1d6;
     color: #00a1d6;
 }
 .article-page {
@@ -376,7 +381,7 @@
 }
 /** 标签内容的美化 */
 .article-content {
-    padding: 1rem;
+    padding: 2rem;
 }
 .markdown-body table {
     color: var(--routine);
@@ -406,7 +411,7 @@
     padding: 0.8125rem 1.625rem;
 }
 .markdown-body {
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     line-height: 1.5;
     word-wrap: break-word;
 }
@@ -807,6 +812,6 @@ pre::after {
     text-align: right;
 }
 .article-main .other {
-    font-size: 0.7rem;
+    font-size: 1.5rem;
     padding: 2rem 2rem 0 2rem;
 }
diff --git a/component/index.article.php b/component/index.article.php
@@ -17,7 +17,7 @@
             </div>
             <?php if ($this->fields->article_type != 3): ?>
                 <div class="article-name">
-                    <?php $this->title(); ?>
+                    <a title="<?php $this->title(); ?>" href="<?php $this->permalink(); ?>"><?php $this->title(); ?></a>
                 </div>
             <?php endif; ?>
             <?php if ($this->fields->article_type == 0): ?>
@@ -51,9 +51,9 @@
         <?php if ($this->fields->article_type != 3 && $this->fields->article_type != 4): ?>
             <div class="related">
                 <?php if ($this->hidden):?>
-                    <a class="more" target="_blank" href="<?php $this->permalink(); ?>">查看更多</a>
+                    <a class="more" target="_blank" title="新窗口查看" href="<?php $this->permalink(); ?>">查看更多</a>
                 <?php else:?>
-                    <a class="more" href="<?php $this->permalink(); ?>">查看更多</a>
+                    <a class="more" title="查看更多" href="<?php $this->permalink(); ?>">查看更多</a>
                 <?php endif;?>
                 <div class="extra">
                     <div class="view">

diff --git a/libs/options.php b/libs/options.php
@@ -113,7 +113,7 @@ function themeConfig($form)
     $bannerBtn->setAttribute('class', 'theme-setting-content theme-setting-global');
     $form->addInput($bannerBtn);
 
-    $bannerUrl = new \Typecho\Widget\Helper\Form\Element\Textarea('bannerUrl', NULL, NULL, '首页幻灯片', '一行一个链接,大于3行将随机<br>注意最后一行不能为空');
+    $bannerUrl = new \Typecho\Widget\Helper\Form\Element\Textarea('bannerUrl', NULL, NULL, '首页幻灯片', '一行一个链接,大于3行将随机<br>例如：<br>https://dyedd.cn/usr/uploads/2020/08/4115250106.png|https://dyedd.cn/806.html|lanstar主题下载|你的下一代主题|#000|#fff|3|1.5|');
     $bannerUrl->setAttribute('class', 'theme-setting-content theme-setting-global');
     $form->addInput($bannerUrl);
 

diff --git a/libs/utils.php b/libs/utils.php
@@ -30,8 +30,8 @@ public static function bannerHandle($content)
                 $a = '<a href="' . $bannerInfo[1] . '" target="_blank" class="carousel_link">';
             }
             if(count($bannerInfo) > 4){
-                $style = '<h5 style="color: '.$bannerInfo[4].';font-size: '.$bannerInfo[6].'rem">' . $bannerInfo[2] . '</h5>
-                            <p style="color: '.$bannerInfo[5].';font-size: '.$bannerInfo[7].'rem">' . $bannerInfo[3] . '</p>';
+                $style = '<h5 style="color: '.$bannerInfo[4].';font-size:'.$bannerInfo[6].'rem">' . $bannerInfo[2] . '</h5>
+                            <p style="color: '.$bannerInfo[5].';font-size:'.$bannerInfo[7].'rem">' . $bannerInfo[3] . '</p>';
             }else{
                 $style = '<h5>' . $bannerInfo[2] . '</h5><p>' . $bannerInfo[3] . '</p>';
             }