Tiddler with Reindeer Pattern - A Christmas Tiddler

  1. Download
    Reindeer-Pattern.json (16.9 KB)
  2. Drag and drop the downloaded JSON into https://tiddlywiki.com/
  3. Open the Reindeer Pattern tiddler

It uses a pure CSS plus a background to create the Reindeer Pattern!
The kudos goes to Ale

NOTE: Any new tiddler has a class field set to christmas will have the Reindeer Pattern!

7 Likes

@Mohammad, do you have reindeer in Iran? :slight_smile:

Anyway, here is a crazy reindeer song where people head-dress as them…

Trafalgar Wharf Group 2017 Christmas Video - YouTube … :slight_smile:

J. x

1 Like

@Mohammad, “Rudolf the Red Nosed Reindeer” is both a deer and dear in English … (with lyrics) …

Rudolph The Red Nosed Reindeer Lyrics - YouTube :slight_smile:

1 Like

Sadly, for me it destroys existing output structure:

I was side-tracked by the palm tree clinging to life.

That wharf reminds me of the final scene from “Raiders of the Lost Ark.”

@TiddlyTitch its clear we are both obsessed with tiddlywiki, but you seem to have so many more obsessions given you “out of left field posts”. :nerd_face:

1 Like

@TW_Tones, Ha :slight_smile: Life is broad and wide. How do OZ do Christmas?

Long warm days, seafood and cold smoked ham with an occasional regression to northern hemisphere roasts. As Tim below says “White wine in the Sun”, Our Christmas is wrapped in long school holidays and people migrating to costal holiday destinations. Many homes (not mine) have the continuous background noise of the cricket on the TV. Long holidays means the kids Christmas presents can be broken before they return to school. Most families migrate between one side of the family on Christmas day and the other on Boxing day and almost no one goes to work between Christmas and New Year except for shopkeepers who have their biggest sales days. Some smart families meet after the sales to share gifts (purchased at the sales).

A mostly non-religious society we consider Christmas a family celebrations time, perhaps more like the American thanks giving (we don’t do that). This song says it quite well White Wine In The Sun by Tim Minchin - YouTube. Increasingly members of our diverse society Islam, Hindus, Buddhist’s and Jews celebrate not Christ but Christmas with the rest of us, taking the opportunity to catchup with family.

Tell us more about your or your neighbourhood’s Christmas.

3 Likes

Great reply @TW_Tones. I love the many social details you gave about OZ xmas.

FWIW, White Wine In The Sun by Tim Minchin - YouTube is nicely fitting.

TT

@Mark_S
The JSON above has a tiddler called: Reindeer Pattern. Does it work for you?

Reindeer Pattern/Styles defines the styles, it uses some flex elements!

You can also use

<div class=christmas>
<div class="wrapper">
  <div class="reindeer"></div>
  <div class="reindeer spaced"></div>
  <div class="reindeer spaced"></div>
</div>
<div class="separation"></div>
</div>

in a tiddler without class field, but it is not that beautiful as if you set the class field!

No, but we have a beautiful kind of deer: Persian fallow deer - Wikipedia

1 Like

Mostly. But “comments” (from the comments plugin) is in the center. The styles seem to make everything in the tiddler format as a narrow centered column. In a tiddler with plain text, the text is ok, but only the hearts appear – no raindeer.

This what I see in the second solution above on https://tiddlywiki.com/prerelease/

Oh! I misunderstood. I thought the reindeer would appear automatically. This is what I see with an empty tiddler on 5.1.23 :slightly_smiling_face:

Notice how the “comment” is centered?

Yes!

Look at

.christmas{
/*  height: 100vh;
  width: 100vw; */
  background: #E5DECC;
  background: url(<$macrocall $name="datauri" title="hearts.png" $output="text/plain"/>);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.christmas .wrapper {
  margin-left: -29vmin;
  margin-bottom: 35vmin;
  display: flex;
}

when the class field is set to christmas everything inside the tiddler is set centered!

The Reindeer is created here:

.christmas .reindeer {
  background: transparent;
  color: #ccbe99;
  box-shadow: 4vmin 2vmin 0 0 #42251c, 27vmin 2vmin 0 0 #42251c,
    4vmin 3vmin 0 0 #42251c, 7vmin 3vmin 0 0 #42251c, 24vmin 3vmin 0 0 #42251c,
    27vmin 3vmin 0 0 #42251c, 4vmin 4vmin 0 0 #42251c, 7vmin 4vmin 0 0 #42251c,
    24vmin 4vmin 0 0 #42251c, 27vmin 4vmin 0 0 #42251c, 4vmin 5vmin 0 0 #42251c,
.
.
.

All in Reindeer Pattern/Styles tiddler!

But in your screenshot, the “comments” is on the right. In mine, it’s centered.

In that example instead of setting the tiddler field: class to christmas I just created a new tiddler with below content:

<div class=christmas>
<div class="wrapper">
  <div class="reindeer"></div>
  <div class="reindeer spaced"></div>
  <div class="reindeer spaced"></div>
</div>
<div class="separation"></div>
</div>