Skip to content

Commit

Permalink
fix(archive): Re-organize timeline usages
Browse files Browse the repository at this point in the history 
*Fix overflowing circle position on Android with Firefox
*Adjust toc padding for subtitle

Signed-off-by: Khusika Dhamar Gusti <[email protected]>
  • Loading branch information
Khusika Dhamar Gusti committed Jul 20, 2021
1 parent b21d57e commit 0d4dc34
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 88 deletions.
72 changes: 72 additions & 0 deletions assets/css/_page/_archive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,78 @@
margin-bottom: 1rem;
}

.item {
align-items: center;
margin-left: 1.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.item-link {
min-width: 10%;

&:hover {
color: $global-link-hover-color;
}

[theme=dark] & {
&:hover {
color: $global-link-hover-color-dark;
}
}
}

.item-date {
font-size: .875rem;
text-align: left;
color: $global-font-secondary-color;

[theme=dark] & {
color: $global-font-secondary-color-dark;
}
}

.timeline {
position: relative;
overflow: hidden;
&::before {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 5px;
background: $global-font-secondary-color;
width: 2px;
height: 100%;
z-index: 1;
[theme=dark] & {
background: $global-font-secondary-color-dark;
}
}
}

.circle {
margin: 5px 0;
&::before {
content: '';
background: $global-font-secondary-color;
display: inline-block;
position: absolute;
top: 42.5%;
border: 2px solid $global-background-color;
border-radius: 50%;
left: 1px;
width: 10px;
height: 10px;
z-index: 2;
[theme=dark] & {
background: $global-font-secondary-color-dark;
border-color: $global-background-color-dark;
}
}
}

@import "../_partial/_archive/terms";
@import "../_partial/_archive/tags";
}
74 changes: 0 additions & 74 deletions assets/css/_partial/_archive/_terms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,80 +75,6 @@
}
}

.archive-item {
align-items: center;
margin-left: 1.5rem;
}

.archive-item-link {
min-width: 10%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

&:hover {
color: $global-link-hover-color;
background-color: transparent;
}

[theme=dark] & {
color: $global-link-color-dark;

&:hover {
color: $global-link-hover-color-dark;
}
}
}

.archive-item-date {
font-size: .875rem;
text-align: left;
color: $global-font-secondary-color;

[theme=dark] & {
color: $global-font-secondary-color-dark;
}
}

.archive-timeline {
position: relative;
overflow: hidden;
&::before {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 5px;
background: $global-font-secondary-color;
width: 2px;
height: 100%;
z-index: 1;
[theme=dark] & {
background: $global-font-secondary-color-dark;
}
}
}

.archive-circle {
margin: 10px 0;
&::before {
content: '';
background: $global-font-secondary-color;
display: inline-block;
position: absolute;
top: 42.5%;
border: 2px solid $global-background-color;
border-radius: 50%;
width: .75rem;
height: .75rem;
z-index: 2;
[theme=dark] & {
background: $global-font-secondary-color-dark;
border-color: $global-background-color-dark;
}
}
}

.more-post {
text-align: right;
}
12 changes: 6 additions & 6 deletions layouts/_default/section.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ <h2 class="single-title animated fadeInDown faster">
{{- range $pages.PageGroups -}}
<h3 class="group-title">{{ .Key }}</h3>
{{- range .Pages -}}
<div class="archive-timeline">
<div class="archive-circle">
<div class="archive-item">
<a href="{{ .RelPermalink }}" class="archive-item-link">
<div class="timeline">
<div class="circle">
<div class="item">
<a href="{{ .RelPermalink }}" class="item-link">
{{- .Title -}}
</a>
</div>
<div class="archive-item">
<span class="archive-item-date">
<div class="item">
<span class="item-date">
Published&nbsp;on&nbsp;{{- $.Site.Params.section.dateFormat | default "01-02" | .Date.Format -}}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

{{- /* Auto TOC */ -}}
{{- if ne $toc.enable false -}}
<div class="toc" id="toc-auto" style="top:8rem;">
<div class="toc" id="toc-auto" style="{{- if $params.subtitle -}}top:10rem;{{ else }}top:8rem;{{ end }}">
<h2 class="toc-title">{{ T "contents" }}</h2>
<div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}" id="toc-content-auto"></div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions layouts/taxonomy/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ <h2 class="single-title animated fadeInDown faster">
{{- range $pages.PageGroups -}}
<h3 class="group-title">{{ .Key }}</h3>
{{- range .Pages -}}
<div class="archive-timeline">
<div class="archive-circle">
<div class="archive-item">
<a href="{{ .RelPermalink }}" class="archive-item-link">
<div class="timeline">
<div class="circle">
<div class="item">
<a href="{{ .RelPermalink }}" class="item-link">
{{- .Title -}}
</a>
</div>
<div class="archive-item">
<span class="archive-item-date">
<div class="item">
<span class="item-date">
Published&nbsp;on&nbsp;{{- $.Site.Params.list.dateFormat | default "01-02" | .Date.Format -}}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/_gen/assets/scss/css/page.scss_57b7ce9075f6c73982646e38cc2bdb0e.content
View file

Large diffs are not rendered by default.

0 comments on commit 0d4dc34

Please sign in to comment.