Merge pull request #6 from RavelloH/build-1.3.2

Build 1.3.2

README.md

@@ -20,9 +20,18 @@
 ## 演示
 示例博客:https://ravelloh.github.io 
 演示网站:https://ravelloh.github.io/RTheme
+![](https://ravelloh.github.io/RTheme/img/screenshot1.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot2.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot3.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot4.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot5.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot6.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot7.png)
+![](https://ravelloh.github.io/RTheme/img/screenshot8.png)
 
 ## 使用
-- 直接在此Github仓库内选择使用此模板
+- 直接在此Github仓库内选择使用此模板(推荐)
+ - 选择此页面中的`Use this template`，在下一页面内自定义仓库，*注意:需要选择下方的`Include all branches`，之后在仓库设置中的Pages项中，选择以仓库的page分支作为GithubPages页面，保存即可
 - 下载正式版ZIP:https://github.com/RavelloH/RTheme/archive/refs/heads/main.zip
 - 或直接clone:https://github.com/RavelloH/RTheme.git
 
@@ -83,7 +92,7 @@
  * iconfontmini:20px图标
  * iconfontbig:50px图标，带top12px
  * iconfontlarge:70px图标 
- 以下icon效果请在<https://ravelloh.github.io/RTheme/help/icon/>中查看
+ 以下icon效果请在<https://ravelloh.github.io/RTheme/documents/icon.html>中查看
  * icon-search
  * icon-about
  * icon-share

css/style.css

@@ -77,7 +77,7 @@ button,
 textarea,
 select,
 option {
- font: normal 1em 'MicrosoftYaqiHeiBold', 'MicrosoftYahei'"Microsoft Yahei", sans-serif
+ font: normal 1em 'MicrosoftYahei', sans-serif
 }
 
 body,
@@ -623,21 +623,25 @@ 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;
 }
@@ -671,12 +675,12 @@ section {
  width: 100%;
  height: 80%;
  overflow: auto;
- word-break:break-all;
+ word-break: break-all;
 }
 
 .codeline {
-  width: 98%;
-  height: auto;
+ width: 98%;
+ height: auto;
 }
 
 ::-webkit-scrollbar {
@@ -740,39 +744,39 @@ img.img {
 }
 
 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;
+ 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;
+ 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;
+ 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 {
@@ -797,3 +801,45 @@ a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
 }
+
+/* Container */
+.imgarea {
+ --column-count-small: 1;
+ --column-count-medium: 2;
+ --column-count-large: 3;
+ --column-gap: 0.125rem;
+ padding: var(--column-gap);
+}
+
+/* Columns */
+.imglist {
+ column-gap: var(--column-gap);
+ column-count: var(--column-count-small);
+ column-width: calc(1 / var(--column-count-small) * 100%);
+}
+
+@media only screen and (min-width: 640px) {
+ .imglist {
+ column-count: var(--column-count-medium);
+ column-width: calc(1 / var(--column-count-medium) * 100%);
+ }
+}
+
+@media only screen and (min-width: 800px) {
+ .imglist {
+ column-count: var(--column-count-large);
+ column-width: calc(1 / var(--column-count-large) * 100%);
+ }
+}
+
+/* Bricks */
+.brick {
+ width: 100%;
+ height: auto;
+ margin: var(--column-gap) 0;
+ display: block;
+}
+
+.brick:first-child {
+ margin: 0 0 var(--column-gap);
+}

documents/icon.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+ <meta charset="UTF-8">
+ <title>RTheme | Documents-icon</title>
+ <meta name="keywords" content="RTheme,documents,help,icon">
+ <meta name="description" content="RTheme文档-icon">
+
+ <!-- CSS -->
+ <link type="text/css" rel="stylesheet" href="/RTheme/css/common.css">
+ <link type="text/css" rel="stylesheet" href="/RTheme/css/style.css">
+ <link type="text/css" rel="stylesheet" href="/RTheme/css/iconfont.css">
+ <!-- JavaScript -->
+ <script type="text/javascript" src="/RTheme/js/loading.js"></script>
+ <script type="text/javascript" src="/RTheme/js/common.js"></script>
+</head>
+
+<body>
+
+ <body>
+ <section class="showcase">
+ <header>
+ <h2 class="logo">
+ <a href="/RTheme/">
+ <img class="logoimg" src="/RTheme/img/avatar.jpg" style="width: 1.5em;border-radius: 50%;"
+ alt="avatar">
+ </a>
+ </h2>
+ <div class="headers">
+ <nav>
+ <a href="/RTheme/">
+ HOME
+ </a>
+ <a href="/RTheme/documents/">
+ DOCUMENTS
+ </a>
+ <a href="/RTheme/intro/">
+ INTRO
+ </a>
+ <a href="/RTheme/about">
+ ABOUT
+ </a>
+ </p>
+ </nav>
+ </div>
+ <div class="toggle" class="header">
+ </div>
+ </header>
+
+ <div class="overlay"></div>
+ <div class="article" id="text">
+ <h2>Icon-图标</h2>
+ <span class="iconfontmini icon-clock"></span> 2022-04-25 · <span
+ class="iconfontmini icon-classification"></span>
+ <a href="#">文档</a>·
+ <span class="iconfontmini icon-tag"></span>
+ <a class="tag" href="#">HELP</a>
+ <hr>
+ <br><br>
+ <h4><a name="展示" href="#展示">#展示</a></h4>
+ <p>
+ <span class="iconfontlarge icon-search"></span>
+ <span class="iconfontlarge icon-about"></span>
+ <span class="iconfontlarge icon-share"></span>
+ <span class="iconfontlarge icon-note"></span>
+ <span class="iconfontlarge icon-archive"></span>
+ <span class="iconfontlarge icon-error"></span>
+ <span class="iconfontlarge icon-tag"></span>
+ <span class="iconfontlarge icon-gang"></span>
+ <span class="iconfontlarge icon-annotation"></span>
+ <span class="iconfontlarge icon-home"></span>
+ <span class="iconfontlarge icon-aboutcircle"></span>
+ <span class="iconfontlarge icon-classification"></span>
+ <span class="iconfontlarge icon-app"></span>
+ <span class="iconfontlarge icon-clock"></span>
+ <span class="iconfontlarge icon-bilibili"></span>
+ <span class="iconfontlarge icon-menu"></span>
+ <span class="iconfontlarge icon-github"></span>
+ <span class="iconfontlarge icon-neteasemusic"></span>
+ <span class="iconfontlarge icon-article"></span>
+ <span class="iconfontlarge icon-help"></span>
+ <span class="iconfontlarge icon-link"></span>
+ <span class="iconfontlarge icon-friend"></span>
+ <span class="iconfontlarge icon-gift"></span>
+ <span class="iconfontlarge icon-QR"></span>
+ <span class="iconfontlarge icon-add"></span>
+ <span class="iconfontlarge icon-del"></span>
+ <span class="iconfontlarge icon-download"></span>
+ <span class="iconfontlarge icon-bad"></span>
+ <span class="iconfontlarge icon-right"></span>
+ <span class="iconfontlarge icon-fujian"></span>
+ <span class="iconfontlarge icon-code"></span>
+ <span class="iconfontlarge icon-message"></span>
+ <span class="iconfontlarge icon-fuzhi"></span>
+ <span class="iconfontlarge icon-like"></span>
+ <span class="iconfontlarge icon-star"></span>
+ <span class="iconfontlarge icon-lock"></span>
+ <span class="iconfontlarge icon-good"></span>
+ <span class="iconfontlarge icon-scan"></span>
+ <span class="iconfontlarge icon-save"></span>
+ <span class="iconfontlarge icon-flag"></span>
+ <span class="iconfontlarge icon-upload"></span>
+ <span class="iconfontlarge icon-more1"></span>
+ <span class="iconfontlarge icon-more2"></span>
+ </p>
+
+
+
+ </div>
+
+ <ul class="social">
+ <li><a href="/RTheme/about/"><span class="iconfont icon-about"></span></a></li>
+ <li><a href="http://github.com/ravelloh/RTheme" target="_blank" rel="noreferrer"><span
+ class="iconfont icon-github"></span></a></li>
+ </ul>
+ </section>
+ <div class="menu">
+ <ul>
+ <script type="text/javascript" src="js/menu.js"></script>
+ </ul>
+ </div>
+ <script src="js/script.js"></script>
+ <script src="//instant.page/5.1.0" type="module"
+ integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
+ </body>
+
+</html>