Site updated: 2024-07-21 23:46:09

2024/07/14/基本md语法测试/index.html

@@ -312,7 +312,7 @@ <h2 id="链接语法"><a href="#链接语法" class="headerlink" title="链接
 <p>这是一个链接 <a target="_blank" rel="noopener" href="https://markdown.com.cn/">Markdown语法</a></p>
 <p>鼠标悬浮出现文字 <a target="_blank" rel="noopener" href="https://markdown.com.cn/" title="最好的markdown教程">Markdown语法</a></p>
 <h3 id="网址和Email地址"><a href="#网址和Email地址" class="headerlink" title="网址和Email地址"></a>网址和Email地址</h3><p>使用尖括号可以很方便地把URL或者email地址变成可点击的链接。</p>
-<p><code>&lt;https://markdown.com.cn&gt;</code> <a target="_blank" rel="noopener" href="https://markdown.com.cn/">https://markdown.com.cn</a><br><code>&lt;https://markdown.com.cn&gt;</code> <a href="mailto:&#x66;&#x61;&#x6b;&#101;&#x40;&#101;&#x78;&#x61;&#109;&#x70;&#x6c;&#101;&#46;&#x63;&#x6f;&#x6d;">&#x66;&#x61;&#x6b;&#101;&#x40;&#101;&#x78;&#x61;&#109;&#x70;&#x6c;&#101;&#46;&#x63;&#x6f;&#x6d;</a></p>
+<p><code>&lt;https://markdown.com.cn&gt;</code> <a target="_blank" rel="noopener" href="https://markdown.com.cn/">https://markdown.com.cn</a><br><code>&lt;https://markdown.com.cn&gt;</code> <a href="mailto:&#102;&#x61;&#x6b;&#101;&#x40;&#x65;&#x78;&#97;&#109;&#112;&#108;&#x65;&#x2e;&#99;&#x6f;&#109;">&#102;&#x61;&#x6b;&#101;&#x40;&#x65;&#x78;&#97;&#109;&#112;&#108;&#x65;&#x2e;&#99;&#x6f;&#109;</a></p>
 <h3 id="带格式化的链接"><a href="#带格式化的链接" class="headerlink" title="带格式化的链接"></a>带格式化的链接</h3><p>强调链接, 在链接语法前后增加星号。 要将链接表示为代码，请在方括号中添加反引号。</p>
 <p><code>I love supporting the **[EFF](https://eff.org)**.</code> I love supporting the <strong><a target="_blank" rel="noopener" href="https://eff.org/">EFF</a></strong>.<br><code>This is the *[Markdown Guide](https://www.markdownguide.org)*.</code> This is the <em><a target="_blank" rel="noopener" href="https://www.markdownguide.org/">Markdown Guide</a></em>.<br><code>See the section on [`code`](#code).</code> See the section on <a href="#code"><code>code</code></a>.</p>
 <h3 id="引用类型链接"><a href="#引用类型链接" class="headerlink" title="引用类型链接"></a>引用类型链接</h3><p>引用样式链接是一种特殊的链接，它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。</p>

css/index.css

@@ -5463,113 +5463,304 @@ span.tags-punctuation {
     margin-top: 0;
   }
 }
-div#swiper_container {
-  width: 100%;
-  height: 12rem;
-  position: relative;
-  transition: all 0.3s;
+#home_top .recent-top-post-group {
+  border-radius: 12px;
   overflow: hidden;
+  width: 100%;
+  margin-bottom: 0;
+  user-select: none;
+}
+@media screen and (max-width: 768px) {
+  #home_top .recent-top-post-group {
+    border-radius: 0;
+  }
+}
+#home_top .recent-top-post-group .recent-post-top {
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: 0.5rem;
 }
-div#swiper_container .blog-slider__pagination .swiper-pagination-bullet {
-  margin: 0 8px;
-  width: 11px;
-  height: 11px;
-  display: inline-block;
-  border-radius: 99px;
-  background: var(--efu-gray);
-  opacity: 0.2;
-  transition: all 0.3s;
+@media screen and (max-width: 1200px) {
+  #home_top .recent-top-post-group .recent-post-top {
+    flex-direction: column;
+  }
 }
-div#swiper_container .blog-slider__pagination .swiper-pagination-bullet-active {
-  opacity: 1;
-  background: var(--efu-main);
-  height: 30px;
+#home_top .recent-top-post-group .recent-post-top::-webkit-scrollbar {
+  display: none;
 }
