From c1bb5a533e4f5a30d1c21959024cf2bf75749795 Mon Sep 17 00:00:00 2001 From: Toshaan Bharvani Date: Thu, 9 Dec 2021 18:50:42 +0100 Subject: [PATCH] adjust specifications single page as discussed * move download to top * change the icon and added it to the link * move the changelog to the right column Signed-off-by: Toshaan Bharvani --- .../assets/css/changelog.css | 269 ++++++++++++++++++ .../layouts/partials/header.html | 3 + .../layouts/specifications/single.html | 91 +++--- 3 files changed, 308 insertions(+), 55 deletions(-) create mode 100644 themes/openpowerfoundation/assets/css/changelog.css diff --git a/themes/openpowerfoundation/assets/css/changelog.css b/themes/openpowerfoundation/assets/css/changelog.css new file mode 100644 index 0000000..8b533b7 --- /dev/null +++ b/themes/openpowerfoundation/assets/css/changelog.css @@ -0,0 +1,269 @@ +.timeline { + position: relative; + width: 660px; + margin: 0 auto; + margin-top: 20px; + padding: 1em 0; + list-style-type: none; +} + +.timeline:before { + position: absolute; + left: 50%; + top: 0; + content: ' '; + display: block; + width: 6px; + height: 100%; + margin-left: -3px; + background: rgb(80,80,80); + background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); + background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + z-index: 5; +} + +.timeline li { + padding: 1em 0; +} + +.timeline li:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.direction-l { + position: relative; + width: 300px; + float: left; + text-align: right; +} + +.direction-r { + position: relative; + width: 300px; + float: right; +} + +.flag-wrapper { + position: relative; + display: inline-block; + text-align: center; +} + +.flag { + position: relative; + display: inline; + background: rgb(248,248,248); + padding: 6px 10px; + border-radius: 5px; + font-weight: 600; + text-align: left; +} + +.direction-l .flag { + -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); + box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); +} + +.direction-r .flag { + -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); + 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-r .flag:before { + position: absolute; + top: 50%; + right: -40px; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-top: -10px; + background: #fff; + border-radius: 10px; + border: 4px solid #2566f4; + z-index: 10; +} + +.direction-r .flag:before { + left: -40px; +} + +.direction-l .flag:after { + content: ""; + position: absolute; + left: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-left-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.direction-r .flag:after { + content: ""; + position: absolute; + right: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-right-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.time-wrapper { + display: inline; + line-height: 1em; + font-size: 0.66666em; + color: #004aad; + vertical-align: middle; +} + +.direction-l .time-wrapper { + float: left; +} + +.direction-r .time-wrapper { + float: right; +} + +.time { + display: inline-block; + padding: 4px 6px; + background: rgb(248,248,248); +} + +.desc { + margin: 1em 0.75em 0 0; + font-size: 0.77777em; + font-style: italic; + line-height: 1.5em; +} + +.direction-r .desc { + margin: 1em 0 0 0.75em; +} + +/* ================ Timeline Media Queries ================ */ + +@media screen and (max-width: 660px) { + +.timeline { + width: 100%; + padding: 4em 0 1em 0; +} + +.timeline li { + padding: 2em 0; +} + +.direction-l, +.direction-r { + float: none; + width: 100%; + + text-align: center; +} + +.flag-wrapper { + text-align: center; +} + +.flag { + background: rgb(255,255,255); + z-index: 15; +} + +.direction-l .flag:before, +.direction-r .flag:before { + position: absolute; + top: -30px; + left: 50%; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-left: -9px; + background: #fff; + border-radius: 10px; + border: 4px solid rgb(255,80,80); + z-index: 10; +} + +.direction-l .flag:after, +.direction-r .flag:after { + content: ""; + position: absolute; + left: 50%; + top: -8px; + height: 0; + width: 0; + margin-left: -8px; + border: solid transparent; + border-bottom-color: rgb(255,255,255); + border-width: 8px; + pointer-events: none; +} + +.time-wrapper { + display: block; + position: relative; + margin: 4px 0 0 0; + z-index: 14; +} + +.direction-l .time-wrapper { + float: none; +} + +.direction-r .time-wrapper { + float: none; +} + +.desc { + position: relative; + margin: 1em 0 0 0; + padding: 1em; + background: rgb(245,245,245); + -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20); + -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20); + box-shadow: 0 0 1px rgba(0,0,0,0.20); + + z-index: 15; +} + +.direction-l .desc, +.direction-r .desc { + position: relative; + margin: 1em 1em 0 1em; + padding: 1em; + + z-index: 15; +} + +} + +@media screen and (min-width: 400px ?? max-width: 660px) { + +.direction-l .desc, +.direction-r .desc { + margin: 1em 4em 0 4em; +} + +} diff --git a/themes/openpowerfoundation/layouts/partials/header.html b/themes/openpowerfoundation/layouts/partials/header.html index 780b044..982ee83 100644 --- a/themes/openpowerfoundation/layouts/partials/header.html +++ b/themes/openpowerfoundation/layouts/partials/header.html @@ -27,6 +27,9 @@ {{ $syntaxcss := resources.Get "css/syntax.css" }} {{ $syntax := $syntaxcss | resources.Minify }} + {{ $changelogcss := resources.Get "css/changelog.css" }} + {{ $changelogsh := $changelogcss | resources.Minify }} + {{ $variables := resources.Get "css/variables.scss"}} {{ $variables = $variables | resources.ExecuteAsTemplate "variables.scss" . }} {{ $header := resources.Get "css/header.scss" | resources.Minify }} diff --git a/themes/openpowerfoundation/layouts/specifications/single.html b/themes/openpowerfoundation/layouts/specifications/single.html index c324fd9..c688cc5 100644 --- a/themes/openpowerfoundation/layouts/specifications/single.html +++ b/themes/openpowerfoundation/layouts/specifications/single.html @@ -6,66 +6,47 @@ {{ $datafile := index $.Site.Data.specifications $filename }}
-
-
-
-

{{ .Title }}

-

-
-
-
 
-
- {{ if $datafile.versions }} - {{ range last 1 $datafile.versions }} - Download version {{.number }} - {{ end }} - {{ end }} -
-
- {{ if $datafile.versions }} - {{ range last 1 $datafile.versions }} - Latest version {{ .number }} - {{ end }} - {{ end }} -
-
 
-
-
-
 
-
-

{{ .Content }}

-
-
 
-
-
-
- {{ if .Param "discoursetopic" }} - {{ partial "discourse.html" . }} - {{ end }} -
-
- {{ if $datafile.versions }} -
-
-
-
    - {{ range $datafile.versions }} -
  1. - version {{ .number }} - {{ .date }} - {{ .description }} - download -
    2. - {{ end }} -
  2. -
+
+
+

{{ .Title }}

+

+
+
+
+
+ {{ if $datafile.versions }} + {{ range last 1 $datafile.versions }} + Download version {{.number }} + {{ end }} + {{ end }} +
+
+
+
+
+

{{ .Content }}

+
+
+ {{ if $datafile.versions }} +
    + {{ range sort $datafile.versions "number" "desc" }} +
  • +
    +
    + version {{ .number }} + {{ .date }} +
    +
    {{ .description }}
    +
    download
    -
+ {{ end }} + + {{ end }}
+
-
{{ partial "footer.html" . }}