diff --git a/layouts/shortcodes/textlist.html b/layouts/shortcodes/textlist.html index 507eaf248d6db93bf2a562f668c4c2d66c5841d9..d3ca3a9f1bec1a7458ef7f2d22c853652a8f834f 100644 --- a/layouts/shortcodes/textlist.html +++ b/layouts/shortcodes/textlist.html @@ -1,32 +1,5 @@ - + {{ $section := .Page.CurrentSection }} @@ -38,23 +11,7 @@ {{ end }} diff --git a/layouts/shortcodes/tilelist.html b/layouts/shortcodes/tilelist.html index d681421ab1ea58d68e16d4105b7b7a7e1c267e1b..9a883f8edae8bb7dd5378c7d1bea0f38b6026e38 100644 --- a/layouts/shortcodes/tilelist.html +++ b/layouts/shortcodes/tilelist.html @@ -1,72 +1,5 @@ - + {{ $section := .Page.CurrentSection }} @@ -78,26 +11,13 @@ {{ end }}
- - {{ range $section.Sections.ByWeight }} - {{ if .Params.mktile }} - - {{ -
-
{{ .Title }}
-
- - {{ end }} - {{ end }} - - {{ range $section.Pages.ByWeight }} {{ if .Params.mktile }} {{ -
-
{{ .Title }}
-
+
+
{{ .Title }}
+
{{ end }} {{ end }} diff --git a/static/css/textlist.css b/static/css/textlist.css new file mode 100644 index 0000000000000000000000000000000000000000..80d52a22c2d05fb77681ffd0660c9fe40c844e49 --- /dev/null +++ b/static/css/textlist.css @@ -0,0 +1,26 @@ +.textlist { + position: relative; + border-top: dashed #ddd 1px; + border-bottom: dashed #ddd 1px; + padding: 0.5em 0 0.5em 2.3em; + margin-top: 30px; +} +.textlist li { + list-style-type: none; + padding: 0.1em 0; +} +.textlist li:before { + font-family: "Font Awesome 5 Free"; + content: "\f0da"; + font-weight: 900; + position: relative; + left: -0.5em; + color: gray; +} +.textlist li a { + text-decoration: none; + color: #000; +} +.textlist li a:hover { + color: #67c5ff; +} diff --git a/static/css/tilelist.css b/static/css/tilelist.css new file mode 100644 index 0000000000000000000000000000000000000000..ca01650c78a2b69eae85627f16dc0bde4dc1f49a --- /dev/null +++ b/static/css/tilelist.css @@ -0,0 +1,69 @@ +.tilelist { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; +} +@media screen and (min-width: 900px) { + .tile { + position: relative; + width: 30%; + height: 170px; + margin: 10px 7px; + box-shadow: 0 2px 5px #ccc; + overflow: hidden; + border-radius: 3px; + transition: all 0.2s; + } +} +@media screen and (max-width: 900px) and (min-width: 540px) { + .tile { + position: relative; + width: 40%; + height: 170px; + margin: 10px 7px; + box-shadow: 0 2px 5px #ccc; + overflow: hidden; + border-radius: 3px; + transition: all 0.2s; + } +} +@media screen and (max-width: 540px) { + .tile { + position: relative; + width: 80%; + height: 170px; + margin: 10px 7px; + box-shadow: 0 2px 5px #ccc; + overflow: hidden; + border-radius: 3px; + transition: all 0.2s; + } +} +.tile:hover { + box-shadow: 0px 0px 5px 2px #67c5ff; +} +.tile img { + width: 100% !important; + height: 130px; + object-fit: cover; + margin: 0 0 !important; +} +.tile .caption { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 100%; + height: 40px; + top: 130px; + left: 0; + color: #000; + background-color: #fff; + font-size: 18px; + word-break: keep-all; +} +.tile .caption div { + line-height: 20px; + text-align: center; +}