From 5af26067b618d8f48a87fe6bae39490083c981d4 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Mon, 7 Oct 2024 11:53:24 +0100 Subject: [PATCH] Move all the card related definitions into their own folder Perhaps preparatory to making them into a plugin, or putting them into the core --- .../tiddlers/cards/card-procedures.tid | 86 ++++++ .../tw5.com/tiddlers/cards/card-styles.tid | 248 ++++++++++++++++++ .../gettingstarted/GettingStarted.tid | 2 +- .../hellothere/quickstart/Quick Start.tid | 2 +- editions/tw5.com/tiddlers/saving/Saving.tid | 2 +- .../tiddlers/system/tw5.com-card-template.tid | 6 - .../tiddlers/system/tw5.com-styles.tid | 245 ----------------- .../tiddlers/system/wikitext-macros.tid | 80 ------ 8 files changed, 337 insertions(+), 334 deletions(-) create mode 100644 editions/tw5.com/tiddlers/cards/card-procedures.tid create mode 100644 editions/tw5.com/tiddlers/cards/card-styles.tid delete mode 100644 editions/tw5.com/tiddlers/system/tw5.com-card-template.tid diff --git a/editions/tw5.com/tiddlers/cards/card-procedures.tid b/editions/tw5.com/tiddlers/cards/card-procedures.tid new file mode 100644 index 000000000..f548d69ac --- /dev/null +++ b/editions/tw5.com/tiddlers/cards/card-procedures.tid @@ -0,0 +1,86 @@ +code-body: yes +tags: $:/tags/Macro +title: $:/cards/procedures +type: text/vnd.tiddlywiki + +\whitespace trim + +\procedure flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link") +<$link class={{{ [addprefix[tc-card ]] }}} + to={{{ [getelse] }}} + aria-label=<> +> + <$transclude + $variable="flex-card-body" + bordercolor=<> + backgroundcolor=<> + textcolor=<> + imageField=<> + captionField=<> + subtitle=<> + descriptionField=<> + /> + +\end + +\procedure flex-card-external(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"url") +addprefix[tc-card ]addprefix[tc-tiddlylink ]] }}} + href={{{ [get] }}} + aria-label=<> + rel="noopener noreferrer" + target="_blank" +> + <$transclude + $variable="flex-card-body" + bordercolor=<> + backgroundcolor=<> + textcolor=<> + imageField=<> + captionField=<> + subtitle=<> + descriptionField=<> + /> + +\end + +\procedure flex-card-body(bordercolor,backgroundcolor,textcolor,imageField,captionField,subtitle,descriptionField) +
!is[blank]addprefix[5px solid ]] }}} style.background={{!!background}} style.backgroundColor=<> style.color=<> style.fill=<>> + <$list filter="[has[ribbon-text]]" variable="ignore"> + + + <$list filter="[has]" variable="ignore"> +
+ <$image source={{{ [get] }}} + alt={{{ [getget[alt-text]else[Image.]] }}} + /> +
+ +
<$transclude field=<>><$view field="title"/>
+ <$list filter="[!is[blank]]" variable="ignore"> +
+ <$text text=<>/> +
+ +
<$transclude tiddler={{!!icon}}/>
+ <%if [all[current]getelse[]!match[]] %> +
+
+ <$transclude field=<> mode="block"/> +
+
+
+
+ <%endif%> + <%if [all[current]has[button-text]] %> +
+ <$text text={{!!button-text}}/> {{$:/core/images/chevron-right}} +
+ <%endif%> +
+\end diff --git a/editions/tw5.com/tiddlers/cards/card-styles.tid b/editions/tw5.com/tiddlers/cards/card-styles.tid new file mode 100644 index 000000000..a2eb3c217 --- /dev/null +++ b/editions/tw5.com/tiddlers/cards/card-styles.tid @@ -0,0 +1,248 @@ +tags: $:/tags/Stylesheet +title: $:/cards/styles +type: text/vnd.tiddlywiki + +\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock + +.tc-cards { + display: flex; + flex-wrap: wrap; + 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-small { + text-align: center; + font-size: 0.7em; +} + +.tc-cards.tc-action-card { + text-align: center; + background: none; +} + +.tc-cards.tc-cards-vertical { +} + +.tc-cards.tc-action-card .tc-card-button { + border: 1px solid <>; + background: <>; + margin: 0.5em; + border-radius: 6px; + padding: 0.5em; + color: <>; + fill: <>; +} + +.tc-cards.tc-action-card .tc-card-button svg { + width: 0.65em; + height: 0.65em; + vertical-align: middle; +} + +.tc-tiddlylink.tc-card { + font-weight: normal; + flex-grow: 1; + max-width: 250px; + position: relative; + background: <>; + color: <>; + width: 200px; + min-height: 0; + 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 { + 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 { + 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; + justify-content: start; + padding: 5px 7px; + align-items: center; +} + +.tc-cards.tc-cards-vertical .tc-card-icon { + line-height: 0; + order: 1; +} + +.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: 849; + 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 { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + 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 { + font-size: 1.2em; + line-height: 1.2; + font-weight: 600; + transition: color 0.3s ease-in-out; + padding: 0 10px; + margin: 0.5em 0 0.25em 0; +} + +.tc-cards.tc-cards-vertical .tc-card-title { + font-size: 1.1em; + min-width: 10em; + order: 2; +} + +.tc-cards.tc-cards-vertical .tc-card-title svg { + width: 1em; + height: 1em; + vertical-align: text-bottom; +} + +.tc-card-subtitle, +.tc-card-author { + font-size: 0.8em; + line-height: 1.2; + color: <>; + padding: 0 10px; + margin: 0.5em 0; + font-style: italic; +} + +.tc-card-body { + font-size: 0.9em; + line-height: 1.2; + 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 { + 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; +} \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/gettingstarted/GettingStarted.tid b/editions/tw5.com/tiddlers/gettingstarted/GettingStarted.tid index aaafe0800..fa0e69bf6 100644 --- a/editions/tw5.com/tiddlers/gettingstarted/GettingStarted.tid +++ b/editions/tw5.com/tiddlers/gettingstarted/GettingStarted.tid @@ -8,6 +8,6 @@ Click here to download an empty copy of ~TiddlyWiki: {{$:/editions/tw5.com/snipp The next step is to choose a method for saving changes. There is a wide variety of methods available, with different features and limitations. Click on the badge for a method to see more information about it. You can also click on one of the platform filters to restrict the listing to methods that work with that platform. -<<.warning "Do not attempt to use the browser ''File''/''Save'' menu option to save changes (it does not work expected)">> +<<.warning "Do not attempt to use the browser ''File''/''Save'' menu option to save changes (it does not work as expected)">> {{Saving}} diff --git a/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid b/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid index 623b8808d..d57c3f5ab 100644 --- a/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid +++ b/editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid @@ -2,7 +2,7 @@ title: Quick Start modified: 20241001141521924 list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]] icon: $:/core/images/tip -color: #999 +color: #cc9 Choose how to get started quickly with ~TiddlyWiki. diff --git a/editions/tw5.com/tiddlers/saving/Saving.tid b/editions/tw5.com/tiddlers/saving/Saving.tid index e69b1c522..57ab35a3d 100644 --- a/editions/tw5.com/tiddlers/saving/Saving.tid +++ b/editions/tw5.com/tiddlers/saving/Saving.tid @@ -8,6 +8,6 @@ type: text/vnd.tiddlywiki
<$list filter="[tag[Saving]sort[caption]]"> -{{||$:/_tw5.com-card-template}} +<$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-card-template.tid b/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid deleted file mode 100644 index a2400a739..000000000 --- a/editions/tw5.com/tiddlers/system/tw5.com-card-template.tid +++ /dev/null @@ -1,6 +0,0 @@ -created: 20200507002521489 -modified: 20220719134613555 -title: $:/_tw5.com-card-template -type: text/vnd.tiddlywiki - -<$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 5fa74f106..57dac3360 100644 --- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid +++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid @@ -86,255 +86,10 @@ type: text/vnd.tiddlywiki height: 1em; } - - .tc-wrapper-flex { display: flex; } -.tc-cards { - display: flex; - flex-wrap: wrap; - 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-small { - text-align: center; - font-size: 0.7em; -} - -.tc-cards.tc-action-card { - text-align: center; - background: none; -} - -.tc-cards.tc-cards-vertical { -} - -.tc-cards.tc-action-card .tc-card-button { - border: 1px solid <>; - background: <>; - margin: 0.5em; - border-radius: 6px; - padding: 0.5em; - color: <>; - fill: <>; -} - -.tc-cards.tc-action-card .tc-card-button svg { - width: 0.65em; - height: 0.65em; - vertical-align: middle; -} - -.tc-tiddlylink.tc-card { - font-weight: normal; - flex-grow: 1; - max-width: 250px; - position: relative; - background: <>; - color: <>; - width: 200px; - min-height: 0; - 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 { - 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 { - 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; - justify-content: start; - padding: 5px 7px; - align-items: center; -} - -.tc-cards.tc-cards-vertical .tc-card-icon { - line-height: 0; - order: 1; -} - -.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: 849; - 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 { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - 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 { - font-size: 1.2em; - line-height: 1.2; - font-weight: 600; - transition: color 0.3s ease-in-out; - padding: 0 10px; - margin: 0.5em 0 0.25em 0; -} - -.tc-cards.tc-cards-vertical .tc-card-title { - font-size: 1.1em; - min-width: 10em; - order: 2; -} - -.tc-cards.tc-cards-vertical .tc-card-title svg { - width: 1em; - height: 1em; - vertical-align: text-bottom; -} - -.tc-card-subtitle, -.tc-card-author { - font-size: 0.8em; - line-height: 1.2; - color: <>; - padding: 0 10px; - margin: 0.5em 0; - font-style: italic; -} - -.tc-card-body { - font-size: 0.9em; - line-height: 1.2; - 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 { - 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; -} - .tc-btn-download { padding: 10px 30px; border-radius: 5px; diff --git a/editions/tw5.com/tiddlers/system/wikitext-macros.tid b/editions/tw5.com/tiddlers/system/wikitext-macros.tid index 3b9042068..f598cf240 100644 --- a/editions/tw5.com/tiddlers/system/wikitext-macros.tid +++ b/editions/tw5.com/tiddlers/system/wikitext-macros.tid @@ -87,83 +87,3 @@ type: text/vnd.tiddlywiki <$link to=<>/>: <$transclude $variable=tw-code tiddler=<> /> \end - -\procedure flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link") -<$link class={{{ [addprefix[tc-card ]] }}} - to={{{ [getelse] }}} - aria-label=<> -> - <$transclude - $variable="flex-card-body" - bordercolor=<> - backgroundcolor=<> - textcolor=<> - imageField=<> - captionField=<> - subtitle=<> - descriptionField=<> - /> - -\end - -\procedure flex-card-external(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"url") -addprefix[tc-card ]addprefix[tc-tiddlylink ]] }}} - href={{{ [get] }}} - aria-label=<> - rel="noopener noreferrer" - target="_blank" -> - <$transclude - $variable="flex-card-body" - bordercolor=<> - backgroundcolor=<> - textcolor=<> - imageField=<> - captionField=<> - subtitle=<> - descriptionField=<> - /> - -\end - -\procedure flex-card-body(bordercolor,backgroundcolor,textcolor,imageField,captionField,subtitle,descriptionField) -
!is[blank]addprefix[5px solid ]] }}} style.background={{!!background}} style.backgroundColor=<> style.color=<> style.fill=<>> - <$list filter="[has[ribbon-text]]" variable="ignore"> - - - <$list filter="[has]" variable="ignore"> -
- <$image source={{{ [get] }}} - alt={{{ [getget[alt-text]else[Image.]] }}} - /> -
- -
<$transclude field=<>><$view field="title"/>
- <$list filter="[!is[blank]]" variable="ignore"> -
- <$text text=<>/> -
- -
<$transclude tiddler={{!!icon}}/>
- <%if [all[current]getelse[]!match[]] %> -
-
- <$transclude field=<> mode="block"/> -
-
-
-
- <%endif%> - <%if [all[current]has[button-text]] %> -
- <$text text={{!!button-text}}/> {{$:/core/images/chevron-right}} -
- <%endif%> -
-\end