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">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<% if (!is_month()) { %>
<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月'}) %>
@ -8,7 +8,7 @@
<%- partial('partial/post/list', {start: 1}) %>
<% } %>
</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}) %>
</section>
</div>

View File

@ -1,10 +1,10 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<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">
<%- list_categories({orderby: 'name', order: '1', show_count: true, class: "categories-toc"}) %>
</div>
</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}) %>
</section>
</div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<%- partial('partial/post/list', {start: 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<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div>
<% } %>
</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}) %>
</section>
</div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<section class="w-3-4-a w-2-2-m px-1 extend-1-a">
<%- partial('partial/post/list', {start: 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<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div>
<% } %>
</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}) %>
</section>
</div>

View File

@ -1,16 +1,15 @@
<footer class="uk-flex uk-flex-row uk-flex-between uk-flex-center py-2 px-2">
<div class="uk-width-1-3 uk-text-small">
<p class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%>
</p>
<p class="uk-text-meta m-0">Theme Grid by FarDawn.</p>
<footer class="flex row-w col-n rx-between-a ry-center-a py-2 px-2">
<div class="b-1-3-a uk-text-small flex col-a hin him">
<div class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%></div>
<div class="uk-text-meta m-0">Theme Grid by FarDawn.</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">Proudly presents by FarDawn.</p>
</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 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"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010402002063">
<img src="/images/beian.png">

View File

@ -4,7 +4,8 @@
<span class="uk-navbar-item">用碎片化的时间收集碎片化的知识</span>
</div>
<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()) { %>
<li><a href="/index.html">返回首页</a></li>
<% } %>
@ -14,3 +15,19 @@
</ul>
</div>
</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 %>
</a>
</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>
<% if (post.categories.length> 0) { %>
@ -27,9 +27,9 @@
</div>
<% } %>
<% 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="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) { %>
<span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
<%= tag.name %>
@ -39,4 +39,4 @@
</div>
<% } %>
</div>
<% }) %>
<% }) %>

View File

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

View File

@ -1,14 +1,14 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<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-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>
<span class="ml-1">
<%= page.title %>
</span>
</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>
<% if (page.categories.length> 0) { %>
@ -27,9 +27,9 @@
<%- page.content %>
</article>
<% 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="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) { %>
<span class="uk-label ml-1 mb-1">
<%= tag.name %>
@ -40,7 +40,7 @@
<% } %>
</div>
</section>
<section class="uk-width-1-4">
<section class="w-1-4-a hin him">
<%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
</section>
</div>

View File

@ -1,8 +1,8 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<section class="w-3-4-a w-2-2-n w-2-2-m px-1">
<%- partial('partial/post/list', {start: 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<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>
@ -13,7 +13,7 @@
</div>
<% } %>
</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}) %>
</section>
</div>

View File

@ -1,10 +1,10 @@
<div class="uk-flex mx-2 my-2 main-content">
<section class="uk-width-3-4 px-1">
<div class="flex mx-2 my-2 main-content">
<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">
<%- list_tags({orderby: 'name', order: '1', show_count: true, class: "tags-toc"}) %>
</div>
</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}) %>
</section>
</div>