-div#swiper_container .blog-slider__pagination {
-  position: absolute;
-  z-index: 21;
-  text-align: center;
+#home_top .recent-top-post-group .recent-post-top .recent-post-group {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  flex-direction: column;
-  height: 60%;
+  flex-wrap: wrap;
+  align-content: space-between;
+  gap: 0.5rem;
 }
-#swiperBox.recent-post-item {
-  width: 100%;
-  margin-top: 0;
-  flex: 1 1 100%;
-  max-width: none;
+@media screen and (max-width: 1200px) {
+  #home_top .recent-top-post-group .recent-post-top .recent-post-group {
+    flex-wrap: nowrap;
+  }
 }
-@media screen and (max-width: 798px) {
-  #swiperBox.recent-post-item {
-    display: none;
+#bannerGroup {
+  display: flex;
+}
+@media screen and (min-width: 1201px) {
+  #bannerGroup {
+    width: calc(50% - 0.25rem);
+    height: calc(328px + 0.5rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 }
-#swiperBox .blog-slider__item.swiper-slide {
-  padding: 1rem;
+#bannerGroup .tags-group-wrapper {
+  margin-top: 0;
   display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  height: 100%;
+  flex-wrap: wrap;
+  animation: rowup 60s linear infinite;
+  width: 300px;
+  margin-left: auto;
 }
-#swiperBox .blog-slider__item.swiper-slide:hover .blog-slider__img img {
-  transform: scale(1.1);
-  transition: all 0.3s;
+#bannerGroup .tags-group-icon-pair {
+  display: flex;
 }
-#swiperBox .blog-slider__item.swiper-slide:hover .blog-slider__title {
-  color: var(--efu-main);
-  transition: all 0.3s;
+#bannerGroup .tags-group-icon-pair .tags-group-icon:nth-child(even) {
+  margin-left: 4rem;
+}
+.topGroup {
+  display: flex;
+  gap: 0.5rem;
 }
-#swiperBox .blog-slider__img {
+@media screen and (max-width: 1200px) {
+  .topGroup {
+    overflow-x: auto;
+  }
+  .topGroup::-webkit-scrollbar {
+    display: none;
+  }
+}
+@media screen and (min-width: 1201px) {
+  .topGroup {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: calc(328px + 0.5rem);
+    align-content: space-between;
+    width: calc(50% - 0.25rem);
+    position: relative;
+    animation: slide-in 0.6s 0.1s backwards;
+  }
+}
+.topGroup .recent-post-item {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% / 3 - 0.5rem);
+  min-width: 200px;
+  align-items: flex-start;
+  background: var(--efu-card-bg);
   border-radius: 12px;
   overflow: hidden;
-  width: 35%;
-  height: 100%;
-  transition: all 0.3s;
-  cursor: pointer;
+  height: 164px;
+  max-height: 164px;
+  border: var(--style-border-always);
+  transition: 0.3s;
+  position: relative;
+  box-shadow: var(--efu-shadow-border);
+}
+.topGroup .recent-post-item:nth-last-child(2):nth-child(1),
+.topGroup .recent-post-item:nth-last-child(1):nth-child(2) {
+  width: calc(100% / 2 - 0.5rem);
+}
+@media screen and (max-width: 1200px) {
+  .topGroup .recent-post-item {
+    width: 200px;
+    min-width: 200px;
+  }
+}
+.topGroup .recent-post-item:hover .post_cover a .recent-post-top-text {
+  left: 0;
 }
-#swiperBox .blog-slider__img img {
+.topGroup .recent-post-item .post_cover {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
 }
-#swiperBox .blog-slider__content {
-  margin: 0 2rem 0 1rem;
-  position: relative;
-  width: 65%;
+.topGroup .recent-post-item .post_cover a {
+  height: 100px;
+  overflow: hidden;
   display: flex;
-  align-items: left;
-  flex-direction: column;
-  height: 100%;
 }
-#swiperBox .blog-slider__content .article-meta-wrap {
-  padding: 0;
-  bottom: 0;
-}
-#swiperBox .blog-slider__content .article-meta-wrap .tags-punctuation:hover {
-  color: var(--efu-main);
-  transition: all 0.3s;
+.topGroup .recent-post-item .post_cover a img {
+  object-fit: cover;
+  width: 100%;
+  background: var(--efu-secondbg);
 }
