<$wikify text=<> name="alltagsfilterwikified">
<$list filter=<>>
{{||$:/_tw5.com-card-template}}
diff --git a/editions/tw5.com/tiddlers/saving/TiddlyBucket - Save to AWS or Google Storage.tid b/editions/tw5.com/tiddlers/saving/TiddlyBucket - Save to AWS or Google Storage.tid
index 272f22bbc..d4aefdb0e 100644
--- a/editions/tw5.com/tiddlers/saving/TiddlyBucket - Save to AWS or Google Storage.tid
+++ b/editions/tw5.com/tiddlers/saving/TiddlyBucket - Save to AWS or Google Storage.tid
@@ -8,6 +8,7 @@ modified: 20221126192853897
tags: Chrome Firefox [[Internet Explorer]] Linux Mac Opera Safari Saving Windows iOS Edge
title: TiddlyBucket - Save to AWS or Google Storage
type: text/vnd.tiddlywiki
+ribbon-text: NEW
~TiddlyBucket - Save to AWS or Google Storage using Go
diff --git a/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid b/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid
index 50d0b1163..a2400a739 100644
--- a/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid
+++ b/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid
@@ -3,19 +3,4 @@ modified: 20220719134613555
title: $:/_tw5.com-card-template
type: text/vnd.tiddlywiki
-\define tw-card-template(bordercolor:"")
-\whitespace trim
->;
+ border-color: rgba(34,36,38,.15);
+ box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset;
}
-.tc-card:hover {
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+.tc-tiddlylink.tc-card {
+ font-weight: normal;
+ max-width: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background: <>;
+ color: <>;
+ width: 200px;
+ min-height: 0;
+ padding: 0 0 0.5em 0;
+ margin: 0.5em;
+ border: none;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+ transition: box-shadow 0.3s ease,transform .3s ease;
}
-.tc-card:hover .tc-card-title {
- color: #1462ff;
+
+@media (max-width: 500px) {
+
+ .tc-cards {
+ padding: 0;
+ }
+
+ .tc-tiddlylink.tc-card {
+ margin: 0.25em;
+ width: 45%;
+ }
+
+}
+
+.tc-tiddlylink.tc-card.tc-card-quote {
+ width: 320px;
+ box-shadow: none;
+ background-color: #effdff;
+}
+
+.tc-card-accent {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+}
+
+.tc-tiddlylink.tc-card:hover {
+ color: <>;
+ background: <>;
+ text-decoration: none;
+ cursor: pointer;
+ box-shadow: 0 1px 5px 0 #bcbdbd, 0 0 0 1px #d4d4d5;
+ transform: translateY(-3px);
+}
+
+.tc-card-ribbon-wrapper {
+ line-height: 0;
+ width: 75px;
+ height: 75px;
+ position: absolute;
+ right: 0;
+ overflow: hidden;
+ top: 0;
+ z-index: 999;
+ pointer-events: none;
+}
+
+.tc-card-ribbon {
+ transition: top 0.3s ease-in-out;
+ top: 15px;
+ right: -77px;
+ position: absolute;
+ transform: rotate(45deg);
+ background-color: red;
+ box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%);
+}
+
+.tc-tiddlylink.tc-card:hover .tc-card-ribbon {
+ top: -77px;
+}
+
+.tc-card-ribbon-inner {
+ font-size: 10px;
+ line-height: 13px;
+ font-weight: 700;
+ color: white;
+ text-decoration: none;
+ text-shadow: 0 -1px rgb(0 0 0 / 50%);
+ width: 200px;
+ display: inline-block;
+ padding: 2px 0;
+ text-align: center;
+}
+
+.tc-card-image {
+ line-height: 0;
+ overflow: hidden;
+}
+
+.tc-card-image img {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ width: 100%;
+ transition: transform 0.3s ease-in-out;
+}
+
+.tc-tiddlylink.tc-card:hover .tc-card-image img {
+ transform: scale(1.05);
}
.tc-card-title {
- text-align: center;
font-size: 1.2em;
+ line-height: 1.2;
font-weight: 600;
- transition: color 0.2s ease-in-out;
- padding: 10px 0;
+ transition: color 0.3s ease-in-out;
+ padding: 0 10px;
+ margin: 0.5em 0;
}
+.tc-card-subtitle,
.tc-card-author {
- text-align: center;
+ font-size: 0.8em;
+ line-height: 1.2;
+ color: <>;
+ padding: 0 10px;
+ margin: 0.5em 0;
font-style: italic;
}
-.tc-card p {
- height: 67px;
- overflow: hidden;
+.tc-card-body {
+ font-size: 0.9em;
+ line-height: 1.2;
+ padding: 0 10px;
margin: 0;
- padding: 13px 0;
}
-.tc-card a {
- color: #222;
+.tc-card-body-wrapper {
+ position: relative;
}
-.tc-card a:hover {
- text-decoration:none;
+.tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:before {
+ font-family: Georgia, serif;
+ color: <>;
+ content: open-quote;
+ font-size: 5em;
+ line-height: 1;
+ float: left;
+}
+
+.tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:after {
+ font-family: Georgia, serif;
+ color: <>;
+ content: close-quote;
+ font-size: 5em;
+ line-height: 1;
+ float: right;
+}
+
+.tc-tiddlylink.tc-card .tc-card-body-clear {
+ clear: both;
+}
+
+.tc-card-body > p {
+ margin: 0.25em 0;
}
.tc-card a:active, .tc-card a:focus, .tc-btn-download:active, .tc-btn-download:focus{
- outline: none;
-}
-
-div.content {
- padding: 1px 16px;
- display: flex;
- flex-wrap: wrap;
+ outline: none;
}
.tc-btn-download {
diff --git a/editions/tw5.com/tiddlers/system/wikitext-macros.tid b/editions/tw5.com/tiddlers/system/wikitext-macros.tid
index 70f62bfb7..a867def4f 100644
--- a/editions/tw5.com/tiddlers/system/wikitext-macros.tid
+++ b/editions/tw5.com/tiddlers/system/wikitext-macros.tid
@@ -94,3 +94,38 @@ That renders as:
<>
\end
+
+\define flex-card(class,bordercolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
+\whitespace trim
+<$link class={{{ [<__class__>addprefix[tc-card ]] }}} to={{{ [get<__linkField__>else] }}}>
+
- <$link>
- <$let tv-wikilinks=no>
-
-\end
-
-<$macrocall $name="tw-card-template" bordercolor={{!!color}}/>
+<$macrocall $name="flex-card" bordercolor={{!!color}} captionField="caption" subtitle={{{ [{!!community-author}!is[blank]addprefix[by ]] }}}/>
diff --git a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
index 251851457..d4ce76a8e 100644
--- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
+++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
@@ -122,62 +122,181 @@ type: text/vnd.tiddlywiki
margin-left: 10px;
}
-.tc-card {
- margin: 15px;
- padding: 10px 20px;
- border-radius: 10px;
- border-top: 5px solid #45D3D3;
- box-shadow: 0 8px 17px -8px #A3A5AE;
- background-color: #FFF;
- width: 200px;
- transition: box-shadow 0.3s ease-in-out;
- font-size: 13px;
- line-height: 18px;
+.tc-cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ width: 100%;
+ padding: 0.5em;
+ background: <<$transclude field="caption"><$view field="title"/>
-
- <$view field="description"/>
- - -!is[blank]addprefix[5px solid ]] }}}>
+ <$list filter="[has[ribbon-text]]" variable="ignore">
+ has<__imageField__>]" variable="ignore">
+
+
+\end
diff --git a/editions/tw5.com/tiddlers/testimonials/Testimonials - Joe Armstrong.tid b/editions/tw5.com/tiddlers/testimonials/Testimonials - Joe Armstrong.tid
new file mode 100644
index 000000000..2f110d20f
--- /dev/null
+++ b/editions/tw5.com/tiddlers/testimonials/Testimonials - Joe Armstrong.tid
@@ -0,0 +1,8 @@
+title: Testimonials - Joe Armstrong
+tags: Testimonial
+caption: Joe Armstrong, Co-inventor of Erlang
+extlink: https://joearms.github.io/
+
+The ~TiddlyWiki is the best software I've ever found for organising my ideas.
+
+It's well worth spending an hour or so playing with it to see how it can help you. This will be time well-spent and will change how you think and how you organise your ideas.
diff --git a/editions/tw5.com/tiddlers/testimonials/Testimonials - Network World.tid b/editions/tw5.com/tiddlers/testimonials/Testimonials - Network World.tid
new file mode 100644
index 000000000..9c78f84cc
--- /dev/null
+++ b/editions/tw5.com/tiddlers/testimonials/Testimonials - Network World.tid
@@ -0,0 +1,8 @@
+title: Testimonials - Network World
+tags: Testimonial
+caption: Mark Gibbs, Network World
+extlink: http://www.networkworld.com/article/3028098/open-source-tools/tiddlywiki-a-free-open-source-wiki-revisited.html
+
+~TiddlyWiki gets a Gearhead rating of 6 out of 5 (it's that good).
+
+Finding code that works flawlessly after just two or three years is magical enough but after seven years?!
diff --git a/editions/tw5.com/tiddlers/testimonials/Testimonials - Product Hunt.tid b/editions/tw5.com/tiddlers/testimonials/Testimonials - Product Hunt.tid
new file mode 100644
index 000000000..388b1daa6
--- /dev/null
+++ b/editions/tw5.com/tiddlers/testimonials/Testimonials - Product Hunt.tid
@@ -0,0 +1,6 @@
+title: Testimonials - Product Hunt
+tags: Testimonial
+caption: Product Hunt
+extlink: https://www.producthunt.com/posts/tiddlywiki-2?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-tiddlywiki-2
+
+
+
+
+ <$list filter="[get[ribbon-color]else[red]] }}}>
+
+
+ <$text text={{!!ribbon-text}}/>
+
+
+ <$image source={{{ [get<__imageField__>] }}}/>
+
+
+ <$transclude field=<<__captionField__>>><$view field="title"/>
+ <$list filter="[<__subtitle__>!is[blank]]" variable="ignore">
+
+ <$text text=<<__subtitle__>>/>
+
+
+
+
+
+ <$transclude field=<<__descriptionField__>> mode="block"/>
+
+
+
+ {{Product Hunt Link}}