diff --git a/editions/tw5.com/tiddlers/definitions/Xememex.tid b/editions/tw5.com/tiddlers/definitions/Xememex.tid
new file mode 100644
index 000000000..956848ccf
--- /dev/null
+++ b/editions/tw5.com/tiddlers/definitions/Xememex.tid
@@ -0,0 +1,11 @@
+title: Xememex
+tags: Definitions
+
+
+Xememex is a multi-user implementation of TiddlyWiki from Federatial.
+
+Xememex is highly scalable. The largest current implementation supports hundreds of online wikis with thousands of users.
+
+Xememex is cost effective. Xememex runs as a serverless application on Amazon Web Services. Federatial deploy and manage custom instances of Xememex using the clients own AWS account, giving clients full visibility of usage and operating costs.
+
+Xememex is currently only available under commercial terms from Federatial. Contact jeremy@federatial.com for more details.
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid
index d80da69c4..965b62151 100644
--- a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid
+++ b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid
@@ -5,12 +5,20 @@ tags: TableOfContents
title: HelloThere
type: text/vnd.tiddlywiki
-!! ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
+!!.tc-hero-heading ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
Use it to keep your [[to-do list|TaskManagementExample]], to plan an [[essay or novel|"TiddlyWiki for Scholars" by Alberto Molina]], or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
+!! ''Quick Start''
+
+
+<$list filter="[tag[Quick Start]]">
+<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
+$list>
+
+
!! ''Find Out More''
diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid
new file mode 100644
index 000000000..eb0af7855
--- /dev/null
+++ b/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid
@@ -0,0 +1,2 @@
+title: Quick Start
+list: [[Quick Start: Online]] [[Quick Start: Desktop]] [[Quick Start: Xememex]]
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid
new file mode 100644
index 000000000..a469731f4
--- /dev/null
+++ b/editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid
@@ -0,0 +1,7 @@
+title: Quick Start: Desktop
+tags: [[Quick Start]]
+caption: DESKTOP {{$:/core/images/storyview-zoomin}}
+background-color: #9de1a5
+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
new file mode 100644
index 000000000..acb763e9a
--- /dev/null
+++ b/editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid
@@ -0,0 +1,7 @@
+title: Quick Start: DIY
+tags: [[Quick Start]]
+caption: DIY {{$:/core/images/theme-button}}
+background-color: #ecc2ba
+link: GettingStarted
+
+Explore the options to find the configuration of ~TiddlyWiki 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/online.tid
new file mode 100644
index 000000000..a3f8a26d0
--- /dev/null
+++ b/editions/tw5.com/tiddlers/hellothere/quickstart/online.tid
@@ -0,0 +1,8 @@
+title: Quick Start: Online
+tags: [[Quick Start]]
+caption: ONLINE {{$:/core/images/globe}}
+background-color: #c3d3ff
+background: linear-gradient(90deg,#c3d3ff, #ffffff)
+link: Tiddlyhost
+
+Create an account with Tiddlyhost for online wikis that can be private or public
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid
new file mode 100644
index 000000000..b8aea90ae
--- /dev/null
+++ b/editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid
@@ -0,0 +1,7 @@
+title: Quick Start: Xememex
+tags: [[Quick Start]]
+caption: COMMERCIAL {{$:/core/images/star-filled}}
+background-color: #e9c1f1
+link: Xememex
+
+Xememex is the commercial 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 d6d00f86f..ba41152a0 100644
--- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
+++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
@@ -6,6 +6,10 @@ type: text/vnd.tiddlywiki
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+.tc-hero-heading a.tc-tiddlylink {
+ font-weight: bold;
+}
+
.tc-double-spaced-list li {
padding-bottom: .5em;
padding-top: .5em;
@@ -78,8 +82,6 @@ type: text/vnd.tiddlywiki
height: 1em;
}
-
-
.tc-wrapper-flex {
display: flex;
}
@@ -134,32 +136,33 @@ type: text/vnd.tiddlywiki
.tc-cards {
display: flex;
flex-wrap: wrap;
- justify-content: space-evenly;
+ justify-content: flex-start;
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;
}
.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-cards.tc-cards-vertical .tc-tiddlylink.tc-card {
+ width: 100%;
+}
+
@media (max-width: 500px) {
.tc-cards {
@@ -180,8 +183,17 @@ type: text/vnd.tiddlywiki
}
.tc-card-accent {
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
+ height: 100%;
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ justify-content: stretch;
+ border-radius: 8px;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-accent {
+ flex-direction: row;
+ align-items: baseline;
}
.tc-tiddlylink.tc-card:hover {
@@ -233,6 +245,8 @@ type: text/vnd.tiddlywiki
}
.tc-card-image {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
line-height: 0;
overflow: hidden;
}
@@ -254,7 +268,19 @@ type: text/vnd.tiddlywiki
font-weight: 600;
transition: color 0.3s ease-in-out;
padding: 0 10px;
- margin: 0.5em 0;
+ margin: 0.5em 0 0.25em 0;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-title {
+ font-size: 1em;
+ min-width: 10em;
+ text-align: right;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-title svg {
+ width: 1em;
+ height: 1em;
+ vertical-align: text-bottom;
}
.tc-card-subtitle,
@@ -270,12 +296,17 @@ type: text/vnd.tiddlywiki
.tc-card-body {
font-size: 0.9em;
line-height: 1.2;
- padding: 0 10px;
+ padding: 0.25em 10px;
margin: 0;
}
+.tc-cards.tc-cards-vertical .tc-card-body {
+ font-size: 1em;
+}
+
.tc-card-body-wrapper {
position: relative;
+ flex-grow: 1;
}
.tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:before {
diff --git a/editions/tw5.com/tiddlers/system/wikitext-macros.tid b/editions/tw5.com/tiddlers/system/wikitext-macros.tid
index a867def4f..48238d2bb 100644
--- a/editions/tw5.com/tiddlers/system/wikitext-macros.tid
+++ b/editions/tw5.com/tiddlers/system/wikitext-macros.tid
@@ -95,10 +95,10 @@ That renders as:
<>
\end
-\define flex-card(class,bordercolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
+\define flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
\whitespace trim
<$link class={{{ [<__class__>addprefix[tc-card ]] }}} to={{{ [get<__linkField__>else] }}}>
- !is[blank]addprefix[5px solid ]] }}}>
+
!is[blank]addprefix[5px solid ]] }}} style.backgroundColor=<<__backgroundcolor__>> style.color=<<__textcolor__>> style.fill=<<__textcolor__>>>
<$list filter="[
has[ribbon-text]]" variable="ignore">
get[ribbon-color]else[red]] }}}>