合并版本升级

Build 1.3.1
RavelloH · Mar 28, 2022 · dc8c2cb · dc8c2cb
2 parents 8771dbc + 66a8f2f
commit dc8c2cb
Show file tree

Hide file tree

Showing 3 changed files with 483 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,145 @@
-# RTheme
-一个由html css js组成的网站主题
+# <div align="center">RTheme
+```
+ 
+ ____ ______ __ __ __ _ __ 
+/\ _`\ /\__ _\/\ \ /\ \/\ \ /' \ /'__`\ 
+\ \ \L\ \/_/\ \/\ \ \___ __ ___ ___ __ \ \ \ \ \/\_, \ /\_\L\ \ 
+ \ \ , / \ \ \ \ \ _ `\ /'__`\/' __` __`\ /'__`\ _______ \ \ \ \ \/_/\ \ \/_/_\_<_ 
+ \ \ \\ \ \ \ \ \ \ \ \ \/\ __//\ \/\ \/\ \/\ __/ /\______\ \ \ \_/ \ \ \ \ __/\ \L\ \
+ \ \_\ \_\ \ \_\ \ \_\ \_\ \____\ \_\ \_\ \_\ \____\ \/______/ \ `\___/ \ \_\/\_\ \____/
+ \/_/\/ / \/_/ \/_/\/_/\/____/\/_/\/_/\/_/\/____/ `\/__/ \/_/\/_/\/___/ 
+ 
+```
 
+</div>
+<div align="center">
+
+**This document also supports [English](https://github.com/RavelloH/RTheme/blob/main/doc/README-En.md).**
+</div>
 
-## 查看效果：
-https://ravelloh.github.io
+## 演示
+示例博客:https://ravelloh.github.io 
+演示网站:https://ravelloh.github.io/RTheme
+
+## 使用
+- 直接在此Github仓库内选择使用此模板
+- 下载正式版ZIP:https://github.com/RavelloH/RTheme/archive/refs/heads/main.zip
+- 或直接clone:https://github.com/RavelloH/RTheme.git
+
+## 功能
+### 实现的功能 
+- [x] 响应式布局，最低适配至380*640，无上限
+- [x] 横版布局，自动左右分栏
+- [x] 顶栏/目录双索引，移动端分辨率不足时自动隐藏顶栏
+- [x] 网页跳转特效
+- [x] 目录/Copyright快捷更新，Copyright支持自动更新
+- [x] 支持代码框，自动显示行数(代码高亮需引入外部js)
+- [x] 图片大小自动调整，过大自动缩小
+- [x] 内置常用icon，五种大小自定义
+- [x] a标签hover特效且分有无下划线
+- [x] 支持404页面
+- [x] 支持打字机、Loading特效等
+- [x] 底栏小icon
+- [x] 文章更新时间计时
+- [x] 以bold版字体文件代替`<b>`，更加美观
+- [x] 自定义滚动条
+- [x] 文字大小依分辨率调整
+- [x] 内联页面自动预加载
+- [x] 原生配色适应utteranc评论插件
+- [x] 支持图片懒加载(默认关闭)
+
+## 标签指南
+* `<a>` 
+ * class: 
+ * button:白底黑字大按钮，带伸缩hover 
+ * c:自带间隔，带变色hover
+ * linkline:带虚线下划线
+ * tag:标签用
+ * m:目录索引用，同tag
+* `<div>` 
+ * class: 
+ * text：文本区(分栏)
+ * listline：有自动滚动条的div(分栏)
+ * ~~codeline:代码块，已被pre平替~~
+ * overlay：遮罩
+ * headers：顶栏
+ * center：元素居中
+ * right：右对齐（默认左）
+ * article：宽屏div（文章用）
+ * menu：目录区域
+ * showcase：显示区域(遮罩上)
+ * toggle：目录按钮
+ * id:
+ * text：进入动画
+ * active：退出动画
+* `<ul>`
+ * class:
+ * social：左下小图标
+* `<span>`: 
+ 注:span使用方法为class里同时写大小加类型，如大号“关于”的图标:`<span class="iconfontlarge icon-about"></span>`
+ * class:
+ * iconfont:50px图标
+ * iconfontsmall:26px图标
+ * iconfontmini:20px图标
+ * iconfontbig:50px图标，带top12px
+ * iconfontlarge:70px图标 
+ 以下icon效果请在<https://ravelloh.github.io/RTheme/help/icon/>中查看
+ * icon-search
+ * icon-about
+ * icon-share
+ * icon-note
+ * icon-archive
+ * icon-error
+ * icon-tag
+ * icon-gang
+ * icon-home
+ * icon-annotation
+ * icon-classification
+ * icon-aboutcircle
+ * icon-clock
+ * icon-app
+ * icon-menu
+ * icon-bilibili
+ * icon-neteasemusic
+ * icon-github
+ * icon-article
+ * icon-help
+ * icon-link
+ * icon-friend
+ * icon-gift
+ * icon-QR
+ * icon-add
+ * icon-del
+ * icon-download
+ * icon-bad
+ * icon-right
+ * icon-fujian
+ * icon-code
+ * icon-message
+ * icon-fuzhi
+ * icon-message
+ * icon-like
+ * icon-star
+ * icon-lock
+ * icon-good
+ * icon-scan
+ * icon-save
+ * icon-flag
+ * icon-upload
+ * icon-more1
+ * icon-more2
+* `<p>`
+ * class: 
+ * typing:打字机特效
+
+* 全局:
+ * class: 
+ * fl:元素左对齐(环绕)
+ * fr:元素右对齐(环绕)
+ * tc:文字居中
+ * tr:文字右对齐
+ * logoimg:头像
+ * center:元素居中
 
-## 使用方式:
-clone后直接修改。
-
-内附指南，位于index.html内。
-
-如有需要，自行修改。
+## LICENCE
+[MIT License](https://github.com/RavelloH/RTheme/blob/main/LICENSE)
diff --git a/css/style.css b/css/style.css
@@ -37,7 +37,7 @@ b {
 html {
  background-color: #1e1e1e;
  color: #c6c9ce;
- font-size: 15px;
+ font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
 }
@@ -366,12 +366,7 @@ a:active {
  margin-right: 40px;
 }
 
-
-/* 
-设计有加载动画，
-使用<div class="loadingcircle"></div>引用。
-
-.loadingcircle {
+/* .loadingcircle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
@@ -436,7 +431,7 @@ body .text {
 
 header {
  position: absolute;
- top: -10px;
+ top: -20px;
  left: 0;
  width: 100%;
  padding: 40px 100px;
@@ -627,6 +622,22 @@ header .logo {
  }
 }
 
+@media (max-width: 700px) {
+
+ .headers {
+ visibility: hidden;
+ }
+ html {
+ font-size: 10px;
+ }
+ .text h2 {
+ font-size: 2em;
+ }
+ .text h3 {
+ font-size: 1em;
+ }
+
+}
 textarea {
  resize: none;
 }
@@ -646,7 +657,6 @@ code {
  font-family: Consolas, Monaco, courier, monospace;
 }
 
-/* 如果需要遮罩切换动画，注释掉下面的。(会有BUG) */
 section {
  height: 100%;
 }
@@ -661,6 +671,12 @@ section {
  width: 100%;
  height: 80%;
  overflow: auto;
+ word-break:break-all;
+}
+
+.codeline {
+ width: 98%;
+ height: auto;
 }
 
 ::-webkit-scrollbar {
@@ -720,7 +736,64 @@ img.img {
 
 .linkline {
  border-bottom: 1px dashed #ffffff;
- height: 50px;
- width: 350px;
  color: #ffffff
-}
+}
+
+pre {
+ background: #2d2d2d;
+ color: rgb(201,209,217);
+ font-family: Consolas;
+ text-align: left;
+ padding: 1em;
+ padding-left: 0.8em;
+ margin: 1em;
+ border-radius: 5px;
+ counter-reset: line;
+ word-spacing: normal;
+ word-break: normal;
+ line-height: 0.2;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow: auto;
+}
+
+pre span {
+ display: block;
+ line-height: 1.5rem;
+ white-space: pre;
+}
+
+pre span:before {
+ counter-increment: line;
+ content: counter(line);
+ display: inline-block;
+ width: 3em;
+ text-align: right;
+ border-right: 2px solid #999;
+ padding-right: .8em;
+ margin-right: 1em;
+ color: #999;
+}
+
+a {
+ display: inline-block;
+ position: relative;
+}
+
+a:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #0087ca;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+a:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}