refactor: refactor css

D-Sketon · Sep 21, 2024 · f162fbe · f162fbe
1 parent 0189d13
commit f162fbe
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 170 deletions.
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -2,41 +2,39 @@
   <div style="width: 100%; overflow: hidden">
     <div class="footer-line"></div>
   </div>
-  <div class="outer">
-    <div id="footer-info">
-      <% if (theme.copyright) { %>
-        <%- render(theme.copyright, 'pug'); %>
-      <% } %>
+  <div id="footer-info">
+    <% if (theme.copyright) { %>
+      <%- render(theme.copyright, 'pug'); %>
+    <% } %>
+    <div>
+      <span class="icon-copyright"></span>
+      <%= theme.footer.since %>-<%= date(new Date(), 'YYYY') %>
+      <span class="footer-info-sep"></span>
+      <%= config.author || config.title %>
+    </div>
+    <% if (theme.footer.powered) { %>
       <div>
-        <span class="icon-copyright"></span>
-        <%= theme.footer.since %>-<%= date(new Date(), 'YYYY') %>
-        <span class="footer-info-sep"></span>
-        <%= config.author || config.title %>
+        <%= __('powered_by') %>&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>&nbsp;
+        Theme.<a href="https://github.com/D-Sketon/hexo-theme-reimu" target="_blank">Reimu</a>
       </div>
-      <% if (theme.footer.powered) { %>
-        <div>
-          <%= __('powered_by') %>&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>&nbsp;
-          Theme.<a href="https://github.com/D-Sketon/hexo-theme-reimu" target="_blank">Reimu</a>
-        </div>
-      <% } %>
-      <% if (theme.footer.count) { %>
-        <div>
-          <span class="icon-brush"></span>
-          <%= totalcount(site) %>
-          &nbsp;|&nbsp;
-          <span class="icon-coffee"></span>
-          <%= totalmin2read(site) %>
-        </div>
-      <% } %>
-      <% if (theme.footer.busuanzi) { %>
-        <div>
-          <span class="icon-eye"></span>
-          <span id="busuanzi_container_site_pv"><%= __('busuanzi.pv') %>&nbsp;<span id="busuanzi_value_site_pv"></span></span>
-          &nbsp;|&nbsp;
-          <span class="icon-user"></span>
-          <span id="busuanzi_container_site_uv"><%= __('busuanzi.uv') %>&nbsp;<span id="busuanzi_value_site_uv"></span></span>
-        </div>
-      <% } %>
-    </div>
+    <% } %>
+    <% if (theme.footer.count) { %>
+      <div>
+        <span class="icon-brush"></span>
+        <%= totalcount(site) %>
+        &nbsp;|&nbsp;
+        <span class="icon-coffee"></span>
+        <%= totalmin2read(site) %>
+      </div>
+    <% } %>
+    <% if (theme.footer.busuanzi) { %>
+      <div>
+        <span class="icon-eye"></span>
+        <span id="busuanzi_container_site_pv"><%= __('busuanzi.pv') %>&nbsp;<span id="busuanzi_value_site_pv"></span></span>
+        &nbsp;|&nbsp;
+        <span class="icon-user"></span>
+        <span id="busuanzi_container_site_uv"><%= __('busuanzi.uv') %>&nbsp;<span id="busuanzi_value_site_uv"></span></span>
+      </div>
+    <% } %>
   </div>
 </footer>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -39,33 +39,31 @@
       <img fetchpriority="high" src="<%- url_for(theme.banner, {relative: false}) %>" alt="<%= post.title %>">
     <% } %>
   <% } %>
