change namespace for changelog to timechangelog

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
archetype-theme-transition
Toshaan Bharvani 3 years ago
parent c1bb5a533e
commit 01ff93ca09

@ -1,4 +1,4 @@
.timeline { .changelogtimeline {
position: relative; position: relative;
width: 660px; width: 660px;
margin: 0 auto; margin: 0 auto;
@ -7,7 +7,7 @@
list-style-type: none; list-style-type: none;
} }


.timeline:before { .changelogtimeline:before {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 0; top: 0;
@ -26,11 +26,11 @@
z-index: 5; z-index: 5;
} }


.timeline li { .changelogtimeline li {
padding: 1em 0; padding: 1em 0;
} }


.timeline li:after { .changelogtimeline li:after {
content: ""; content: "";
display: block; display: block;
height: 0; height: 0;
@ -51,13 +51,13 @@
float: right; float: right;
} }


.flag-wrapper { .changeflag-wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }


.flag { .changeflag {
position: relative; position: relative;
display: inline; display: inline;
background: rgb(248,248,248); background: rgb(248,248,248);
@ -67,20 +67,20 @@
text-align: left; text-align: left;
} }


.direction-l .flag { .direction-l .changeflag {
-webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
} }


.direction-r .flag { .direction-r .changeflag {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
} }


.direction-l .flag:before, .direction-l .changeflag:before,
.direction-r .flag:before { .direction-r .changeflag:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -40px; right: -40px;
@ -95,11 +95,11 @@
z-index: 10; z-index: 10;
} }


.direction-r .flag:before { .direction-r .changeflag:before {
left: -40px; left: -40px;
} }


.direction-l .flag:after { .direction-l .changeflag:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 100%; left: 100%;
@ -113,7 +113,7 @@
pointer-events: none; pointer-events: none;
} }


.direction-r .flag:after { .direction-r .changeflag:after {
content: ""; content: "";
position: absolute; position: absolute;
right: 100%; right: 100%;
@ -127,7 +127,7 @@
pointer-events: none; pointer-events: none;
} }


.time-wrapper { .changetime-wrapper {
display: inline; display: inline;
line-height: 1em; line-height: 1em;
font-size: 0.66666em; font-size: 0.66666em;
@ -135,15 +135,15 @@
vertical-align: middle; vertical-align: middle;
} }


.direction-l .time-wrapper { .direction-l .changetime-wrapper {
float: left; float: left;
} }


.direction-r .time-wrapper { .direction-r .changetime-wrapper {
float: right; float: right;
} }


.time { .changetime {
display: inline-block; display: inline-block;
padding: 4px 6px; padding: 4px 6px;
background: rgb(248,248,248); background: rgb(248,248,248);
@ -160,16 +160,14 @@
margin: 1em 0 0 0.75em; margin: 1em 0 0 0.75em;
} }


/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) { @media screen and (max-width: 660px) {


.timeline { .changelogtimeline {
width: 100%; width: 100%;
padding: 4em 0 1em 0; padding: 4em 0 1em 0;
} }


.timeline li { .changelogtimeline li {
padding: 2em 0; padding: 2em 0;
} }


@ -181,17 +179,17 @@
text-align: center; text-align: center;
} }


.flag-wrapper { .changeflag-wrapper {
text-align: center; text-align: center;
} }


.flag { .changeflag {
background: rgb(255,255,255); background: rgb(255,255,255);
z-index: 15; z-index: 15;
} }


.direction-l .flag:before, .direction-l .changeflag:before,
.direction-r .flag:before { .direction-r .changeflag:before {
position: absolute; position: absolute;
top: -30px; top: -30px;
left: 50%; left: 50%;
@ -206,8 +204,8 @@
z-index: 10; z-index: 10;
} }


.direction-l .flag:after, .direction-l .changeflag:after,
.direction-r .flag:after { .direction-r .changeflag:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 50%; left: 50%;

@ -17,7 +17,7 @@
<div class="col-lg-8"> <div class="col-lg-8">
{{ if $datafile.versions }} {{ if $datafile.versions }}
{{ range last 1 $datafile.versions }} {{ range last 1 $datafile.versions }}
<i class="fas fa-file-pdf mr-2"></i><a href="{{ .download }}">Download version {{.number }}</a> <a href="{{ .download }}"><i class="far fa-file-pdf mr-2"></i>&nbsp;Download version {{.number }}</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
@ -29,13 +29,13 @@
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
{{ if $datafile.versions }} {{ if $datafile.versions }}
<ul class="timeline"> <ul class="changelogtimeline">
{{ range sort $datafile.versions "number" "desc" }} {{ range sort $datafile.versions "number" "desc" }}
<li> <li>
<div class="direction-r"> <div class="direction-r">
<div class="flag-wrapper"> <div class="changeflag-wrapper">
<span class="flag">version {{ .number }}</span> <span class="changeflag">version {{ .number }}</span>
<span class="time-wrapper"><span class="time">{{ .date }}</span></span> <span class="changetime-wrapper"><span class="changetime">{{ .date }}</span></span>
</div> </div>
<div class="desc">{{ .description }}</div> <div class="desc">{{ .description }}</div>
<div class="desc"><a href="{{ .download }}">download</a></div> <div class="desc"><a href="{{ .download }}">download</a></div>

Loading…
Cancel
Save