mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2026-09-18 15:50:42 +00:00
Jermolene
@@ -1,24 +1,33 @@
|
||||
title: $:/core/macros/thumbails
|
||||
tags: $:/tags/Macro
|
||||
|
||||
\define thumbnail(link,width:"280",height:"157",image,caption)
|
||||
\define thumbnail(link,icon,color,background-color,image,caption,width:"280",height:"157")
|
||||
<$link to="""$link$""">
|
||||
<div class="tc-thumbnail-wrapper">
|
||||
<div class="tc-thumbnail-image">
|
||||
[img width="$width$" height="$height$" [$image$]]
|
||||
<div class="tc-thumbnail-image" style="width:$width$px;height:$height$px;">
|
||||
<$reveal type="nomatch" text="" default="""$image$""" tag="div" style="width:$width$px;height:$height$px;">
|
||||
[img[$image$]]
|
||||
</$reveal>
|
||||
<$reveal type="match" text="" default="""$image$""" tag="div" class="tc-thumbnail-background" style="width:$width$px;height:$height$px;background-color:$background-color$;">
|
||||
</$reveal>
|
||||
</div>
|
||||
<div class="tc-thumbnail-symbol">
|
||||
{{$:/core/images/video}}
|
||||
<div class="tc-thumbnail-icon" style="fill:$color$;">
|
||||
$icon$
|
||||
</div>
|
||||
<div class="tc-thumbnail-caption">
|
||||
$caption$
|
||||
</div>
|
||||
</div>
|
||||
</$link>
|
||||
</div></$link>
|
||||
\end
|
||||
|
||||
\define thumbnail-right(link,width:"280",height:"157",image,caption)
|
||||
\define thumbnail-right(link,icon,color,background-color,image,caption,width:"280",height:"157")
|
||||
<div class="tc-thumbnail-right-wrapper">
|
||||
<<thumbnail """$link$""" """$width$""" """$height$""" """$image$""" """$caption$""">>
|
||||
<<thumbnail """$link$""" """$icon$""" """$color$""" """$background-color$""" """$image$""" """$caption$""" """$width$""" """$height$""">>
|
||||
</div>
|
||||
\end
|
||||
|
||||
\define list-thumbnails(filter,width:"280",height:"157")
|
||||
<$list filter="""$filter$""">
|
||||
<$macrocall $name="thumbnail" link={{!!link}} icon={{!!icon}} color={{!!color}} background-color={{!!background-color}} image={{!!image}} caption={{!!caption}} width="""$width$""" height="""$height$"""/>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
@@ -7,10 +7,14 @@ type: text/vnd.tiddlywiki
|
||||
|
||||
Welcome to ~TiddlyWiki, a versatile note-taking web application you can download for free, store wherever you like and customise however you wish. Use it to capture, organise and share your notes in ways that word processors and other note-taking tools cannot.
|
||||
|
||||
<<thumbnail-right link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki">>
|
||||
<div style="font-size:0.7em;">
|
||||
<<list-thumbnails filter:"[tag[HelloThumbnail]]" width:"140" height:"79">>
|
||||
</div>
|
||||
|
||||
~TiddlyWiki is designed to be non-linear, structuring content with stories, tags, hyperlinks, and other features. You can organise and retrieve your notes in ways that conform to your personal thought patterns, rather than feel chained to one preset organisational structure.
|
||||
|
||||
<<thumbnail-right link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki" icon:"""{{$:/core/images/video}}""" color:"red">>
|
||||
|
||||
You can use ~TiddlyWiki as a single file that you view and edit through any web browser, whether you are online or offline. Or you can use it as a powerful [[Node.js application|TiddlyWiki on Node.js]] that stores each of your notes as a separate file.
|
||||
|
||||
How can you make ~TiddlyWiki work for you? We recommend you start with our introductory documentation listed below, and then browse the TableOfContents, available in the Contents tab in the sidebar. Or just [[follow our simple instructions|GettingStarted]] and try it out for yourself!
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
title: HelloThumbnail
|
||||
list:
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - Developers
|
||||
tags: HelloThumbnail
|
||||
color: #58FFB9
|
||||
background-color: #39CBB6
|
||||
icon: {{$:/core/images/plugin-generic-theme}}
|
||||
caption: Developers
|
||||
link: Developers
|
||||
@@ -0,0 +1,8 @@
|
||||
title: HelloThumbnail - Follow TiddlyWiki on Twitter
|
||||
tags: HelloThumbnail
|
||||
color: #D5EAB7
|
||||
background-color: #fff
|
||||
icon: {{$:/core/images/plugin-generic-language}}
|
||||
caption: Follow ~TiddlyWiki on Twitter
|
||||
link: Follow TiddlyWiki on Twitter
|
||||
image: Motovun Jack.jpg
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - GettingStarted
|
||||
tags: HelloThumbnail
|
||||
color: #cfc
|
||||
background-color: #2c2
|
||||
icon: <div style="font-weight:bold;color:white;background-color:#2a2;border-radius:16em;padding:0 9px 0 9px;">Go</div>
|
||||
caption: Beginners Start Here
|
||||
link: GettingStarted
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - HelpingTiddlyWiki
|
||||
tags: HelloThumbnail
|
||||
color: #B7D5EA
|
||||
background-color: #fff
|
||||
caption: Helping ~TiddlyWiki
|
||||
link: HelpingTiddlyWiki
|
||||
image: Tiddler Poster.png
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
title: HelloThumbnail - Introduction Video
|
||||
tags: HelloThumbnail
|
||||
color: red
|
||||
background-color: #fff
|
||||
icon: {{$:/core/images/video}}
|
||||
caption: Introduction to ~TiddlyWiki
|
||||
link: Introduction Video
|
||||
image: Introduction Video Thumbnail.jpg
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - News
|
||||
tags: HelloThumbnail
|
||||
color: #D5B7EA
|
||||
background-color: #E44A4A
|
||||
icon: {{$:/core/images/globe}}
|
||||
caption: Latest News
|
||||
link: Community
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - TiddlyDesktop
|
||||
tags: HelloThumbnail
|
||||
color: #D5B7EA
|
||||
background-color: #4A4AE4
|
||||
icon: {{Motovun Jack.svg}}
|
||||
caption: Install ~TiddlyDesktop
|
||||
link: TiddlyDesktop
|
||||
@@ -0,0 +1,7 @@
|
||||
title: HelloThumbnail - TiddlyFox
|
||||
tags: HelloThumbnail
|
||||
color: #D5B7EA
|
||||
background-color: #E44AE4
|
||||
icon: {{Motovun Jack.svg}}
|
||||
caption: Install ~TiddlyFox
|
||||
link: TiddlyFox
|
||||
@@ -1655,6 +1655,8 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid <<colour muted-foreground>>;
|
||||
border-radius: 3px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.tc-thumbnail-right-wrapper {
|
||||
@@ -1662,10 +1664,16 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
|
||||
margin: 0.5em 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.tc-thumbnail-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tc-thumbnail-image svg,
|
||||
.tc-thumbnail-image img {
|
||||
filter: alpha(opacity=0.6);
|
||||
opacity: 0.6;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,
|
||||
@@ -1674,24 +1682,30 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tc-thumbnail-symbol svg,
|
||||
.tc-thumbnail-symbol img {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
fill: #f44;
|
||||
.tc-thumbnail-background {
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol svg,
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol img {
|
||||
fill: #f00;
|
||||
.tc-thumbnail-icon svg,
|
||||
.tc-thumbnail-icon img {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
<<filter "drop-shadow(2px 2px 2px rgba(0,0,0,0.3))">>
|
||||
}
|
||||
|
||||
.tc-thumbnail-symbol {
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
|
||||
fill: #fff;
|
||||
<<filter "drop-shadow(3px 3px 2px rgba(0,0,0,0.6))">>
|
||||
}
|
||||
|
||||
.tc-thumbnail-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1.5em;
|
||||
margin-top: -1.5em;
|
||||
margin-left: -1em;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
.tc-thumbnail-caption {
|
||||
@@ -1701,8 +1715,11 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
filter: alpha(opacity=0.5);
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=0.6);
|
||||
opacity: 0.6;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {
|
||||
|
||||
Reference in New Issue
Block a user