mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
Experiments: Refactoring HelloThere (#8664)
* 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
This commit is contained in:
Jeremy Ruston
GitHub
parent
0451a8aa8d
commit
47519b1703
@ -4,5 +4,9 @@ title: $:/DefaultTiddlers
|
|||||||
|
|
||||||
[[TiddlyWiki Pre-release]]
|
[[TiddlyWiki Pre-release]]
|
||||||
HelloThere
|
HelloThere
|
||||||
|
[[Quick Start]]
|
||||||
|
[[Find Out More]]
|
||||||
|
[[TiddlyWiki on the Web]]
|
||||||
|
[[Testimonials and Reviews]]
|
||||||
GettingStarted
|
GettingStarted
|
||||||
Community
|
Community
|
||||||
|
|||||||
86
editions/tw5.com/tiddlers/cards/card-procedures.tid
Normal file
86
editions/tw5.com/tiddlers/cards/card-procedures.tid
Normal file
@ -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={{{ [<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
|
||||||
256
editions/tw5.com/tiddlers/cards/card-styles.tid
Normal file
256
editions/tw5.com/tiddlers/cards/card-styles.tid
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
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: <<colour 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 <<colour foreground>>;
|
||||||
|
background: <<colour foreground>>;
|
||||||
|
margin: 0.5em;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: <<colour background>>;
|
||||||
|
fill: <<colour background>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: <<colour background>>;
|
||||||
|
color: <<colour foreground>>;
|
||||||
|
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: <<colour foreground>>;
|
||||||
|
background: <<colour notification-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 .tc-card-icon svg {
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tc-card:hover .tc-card-icon svg {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: <<colour muted-foreground>>;
|
||||||
|
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: <<colour blockquote-bar>>;
|
||||||
|
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: <<colour blockquote-bar>>;
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
modified: 20241001141521924
|
||||||
|
tags: TableOfContents
|
||||||
|
title: TiddlyWiki on the Web
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
icon: $:/core/images/link
|
||||||
|
color: #808
|
||||||
|
list: TalkTiddlyWiki [[TiddlyWiki on YouTube]] [[TiddlyWiki on Reddit]] [[TiddlyWiki on Discord]] [[TiddlyWiki on GitHub]] [[TiddlyWiki on Mastodon]] [[TiddlyWiki on Twitter]] [[TiddlyWiki on Gitter]] [[TiddlyWiki on Open Collective]]
|
||||||
|
|
||||||
|
Links to the ~TiddlyWiki community elsewhere on the web.
|
||||||
|
|
||||||
|
<div class="tc-cards tc-cards-vertical">
|
||||||
|
<$list filter="[tag[TiddlyWiki on the Web]]">
|
||||||
|
<$macrocall $name="flex-card-external" backgroundcolor={{!!background-color}} textcolor={{!!text-color}} captionField="caption"/>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TalkTiddlyWiki
|
||||||
|
caption: ~TalkTiddlyWiki
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://talk.tiddlywiki.org/
|
||||||
|
icon: $:/core/images/help
|
||||||
|
background-color: #FF8C19
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Discord
|
||||||
|
caption: Discord
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://discord.gg/HFFZVQ8
|
||||||
|
icon: $:/core/images/globe
|
||||||
|
background-color: #5462EB
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on GitHub
|
||||||
|
caption: ~GitHub
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://github.com/TiddlyWiki/TiddlyWiki5
|
||||||
|
icon: $:/core/images/github
|
||||||
|
background-color: #444
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Gitter
|
||||||
|
caption: Gitter
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://gitter.im/TiddlyWiki/public
|
||||||
|
icon: $:/core/images/gitter
|
||||||
|
background-color: #753a88
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Mastodon
|
||||||
|
caption: Mastodon
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://fosstodon.org/@TiddlyWiki
|
||||||
|
icon: $:/core/images/mastodon
|
||||||
|
background-color: #2b90d9
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Open Collective
|
||||||
|
caption: Open Collective
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://opencollective.com/tiddlywiki
|
||||||
|
icon: Open Collective Logo
|
||||||
|
background-color: #0c2c66
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Reddit
|
||||||
|
caption: Reddit
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://www.reddit.com/r/TiddlyWiki5/
|
||||||
|
icon: Reddit Logo
|
||||||
|
background-color: #FF4500
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on Twitter
|
||||||
|
caption: Twitter
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://twitter.com/TiddlyWiki
|
||||||
|
icon: $:/core/images/twitter
|
||||||
|
background-color: #1DA1F2
|
||||||
|
text-color: #fff
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
title: TiddlyWiki on YouTube
|
||||||
|
caption: ~YouTube
|
||||||
|
tags: [[TiddlyWiki on the Web]]
|
||||||
|
url: https://www.youtube.com/c/JeremyRuston
|
||||||
|
icon: $:/core/images/video
|
||||||
|
background-color: #e52d27
|
||||||
|
text-color: #fff
|
||||||
@ -1,21 +1,9 @@
|
|||||||
created: 20130825161100000
|
created: 20130825161100000
|
||||||
modified: 20230803051056946
|
modified: 20241006202631647
|
||||||
tags: Definitions
|
tags: Definitions
|
||||||
title: TiddlyFox
|
title: TiddlyFox
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
<<.deprecated-since "FireFox 57" "Saving">>
|
TiddlyFox was an extension for older versions of Firefox that allowed standalone TiddlyWiki files to save their changes directly to the file system.
|
||||||
|
|
||||||
TiddlyFox is an extension for older versions of Firefox that allows standalone TiddlyWiki files to save their changes directly to the file system. TiddlyFox works on both desktop and smartphone versions of <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>. See [[Saving with TiddlyFox]] or [[Saving with TiddlyFox on Android]] for detailed instructions.
|
|
||||||
|
|
||||||
TiddlyFox is now obsolete due to its incompatibility with the latest versions of Firefox - see [[TiddlyFox Apocalypse]]. There are many alternatives to TiddlyFox, but none that work in precisely the same way -- see GettingStarted for details.
|
TiddlyFox is now obsolete due to its incompatibility with the latest versions of Firefox - see [[TiddlyFox Apocalypse]]. There are many alternatives to TiddlyFox, but none that work in precisely the same way -- see GettingStarted for details.
|
||||||
|
|
||||||
TiddlyFox can be downloaded from the Mozilla Addons site:
|
|
||||||
|
|
||||||
https://addons.mozilla.org/en-GB/firefox/addon/tiddlyfox/
|
|
||||||
|
|
||||||
<<<
|
|
||||||
You can also install the latest development version of TiddlyFox direct from GitHub:
|
|
||||||
|
|
||||||
https://github.com/TiddlyWiki/TiddlyFox/raw/master/tiddlyfox.xpi
|
|
||||||
<<<
|
|
||||||
|
|||||||
15
editions/tw5.com/tiddlers/hellothere/Find Out More.tid
Normal file
15
editions/tw5.com/tiddlers/hellothere/Find Out More.tid
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
modified: 20241001141521924
|
||||||
|
tags: TableOfContents
|
||||||
|
title: Find Out More
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
icon: $:/core/images/help
|
||||||
|
color: #880
|
||||||
|
|
||||||
|
Resources to help you learn more about ~TiddlyWiki and its community.
|
||||||
|
|
||||||
|
<div class="tc-cards">
|
||||||
|
<$list filter="[tag[HelloThumbnail]]">
|
||||||
|
<$macrocall $name="flex-card" captionField="caption" descriptionField="text"/>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -1,73 +1,17 @@
|
|||||||
created: 20130822170200000
|
created: 20130822170200000
|
||||||
list: [[A Gentle Guide to TiddlyWiki]] [[Discover TiddlyWiki]] [[Some of the things you can do with TiddlyWiki]] [[Ten reasons to switch to TiddlyWiki]] Examples [[What happened to the original TiddlyWiki?]]
|
list: [[A Gentle Guide to TiddlyWiki]] [[Discover TiddlyWiki]] [[Some of the things you can do with TiddlyWiki]] [[Ten reasons to switch to TiddlyWiki]] Examples [[What happened to the original TiddlyWiki?]]
|
||||||
modified: 20240710115948992
|
modified: 20241001141521924
|
||||||
tags: TableOfContents
|
tags: TableOfContents
|
||||||
title: HelloThere
|
title: HelloThere
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
icon: $:/core/icon
|
||||||
|
|
||||||
!!.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''
|
!!.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.
|
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.
|
||||||
|
|
||||||
~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.
|
* ~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''
|
* ~TiddlyWiki is infinitely customisable and extensible with many plugins that add new features
|
||||||
|
|
||||||
<div class="tc-cards tc-action-card">
|
* ~TiddlyWiki is the product of a collective of developers, part of an extensive community of users
|
||||||
<$list filter="[tag[Quick Start]]">
|
|
||||||
<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
|
|
||||||
</$list>
|
|
||||||
</div>
|
|
||||||
<div class="tc-cards tc-small">
|
|
||||||
<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card" aria-label="Chinese Community">
|
|
||||||
中文社区<br/>Chinese Community
|
|
||||||
</$link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
!! ''Find Out More''
|
|
||||||
|
|
||||||
<div class="tc-cards">
|
|
||||||
<$list filter="[tag[HelloThumbnail]]">
|
|
||||||
<$macrocall $name="flex-card" captionField="caption" descriptionField="text"/>
|
|
||||||
</$list>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
!! ''Community''
|
|
||||||
|
|
||||||
<div class="tc-cards" style="font-size:0.7em;text-align:center;margin:3em auto;">
|
|
||||||
<a href="https://talk.tiddlywiki.org/" class="tc-btn-big-green" style="border-radius:4px;background-color:#FF8C19;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/help}} ~TalkTW
|
|
||||||
</a>
|
|
||||||
<a href="https://www.youtube.com/c/JeremyRuston" class="tc-btn-big-green" style="border-radius:4px;background-color:#e52d27;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/video}} ~YouTube
|
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/HFFZVQ8" class="tc-btn-big-green" style="border-radius:4px;background-color:#5462EB;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/globe}} Discord
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/TiddlyWiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#1DA1F2;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/twitter}} Twitter
|
|
||||||
</a>
|
|
||||||
<a rel="me" href="https://fosstodon.org/@TiddlyWiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#2b90d9;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/mastodon}} Mastodon
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/TiddlyWiki/TiddlyWiki5" class="tc-btn-big-green" style="border-radius:4px;background-color:#444;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/github}} ~GitHub
|
|
||||||
</a>
|
|
||||||
<a href="https://gitter.im/TiddlyWiki/public" class="tc-btn-big-green" style="border-radius:4px;background-color:#753a88;background-image:linear-gradient(to left,#cc2b5e,#753a88);" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{$:/core/images/gitter}} Gitter
|
|
||||||
</a>
|
|
||||||
<a href="https://www.reddit.com/r/TiddlyWiki5/" class="tc-btn-big-green" style="border-radius:4px;background-color:#FF4500;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{Reddit Logo}} Reddit
|
|
||||||
</a>
|
|
||||||
<a href="https://opencollective.com/tiddlywiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#0c2c66;" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{Open Collective Logo}} Open Collective
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
!! ''Testimonials & Reviews''
|
|
||||||
|
|
||||||
<div class="tc-cards">
|
|
||||||
<$list filter="[tag[Testimonial]]">
|
|
||||||
<$macrocall $name="flex-card" class="tc-card-quote" captionField="caption" descriptionField="text"/>
|
|
||||||
</$list>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -0,0 +1,13 @@
|
|||||||
|
modified: 20241001141521924
|
||||||
|
tags: TableOfContents
|
||||||
|
title: Testimonials and Reviews
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
icon: $:/core/images/star-filled
|
||||||
|
color: #088
|
||||||
|
|
||||||
|
\parsermode inline
|
||||||
|
<div class="tc-cards">
|
||||||
|
<$list filter="[tag[Testimonial]]">
|
||||||
|
<$macrocall $name="flex-card" class="tc-card-quote" captionField="caption" descriptionField="text"/>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
@ -1,2 +1,18 @@
|
|||||||
title: Quick Start
|
title: Quick Start
|
||||||
|
modified: 20241001141521924
|
||||||
list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]]
|
list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]]
|
||||||
|
icon: $:/core/images/tip
|
||||||
|
color: #cc9
|
||||||
|
|
||||||
|
Choose how to get started quickly with ~TiddlyWiki.
|
||||||
|
|
||||||
|
<div class="tc-cards tc-action-card">
|
||||||
|
<$list filter="[tag[Quick Start]]">
|
||||||
|
<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
|
<div class="tc-cards tc-small">
|
||||||
|
<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card" aria-label="Chinese Community">
|
||||||
|
中文社区<br/>Chinese Community
|
||||||
|
</$link>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -4,4 +4,4 @@ tags: picture
|
|||||||
title: Open Collective Logo
|
title: Open Collective Logo
|
||||||
alt-text: Open Collective Logo
|
alt-text: Open Collective Logo
|
||||||
|
|
||||||
<svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 28 28"><path d="M25.509 6.026A13.934 13.934 0 0 1 28 14c0 2.963-.92 5.71-2.491 7.974l-3.626-3.627A8.96 8.96 0 0 0 23 14a8.964 8.964 0 0 0-1.117-4.347l3.626-3.627Z"/><path d="m21.974 2.49-3.627 3.628a9 9 0 1 0 0 15.765l3.627 3.626A13.934 13.934 0 0 1 14 27.999C6.268 28 0 21.733 0 14 0 6.269 6.268 0 14 0c2.963 0 5.711.922 7.974 2.492Z"/></svg>
|
<svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="22pt" height="22pt" viewBox="0 0 28 28"><path d="M25.509 6.026A13.934 13.934 0 0 1 28 14c0 2.963-.92 5.71-2.491 7.974l-3.626-3.627A8.96 8.96 0 0 0 23 14a8.964 8.964 0 0 0-1.117-4.347l3.626-3.627Z"/><path d="m21.974 2.49-3.627 3.628a9 9 0 1 0 0 15.765l3.627 3.626A13.934 13.934 0 0 1 14 27.999C6.268 28 0 21.733 0 14 0 6.269 6.268 0 14 0c2.963 0 5.711.922 7.974 2.492Z"/></svg>
|
||||||
@ -15,3 +15,5 @@ type: text/vnd.tiddlywiki
|
|||||||
[[TiddlyHost.com|https://tiddlyhost.com/]] is a hosting service for TiddlyWiki created by Simon Baird. Once you sign up and confirm your email you can create "sites", (i.e. ~TiddlyWikis), with support for online saving. Sites can be private or public, and you can optionally list them on the taggable and searchable [[TiddlyHost Hub|https://tiddlyhost.com/hub]] where they'll be discoverable by others.
|
[[TiddlyHost.com|https://tiddlyhost.com/]] is a hosting service for TiddlyWiki created by Simon Baird. Once you sign up and confirm your email you can create "sites", (i.e. ~TiddlyWikis), with support for online saving. Sites can be private or public, and you can optionally list them on the taggable and searchable [[TiddlyHost Hub|https://tiddlyhost.com/hub]] where they'll be discoverable by others.
|
||||||
|
|
||||||
Unlike [[TiddlySpot|Saving on TiddlySpot]], [[TiddlyHost|https://tiddlyhost.com]] is secure, open source, and has proper support for TiddlyWiki5. It also allows uploading existing ~TiddlyWiki files, supports TiddlyWikiClassic, and lets you claim ownership of your ~TiddlySpot sites. For more information see the [[FAQ|https://github.com/simonbaird/tiddlyhost/wiki/FAQ]] and the [[About|https://tiddlyhost.com/about]] page.
|
Unlike [[TiddlySpot|Saving on TiddlySpot]], [[TiddlyHost|https://tiddlyhost.com]] is secure, open source, and has proper support for TiddlyWiki5. It also allows uploading existing ~TiddlyWiki files, supports TiddlyWikiClassic, and lets you claim ownership of your ~TiddlySpot sites. For more information see the [[FAQ|https://github.com/simonbaird/tiddlyhost/wiki/FAQ]] and the [[About|https://tiddlyhost.com/about]] page.
|
||||||
|
|
||||||
|
If you find Tiddlyhost useful, please consider [[donation or sponsorship|https://tiddlyhost.com/donate]].
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
caption: Saving with ~FireFox
|
|
||||||
created: 20230803205140949
|
|
||||||
modified: 20230803213246739
|
|
||||||
tags: Saving Firefox
|
|
||||||
title: Saving with FireFox
|
|
||||||
|
|
||||||
# Restart [[Firefox]]
|
|
||||||
# [[Download]] an empty TiddlyWiki by clicking this button:
|
|
||||||
#> {{$:/editions/tw5.com/snippets/download-empty-button}}
|
|
||||||
# Locate the file you just downloaded
|
|
||||||
#* You may rename it, but be sure to keep the `.html` or `.htm` extension
|
|
||||||
# Open the file in [[Firefox]]
|
|
||||||
|
|
||||||
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
|
|
||||||
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
|
|
||||||
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
|
|
||||||
# Refresh the browser window to verify that your changes have been saved correctly
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
created: 20140103134551508
|
|
||||||
modified: 20230803051340676
|
|
||||||
tags: [[Saving with TiddlyFox]]
|
|
||||||
title: Saving with TiddlyFox on Android
|
|
||||||
type: text/vnd.tiddlywiki
|
|
||||||
|
|
||||||
<<.deprecated-since "FireFox 57" "Saving">>
|
|
||||||
|
|
||||||
(Alternatively, see the [[video tutorial|TiddlyWiki on Firefox for Android Video]])
|
|
||||||
|
|
||||||
# Ensure you have the latest version of [[Firefox for Android|http://getfirefox.com]]
|
|
||||||
#* http://getfirefox.com
|
|
||||||
# Install the latest release of the TiddlyFox extension from:
|
|
||||||
#* https://addons.mozilla.org/en-GB/firefox/addon/tiddlyfox/
|
|
||||||
# Install this extension to be able to save the TiddlyWiki file locally:
|
|
||||||
#* https://addons.mozilla.org/en-GB/android/addon/save-link-menus/
|
|
||||||
# [[Download]] an empty TiddlyWiki by saving this link:
|
|
||||||
#* https://tiddlywiki.com/empty.html
|
|
||||||
#> (to save the link, ensure you've installed the "save-link-menus" extension and then long-press on the link and choose "Save link")
|
|
||||||
# When the file has downloaded, click on it within the notification tray or the download manager application
|
|
||||||
# Choose to open the file in Firefox (rather than the default Android viewer)
|
|
||||||
# Click ''OK'' in response to the prompt from TiddlyFox that asks whether to enable saving for this file
|
|
||||||
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
|
|
||||||
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
|
|
||||||
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
|
|
||||||
# Refresh the browser window to verify that your changes have been saved correctly
|
|
||||||
@ -4,5 +4,9 @@ title: $:/DefaultTiddlers
|
|||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
HelloThere
|
HelloThere
|
||||||
|
[[Quick Start]]
|
||||||
|
[[Find Out More]]
|
||||||
|
[[TiddlyWiki on the Web]]
|
||||||
|
[[Testimonials and Reviews]]
|
||||||
GettingStarted
|
GettingStarted
|
||||||
Community
|
Community
|
||||||
|
|||||||
@ -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 ]] }}}/>
|
|
||||||
@ -82,291 +82,10 @@ type: text/vnd.tiddlywiki
|
|||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.tc-wrapper-flex {
|
.tc-wrapper-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tc-saving-sidebar {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
min-width: 200px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-saving-sidebar a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
||||||
.tc-wrapper-flex {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.tc-saving-sidebar {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.tc-saving-sidebar a {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-saving-sidebar-category {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-saving-sidebar-category-title {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-saving-sidebar-category-item {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-saving-introduction {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4em;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-cards {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: <<colour 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-action-card .tc-card-button {
|
|
||||||
border: 1px solid <<colour foreground>>;
|
|
||||||
background: <<colour foreground>>;
|
|
||||||
margin: 0.5em;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 0.5em;
|
|
||||||
color: <<colour background>>;
|
|
||||||
fill: <<colour background>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
max-width: 100%;
|
|
||||||
position: relative;
|
|
||||||
background: <<colour background>>;
|
|
||||||
color: <<colour foreground>>;
|
|
||||||
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;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tc-tiddlylink.tc-card:hover {
|
|
||||||
color: <<colour foreground>>;
|
|
||||||
background: <<colour notification-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: 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,
|
|
||||||
.tc-card-author {
|
|
||||||
font-size: 0.8em;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: <<colour muted-foreground>>;
|
|
||||||
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: <<colour blockquote-bar>>;
|
|
||||||
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: <<colour blockquote-bar>>;
|
|
||||||
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 {
|
.tc-btn-download {
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|||||||
@ -87,48 +87,3 @@ type: text/vnd.tiddlywiki
|
|||||||
<$link to=<<tiddler>>/>:
|
<$link to=<<tiddler>>/>:
|
||||||
<$transclude $variable=tw-code tiddler=<<tiddler>> />
|
<$transclude $variable=tw-code tiddler=<<tiddler>> />
|
||||||
\end
|
\end
|
||||||
|
|
||||||
\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>>
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<$list filter="[all[current]has[button-text]]" variable="ignore">
|
|
||||||
<div class="tc-card-button" style.background-color={{!!button-color}} style.border-color={{!!button-color}}>
|
|
||||||
<$text text={{!!button-text}}/> {{$:/core/images/chevron-right}}
|
|
||||||
</div>
|
|
||||||
</$list>
|
|
||||||
</div>
|
|
||||||
</$link>
|
|
||||||
\end
|
|
||||||
|
|||||||
@ -3,4 +3,6 @@ tags: Testimonial
|
|||||||
caption: Product Hunt
|
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
|
extlink: https://www.producthunt.com/posts/tiddlywiki-2?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-tiddlywiki-2
|
||||||
|
|
||||||
|
TiddlyWiki was featured on Product Hunt on April 17th 2020, rising to become the #2 product of the day.
|
||||||
|
|
||||||
<div style="text-align:center;">{{Product Hunt Link}}</div>
|
<div style="text-align:center;">{{Product Hunt Link}}</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user