Leonora is a UI template for use with the Sugarcube story format in Twine.
Inspired by an imaginary cathedral by the sea and the distorted, sacred devotions of a woman who was once a girl there.
Did this template need three stories for its demo? No, but here they are anyway: there's flash fiction, a petite novelette, and a branching interactive adventure to show off everything Leonora can do. All lovingly written, coded, and styled by hand.
Features:
Mannerism-inspired design
3 built-in themes (dark, light, sepia)
Customisable title screen
Matching settings & save menus
Optional built-in Character Profile
Annotated passage guide, CSS stylesheet, and Story Javascript for easy customisation
Responsive design for desktop, tablets, and mobile devices
Includes both portrait and landscape styling for small screens
Download + play the demo on itch:
a mannerist sugarcube (twine) template. A browser template made in HTML5
they warn you about scope creep but nobody tells you that if you make a template/asset set inspired by a character, you will also figure out said character's entire family tree up/down roughly 3 generations, at least 3 formative experiences she had as a child, and get overly invested in the side character you created specifically just to have a fun POV of the first one.
Also you will figure out a compelling and ultimately heartwrenching character arc for the original character's younger brother because you (checks notes) needed someone to instigate the conflict in the hallway
my issue is specifically the background image getting blown up to fit (poor wording on my part, apologies) and becoming blurry
i'm sourcing from images from unsplash and using the url i get when i open the image in a new tab
No worries! I see - when you copy the URL from the new tab, Unsplash adds on some parameters to the link to compress the image so it's smaller/faster to load. If you delete everything in the URL after the question mark (including the question mark itself), that should serve the image at a bigger size and higher resolution so it won't be blurry.
A word of warning though: I highly recommend saving the image in a folder with your Twine HTML file and using a relative URL instead of hotlinking with the URL straight from Unsplash, at least for your final published build if not during the WIP process.
That way, your project won't be dependent on Unsplash's servers or yoink its bandwidth and you'll never have to worry about the image not loading/loading slowly. This does mean it's slightly less convenient to playtest using the Twine editor's "play" button as the images won't load that way, but imo keeping the HTML file open in a browser tab and just save to file + refreshing it to make changes isn't the worst alternative.
mini tutorial on how to use relative URLs under the cut for anyone reading who isn't familiar : )
Create a folder to save your HTML file and assets in. In this example, we'll call the folder "Project".
Save the HTML file and your background image in Project. Let's say the background image is a jpg called "image". If you have lots of other assets like fonts or more images, you can organize things more by creating subfolders for each category instead of having everything floating around in the one big Project folder.
Replace the value of --BGimage with your new relative URL: if you didn't create any subfolders, this will just be "image.jpg". If you need to go "down" a level into a subfolder, include the name of the folder followed by a slash and the name of the image file (example: "subfolder/image.jpg")
Save to file in Twine and refresh the page in your browser.
I am writing perfume-review level description text for this template and you can't stop me. Jean-Paul Gaultier eat ur sexy honeyed lilac toast sailor cologne heart out <3
this is the mobile slide-out menu and I am VERY happy with it
hellooo, im currently using your template Leonora for two of my projects and im having trouble with the BGimage url. when i paste in the link and test the game, the img remains blurry. (full screen or not)
i'm unfamiliar with css and asking on google isnt helping me either.
i downloaded the .html file and and changed the IFID
Hi! Thank you for using my template!
Leonora has some built-in blur on the background images. On the title page, the whole background will be blurred and on all the other passages, the blur will be just where the yellow highlighted box is. To remove it, open up the CSS Stylesheet and scroll to where it says #passages (in I. INTERFACE)
Delete the first line "backdrop-filter:blur(6px);".
If you want to remove the blur from just the title page, don't delete anything and add ".splash #passages {backdrop-filter:none;}" after the last curly bracket instead.
If it's still blurry after changing the CSS, check the size/resolution of the image you're using. If the dimensions of the image are small relative to the screen, it could be blurry because it's getting blown up to fit.
