style:标准化响应式设计的词汇。

This commit is contained in:
徐涛 2021-04-27 08:57:40 +08:00
parent dbd3e8b743
commit 69ddf62f90
8 changed files with 18 additions and 18 deletions

View File

@ -2,7 +2,7 @@
<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="flex rx-between-a p-1">
<div class="flex rm-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>

View File

@ -2,7 +2,7 @@
<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="flex rx-between-a p-1">
<div class="flex rm-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>

View File

@ -1,4 +1,4 @@
<footer class="flex row-w col-n rx-between-a ry-center-a py-2 px-2">
<footer class="flex row-w col-n rm-between-a rc-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>
@ -9,7 +9,7 @@
</div>
<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 flex row-a rx-end-a rx-center-n ry-center-a">
<p class="m-0 flex row-a rm-end-a rm-center-n rc-center-a">
<a target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010402002063">
<img src="/images/beian.png">

View File

@ -1,5 +1,5 @@
<nav class="uk-navbar-container uk-box-shadow-medium" uk-navbar uk-sticky>
<div class="uk-navbar-left flex row-a ry-baseline-a rx-start-a cy-center-a w-wrap-a">
<div class="uk-navbar-left flex row-a rc-baseline-a rm-start-a cm-center-a w-wrap-a">
<a class="uk-navbar-item uk-logo compact-logo-n" href="/index.html"><%= config.title %></a>
<span class="uk-navbar-item compact-slogon-n">用碎片化的时间收集碎片化的知识</span>
</div>

View File

@ -6,7 +6,7 @@
<%= post.title %>
</a>
</h3>
<div class="flex row-a col-n rx-start-a">
<div class="flex row-a col-n rm-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 flex row-a rx-start-a hin">
<div class="uk-card-footer flex row-a rm-start-a hin">
<div class="tag-title">分类标签:</div>
<div class="flex row-a rx-start-a w-wrap-a extend-1-a">
<div class="flex row-a rm-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 %>

View File

@ -2,13 +2,13 @@
<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 flex row-a rx-start-a ry-center-a">
<h3 class="uk-card-title flex row-a rm-start-a rc-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="flex row-w row-m col-n rx-start-a">
<div class="flex row-w row-m col-n rm-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 flex rx-start-a">
<div class="uk-card-footer flex rm-start-a">
<div class="tag-title">分类标签:</div>
<div class="flex rx-flex-a extend-1-a w-wrap-a tag-host">
<div class="flex rm-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 %>

View File

@ -2,7 +2,7 @@
<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="flex row-a rx-between-a p-1">
<div class="flex row-a rm-between-a p-1">
<a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
href="/<%- page.prev_link %>"
uk-slidenav-previous></a>

View File

@ -22,22 +22,22 @@
baseline: baseline;
}
each(@main-axis-align, {
&.rx-@{key}-@{media} {
&.rm-@{key}-@{media} {
justify-content: @value;
}
&.cy-@{key}-@{media} {
&.cm-@{key}-@{media} {
align-content: @value;
}
});
@aux-axis-align: {
@cross-axis-align: {
start: flex-start;
center: center;
end: flex-end;
stretch: stretch;
baseline: baseline;
}
each(@aux-axis-align, {
&.ry-@{key}-@{media} {
each(@cross-axis-align, {
&.rc-@{key}-@{media} {
align-items: @value;
}
.as-@{key}-@{media} {