style:所有页面均切换至响应式设计。

This commit is contained in:
徐涛 2021-04-27 08:00:27 +08:00
parent a1fb42307d
commit 3cabf98b56
11 changed files with 72 additions and 56 deletions

View File

@ -1,5 +1,5 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<% if (!is_month()) { %> <% if (!is_month()) { %>
<div class="uk-card uk-card-default uk-card-body uk-height-1-1"> <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
<%- list_archives({type: 'monthly', order: '1', show_count: true, format: 'YYYY年MM月'}) %> <%- list_archives({type: 'monthly', order: '1', show_count: true, format: 'YYYY年MM月'}) %>
@ -8,7 +8,7 @@
<%- partial('partial/post/list', {start: 1}) %> <%- partial('partial/post/list', {start: 1}) %>
<% } %> <% } %>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags': false}) %> <%- partial('partial/side', {'noCategories': false, 'noTags': false}) %>
</section> </section>
</div> </div>

View File

@ -1,10 +1,10 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<div class="uk-card uk-card-default uk-card-body uk-height-1-1"> <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
<%- list_categories({orderby: 'name', order: '1', show_count: true, class: "categories-toc"}) %> <%- list_categories({orderby: 'name', order: '1', show_count: true, class: "categories-toc"}) %>
</div> </div>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': true, 'noTags': false}) %> <%- partial('partial/side', {'noCategories': true, 'noTags': false}) %>
</section> </section>
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<%- partial('partial/post/list', {start: 1}) %> <%- partial('partial/post/list', {start: 1}) %>
<% if (page.total > 1) { %> <% if (page.total > 1) { %>
<div class="uk-flex uk-flex-between p-1"> <div class="flex rx-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>" <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>" href="/<%- page.prev_link %>"
uk-slidenav-previous></a> uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div> </div>
<% } %> <% } %>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': true, 'noTags': false}) %> <%- partial('partial/side', {'noCategories': true, 'noTags': false}) %>
</section> </section>
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-m px-1 extend-1-a">
<%- partial('partial/post/list', {start: 1}) %> <%- partial('partial/post/list', {start: 1}) %>
<% if (page.total > 1) { %> <% if (page.total > 1) { %>
<div class="uk-flex uk-flex-between p-1"> <div class="flex rx-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>" <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>" href="/<%- page.prev_link %>"
uk-slidenav-previous></a> uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div> </div>
<% } %> <% } %>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags': false}) %> <%- partial('partial/side', {'noCategories': false, 'noTags': false}) %>
</section> </section>
</div> </div>

View File

@ -1,16 +1,15 @@
<footer class="uk-flex uk-flex-row uk-flex-between uk-flex-center py-2 px-2"> <footer class="flex row-w col-n rx-between-a ry-center-a py-2 px-2">
<div class="uk-width-1-3 uk-text-small"> <div class="b-1-3-a uk-text-small flex col-a hin him">
<p class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%> <div class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%></div>
</p> <div class="uk-text-meta m-0">Theme Grid by FarDawn.</div>
<p class="uk-text-meta m-0">Theme Grid by FarDawn.</p>
</div> </div>
<div class="uk-width-1-3 uk-text-small uk-text-center"> <div class="b-1-3-a w-2-2-n uk-text-small text align-c-a align-l-m extend-1-m">
<p class="m-0">&copy; ArchGrid, since 2021.</p> <p class="m-0">&copy; ArchGrid, since 2021.</p>
<p class="m-0">Proudly presents by FarDawn.</p> <p class="m-0">Proudly presents by FarDawn.</p>
</div> </div>
<div class="uk-width-1-3 uk-text-small uk-text-right"> <div class="b-1-3-a w-2-2-n uk-text-small text align-r-a align-c-n extend-1-m">
<p class="m-0"><a href="https://beian.miit.gov.cn">冀ICP备2021008151号-1</a></p> <p class="m-0"><a href="https://beian.miit.gov.cn">冀ICP备2021008151号-1</a></p>
<p class="m-0 uk-flex uk-flex-row uk-flex-right uk-flex-middle"> <p class="m-0 flex row-a rx-end-a rx-center-n ry-center-a">
<a target="_blank" <a target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010402002063"> href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010402002063">
<img src="/images/beian.png"> <img src="/images/beian.png">

View File

@ -4,7 +4,8 @@
<span class="uk-navbar-item">用碎片化的时间收集碎片化的知识</span> <span class="uk-navbar-item">用碎片化的时间收集碎片化的知识</span>
</div> </div>
<div class="uk-navbar-right"> <div class="uk-navbar-right">
<ul class="uk-navbar-nav"> <a href="#" class="uk-navbar-toggle hiw" uk-navbar-toggle-icon uk-toggle="target: #off-menu"></a>
<ul class="uk-navbar-nav hin him">
<% if (!is_home()) { %> <% if (!is_home()) { %>
<li><a href="/index.html">返回首页</a></li> <li><a href="/index.html">返回首页</a></li>
<% } %> <% } %>
@ -14,3 +15,19 @@
</ul> </ul>
</div> </div>
</nav> </nav>
<div id="off-menu" class="offcanvas-menu" uk-offcanvas="flip: true; mode: push; overlay: true">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-card uk-card-small uk-card-default uk-card-body mt-4 mb-2">
<ul class="uk-nav-default hiw" uk-nav>
<% if (!is_home()) { %>
<li><a href="/index.html">返回首页</a></li>
<% } %>
<li<% if (is_current('/categories')) { %> class="uk-active"<% } %>><a href="/categories">知识分类</a></li>
<li<% if (is_current('/tags')) { %> class="uk-active"<% } %>><a href="/tags">知识标签</a></li>
<li<% if (is_archive()) { %> class="uk-active"<% } %>><a href="/archives">归档文章</a></li>
</ul>
</div>
<%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
</div>
</div>

