Nofated095
/
hexo-theme-amane
mirror of https://github.com/Nofated095/hexo-theme-amane.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(layout): minor responsiveness fixes

This commit is contained in:
ppoffice 2018-10-20 01:22:39 -04:00
parent c56a3c46c4
commit b6bd53a1a7
5 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/common/footer.ejs
View File

@ -1,7 +1,7 @@
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="level"> <div class="level">
<div class="level-start"> <div class="level-start has-text-centered-mobile">
<a class="footer-logo is-block has-mb-6" href="<%- url_for('/') %>"> <a class="footer-logo is-block has-mb-6" href="<%- url_for('/') %>">
<% if (has_config('logo.text') && get_config('logo.text')) { %> <% if (has_config('logo.text') && get_config('logo.text')) { %>
<%= get_config('logo.text') %> <%= get_config('logo.text') %>
@ -17,7 +17,7 @@
</div> </div>
<div class="level-end"> <div class="level-end">
<% if (has_config('footer.links')) { %> <% if (has_config('footer.links')) { %>
<div class="field has-addons"> <div class="field has-addons is-flex-center-mobile has-mt-5-mobile">
<% let links = get_config('footer.links'); %> <% let links = get_config('footer.links'); %>
<% for (let name in links) { <% for (let name in links) {
let link = links[name]; %> let link = links[name]; %>

24
layout/common/widget.ejs
View File

@ -1,7 +1,29 @@
<% if (get_widgets(position).length) { %> <% if (get_widgets(position).length) { %>
<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-mobile <%= column_count() === 3 && position === 'right' ? 'is-hidden-tablet-only is-hidden-desktop-only' : '' %>"> <% function side_column_class() {
switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-4-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
<% function visibility_class() {
if (column_count() === 3 && position === 'right') {
return 'is-hidden-touch is-hidden-desktop-only';
}
return '';
} %>
<div class="column <%= position === 'left' ? 'has-order-1' : 'has-order-3' %> <%= side_column_class() %> <%= visibility_class() %>">
<% get_widgets(position).forEach(widget => {%> <% get_widgets(position).forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %> <%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %> <% }) %>
<% if (position === 'left') { %>
<div class="card card-transparent is-hidden-widescreen">
<% get_widgets('right').forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
</div>
<% } %>
</div> </div>
<% } %> <% } %>

13
layout/layout.ejs
View File

@ -5,11 +5,22 @@
</head> </head>
<body class="is-<%= column_count() %>-column"> <body class="is-<%= column_count() %>-column">
<%- partial('common/navbar', { page }) %> <%- partial('common/navbar', { page }) %>
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
return 'is-8-tablet is-8-desktop is-8-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
return '';
} %>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns main"> <div class="columns main">
<div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
<%- partial('common/widget', { position: 'left' }) %> <%- partial('common/widget', { position: 'left' }) %>
<div class="column <%= column_count() > 1 ? 'is-8-tablet is-8-desktop is-6-widescreen' : '' %>"><%- body %></div>
<%- partial('common/widget', { position: 'right' }) %> <%- partial('common/widget', { position: 'right' }) %>
</div> </div>
</div> </div>

6
layout/widget/profile.ejs
View File

@ -26,9 +26,9 @@
</p> </p>
<% } %> <% } %>
<% if (get_config_from_obj(widget, 'location')) { %> <% if (get_config_from_obj(widget, 'location')) { %>
<p class="level is-mobile is-size-6 has-text-grey"> <p class="is-size-6 is-flex is-flex-center has-text-grey">
<i class="level-item material-icons is-size-5 has-mr-7">location_on</i> <i class="material-icons is-size-5 has-mr-7">location_on</i>
<span class="level-item"><%= get_config_from_obj(widget, 'location') %></span> <span><%= get_config_from_obj(widget, 'location') %></span>
</p> </p>
<% } %> <% } %>
</div> </div>

34
source/css/style.styl
View File

@ -9,8 +9,6 @@ html
body body
font-family: family-serif font-family: family-serif
body
background-color: #f7f7f7 background-color: #f7f7f7
@media screen and (min-width: 1280px) @media screen and (min-width: 1280px)
@ -26,6 +24,10 @@ body
max-width: 960px max-width: 960px
width: 960px width: 960px
@media screen and (max-width: 768px)
.section
padding: 1.5rem 1rem;
.card .card
overflow: hidden overflow: hidden
border-radius: 4px border-radius: 4px
@ -38,6 +40,11 @@ body
box-shadow: none box-shadow: none
background: transparent background: transparent
img.thumbnail
object-fit: cover
width: 100%
height: 100%
.navbar-logo, .navbar-logo,
.footer-logo .footer-logo
img img
@ -176,6 +183,18 @@ body
.is-flex-wrap .is-flex-wrap
flex-wrap: wrap !important flex-wrap: wrap !important
.is-flex-center
justify-content: center !important
.has-order-1
order: 1
.has-order-2
order: 2
.has-order-3
order: 3
.has-mr-6 .has-mr-6
margin-right: 0.5em !important margin-right: 0.5em !important
@ -197,10 +216,13 @@ body
.has-link-black-ter .has-link-black-ter
color: hsl(0, 0%, 14%) !important color: hsl(0, 0%, 14%) !important
img.thumbnail @media screen and (max-width: 768px)
object-fit: cover .has-text-centered-mobile
width: 100% text-align: center !important
height: 100% .is-flex-center-mobile
justify-content: center !important
.has-mt-5-mobile
margin-top: 1em !important
/* --------------------------------- /* ---------------------------------
* Material Icons Anti-aliasing * Material Icons Anti-aliasing