mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-16 06:44:50 +00:00
47519b1703
* Initial Commit * Fix default tiddlers for prerelease * Use parsermode: inline for tiddlers that don't semantically have paragraphs * Tweak card styles Cards can now grow slightly to fill the available space * Rename "Community Links" to "TiddlyWiki on the Web", and excise the items to individual tiddlers * Revert changes to core styles * Introductory text for each welcome tiddler * Colours for welcome tiddlers * Simplify introduction of GettingStarted * Update TiddlyFox information * Move all the card related definitions into their own folder Perhaps preparatory to making them into a plugin, or putting them into the core * Add a hover effect for card icons * Retract changes to GettingStarted and system fonts We'll come back to that * Revert properly
87 lines
3.1 KiB
Plaintext
87 lines
3.1 KiB
Plaintext
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={{{ [<class>addprefix[tc-card ]] }}}
|
|
to={{{ [<currentTiddler>get<linkField>else<currentTiddler>] }}}
|
|
aria-label=<<currentTiddler>>
|
|
>
|
|
<$transclude
|
|
$variable="flex-card-body"
|
|
bordercolor=<<bordercolor>>
|
|
backgroundcolor=<<backgroundcolor>>
|
|
textcolor=<<textcolor>>
|
|
imageField=<<imageField>>
|
|
captionField=<<captionField>>
|
|
subtitle=<<subtitle>>
|
|
descriptionField=<<descriptionField>>
|
|
/>
|
|
</$link>
|
|
\end
|
|
|
|
\procedure flex-card-external(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"url")
|
|
<a class={{{ [<class>addprefix[tc-card ]addprefix[tc-tiddlylink ]] }}}
|
|
href={{{ [<currentTiddler>get<linkField>] }}}
|
|
aria-label=<<currentTiddler>>
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<$transclude
|
|
$variable="flex-card-body"
|
|
bordercolor=<<bordercolor>>
|
|
backgroundcolor=<<backgroundcolor>>
|
|
textcolor=<<textcolor>>
|
|
imageField=<<imageField>>
|
|
captionField=<<captionField>>
|
|
subtitle=<<subtitle>>
|
|
descriptionField=<<descriptionField>>
|
|
/>
|
|
</a>
|
|
\end
|
|
|
|
\procedure flex-card-body(bordercolor,backgroundcolor,textcolor,imageField,captionField,subtitle,descriptionField)
|
|
<div class="tc-card-accent" style.borderTop={{{ [<bordercolor>!is[blank]addprefix[5px solid ]] }}} style.background={{!!background}} style.backgroundColor=<<backgroundcolor>> style.color=<<textcolor>> style.fill=<<textcolor>>>
|
|
<$list filter="[<currentTiddler>has[ribbon-text]]" variable="ignore">
|
|
<div class="tc-card-ribbon-wrapper" aria-hidden="true">
|
|
<div class="tc-card-ribbon" style.backgroundColor={{{ [<currentTiddler>get[ribbon-color]else[red]] }}}>
|
|
<div class="tc-card-ribbon-inner">
|
|
<$text text={{!!ribbon-text}}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</$list>
|
|
<$list filter="[<currentTiddler>has<imageField>]" variable="ignore">
|
|
<div class="tc-card-image">
|
|
<$image source={{{ [<currentTiddler>get<imageField>] }}}
|
|
alt={{{ [<currentTiddler>get<imageField>get[alt-text]else[Image.]] }}}
|
|
/>
|
|
</div>
|
|
</$list>
|
|
<div class="tc-card-title"><$transclude field=<<captionField>>><$view field="title"/></$transclude></div>
|
|
<$list filter="[<subtitle>!is[blank]]" variable="ignore">
|
|
<div class="tc-card-subtitle">
|
|
<$text text=<<subtitle>>/>
|
|
</div>
|
|
</$list>
|
|
<div class="tc-card-icon"><$transclude tiddler={{!!icon}}/></div>
|
|
<%if [all[current]get<descriptionField>else[]!match[]] %>
|
|
<div class="tc-card-body-wrapper">
|
|
<div class="tc-card-body">
|
|
<$transclude field=<<descriptionField>> mode="block"/>
|
|
</div>
|
|
<div class="tc-card-body-clear">
|
|
</div>
|
|
</div>
|
|
<%endif%>
|
|
<%if [all[current]has[button-text]] %>
|
|
<div class="tc-card-button" style.background-color={{!!button-color}} style.border-color={{!!button-color}}>
|
|
<$text text={{!!button-text}}/> {{$:/core/images/chevron-right}}
|
|
</div>
|
|
<%endif%>
|
|
</div>
|
|
\end
|