-#swiperBox .blog-slider__content .blog-slider__title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--efu-fontcolor);
-  margin: 0;
-  transition: all 0.3s;
+.topGroup .recent-post-item .post_cover a .recent-post-top-text {
+  position: absolute;
+  top: 0;
+  left: -50px;
+  display: flex;
+  z-index: 1;
+  background: var(--efu-theme);
+  color: var(--efu-white);
+  padding: 2px 8px;
+  font-size: 0.6rem;
+  border-radius: 0 0 12px 0;
+  transition: 0.3s;
   cursor: pointer;
 }
-#swiperBox .blog-slider__content .blog-slider__desc {
-  -webkit-line-clamp: 4;
-  display: -webkit-box;
+.recent-post-info {
+  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
+  transition: 0.3s;
+}
+.recent-post-info .article-title {
+  -webkit-line-clamp: 2;
   overflow: hidden;
+  display: -webkit-box;
   -webkit-box-orient: vertical;
-  opacity: 0.8;
-  font-size: 14px;
-  line-height: 1.8;
+  line-height: 1.5;
+  justify-content: center;
+  align-items: flex-end;
+  align-content: center;
+  font-weight: 700;
+  font-size: 0.8rem;
+  padding: 0;
+}
+.recent-post-info .article-title:hover {
+  color: var(--efu-fontcolor);
+}
+.topGroup .todayCard {
+  display: none;
+}
+@media screen and (min-width: 1201px) {
+  .topGroup .todayCard {
+    position: absolute;
+    width: 100%;
+    z-index: 3;
+    height: 100%;
+    top: 0;
+    right: 0;
+    background: var(--efu-card-bg);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: 0.3s;
+    display: flex;
+    cursor: pointer;
+    pointer-events: all;
+  }
+  .topGroup .todayCard::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    box-shadow: 0 -109px 133px -9px none inset;
+  }
+  .topGroup .todayCard.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .topGroup .todayCard .todayCard-info {
+    position: absolute;
+    bottom: 2rem;
+    left: 2rem;
+    z-index: 2;
+    color: var(--efu-white);
+    max-width: 60%;
+    transition: 0.3s;
+  }
+  .topGroup .todayCard .todayCard-info .todayCard-tips {
+    opacity: 0.8;
+    font-size: 0.6rem;
+  }
+  .topGroup .todayCard .todayCard-info .todayCard-title {
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 36px;
+  }
+  .topGroup .todayCard .todayCard-cover {
+    position: absolute;
+    min-width: 100%;
+    min-height: 100%;
+    top: 0;
+    left: 0;
+    background-size: cover;
+    z-index: -1;
+    transition: 0.3s;
+  }
+  .topGroup .todayCard .banner-button-group {
+    position: absolute;
+    right: 2rem;
+    bottom: 2rem;
+    display: flex;
+    transition: 0.3s;
+  }
+  .topGroup .todayCard .banner-button {
+    background: var(--efu-white-op);
+    border-radius: 20px;
+    color: var(--efu-white);
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    transition: 0.3s;
+    cursor: pointer;
+    backdrop-filter: saturate(180%) blur(20px);
+    transform: translateZ(0);
+    height: 40px;
+    width: 118px;
+    justify-content: center;
+  }
+  .topGroup .todayCard .banner-button i {
+    margin-right: 8px;
+    font-size: 22px;
+  }
+  .topGroup .todayCard .banner-button:hover {
+    background: var(--efu-theme);
+    color: var(--efu-white);
+  }
+  .topGroup .todayCard.hide .todayCard-info {
+    bottom: 1rem;
+    opacity: 0;
+  }
+  .topGroup .todayCard.hide .todayCard-cover {
+    transform: scale(1.2);
+  }
+  .topGroup .todayCard.hide .banner-button-group {
+    bottom: 1rem;
+  }
+}
+.banners-links {
+  display: flex;
+  position: absolute;
+  bottom: 20px;
+  left: 40px;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  height: 120px;
+}
+.banners-link-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 18px 8px 14px;
+  border-radius: 60px;
+  margin-bottom: 12px;
+  color: var(--efu-white);
+  width: 100px;
+  position: relative;
+  background-size: 200%;
+}
+.banners-link-btn:not(:last-child) {
+  margin-right: 10px;
+}
+.banners-link-btn:hover {
+  background-position: 100% 0;
+}
+.banners-link-title {
+  margin-left: auto;
 }
 #category-bar {
   padding: 0.4rem 0.7rem;