##Styling with Enchantments
These story styles are coded entirely with `(enchant:)` macros. No CSS stylesheets are used. (Although, the `(css:)` macro is used sparingly…)
You may take the code for any of these styles (available in the passage bearing the style's name), and use it in your own stories in a "footer" tagged passage. Feel free, furthermore, to modify them as you see fit.
Choose a style:
#####Basic:
(set: _styleLink to (macro: str-type _name, [
(out:)[(link:_name)[(Set:$STYLE to _name)(goto:"Passage Name Here")]]
]))(_styleLink:"None") ~ \
(_styleLink:"White on Black") ~ \
(_styleLink:"Left Stripes") ~ \
(_styleLink:"Simple Centered") ~ \
(_styleLink:"Filigree") ~ \
(_styleLink:"Brushed Aluminium")
#####Fancier:
(_styleLink:"Twine 1?") ~ \
(_styleLink:"Chapbook?") ~ \
(_styleLink:"Orange Highlight") ~ \
(_styleLink:"Closed In") ~ \
(_styleLink:"CRTs Don't Look Like This") ~ \
(_styleLink:"LCD OS") ~ \
(_styleLink:"EarthBound-ish") ~ \
(_styleLink:"Remembering the 90s")
^^Note that some of the styles in the "Fancier" section may not display correctly in mobile layouts. Consider your target platform when using these.^^
---
[[Click here to try out the style in a series of test rooms->Room 1]](enchant:?passage,
(align:"=><=") +
(font:"sans-serif") +
(background:transparent)
)
(enchant:?page,
(background:(gradient: 0, 0, #000000, 1, #191970))
)
(hide:?sidebar)(enchant:?page,
(font:"Verdana,sans-serif") +
(size: 2/3)
)(enchant:?passage,
(b4r:"none","none","none","solid") +
(b4r-color:#333) +
(css:"padding-left:1.5em;margin-top:-5vh;margin-left:-10vw;")
)(replace:?sidebar)[\
(css:"left:-8rem;width:10rem")+(color:gray)+(enchant-in:?link,
(color:gray+black) +
(size:2/3 * 0.9) +
(hover-style:(color:white))
)[\
(text-style:'bold')+(size: 1)[Your Story Name Here]
==>
(if:(history:) is not an empty)[(link-undo:"Undo")]
(link:"Restart")[(restart:)]
]](enchant:?page,
(font:"Times New Roman") +
(size:0.7) +
(bg:#d3d3d3) +
(color:black)
)(enchant:?passage,
(float-box:"X","Y") +
(css:"width:calc(100vw - 2em);max-width:calc(100vw - 2em)")
)(enchant:?link,
(t8n-arrive:"instant") +
(color:#00f) +
(text-style:'underline') +
(hover-style: (color:#00f))
)(hide:?sidebar)
---
(if:(history:) is not an empty)[(link-undo:"Undo")] * (link:"Restart")[(restart:)](enchant:?page,
(font:"sans-serif") +
(size:2) +
(color:gray)
)(enchant:?link,
(color:white) +
(hover-style: (color:white) + (text-style:'shadow'))
)(hide:?sidebar)(enchant:?passage,
(float-box:"XXX=","=YYYYY=") +
(bg:(gradient: 90, 0,gray+white,1/10,white)) +
(color:black) +
(size:5/4)
)(enchant:?link, via (text-rotate-z:(random:-1,1)) +
(bg:yellow+orange) +
(color:orange+black) +
(hover-style: (color:orange+black) + (bg:orange))
)(hide:?sidebar)(enchant:?passage,
(b4r:'solid') +
(color:white) +
(b4r-color:gray) +
(b4r-size:1) +
(corner-radius: 16) +
(font:'sans-serif') +
(size:7/8) +
(text-style:'expand')
)(enchant:?sidebar,
(text-style:'outline')
)(enchant:?link,
(b4r:'solid') +
(color:white) +
(b4r-color:gray) +
(b4r-size:1) +
(t8n-depart:'dissolve') +
(corner-radius: 4) +
(hover-style: (color:white) + (b4r-color:white))
)(enchant:?page,
(bg:(stripes:45,64,cyan+white,green+white))
)(enchant:?passage,
(b4r:"ridge") +
(b4r-size:16) +
(corner-radius:16) +
(font:'sans-serif') +
(float-box:"=XXXX=","=YYYY==")
)(enchant:?link,
(color:white) +
(text-style:'underline') +
(hover-style: (color:white) + (text-style:'double-underline'))
)(enchant:?page,
(font:"sans-serif")
)(enchant:?passage,
(bg:(gradient:90,0,transparent+white,1,transparent)) +
(colour:gray+white) +
(corner-radius:20) +
(b4r:"none", "none", "none", "solid")+
(b4r-size:120) +
(b4r-colour:gray+black)
)(enchant:?link,
(colour:white) +
(hover-style: (text-style:"shadow"))
)(enchant:?page,
(bg:(stripes:0,2,white+transparent,transparent)) +
(font:'monospace') +
(text-style:"shadow")
)(enchant:?link,
(colour:transparent) +
(bg:white + transparent) +
(t8n-arrive:'instant') +
(hover-style: (color:white) + (bg:transparent))
)(enchant:?page,
(bg:(gradient:90,0,#9D9A87,0.25,#C8C3AD,0.75,#C8C3AD,1,#9D9A87)) +
(font:'sans-serif') +
(colour:black) +
(text-style:'shadow')
)(enchant:?passage,
(colour:#C8C3AD+black)
)(enchant:?link,
(colour:#C8C3AD) +
(bg:#C8C3AD+black) +
(hover-style: (color:#C8C3AD) + (bg:#C8C3AD+black))
)(prepend:?passage)+(size:0.9)[\
=><=
(print:(passage:)'s name)
<==
---
](size:0.9)[\
---
|=
Your Story Name Here
=|
==>
(link:"Restart")[(restart:)]
](enchant:?page,
(bg:gray+white)
)(enchant:?passage,
(float-box:"=XX=","Y") +
(bg:white) +
(color:black) +
(b4r-color:gray) +
(b4r:"solid") +
(b4r-size:0,4,4,0)
)(enchant:?link,
(color:black) +
(text-style:"underline") +
(hover-style:(color:blue) + (bg:blue+white))
)You are in Room 1. This is a square-floored room, conveniently aligned with the compass, with white plaster walls and ceiling, and light emitting from a circular skylight. No furniture is present, although a single yoga ball in the northwest corner could provide seating for a single person.
Exits from this room take the form of unlocked blue-painted wooden doors located in the south and east walls. (An additional door, leading outside, is in the north wall, but you don't need to pass through it.)
* [[South Door->Room 2]]
* [[East Door->Room 3]]
//(Use the sidebar (if present) or [[this link->Passage Name Here]] to return to the menu.)//You are in a rectangular room with green-leaf patterned wallpaper, a white ceiling, a gray carpet on the floor, and a cheap-looking black faux-leather couch in the corner of the room, next to a small closed narrow window. A varnished wooden circular endtable sits within arm's reach of the couch.
There is a single page of typewritten text placed on the endtable. It reads as follows:
(box:"=XXXX=")[\
(text-indent:60)["It's a common misconception that ghosts dwell on Earth because they have lingering regrets and unfinished business. In truth, they dwell on Earth because it's the afterlife they chose for themselves. Rather than move on to Heaven, or possibly reincarnate, ghosts are the remains of unambitious, set-in-their-ways people who'd easily enjoy doing the same old thing for thousands of years - and, after death, they have ample opportunity to do so.]
(text-indent:60)[It's also a common misconception that ghosts are basically immortal humans, in that, though they cannot touch or move physical matter greater than the light that passes through their bodies or the air that carries their voices, their minds are protected from damage, decay and sickness for perpetuity. In truth, the lack of a body and the inability to feel passion means that these people's post-death existences are, far from the bounty of unlimited experiences so often fantasised about by those dreaming of immortality, sorely limited by what they did in life. A diligent mail deliverer will, after death, feel no compulsion to do anything but walk their route as a ghost, though they cannot deliver actual letters or parcels. A gardener will continue to watch their plants, though they cannot tend to them - and though they may be vexed by those plants' neglect when no living person tends to them, they never truly feel the wailing sorrow often attributed to ghosts, but merely express mild disappointment."]\
]
Hmm… seems to be from an unfinished story about ghosts.
[[Room 1<-A single door to the north]] leads back to the first room.
You are in a circular room with well-browned brick walls and a varnished wood-plank ceiling and floor. It's all probably a veneer, though. Two narrow windows in the north and south provide adequate light. A circular wooden table, accompanied with a white-painted wooden rocking-chair, sits in the centre of the room. There is a battery-powered portable tape deck on the table. Playing the tape in it causes the following recorded conversation to air:
|A>["It's not often that I see humans in the air. But I guess it must happen, if there are birds that live on the ground."]\
|B>["You should know that I'm by no means an ordinary human."]\
|A>["Like I said, you're the turkey of humans."]\
|B>["You could've said I'm the penguin of humans!"]\
|A>["You overstate your fashion sense, witch. Your tall, pointy hat is asking to be blown away in flight, so that it might land on a road and finally serve some purpose."]\
|B>["What kind of ghost talks about fashion? Are chains and rotten grave shawls really a sign of good taste?"]\
|A>["Those outside an artistic field are often its brightest critics."]\
|B>["So you're saying "Those who can, do, and those who can't, teach?""]
…Well, it seems to be a rambling conversation among enemies feigning friendship, or possibly friends feigning enemyship. You don't know why it was recorded in the first place. Were the speakers improvising a script for a play? It seems to be set in a spooky Halloween-type world.
[[Room 1<-A single door to the west]] leads back to the first room.
(enchant:?A,(box:"==X=")+(align:"==>"))\
(enchant:?B,(box:"=X==")+(align:"<=="))(append:?sidebar)[(icon-fullscreen:)(icon-restart:)]\
(if:$STYLE is a str)[(display:$STYLE)](enchant:?page,
(bg:white) +
(color:black)
)(enchant:?page,
(font:"sans-serif") +
(bg: (gradient:90,
0,purple,
0.1,purple,
0.100001,black,
0.11,black,
0.110001,purple,
0.12,purple,
0.120001,black
))
)(enchant:?link,
(color:white) +
(text-style:'outline') +
(hover-style: (color:purple))
)
↶↷⛶⟲Styling with Enchantments
These story styles are coded entirely with (enchant:) macros. No CSS stylesheets are used. (Although, the (css:) macro is used sparingly…)
You may take the code for any of these styles (available in the passage bearing the style's name), and use it in your own stories in a "footer" tagged passage. Feel free, furthermore, to modify them as you see fit.
Choose a style:
Basic:
None ~ White on Black ~ Left Stripes ~ Simple Centered ~ Filigree ~ Brushed Aluminium
Fancier:
Twine 1? ~ Chapbook? ~ Orange Highlight ~ Closed In ~ CRTs Don't Look Like This ~ LCD OS ~ EarthBound-ish ~ Remembering the 90s
Note that some of the styles in the "Fancier" section may not display correctly in mobile layouts. Consider your target platform when using these.
Click here to try out the style in a series of test rooms