+ {{ with .context }}
+ {{ $tag_color := .Site.Params.categories_colors }}
+
{{ if ne (.Params.eventStartDate) (.Params.eventEndDate) }}
-
- {{ dateFormat "2 Jan, 2006" .Params.eventStartDate }}-{{ dateFormat "2 Jan, 2006" .Params.eventEndDate }}
- {{ if .Params.tags }}
- {{ $numtags := len .Params.tags }}
- {{ $first_tag := index .Params.tags 0 }}
- {{ if gt $numtags 0 }} {{ if ne $first_tag "" }}
-
+ {{ end }} {{ end }} {{/* --end-- insert tag box */}}
- {{ else }}
+ {{ end }}
+
-
- {{ dateFormat "2 Jan, 2006" .Params.eventEndDate }}
- {{ if .Params.tags }}
- {{ $numtags := len .Params.tags }}
- {{ $first_tag := index .Params.tags 0 }}
- {{ if gt $numtags 0 }} {{ if ne $first_tag "" }}
-
+
+ {{ end }} {{ end }}
+ {{ end }}
+
{{ end }}
{{ .Title }}
{{ .Content }}
-
Read more
+
Read more...
+
-{{ end }}
+
+ {{ end }} {{/* --end-- with */}}
{{ else if eq .card_type "normal" }}
-{{ with .context }}
-{{ $tag_color := .Site.Params.categories_colors }}
-
+ {{ with .context }}
+ {{ $tag_color := .Site.Params.categories_colors }}
+
{{ dateFormat "2 Jan, 2006" .Date }}
{{ if .Params.tags }}
- {{ $numtags := len .Params.tags }}
- {{ $first_tag := index .Params.tags 0 }}
- {{ if gt $numtags 0 }} {{ if ne $first_tag "" }}
-
- {{ end }} {{ end }} {{ end }}
+
{{ .Title }}
+
{{ .Content }}
+
Read more...
-
{{ .Title }}
-
{{ .Content }}
-
Read more
-
-{{ end }}
+ {{ end }}
+
{{ else if eq .card_type "simple" }}
- {{ with .context }}
+ {{ with .context }}
{{ $tag_color := .Site.Params.categories_colors }}
-
-
+
+
{{ dateFormat "2 Jan, 2006" .Date }}
-
-
{{ .Title }}
-
{{ .Content }}
-
Read more
-
- {{ end }}
+
+
{{ .Title }}
+
{{ .Content }}
+
Read more...
+
+ {{ end }}
{{ end }}
diff --git a/layouts/shortcodes/postcards.html b/layouts/shortcodes/postcards.html
index 1c23f9541a6d5054e16d6dc8c8ec53a5160ed0c1..17f0499e4d9b7b40d09eedd87e2a2d3a8487cfee 100644
--- a/layouts/shortcodes/postcards.html
+++ b/layouts/shortcodes/postcards.html
@@ -19,6 +19,6 @@
{{ $numlist := 3 }}
{{ $numlist }} Newest Posts
-{{ range first $numlist (where .Site.RegularPages "Section" "post") }}
+{{ range first $numlist (where .Site.RegularPages "Section" "post").ByDate.Reverse }}
{{ partial "postcard" (dict "context" . "card_type" "normal" ) }}
{{ end }}
diff --git a/static/css/category_tag.css b/static/css/category_tag.css
new file mode 100644
index 0000000000000000000000000000000000000000..b66c71dd372bbb03a70b8cbf8d362cea5fb20845
--- /dev/null
+++ b/static/css/category_tag.css
@@ -0,0 +1,67 @@
+div.tags{
+ display: table;
+ border-collapse: separate;
+ border-spacing: 3px 0;
+ position: absolute;
+ text-align: center;
+ vertical-align: middle;
+ width: 100%;
+ height: auto;
+ text-align: left;
+}
+
+.tags a.tagbutton {
+ padding: 1px 4px 1px 4px;
+ margin: 1px 5px 1px 5px;
+ font-size: 10px;
+ border-radius: 8px;
+ transition: .4s;
+ text-decoration: none;
+ background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%);
+ border: solid 1px var(--gray-color);
+ color: white;
+ transition: .4s;
+}
+
+.tags a.tagbutton:hover {
+ color:var(--gray-color);
+ border: solid 1px var(--gray-color);
+ background : white;
+}
+
+.tags a.red {
+ background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%);
+ border: solid 1px var(--red-color);
+ color: white;
+}
+
+.tags a.red:hover {
+ background : white;
+ border: solid 1px var(--red-color);
+ color:var(--red-color);
+}
+
+.tags a.blue{
+ background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%);
+ border: solid 1px var(--blue-color);
+ color: white;
+}
+
+.tags a.blue:hover {
+ background : white;
+ color:var(--blue-color);
+ border: solid 1px var(--blue-color);
+}
+
+.tags a.green{
+ background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%);
+ border: solid 1px var(--green-color);
+ color: white;
+}
+
+.tags a.green:hover {
+ background : white;
+ color:var(--green-color);
+ border: solid 1px var(--green-color);
+}
+
diff --git a/static/css/postcard.css b/static/css/postcard.css
index 84cec40df71a66f878b363c8a105e54bbd526603..f6516b9963ca35c5c3c1795fee24de11e330802e 100644
--- a/static/css/postcard.css
+++ b/static/css/postcard.css
@@ -9,9 +9,8 @@
background-color: #fff;
padding: 10px;
border-radius: 6px;
-/* box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.29); */
- box-shadow: 0 2px 5px #ccc;
- width: 85%;
+ box-shadow: 0 6px 15px #dde;
+ width: 93%;
height: 165px;
color: #1700ad;
overflow: hidden;
@@ -113,121 +112,92 @@
left: 0;
width: 100%;
height: 100px;
- background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
- background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 60%, rgba(255,254,253,1.0) 100%);
+ background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 60%, rgba(255,254,253,1.0) 100%);
content: "";
}
.postcard div.eventdate {
position: relative;
/*background-color: #125; */
- background-color: #6494ed;
+ background-color: #000;
padding: 3px 8px 3px 8px;
text-align: center;
- font-size: 10px;
+ font-size: 12px;
border-radius: 2px;
- width: 100px;
+ width: 180px;
height: auto;
color: #eef;
}
-.postcard div.tags{
- display: table;
- border-collapse: separate;
- border-spacing: 3px 0;
- position: absolute;
+.postcard div.eventdate2 {
+ position: relative;
+ background-color: #000;
+ padding: 3px 8px 3px 8px;
text-align: center;
- vertical-align: middle;
- width: 100%;
+ font-size: 10px;
+ border-radius: 2px;
+ width: 240px;
height: auto;
- text-align: left;
+ color: #eef;
}
-@media screen and (min-width: 450px) {
+@media screen and (min-width: 720px) {
.postcard div.tags {
left: calc(100% + 3px);
top: 3px;
}
}
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 720px) {
.postcard div.eventdate {
margin-bottom: 10px;
}
.postcard div.tags {
left: -5px;
- top: 25px;
+ top: 31px;
+ }
+ .postcard h2.post-title {
+ margin-top: 20px;
}
-}
-
-/* the default tag button */
-
-.postcard div a.tagbutton {
- padding: 1px 4px 1px 4px;
- margin: 1px 5px 1px 5px;
- font-size: 10px;
- border-radius: 8px;
- transition: .4s;
- text-decoration: none;
- color:var(--gray-color);
- border: solid 1px var(--gray-color);
- transition: .4s;
-}
-
-.postcard div a.tagbutton:hover {
- background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%);
- color: white;
-}
-
-.postcard div a.red {
- color:var(--red-color);
- border: solid 1px var(--red-color);
-}
-
-.postcard div a.red:hover {
- background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%);
- color: white;
-}
-
-.postcard div a.blue{
- color:var(--blue-color);
- border: solid 1px var(--blue-color);
-}
-
-.postcard div a.blue:hover {
- background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%);
- color: white;
-}
-.postcard div a.green{
- color:var(--green-color);
- border: solid 1px var(--green-color);
-}
+ .postcard {
+ height: 130px;
+ width: 90%;
+ }
+ .postcard::before {
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.9) 80%, rgba(255,254,253,1.0) 100%);
+ background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.9) 80%, rgba(255,254,253,1.0) 100%);
+ content: "";
+ }
-.postcard div a.green:hover {
- background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%);
- color: white;
+ .tags div a.tagbutton {
+ font-size: 5px;
+ border: solid 1px white;
+ }
}
+/* the default tag button */
.postcard .read-more{
position: absolute;
bottom: 20px;
+ box-shadow: 0 0 4px white;
right: 20px;
width: auto;
font-size: 12px;
font-weight: bold;
/*padding: 0.25em 0.25em; */
padding: 1px 7px 1px 7px;
- border-radius: 4px 15px 15px 4px;
+ border-radius: 12px 12px 12px 12px;
transition: .4s;
text-decoration: none;
- border: solid 2px #67c5ff;
- color: #67c5ff;
+ border: solid 2px #4689FF;
+ color: #4689FF;
+ background: white;
}
.postcard .read-more:hover{
- zoom: 1.02;
- background: #67c5ff;
+ background: #4689FF;
color: white;
}
diff --git a/static/css/single.css b/static/css/single.css
index c42a8834d2b36dc4be9f11a638221b01f1ad22c4..fee1eaa9994dcea4827ad67896b288443fdeaa7e 100644
--- a/static/css/single.css
+++ b/static/css/single.css
@@ -9,6 +9,15 @@
/*border: solid 5px green;
*/
}
+
+.single_page .content {
+ margin-top: 48px;
+}
+
+.single_page .tags {
+ margin-left: 6px;
+}
+
.single_page h1 {
border-bottom: solid 1px #ddd;;
font-size: 23px;