fix(layout): minor responsiveness fixes
This commit is contained in:
ppoffice
parent
c56a3c46c4
commit
b6bd53a1a7
|
|
@ -1,7 +1,7 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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('/') %>">
|
||||
<% if (has_config('logo.text') && get_config('logo.text')) { %>
|
||||
<%= get_config('logo.text') %>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
<div class="level-end">
|
||||
<% 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'); %>
|
||||
<% for (let name in links) {
|
||||
let link = links[name]; %>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,29 @@
|
|||
<% 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 => {%>
|
||||
<%- 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>
|
||||
<% } %>
|
||||
|
|
@ -5,11 +5,22 @@
|
|||
</head>
|
||||
<body class="is-<%= column_count() %>-column">
|
||||
<%- 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">
|
||||
<div class="container">
|
||||
<div class="columns main">
|
||||
<div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
|
||||
<%- 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' }) %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
</p>
|
||||
<% } %>
|
||||
<% if (get_config_from_obj(widget, 'location')) { %>
|
||||
<p class="level is-mobile is-size-6 has-text-grey">
|
||||
<i class="level-item material-icons is-size-5 has-mr-7">location_on</i>
|
||||
<span class="level-item"><%= get_config_from_obj(widget, 'location') %></span>
|
||||
<p class="is-size-6 is-flex is-flex-center has-text-grey">
|
||||
<i class="material-icons is-size-5 has-mr-7">location_on</i>
|
||||
<span><%= get_config_from_obj(widget, 'location') %></span>
|
||||
</p>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ html
|
|||
|
||||
body
|
||||
font-family: family-serif
|
||||
|
||||
body
|
||||
background-color: #f7f7f7
|
||||
|
||||
@media screen and (min-width: 1280px)
|
||||
|
|
@ -26,6 +24,10 @@ body
|
|||
max-width: 960px
|
||||
width: 960px
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.section
|
||||
padding: 1.5rem 1rem;
|
||||
|
||||
.card
|
||||
overflow: hidden
|
||||
border-radius: 4px
|
||||
|
|
@ -38,6 +40,11 @@ body
|
|||
box-shadow: none
|
||||
background: transparent
|
||||
|
||||
img.thumbnail
|
||||
object-fit: cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.navbar-logo,
|
||||
.footer-logo
|
||||
img
|
||||
|
|
@ -176,6 +183,18 @@ body
|
|||
.is-flex-wrap
|
||||
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
|
||||
margin-right: 0.5em !important
|
||||
|
||||
|
|
@ -197,10 +216,13 @@ body
|
|||
.has-link-black-ter
|
||||
color: hsl(0, 0%, 14%) !important
|
||||
|
||||
img.thumbnail
|
||||
object-fit: cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
@media screen and (max-width: 768px)
|
||||
.has-text-centered-mobile
|
||||
text-align: center !important
|
||||
.is-flex-center-mobile
|
||||
justify-content: center !important
|
||||
.has-mt-5-mobile
|
||||
margin-top: 1em !important
|
||||
|
||||
/* ---------------------------------
|
||||
* Material Icons Anti-aliasing
|
||||
|
|
|
|||
Loading…
Reference in New Issue