-  <div id="header-outer" class="outer">
-    <div id="header-title" class="inner">
-      <div id="logo-wrap">
-        <% if (post.type == '404') { %>
-          <a href="/" id="logo">
-            <h1><%= __("not_found.title") %></h1>
+  <div id="header-outer">
+    <div id="header-title">
+      <% if (post.type == '404') { %>
+        <a href="/" id="logo">
+          <h1><%= __("not_found.title") %></h1>
+        </a>
+      <% } else { %>
+        <% var title;
+            if (is_archive()) {
+              title = __('archives');
+            } else if (is_category()) {
+              title = __('categories');
+            } else if (is_tag()) {
+              title = __('tags');
+            } else if (post.title) {
+              title = post.title;
+            } else {
+              title = config.title;
+            } %>
+        <% if (title) { %>
+          <a href="<%- url_for() %>" id="logo">
+            <h1><%= title %></h1>
           </a>
-        <% } else { %>
-          <% var title;
-              if (is_archive()) {
-                title = __('archives');
-              } else if (is_category()) {
-                title = __('categories');
-              } else if (is_tag()) {
-                title = __('tags');
-              } else if (post.title) {
-                title = post.title;
-              } else {
-                title = config.title;
-              } %>
-          <% if (title) { %>
-            <a href="<%- url_for() %>" id="logo">
-              <h1><%= title %></h1>
-            </a>
-          <% } %>
         <% } %>
-      </div>
+      <% } %>
       <% if (post.type == 404) { %>
         <h2 id="subtitle-wrap">
           <a href="/" id="subtitle"><%= __("not_found.subtitle") %></a>

diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -9,7 +9,7 @@
     <div id="container">
       <div id="wrap">
         <%- partial('_partial/header', {post: page}, {cache: false}) %>
-        <div id="content" class="outer">
+        <div id="content">
           <% if (theme.sidebar === 'left') { %>
             <%- partial('_partial/sidebar', null) %>
           <% } %>

diff --git a/source/css/_partial/footer.styl b/source/css/_partial/footer.styl
@@ -1,9 +1,5 @@
 #footer
   background: linear-gradient(to top, var(--color-footer-background) 50%, transparent)
-  display: flex
-  justify-content: center
-  flex-direction: column
-  margin-top: auto
   padding: 40px 0 20px
   color: var(--grey-9)
 
@@ -31,8 +27,6 @@
 #footer-info
   line-height: line-height
   font-size: 0.85em
-  width: 100%
-  margin: 0
 
   div
     margin: 5px 0

diff --git a/source/css/_partial/header.styl b/source/css/_partial/header.styl
@@ -26,7 +26,6 @@
   height: 100%
   position: relative
   max-width: 100%
-  margin: 0
 
 [data-theme="dark"]
   #header-nav:hover
@@ -55,56 +54,47 @@
   font-family: font-title
   font-weight: 700
   text-align: center
-  height: logo-size
   position: absolute
   top: 50%
-  left: 0
-  margin-top: logo-size * -0.5
+  margin: logo-size * -0.5 2.5% 0
+  width: 95%
 
 $logo-text
   text-decoration: none
   color: #fff
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
 
 #logo
   @extend $logo-text
   font-size: logo-size
   font-weight: 700
-  line-height: logo-size
   letter-spacing: 2px
   display: inline-block
-  width: 80%
   transform: translateY(-20%)
   text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
 
   @media mg-large
-    width: 90%
     font-size: 35px
 
   @media mq-tablet
-    width: 95%
     font-size: 30px
 
   @media mq-mobile
-    width: 100%
     font-size: 30px
 
 #subtitle
   @extend $logo-text
   font-size: subtitle-size
   font-weight: 400
-  line-height: subtitle-size
   letter-spacing: 1px
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
 
   @media mg-large
     font-size: 15px
 
   @media mq-tablet
-    width: 95%
     font-size: 14px
 
   @media mq-mobile
-    width: 100%
     font-size: 13px
 
 #subtitle-wrap
@@ -113,14 +103,12 @@ $logo-text
 #main-nav
   display: flex
   align-items: center
-  margin-left: -15px
 
 $nav-link
   color: var(--red-0)
   opacity: 0.8
   text-decoration: none
   transition: opacity 0.2s
-  display: block
   padding: 20px 15px
 
 $nav-link-wrap
@@ -145,7 +133,6 @@ $nav-link-wrap
   width: font-size
   height: font-size
   padding: 20px 15px
-  position: relative
   if reimu_cursor
     cursor: var(--cursor-pointer)
   else
@@ -166,7 +153,6 @@ $nav-link-wrap
 
 .main-nav-link
   @extend $nav-link
-  font-weight: 400
   letter-spacing: 1px
 
 .main-nav-icon
@@ -188,7 +174,6 @@ $nav-link-wrap
 #sub-nav
   display: flex
   align-items: center
-  margin-right: -15px
 
 #nav-sun-btn:before, #nav-moon-btn:before
   font-weight: 700
diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
@@ -2,7 +2,8 @@
   @media mg-large
     display: none
   @media mq-large
-    column(sidebar-column)
+    width: 23%
+    margin: 0 1%
     height: inherit
 
 [data-theme="dark"] .sidebar-wrap

diff --git a/source/css/_util/grid.styl b/source/css/_util/grid.styl
diff --git a/source/css/_variables.styl b/source/css/_variables.styl
@@ -127,15 +127,6 @@ reimu_cursor = hexo-config("reimu_cursor")
 block-margin = 50px
 article-padding = 20px
 mobile-nav-width = 280px
-main-column = 9
-sidebar-column = 3
-
-_sidebar-column = sidebar-column
-
-// Grids
-column-width = 80px
-gutter-width = 20px
-columns = main-column + _sidebar-column
 
 // Media queries
 mq-mobile = "screen and (max-width: 479px)"