View File

@ -6,7 +6,7 @@
<%= post.title %> <%= post.title %>
</a> </a>
</h3> </h3>
<div class="uk-flex uk-flex-left"> <div class="flex row-a col-n rx-start-a">
<div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm" ) %> <div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm" ) %>
</div> </div>
<% if (post.categories.length> 0) { %> <% if (post.categories.length> 0) { %>
@ -18,25 +18,25 @@
separator: ' / ' separator: ' / '
}) %> }) %>
</div> </div>
<% } %> <% } %>
</div> </div>
</div> </div>
<% if (post.excerpt) { %> <% if (post.excerpt) { %>
<div class="uk-card-body"> <div class="uk-card-body">
<%- post.excerpt %> <%- post.excerpt %>
</div> </div>
<% } %> <% } %>
<% if (post.tags.length> 0) { %> <% if (post.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left"> <div class="uk-card-footer flex row-a rx-start-a hin">
<div class="tag-title">分类标签:</div> <div class="tag-title">分类标签:</div>
<div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1"> <div class="flex row-a rx-start-a w-wrap-a extend-1-a">
<% post.tags.each(function(tag) { %> <% post.tags.each(function(tag) { %>
<span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>"> <span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
<%= tag.name %> <%= tag.name %>
</span> </span>
<% }) %> <% }) %>
</div> </div>
</div> </div>
<% } %> <% } %>
</div> </div>
<% }) %> <% }) %>

View File

@ -3,6 +3,6 @@
<%- css(['css/prism.css']) %> <%- css(['css/prism.css']) %>
<%- css(['css/theme.css']) %> <%- css(['css/theme.css']) %>
<%- css(['css/style.css']) %> <%- css(['css/style.css']) %>
<%- css({href: 'css/narrow.css', media: 'screen and (max-width: 600px)'}) %> <%- css({href: 'css/narrow.css', media: 'screen and (max-width: 640px)'}) %>
<%- css({href: 'css/medium.css', media: 'screen and (min-width: 601px) and (max-width: 900px)'}) %> <%- css({href: 'css/medium.css', media: 'screen and (min-width: 641px) and (max-width: 960px)'}) %>
<%- css({href: 'css/wide.css', media: 'screen and (min-width: 901px)'}) %> <%- css({href: 'css/wide.css', media: 'screen and (min-width: 961px)'}) %>

View File

@ -1,14 +1,14 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2"> <div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2">
<div class="uk-card-header"> <div class="uk-card-header">
<h3 class="uk-card-title uk-flex uk-flex-left uk-flex-middle"> <h3 class="uk-card-title flex row-a rx-start-a ry-center-a">
<a href="javascript:history.go(-1)" uk-icon="icon: chevron-left" uk-tooltip="后退到上一个页面"></a> <a href="javascript:history.go(-1)" uk-icon="icon: chevron-left" uk-tooltip="后退到上一个页面"></a>
<span class="ml-1"> <span class="ml-1">
<%= page.title %> <%= page.title %>
</span> </span>
</h3> </h3>
<div class="uk-flex uk-flex-left"> <div class="flex row-w row-m col-n rx-start-a">
<div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm" ) %> <div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm" ) %>
</div> </div>
<% if (page.categories.length> 0) { %> <% if (page.categories.length> 0) { %>
@ -27,9 +27,9 @@
<%- page.content %> <%- page.content %>
</article> </article>
<% if (page.tags.length> 0) { %> <% if (page.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left"> <div class="uk-card-footer flex rx-start-a">
<div class="tag-title">分类标签:</div> <div class="tag-title">分类标签:</div>
<div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1 tag-host"> <div class="flex rx-flex-a extend-1-a w-wrap-a tag-host">
<% page.tags.each(function(tag) { %> <% page.tags.each(function(tag) { %>
<span class="uk-label ml-1 mb-1"> <span class="uk-label ml-1 mb-1">
<%= tag.name %> <%= tag.name %>
@ -40,7 +40,7 @@
<% } %> <% } %>
</div> </div>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %> <%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
</section> </section>
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<%- partial('partial/post/list', {start: 1}) %> <%- partial('partial/post/list', {start: 1}) %>
<% if (page.total > 1) { %> <% if (page.total > 1) { %>
<div class="uk-flex uk-flex-between p-1"> <div class="flex row-a rx-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>" <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>" href="/<%- page.prev_link %>"
uk-slidenav-previous></a> uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div> </div>
<% } %> <% } %>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags': true}) %> <%- partial('partial/side', {'noCategories': false, 'noTags': true}) %>
</section> </section>
</div> </div>

View File

@ -1,10 +1,10 @@
<div class="uk-flex mx-2 my-2 main-content"> <div class="flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1"> <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<div class="uk-card uk-card-default uk-card-body uk-height-1-1"> <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
<%- list_tags({orderby: 'name', order: '1', show_count: true, class: "tags-toc"}) %> <%- list_tags({orderby: 'name', order: '1', show_count: true, class: "tags-toc"}) %>
</div> </div>
</section> </section>
<section class="uk-width-1-4"> <section class="w-1-4-a flex col-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags': true}) %> <%- partial('partial/side', {'noCategories': false, 'noTags': true}) %>
</section> </section>
</div> </div>