zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

IMPROVEMENT: more clean marigin alignment

Browse source
This commit is contained in:
FarseaSH 2024-04-27 17:58:07 +08:00
parent c2f7b6734f
commit aa555d4716
2 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/style-refractored.scss
View file

@ -89,6 +89,11 @@ body{
.moment-content{ .moment-content{
position: relative; position: relative;
.top-mark {
position: absolute;
right: 0%;
}
} }
.moment-row{ .moment-row{
@ -107,8 +112,8 @@ body{
} }
.container{ .container{
padding-left: 10px; padding-left: 30px;
padding-right: 10px; padding-right: 30px;
} }
} }
@ -182,7 +187,7 @@ $gray: #919EB1;
/* START - time */ /* START - time */
.time{ .time{
text-align: right; text-align: right;
padding-right: 60px; padding-right: 80px;
/* white-space: nowrap; */ /* white-space: nowrap; */
font-weight: 300; font-weight: 300;
margin-bottom: 20px; margin-bottom: 20px;
@ -204,7 +209,7 @@ $gray: #919EB1;
} }
@media (max-width: 720px) and (min-width:576px){ @media (max-width: 720px) and (min-width:576px){
.time{ .time{
padding-right: 20px; padding-right: 40px;
} }
} }
/* END - time */ /* END - time */
@ -401,12 +406,10 @@ $gray: #919EB1;
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
justify-content: space-between; justify-content: space-between;
margin-right: 5px;
color:#808080; color:#808080;
.note{ .note{
font-size: 80%; font-size: 80%;
text-indent: 20px;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
margin-top: 0; margin-top: 0;
@ -417,8 +420,6 @@ $gray: #919EB1;
// note at the bottom of each row // note at the bottom of each row
.moment-note { .moment-note {
.like-btn { .like-btn {
padding-right: 12px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@ -439,7 +440,6 @@ hr {
border-width: 0; border-width: 0;
border-top: 1px solid; border-top: 1px solid;
border-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1);
max-width: 75%;
clear: both clear: both
} }
/* END - for the main content */ /* END - for the main content */

8
layouts/partials/row.html
View file

@ -5,7 +5,7 @@
<div class="pure-g"> <div class="pure-g">
{{/* time info shown in the left (or above in small screens) */}} {{/* time info shown in the left (or above in small screens) */}}
<div class="pure-u-1 pure-u-sm-1-3"> <div class="pure-u-1 pure-u-sm-1-4">
<div class="time"> <div class="time">
<div class="month-day">{{ $page.Date.Format "Jan 2"}}{{ if in (slice 1 21 31) $page.Date.Day}}st{{ else if in (slice 2 22) $page.Date.Day}}nd{{ else if in (slice 3 23) $page.Date.Day}}rd{{ else }}th{{ end }}</div> <div class="month-day">{{ $page.Date.Format "Jan 2"}}{{ if in (slice 1 21 31) $page.Date.Day}}st{{ else if in (slice 2 22) $page.Date.Day}}nd{{ else if in (slice 3 23) $page.Date.Day}}rd{{ else }}th{{ end }}</div>
<div class="year">{{ $page.Date.Format "2006"}}</div> <div class="year">{{ $page.Date.Format "2006"}}</div>
@ -13,11 +13,11 @@
</div> </div>
{{/* moment-main-content */}} {{/* moment-main-content */}}
<div class="pure-u-1 pure-u-sm-2-3"> <div class="pure-u-1 pure-u-sm-3-4">
<div class="moment-content"> <div class="moment-content">
{{/* top mark */}} {{/* top mark */}}
{{ if gt $page.Params.top 0}} {{ if gt $page.Params.top 0}}
<div class="top-mark" style="position: absolute; right: 5%;"> <div class="top-mark">
<i class="fas fa-bookmark" style="color: #e76b4f;"></i> <i class="fas fa-bookmark" style="color: #e76b4f;"></i>
</div> </div>
{{ end }} {{ end }}
@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<div style="padding-left: 5px; padding-right: 5px;"> <div class="main-context">
{{/* tag */}} {{/* tag */}}
{{ $tags_filtered := slice }} {{ $tags_filtered := slice }}
{{ with $page.Params.tags }} {{ with $page.Params.tags }}