From 6ff518c43f86a169352b360e984760895899ffc9 Mon Sep 17 00:00:00 2001 From: "jeremy@jermolene.com" Date: Mon, 10 Apr 2023 10:52:21 +0100 Subject: [PATCH] Quickstart: Switch to horizontal cards --- .../tiddlers/hellothere/HelloThere.tid | 4 +- .../hellothere/quickstart/desktop.tid | 6 ++- .../tiddlers/hellothere/quickstart/diy.tid | 6 ++- .../quickstart/{online.tid => tiddlyhost.tid} | 8 ++-- .../hellothere/quickstart/xememex.tid | 6 ++- .../tiddlers/system/tw5.com-styles.tid | 48 +++++++++++++++++-- .../tiddlers/system/wikitext-macros.tid | 8 ++++ 7 files changed, 71 insertions(+), 15 deletions(-) rename editions/tw5.com/tiddlers/hellothere/quickstart/{online.tid => tiddlyhost.tid} (57%) diff --git a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid index 64611cd2b..d1a6fd53e 100644 --- a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid +++ b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid @@ -13,9 +13,9 @@ TiddlyWiki lets you choose where to keep your data, guaranteeing that in the dec !! ''Quick Start'' -
+
<$list filter="[tag[Quick Start]]"> -<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/> +<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid index a469731f4..60d614641 100644 --- a/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid +++ b/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid @@ -1,7 +1,9 @@ title: Quick Start: Desktop tags: [[Quick Start]] -caption: DESKTOP {{$:/core/images/storyview-zoomin}} -background-color: #9de1a5 +caption: Desktop +icon: $:/core/images/storyview-zoomin +button-color: #37753e +button-text: Download link: TiddlyDesktop Download the official desktop application for macOS, Windows and Linux \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid index eb7282744..e5861a1fe 100644 --- a/editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid +++ b/editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid @@ -1,7 +1,9 @@ title: Quick Start: DIY tags: [[Quick Start]] -caption: DIY {{$:/core/images/theme-button}} -background-color: #ecc2ba +caption: DIY +icon: $:/core/images/theme-button +button-color: #ff4522 +button-text: Explore link: GettingStarted Get the full benefits of ~TiddlyWiki by finding the configuration that is right for you \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/online.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/tiddlyhost.tid similarity index 57% rename from editions/tw5.com/tiddlers/hellothere/quickstart/online.tid rename to editions/tw5.com/tiddlers/hellothere/quickstart/tiddlyhost.tid index a3f8a26d0..66e819a04 100644 --- a/editions/tw5.com/tiddlers/hellothere/quickstart/online.tid +++ b/editions/tw5.com/tiddlers/hellothere/quickstart/tiddlyhost.tid @@ -1,7 +1,9 @@ -title: Quick Start: Online +title: Quick Start: Tiddlyhost tags: [[Quick Start]] -caption: ONLINE {{$:/core/images/globe}} -background-color: #c3d3ff +caption: Tiddlyhost +icon: $:/core/images/globe +button-color: #00009a +button-text: Create Account background: linear-gradient(90deg,#c3d3ff, #ffffff) link: Tiddlyhost diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid index bae7cbc73..005614efd 100644 --- a/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid +++ b/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid @@ -1,7 +1,9 @@ title: Quick Start: Xememex tags: [[Quick Start]] -caption: COMMERCIAL {{$:/core/images/star-filled}} -background-color: #e9c1f1 +caption: Xememex +icon: $:/core/images/star-filled +button-color: #bf5fb6 +button-text: Find out more link: Xememex Xememex is the multiuser serverless implementation of ~TiddlyWiki from Federatial \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid index 6976ae667..93f2199a3 100644 --- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid +++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid @@ -82,6 +82,8 @@ type: text/vnd.tiddlywiki height: 1em; } + + .tc-wrapper-flex { display: flex; } @@ -136,14 +138,52 @@ type: text/vnd.tiddlywiki .tc-cards { display: flex; flex-wrap: wrap; - justify-content: flex-start; + justify-content: space-evenly; width: 100%; + padding: 0.5em; + background: <>; + border-color: rgba(34,36,38,.15); + box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset; gap: 1em; } -.tc-cards.tc-cards-vertical { - flex-direction: column; - gap: 0.5em; +.tc-cards.tc-action-card { + text-align: center; + background: none; +} + +.tc-cards.tc-action-card .tc-card-button { + border: 1px solid <>; + background: <>; + color: <>; + margin: 0.5em; + border-radius: 6px; +} + +.tc-cards.tc-action-card .tc-card-button a { + border-radius: 6px; + padding: 0.5em; + color: <>; + fill: <>; + display: inline-block; + width:100%; + height:100%; +} + +.tc-cards.tc-action-card .tc-card:hover .tc-card-button a { + background: <>; + color: <>; + fill: <>; +} + +.tc-cards.tc-action-card .tc-card-button a:hover { + text-decoration: none; +} + +.tc-cards.tc-action-card .tc-card-button a svg { + width: 0.65em; + height: 0.65em; + vertical-align: middle; } .tc-tiddlylink.tc-card { diff --git a/editions/tw5.com/tiddlers/system/wikitext-macros.tid b/editions/tw5.com/tiddlers/system/wikitext-macros.tid index 48238d2bb..8df736fd7 100644 --- a/editions/tw5.com/tiddlers/system/wikitext-macros.tid +++ b/editions/tw5.com/tiddlers/system/wikitext-macros.tid @@ -119,6 +119,7 @@ That renders as: <$text text=<<__subtitle__>>/>
+
<$transclude tiddler={{!!icon}}/>
<$transclude field=<<__descriptionField__>> mode="block"/> @@ -126,6 +127,13 @@ That renders as:
+ <$list filter="[all[current]has[button-text]]" variable="ignore"> +
+ <$link to={{!!link}}> + <$text text={{!!button-text}}/> {{$:/core/images/chevron-right}} + +
+
\end