Truly Vertical layout, Even with thin spaces.

Share your layout

Thanks for contributing. Please post your layout and corresponding screenshot to the dedicated HTML Clock templates section in Discussions.

When posting, please include the screenshot of your clock in action, so others can see what to expect. To avoid formatting issues, please wrap it with backticks. Put:


<style>
.vertical-text {
   text-orientation: upright;
 }

.size25 {
    font-family: JetBrains Mono Medium;
    font-size: 20px;
    font-weight: 900;
    vertical-align: middle;

}

.size15 {
    font-family: JetBrains Mono Medium;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;

}
</style>
</head>
<body>

<div class="size25">
{hh}
</div>
<div> － </div>
<div class="size25" >
{ii}
<div > ⬜ </div>

<div class="size25" >
{dd}
</div>

<div> － </div>
<div class="size15" >
{MM}
</div>

<div> － </div>
<div class="size25" >
{yy}
</div>

</body>
</html>

Notes

Give your clock layout a name or title. That'd help others refer to the right template when needed.
Avoid hardcoding font sizes in the layout whenever possible. This can be sometimes impossible to avoid (i.e. you want different sizes for different clock elements), but if you use just single font size, please remove it so users can adjust that using widget's configuration dialog.
If possible, please avoid hardcoding font names. That would make your markup shorter and will allow users to set their favourite font in widget's configuration dialog.
Did I mention to include the screenshot of your widget?
[- ] I confirm this is my original work.
[ -] I grant full and unrevocable rights to use the layout with HTML Clock widget free of charge.
[ -] I grant users of HTML Clock widget right to use my layout free of charge and freely alter my layout if they need to.
[ -] This layout is licensed under <PUT LICENSE NAME HERE, PREFERABLY MIT>.

MarcinOrlowski / html-clock-plasmoid

Truly Vertical layout, Even with thin spaces. #96