```metadata title: Fabula Ultima Book Template description: '' tags: [] systems: [] renderer: V3 theme: 5ePHB ``` ```css /**Import FOnts*/ @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap'); @import url('https://rawcdn.githack.com/picollo-24/homebrewery/b12d6428c714c7157fb5bea1b9d47bd45c190f24/creditvalley/creditvalley.css'); @import url ('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap'); @import url('https://rawcdn.githack.com/picollo-24/homebrewery/6ac9ef202247b6aaa4d3788db1be10629307e172/mcs/mc.css'); /*Monotype Corsiva*/ @import url('https://rawcdn.githack.com/picollo-24/homebrewery/baf622cc348d51d36eaf7dbf5379e8ab03921143/Edwardian/edwardian.css'); @import url('https://rawcdn.githack.com/picollo-24/homebrewery/0632ae4b8d67cd27328add5cb3e9a5079031f8b2/oldretro/oldretro.css'); /*Here we clean default Homebrewery artifacts not needed for this template*/ /* Removes Drop Caps */ .page h1+p:first-letter { all : unset; } /* Removes Small-Caps in first line */table .page h1+p:first-line { all : unset; } .page h1+p::first-line { font-variant: unset; } /*Remove default homebrewery back line*/ .page:after { display:none; } /* Set proper font for normal text*/ .page p { font-family: 'PT Sans Narrow'; } /* adjust distance between paragraphs, and removee homebrewery indent*/ .page p+p { text-indent : 0em; margin-top : 5px; } /*Transitioning to defining our style*/ /*Page Dimensions*/ .page:nth-of-type(2n+1){ width : 5.83in; height : 8.27in; background-image : url('https://i.imgur.com/RDs3XFi.png'); background-position:left; background-size:contain; margin-top:0px; margin-left:0px; padding-right:100px; padding-left:80px; padding-top:79px; padding-bottom:0px; background-repeat:norepeat; background-size:110% 100% } .page:nth-of-type(2n+1):has(.bestiary){ background-image : url('https://i.imgur.com/WTqhIE7.png'); } .page:nth-of-type(2n){ width : 5.83in; height : 8.27in; background-image : url('https://i.imgur.com/DSmW6sK.png'); background-position:right; background-size:contain; background-repeat:no-repeat; background-size:110% 100%; margin-top:0px; margin-left:0px; margin-right:-17px; padding-right:63px; padding-left:70px; padding-top:79px; padding-bottom:0px; background-repeat:norepeat; background-size:110% 100% } .page:nth-of-type(2n):has(.bestiary){ background-image : url('https://i.imgur.com/mNONMlu.png'); } /*Header I*/ .page h1 { background-size : 100%; font-family : credit_valleyregular; font-weight : normal; font-size : 3em; color : #274442; text-shadow : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; text-align : left; padding-top : 20px; padding-bottom : 20px; padding-left : 20px; margin-bottom : 30px; margin-top : -75px; margin-left : -18px; margin-right : 10px; background-image : url('https://i.imgur.com/L06Z0hk.png'); background-origin : border-box; background-size : 100% 100%; height : 70px; width : 503px; text-transform: uppercase; } .page:nth-of-type(odd) h1 { } .page:nth-of-type(even) h1 { margin-left : -70px; padding-left: 82px; } /*Chapter Name Element*/ /*Chapter Name Element should be used to introduce chapter level header, with image background added. While selecting Background you can just use image of desired background.*/ .page .chapter-name img { position : absolute; top : 74px; right : 20px; height : 80px; width : 450px; z-index : -1; } .chapter-name h1 { font-family : credit_valleyregular; background: unset; font-weight : normal; font-size : 3em; color : white; text-align : center; padding-top : 25px; padding-bottom : 20px; margin-bottom : 30px; margin-top : -10px; margin-left : -40px; text-shadow : -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; z-index : -1; text-transform: uppercase; } /* ------ Chapter Index ------ */ /* --------------------------- */ /* The left and right banners */ /* --------------------------- */ .page .pageNumber { font-family : Antonio; color : black; font-size : 1.2em; } .page:nth-of-type(odd) .pageNumber { position:absolute; left : 0px; bottom : 20px; width : 62px; padding-left : 10px; padding-top : 10px; padding-right : 10px; padding-bottom : 10px; background : url(https://i.imgur.com/y9Wuhcd.png); background-origin : border-box; background-size : 100% 100%; } .page:nth-of-type(even) .pageNumber { position:absolute; left : 498px; bottom : 20px; width : 62px; padding-left : 0px; padding-top : 10px; padding-right : 10px; padding-bottom : 10px; background : url(https://i.imgur.com/LVMyKDu.png); background-origin : border-box; background-size : 100% 100%; } /*Header II*/ .page h2 { font-family : Antonio; font-weight : normal; font-size : 1.3em; padding-left:27px; padding-top:5px; padding-bottom:7px; color : black; text-align : left; margin-bottom:10px; padding-bottom:12px; text-transform:uppercase; } .page:nth-of-type(odd) h2 { background : url(https://i.imgur.com/lgSzjP2.png); background-size : 100% 100%; margin-left: -18px; } .page:nth-of-type(even) h2 { background : url(https://i.imgur.com/aKTb9rA.png); background-size : 100% 100%; margin-right : -1px; } /*Header III*/ .page h3 { background : url('https://i.imgur.com/W2Axzpu.png'); background-size : 100% 100%; font-family : Antonio; font-weight : normal; font-size : 1.1em; padding-left : 17px; padding-top : 5px; padding-bottom : 7px; color : white; text-align : left; margin-bottom : 5px; margin-top : 10px; margin-left : -14px; text-transform:uppercase; border-bottom:none; } } .page:nth-of-type(odd) h3 { margin-left : 5px; } .page:nth-of-type(even) h3 { margin-left : -1px; } .page h4 { font-family : Antonio; font-weight : normal; font-size : 1.2em; padding-top:5px; padding-bottom:7px; padding-left:20px; margin-left: -10px; color : black; text-align : left; margin-bottom:0px; text-transform:uppercase; border-bottom:solid; } .page:nth-of-type(even) h4 { margin-left: 0px; } /* ------ Chapter Index ------ */ /* --------------------------- */ /* The left and right banners */ /* --------------------------- */ .chapter-index { position:absolute; color:whitesmoke; z-index:300; font-weight:bold; font-size:18px; height:200px; width:64px; text-transform:uppercase; } .page:nth-of-type(odd) .chapter-index { left:0px; top:20px; background:url('https://i.imgur.com/tlDHtPj.png'); background-repeat:no-repeat; background-size:11% 100%; } .page:nth-of-type(odd) .chapter-index p { transform-origin:center left; transform:rotate(90deg); text-align:center; white-space:nowrap; margin-top:-65px; margin-left:20px; padding-right:-120px; padding-bottom:10px; width:300px; color: black; } .page:nth-of-type(even) .chapter-index { right:-496px; top:20px; background:url('https://i.imgur.com/oncf7vM.png'); background-repeat:no-repeat; background-size:12% 100%; } .page:nth-of-type(even) .chapter-index p { transform:rotate(270deg); text-align:center; white-space:nowrap; padding-left:-120px; padding-top:10px; margin-top:125px; width:60px; color: black; } .sl { } /* TABLE*/ .page h5 { background : rgba(43, 74, 66, 1); background-size : 100% 100%; font-family : Antonio; font-weight : normal; font-size : 1.1em; padding-left:17px; padding-top:6px; padding-bottom:8px; color : white; text-align : left; margin-top: 20px; margin-left: -18px; margin-bottom: -8px; text-transform:uppercase; border-bottom:none; } .page:nth-of-type(even) h5 { margin-left : 0px; margin-right:-2px } .page table{ margin-left: -17px; font-family: 'PT Sans Narrow'; } .page:nth-of-type(even) table { margin-left : 0px; } .page thead { background : url(https://i.imgur.com/LcDRZet.png); background-size :100% 100%; /* border-bottom :2px solid #21423e;*/ line-height :20px; } .page table tbody tr:nth-child(odd) { background-color:transparent; border:collapse; font-size: 1.1em; padding-top:2px; line-height: 24px; } .page td:first-child { padding-left: 18px; } .page td:nth-child(2) { } .page th { font-size: 1.1em; display:; line-height:25px; border-collapse: collapse; font-weight : normal; } .page th:first-child { padding-left: 18px; } .page th:nth-child(2) { } .page tr:not(:last-child) { position: relative; } .page tr:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(28,91,37,1) 0%, rgba(0,212,255,0) 80%); } /*Class Feature*/ .description { position: absolute; left: 330px; top: 450px; max-width: 150px; text-align: left; border: 1px solid #731632; border-radius: 5px; background: linear-gradient(90deg, #faefcd, #FFFFFF); background-size: 100% 100%; background-repeat: no-repeat; padding: 10px; } .feature { width:100%; } .feature h5 { background : rgba(43, 74, 66, 1); background-size : 100% 100%; font-family : Antonio; font-weight : normal; font-size : 1.1em; padding-left:17px; padding-top:6px; padding-bottom:8px; color : white; text-align : left; margin-top: 10px; margin-left: -17px; margin-bottom: -8px; text-transform:uppercase; border-bottom:none; } .feature h6 { background : url(https://i.imgur.com/LcDRZet.png); background-size :100% 100%; line-height :17px; font-family :'PT Sans Narrow'; font-weight : normal; font-size : 1em; padding-left :17px; padding-bottom :4px; padding-top :4px; margin-left : -0px; margin-bottom : 6px; margin-top:-5px; } .page:nth-of-type(even) .feature h6 { margin-left : 10px; } .page:nth-of-type(even) .feature p { margin-left : 10px; } /* Highlights*/ .background-blue { padding-top: 6px; padding-bottom: 6px; margin-left: -18px; padding-left:17px; background: linear-gradient(90deg, rgba(33, 125, 124, 0.7) 33%, rgba(0, 212, 255, 0) 100%); margin-bottom: 5px; } .background-green { padding-top: 6px; padding-bottom: 6px; margin-left: -18px; padding-left:17px; background: linear-gradient(90deg, rgba(135, 206, 195, 0.4) 33%, rgba(225, 239, 227, 0) 100%); margin-bottom: 5px; } .background-darkgreen { padding-top: 6px; padding-bottom: 6px; margin-left: -17px; padding-left:17px; background: linear-gradient(90deg, rgba(135, 206, 195, 1) 33%, rgba(225, 239, 227, 0) 100%); margin-bottom: 5px; } /*Lists */ /*Elements specific for class design*/ /* Class page*/ .class h1 { background-size : 100%; font-family : credit_valleyregular; font-weight : normal; font-size : 3em; color : #274442; text-shadow : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; text-align : left; padding-top : 20px; padding-bottom : 20px; padding-left : 20px; margin-bottom : 30px; margin-top : -75px; margin-left : -18px; margin-right : 10px; background-image : url('https://i.imgur.com/L06Z0hk.png'); background-origin : border-box; background-size : 100% 100%; height : 70px; width : 503px; text-transform: uppercase; } .class h2 { background:url(https://i.imgur.com/lgSzjP2.png); background-position:left; width: 430px; background-size:400px 0px; background-repeat:no-repeat; /*margin-left:-50px;*/ margin-top: 40px; margin-right:40px; padding-top:10px; padding-bottom:12px; padding-left:20px; font-family: Antonio; color:black; font-size: 1.4em; text-transform:revert; } .class h3 { font-family: 'edwardian_script_itcregular'; color: #e1efe3; position: absolute; transform: rotate(90deg); margin-top: 70px; font-size: 10em; border-bottom: none; font-weight:normal; text-transform:revert; padding:10px; text-align : center ; height: 50px; width : 200px; background:unset; } .class h3:before{ content:none; } .class h4 { font-family: 'monotype_corsivaregular'; font-weight: normal; color :#2b4a42 ; border-bottom: none; text-indent: 10px; font-size: 1.5em; margin-left:240px; margin-right:90px; margin-top: 60px; line-height:24px; text-align : right ; text-transform:unset; } .description { position: absolute; right: 0px; top: 450px; max-width: 150px; text-align: left; border: 1px solid #429291; border-radius: 5px; background: linear-gradient(90deg, #81c6c5, #FFFFFF); background-size: 100% 100%; background-repeat: no-repeat; padding: 10px; } /* Class Free Benefits */ .benefits { width: 350px; margin-left:17px; margin-right: 2px; } .benefits ul { padding-left: 1.2em; font-family: 'Poppins'; font-size: 0.em; border: 1px solid #429291; border-radius: 5px; background: linear-gradient(90deg, #81c6c5, #FFFFFF); width: 100%; margin-left: -15px; margin-bottom: 17px; padding: 6px; width:300px } /* =========================== */ /* ---------- LISTS ---------- */ /* =========================== */ .page ul { padding-left: 1.5em; font-family: 'PT Sans Narrow'; /*background: rgb(225, 239, 227);*/ /*background: linear-gradient(90deg, rgba(225, 239, 227, 1) 33%, rgba(0, 212, 255, 0) 100%);*/ background-position: -17px center; background-repeat: no-repeat; width: calc(95% ); margin-left: -17px; } .page p + ul { margin-top: 0.1em; } .page ul li { list-style-type: none; position: relative; line-height:22px; } .page ul li::before { content: '⬩'; color: #000000; position: absolute; left: -13px; } /*Top element*/ .page .quote>p:first-child::first-line { all: unset; } .top-element { top:10px; padding-left:80px; left:0px; right:100px; margin-right:20px; padding-right:63px; text-align:center; height:60px; position: absolute; } .page:nth-of-type(2n-1)::top-element { top:50px; } /*Quote*/ .top-element.quote p { font-family: 'monotype_corsivaregular'; text-transform:unset; text-align:right; font-weight: normal; font-size:1.1em; margin-right:10px; padding-right:10px; margin-left:100px; font-variant:unset; width:320px; color :transparent ; position: absolute; bottom: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 1) -150%, rgba(33, 66, 62, 1) 100%); background-clip:text; } /*BESTIARY*/ .page .block { width:405px; } .bestiary h1 { background-image : url('https://i.imgur.com/2tFdXnf.png'); text-align: center; padding-left:0px; } .page:nth-of-type(even) .bestiary h1 { padding-left: 0px; } .bestiary h2 { } .page:nth-of-type(odd) .bestiary h2 { background: linear-gradient(0deg, rgba(57,2,2,0.4) 0%, rgba(196,30,30,0.7) 80%); margin-left: 0px; padding-left: 10px; margin-bottom: 0px; border: 1px solid #2c0808; border-radius: px; width: 405px; } .page:nth-of-type(even) .bestiary h2 { background: linear-gradient(0deg, rgba(57,2,2,0.4) 0%, rgba(196,30,30,0.7) 80%); margin-left : 0px; padding-left: 2px; border: 1px solid #2c0808; margin-bottom: 0px; border-radius: 0px; } .bestiary h6 { background : url('https://i.imgur.com/W2Axzpu.png'); background-size : 100% 100%; font-family : Antonio; font-weight : normal; font-size : 1.1em; padding-left : 17px; padding-top : 5px; padding-bottom : 7px; color : white; text-align : left; margin-bottom : 5px; margin-top : 10px; margin-left : -14px; text-transform:uppercase; border-bottom:none; border-radius:10px; line-height:12px; background: linear-gradient(0deg, rgba(157,2,2,1) 10%, rgba(196,30,30,0.8) 80%); margin-left : 0px; padding-left: 31px; border: 3px solid #2c0808; margin-bottom: 5px; margin-top:2px; border-radius: 10px; width:406px; } .dex, .ins, .mig, .wlp, .hp, .mp, .init, .traits, .level, .type, .def, .mdef, .affinity, .descr, .crisis { width: 50px; height: 26px; line-height: 26px; background-repeat: no-repeat; font-family : Antonio; text-transform: uppercase; color : black; font-size : 12px; text-align: center; font-weight: bold; margin-top: 0px; margin-right:0px; margin-bottom:0px; vertical-align:bottom; } .hp, .crisis { margin-left:-3px; margin-right:-5px; } .mp { margin-right:-5px; } .init { } .traits { width:unset; text-transform:unset; padding-top:5px; line-height:18px; text-transform: unset; } .descr { width:unset; text-transform:unset; height:50px; line-height:16px; } .level { margin-right:0px; } .type { margin-left: -5px; margin-right: -5px; } .type.beast { } .type.beast:before { content: "BEAST"; } .type.construct { background: linear-gradient(0deg, rgba(145,145,34,1) 0%, rgba(244,243,125,0.5) 80%); } .type.construct:before { content: "CONSTRUCT"; } .type.demon { background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(174,8,12,01) 80%); } .type.demon:before { content: "DEMON"; } .type.elemental { background: linear-gradient(0deg, rgba(55,160,176,1) 0%, rgba(134,232,247,0.5) 80%); } .type.elemental:before { content: "ELEMENTAL"; } .type.humanoid { background: linear-gradient(0deg, rgba(155,160,155,1) 30%, rgba(240,240,190,0.3) 80%); } .type.humanoid:before { content: "humanoid"; } .type.monstr { background: linear-gradient(0deg, rgba(56,22,61,1) 10%, rgba(214,18,18,0.6) 80%); } .type.monstr:before { content: "monster"; } .type.plant { background: linear-gradient(0deg, rgba(19,71,11,1) 10%, rgba(64,237,40,0.6) 80%); } .type.plant:before { content: "plant"; } .type.undead { background: linear-gradient(0deg, rgba(4,53,24,1) 20%, rgba(51,51,51,1) 90%); } .type.undead:before { content: "undead"; } .dex:before { content: "DEX:"; } .ins:before { content: "INS:"; } .mig:before { content: "MIG:"; } .wlp:before { content: "WLP:"; } .hp:before { content: "HP:"; } .crisis:before { content: "CRI:"; } .mp:before { content: "MP:"; } .init:before { content: "INIT: "; } .traits:before { content: "TRAITS: "; } .descr:before { content: "DESCRIPTION: "; } .def:before { content: "DEF: "; } .mdef:before { content: "M.DEF: "; } .level:before { content: "LVL: "; } /*AFFINITIES*/ :root { --physical-indicator-icon: url('https://i.imgur.com/xAkqp1d.png'); --dark-indicator-icon: url('https://i.imgur.com/C83lQHN.png'); --fire-indicator-icon: url('https://i.imgur.com/gXou788.png'); --poison-indicator-icon: url('https://i.imgur.com/T6rgkWm.png'); --bolt-indicator-icon: url('https://i.imgur.com/VoyKKPk.png'); --light-indicator-icon: url('https://i.imgur.com/KTOseGh.png'); --air-indicator-icon: url('https://i.imgur.com/zWycL0b.png'); --ice-indicator-icon: url('https://i.imgur.com/DnRlNpN.png'); --earth-indicator-icon: url('https://i.imgur.com/IGw4Za1.png'); --ranged-indicator-icon: url('https://i.imgur.com/y1Z5OoA.png'); --melee-indicator-icon: url('https://i.imgur.com/YlLaXQt.png'); --spell-indicator-icon: url('https://i.imgur.com/v1NBCyQ.png'); --offensivespell-indicator-icon: url('https://i.imgur.com/qF0nxEa.png'); } .affinity { width:35px; height:25px; line-height:25px; } .affinity.physical:before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; background: var(--physical-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); margin-right:2px; transform: scale(2); } .affinity.dark:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--dark-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); margin-right:2px; transform: scale(1.5); } .affinity.fire:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--fire-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:3px; transform: scale(1.3); } .affinity.poison:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--poison-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:3px; transform: scale(1.5); } .affinity.bolt:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--bolt-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:px; transform: scale(1.5); } .affinity.light:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--light-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:2px; transform: scale(1.3); } .affinity.air:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--air-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:3px; transform: scale(1.5); } .affinity.earth:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--earth-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); left: 0; margin-right:3px; transform: scale(1.5); } .affinity.ice:before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--ice-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); margin-right:3px; transform: scale(1.3); } .affinity.weakness:after { content:' VU'; } .affinity.resistant:after { content:' RS'; } .affinity.immune:after { content:' IM'; } .affinity.absorb:after { content:' AB'; } .attack { padding:6px; padding-bottom: 6px; padding-left:20px; background: linear-gradient(90deg, rgba(195, 55, 55, 0.4) 33%, rgba(225, 239, 227, 0) 100%); margin-bottom: 2px; margin-top:0px; border: 0px solid #2c0808; border-radius: 7px; width:400px; } .attack.melee:before { content: ' '; display: inline-block; width: 1em; height: 1em; margin-right:10px; background: var(--melee-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(0%); } .attack.ranged:before { content: ' '; display: inline-block; width: 1em; height: 1em; margin-right:10px; background: var(--ranged-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(0%); } .spell { padding:6px; padding-bottom: 6px; padding-left:0px; background: linear-gradient(90deg, rgba(195, 55, 55, 0.4) 33%, rgba(225, 239, 227, 0) 100%); margin-bottom: 2px; margin-top:0px; border: 0px solid #2c0808; border-radius: 7px; width:400px; } .spell.offensive th:first-child::after { content: ' '; display: inline-block; width: 1em; height: 1em; margin-right:10px; background: var(--offensivespell-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); } .ospell { content: ' '; display: inline-block; width: 1em; height: 1em; margin-right:10px; background: var(--offensivespell-indicator-icon); background-size:contain; background-repeat: no-repeat; filter:brightness(100%); } .spell p { margin: 2px; } .spell table { margin-left:0px; max-width:450px; } .bestiary .spell table { max-width:450px; } .bestiary .spell table thead th { background: unset; line-height :20px; border-bottom:unset; border-top:unset; text-shadow:unset; font-weight:bold; } .bestiary .spell table thead { background:unset; } .bestiary .spell table tbody tr td { background: unset; border-bottom: unset; border-top:unset; text-shadow:unset; line-height:15px; } .bestiary .spell tr:n-th-child(odd) { background-color: unset; } .bestiary .spell tr:not(:last-child)::after { background:unset; } .bestiary .spell td:first-child { background-color: unset; } .rules { padding:6px; padding-bottom: 6px; padding-left:20px; background: linear-gradient(90deg, rgba(195, 55, 55, 0.4) 33%, rgba(225, 239, 227, 0) 100%); margin-bottom: 0px; margin-top:0px; border: 0px solid #2c0808; border-radius: 7px; width:400px; } .bestiary { } .bestiary table { border-collapse:separate; border-spacing:5px 1px; width:100%; margin-left:0px; } .bestiary table tbody tr { border-collapse:separate; } .bestiary table tbody tr:not(:last-child)::after { content:unset; } .bestiary table tbody tr td { border-bottom: 1px solid; border-collapse:collapse; border-bottom-left-radius:10px; line-height:20px; border-top-left-radius:7px; border-top: 2px solid white; background: linear-gradient(10deg, rgba(0, 0, 0, 0.4) 10%, rgba(255, 255, 255, 0) 55%); ; padding:-10px; text-shadow : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } .bestiary th:first-child { padding-left:5px; } .bestiary td:first-child { padding-left:5px; } .bestiary table thead th { border-bottom: 1px solid; border-collapse:collapse; border-bottom-left-radius:10px; border-top-left-radius:7px; border-top: 2px solid white; background: linear-gradient(3deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 55%); max-width:50px; text-shadow : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; ; } .bestiary h5 { font-family : Antonio; font-weight : normal; font-size : 1.7em; color : #274442; margin-left:0px; margin-top:10px; text-shadow : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; text-align: center; width:100%; height:40px; padding: 7px; background: linear-gradient(0deg, rgba(157,2,2,1) 10%, rgba(196,30,30,0.8) 80%); border: 1px solid #898989; border-collapse:collapse; border-bottom-left-radius:12px; border-top-left-radius:12px; } .bestiary table tbody tr td:has(.weakness){ background: linear-gradient(10deg, rgba(185, 125,125, 1) 10%, rgba(255, 255, 255, 0) 55%); } .bestiary table tbody tr td:has(.img){ background: linear-gradient(10deg, rgba(185, 125,125, 0) 10%, rgba(255, 255, 255, 0) 55%); border: 2px solid black; border-radius: 6px; padding-top:5px; } .bestiary table tbody tr td:has(.resistant){ background: linear-gradient(10deg, rgba(125, 185, 125, 1) 10%, rgba(255, 255, 255, 0) 55%); } .bestiary table tbody tr td:has(.immune){ background: linear-gradient(10deg, rgba(125, 125, 185, 1) 10%, rgba(255, 255, 255, 0) 55%); } .bestiary table tbody tr td:has(.absorb){ background: linear-gradient(10deg, rgba(185, 185, 125, 1) 10%, rgba(255, 255, 255, 0) 55%); } .bestiary table tbody tr td:has(.dex){ background: linear-gradient(10deg, rgba(0, 140,125, 0.7) 20%, rgba(255, 255, 255, 0) 75%); } .bestiary table tbody tr td:has(.ins){ background: linear-gradient(10deg, rgba(100, 20,140, 0.7) 20%, rgba(255, 255, 255, 0) 75%); } .bestiary table tbody tr td:has(.wlp){ background: linear-gradient(10deg, rgba(200, 120,30, 0.7) 20%, rgba(255, 255, 255, 0) 75%); } .bestiary table tbody tr td:has(.mig){ background: linear-gradient(10deg, rgba(30, 120,200, 0.7) 20%, rgba(255, 255, 255, 0) 75%); } .bestiary table tbody tr td:has(.init){ background: linear-gradient(10deg, rgba(100, 100,100, 0.7) 20%, rgba(255, 255, 255, 0) 95%); } .bestiary table tbody tr td:has(.def){ background: linear-gradient(10deg, rgba(60, 170,10, 0.7) 0%, rgba(255, 255, 255, 0) 95%); } .bestiary table tbody tr td:has(.mdef){ background: linear-gradient(10deg, rgba(170, 10,60, 0.7) 0%, rgba(255, 255, 255, 0) 95%); } .bestiary table tbody tr td:has(.hp){ background: linear-gradient(30deg, rgba(255, 0,0, 1) 10%, rgba(255, 255, 255, 0) 70%); } .bestiary table tbody tr td:has(.mp){ background: linear-gradient(30deg, rgba(0, 0,255, 1) 10%, rgba(255, 255, 255, 0) 70%); } .bestiary table tbody tr td:has(.crisis){ background: linear-gradient(210deg, rgba(255, 0,0, 1) 10%, rgba(255, 255, 255, 0) 70%); border-bottom-left-radius:2px; border-top-right-radius:12px; } /*Table of COntents*/ .page:nth-of-type(odd) .toc { padding-left : 30px; padding-top : 0px; padding-right : 0px; width: 110%; } .page:nth-of-type(even) .toc { padding-left : 0px; padding-top : 0px; padding-right : 0px; width: 100%; } .page .toc h1 { margin-left : -50px; } .page .toc ul li::before { content: unset; } .page .toc ul span:last-child { display: inline-block; align-self: flex-end; font-family: 'BookInsanityRemake'; font-size: .34cm; font-weight: normal; color: #000000; margin-right:10px; } .page .toc h4+ul li { line-height: 1.3em; } .page .toc h4 { border-bottom: unset; } ``` {{chapter-name ![image](https://i.imgur.com/xbJBK7c.png) {opacity:75%} # chapter name }} That's how normal text looks. Let's go through options available to us. ## Light Green Header Nothing special here to be seen. Double enter in text let's you separate paragraphs. ### Header 3 Header 3 will automatically add symbol at the start For the table below you want to use header 5. Bear in mind that in official book not all tables have headers, so you don't need it. Then copy table formatting- you can use more or less than 3 columns, but modifying this should be simple. ##### Table header is optional | Weapon | Hands | Cost | |:--------------|:----|:-----:| |**Staff**| Two-Handed| 100 z| |**Tome**|Two-Handed|100 z| |**Crossbow**|Two-Handed|150 z| |**Short** Bow|Two-Handed|200 z| |**Whip-Chain**|Two-Handed|150 z| {{pageNumber 1}} \page :: If you aren't starting page with H1 you might want to add two marks at the start of page- otherwise your text will start way higher than intended You might notice that pages will have automatically added pattern on the outside- formatting of the template should take care of it. ## Header adjusted for odd page ### Header 3 ##### Table header         is       optional | Weapon | Hands | Cost | Weight | |:--------------|:----|:-----:|:---:| |Staff| Two-Handed| 100 z|20| |Tome|Two-Handed|100 z|20| |Crossbow|Two-Handed|150 z|30| |Short Bow|Two-Handed|200 z|40| |Whip-Chain|Two-Handed|150 z|30| ## Note about quotes Quotes in Core Book only appear on odd pages (with the floral pattern on the right). This style doesn't have quote element adjusted for even pages- it will work, but positioning won't be perfect. {{top-element,quote That's how you can add quotes. Add these at the end of text for specific page. }} {{chapter-index,top:250px Chapter Name }} {{pageNumber 2}} \page {{pageNumber 3}} # Header 1 {{background-green Adding text with green background is slightly more tricky- you have to create obiect (this is probably not formal name, but let's stick to that). To do this, you start with two {{ bracers, and right after them wtite "background-green"- and nothing else in same line. Inside bracers in consecutive lines you enter your text- bear in mind I haven't tested all the formating. Basic ones like **bold** work, but official books include only lists inside, which we'll be doing slightly differently. So everything other than plain text isn't intended here- you might experiment but it's not expected to work. }} {{background-blue If you create "background-blue" object, you'll have effect like this. }} Then there are lists. Remember that Fabula Ultima generally works with only one level of list. You can have more than one, but it is not expected to work, and look good within this template. * aaa * bbb * ccc {{chapter-index,top:250px Chapter Name }} \page {{pageNumber 4}} :: On the follwing page you'll find draft of class page template. It's WiP, and very low priority. It's not supposed to work well right now. We're adding this page, because Class Pages start at odd pages, so starting on even will cause template issues. \page {{class # Your Class ## ALSO: Other names for your class ### YourClass #### Place for your fancy quote ![Class image](https://i.imgur.com/CMyMo1k.png) {position:absolute,top:160px,left:80px,width:350px,} {{description Include short description of **Your Class** here, description will automatically extend for as long as needed. }} }} {{pageNumber 5}} \page :: ## Class Free Benefits {{benefits * Permanently increase your maximum Hit/Mind/Inventory Points by 2/5. * Gain the ability to equip martial equipment or cast rituals or neither. }} ## Class Skills ### Skill 1 (✦4) Skills often reference【**SL**】. ### Skill 2 (✦5) Hopefully you can see the pattern in the skill levels after the skill name: ✦2 ✦3 ✦4 and ✦10 ### Skill 3 (✦2) Checks look like this【**INS + INS**】 ### Skill 4 A note on formatting: categories/types of things are generally bolded. For example: **ranged** attacks, **Spiritism** discipline, **spear** weapon. References to other rules are often bolded, like **critical success**, **multi (2)** and **Guard**. Important distinctions are also bolded, and choices look like this: choose one option: you do a thing; **or** you do a different thing. ### Skill 5 (✦5) The total SL for any class should be between 13 and 21. {{pageNumber 6}} \page # Class Features ## Rules for Class Features If your class has special features, give all the general rules for them upfront. Otherwise you can delete this page. {{background-green * **Lists** of rules or * **examples** tend to use a light background * like this. }} **A small note:** It might be worth considering at this point if your class would work as a Mnemosphere. As a rule of thumb, classes that have their own special resource points or a pet tend to not work very well. ##### Oh, you might want a table | **Name of thing** | **Cost**| **Description** | |:------------------|:-----:|:-----------------:| | **A thing** | 1 | It has an effect | | **Another thing** | 2 | A different effect| | **Yet another** | 3 | Another effect | {{feature ### Class Feature ###### **Cost:** 25 Inventory Points Add your class features inside these feature brackets to nicely format them. ### Class Feature 2 ###### **Cost:** 25 Inventory Points Add your class features inside these feature brackets to nicely format them. }} {{pageNumber 7}} \page ## Heroic Skills for this class {{feature ### Heroic Skill 1 {{ospell}} ###### **Requirements:** You must have mastered **this** class Remember to add a couple of heroic skills! ### Heroic Skill 2 ###### **Requirements:** You must have mastered **this** class and acquired the **Skill** skill Some heroic skills need a specific skill to work. }} {{pageNumber 8}} \page {{bestiary # Bestiary ##### Cat Hunter |{{traits treacherous, cute, cunning.}}|||||||{{level 60}} |{{type,beast}}| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |![IMG](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:60px,mix-blend-mode:multiply}{{img}}||{{descr, Despite their friendly look, cat hunters will take any opportunity to betray whoever is feeding them. }}||||||| |^||^||||||| |^||^||||||| |{{affinity,physical,weakness}}|{{affinity,bolt,resistant}}|{{affinity,air,immune}}|{{affinity,dark,absorb}}|{{affinity,light,weakness}}|{{affinity,fire,absorb}}|{{affinity,poison,absorb}}|{{affinity,ice,absorb}}|{{affinity,earth,absorb}}| |{{dex d10}}||{{ins d10}}||{{wlp d10}}||{{mig d10}}||{{init 10}}| |{{def 10}}||{{mdef 10}}||{{mp 20}}||{{hp 29}}||{{crisis 10}}| ###### Basic Attacks {{attack,melee **Sharp Claws** 【 MIG + MIG】 +2 w【 HR + 10】 physical damage. This attack has **multi (2)**.}} {{attack,ranged **Weird Bow** 【 MIG + MIG】 +2 w【 HR + 10】 physical damage. This attack has **multi (2)**.}} ###### Spells {{spell, | **Dispell** | **10MP** |**One Creature** |**Instanteous** | |:-|:---|:---|:-| |If the target is affected by one or more spells with a duration of "Scene", instead they are no longer affected by any of those spells. |||| }} {{spell,offensive | **Stone Barrage** | **10MP** |**One Creature** |**Instanteous** | |:-|:---|:---|:-| |The target suffers【 HR + 15】 earth damage and suffers dazed. |||| }} ###### Special Rule {{rules **Construct:** This creature is immune to poisoned. }} }} \page # Table of Contents {{toc,wide - ### [{{ chapter name}}{{ 1}}](#p1) - #### [{{ Light Green Header}}{{ 1}}](#p1) - [{{ Header 3}}{{ 1}}](#p1) - #### [{{ Header adjusted for odd page}}{{ 2}}](#p2) - [{{ Header 3}}{{ 2}}](#p2) - #### [{{ Note about quotes}}{{ 2}}](#p2) - ### [{{ Header 1}}{{ 3}}](#p3) - ### [{{ Your Class}}{{ 5}}](#p5) - #### [{{ ALSO: Other names for your class}}{{ 5}}](#p5) - [{{ YourClass}}{{ 5}}](#p5) - #### [{{ Class Free Benefits}}{{ 6}}](#p6) - #### [{{ Class Skills}}{{ 6}}](#p6) - [{{ Skill 1 (✦4)}}{{ 6}}](#p6) - [{{ Skill 2 (✦5)}}{{ 6}}](#p6) - [{{ Skill 3 (✦2)}}{{ 6}}](#p6) - [{{ Skill 4}}{{ 6}}](#p6) - [{{ Skill 5 (✦5)}}{{ 6}}](#p6) - ### [{{ Class Features}}{{ 7}}](#p7) - #### [{{ Rules for Class Features}}{{ 7}}](#p7) - [{{ Class Feature}}{{ 7}}](#p7) - [{{ Class Feature 2}}{{ 7}}](#p7) - #### [{{ Heroic Skills for this class}}{{ 8}}](#p8) - [{{ Heroic Skill 1}}{{ 8}}](#p8) - [{{ Heroic Skill 2}}{{ 8}}](#p8) }} \page # Table of Contents cont. {{toc,wide - #### [{{ Heroic Skills for this class}}{{ 8}}](#p8) - [{{ Heroic Skill 1}}{{ 8}}](#p8) - [{{ Heroic Skill 2}}{{ 8}}](#p8) - ### [{{ Bestiary}}{{ 9}}](#p9) - ### [{{ Credits}}{{ 10}}](#p10) - ### [{{ Changelog}}{{ 13}}](#p13) - #### [{{ 1.5}}{{ 13}}](#p13) - #### [{{ 1.4}}{{ 13}}](#p13) }} ## Table of Contents Notes Above you can find example ToC generated by the Homebrewery (Text Editor -> Table of Contents). Few notes. * While generating ToC, remove h1 in the toc class, and place it outside- this is intended formatting for this template * ToC is currently using same header formatting as the rest of the book. It probably shouldn't, but this update is only minor, to include fixes people asked me in the meantime, so better styling for formatting might come in the future. Right now I wanted it to be properly aligned only. * please make sure that toc is using wide form (first line should start from **toc,wide**, as I know that in some cases **toc** can span across multiple columns on one page- this is not style used in official books. \page # Credits Fabula Ultima, published by Need Games, was written by Emanuele Galletto. All rights to the Fabula Ultima, as well as related game rules and contents from the Core Rulebook or any expansions thereof, belong to Need Games. The content within this document is a fan production, written for free, to be utilized and accessed for free. If you paid for this book, refund it. I will never charge for it. Please support the official game by visiting www.fabulaultima.com or supporting the author by visiting www.patreon.com/roosterema. Discord: https://discord.gg/vwNzrbwtFn ![homebrew logo](https://need.games/wp-content/uploads/2024/06/FU-MOD-bgW-300x121.png) {position:absolute,bottom:50px,left:80px,width:280px} Project made by: picollo (@picollo_24) Project Version: 1.6ENG - 23/09/2024 Special mentions for the following people: @acinroc - for great feedback regarding template @marumarukarina for help with some table formatting {{pageNumber 10}} \page # Changelog ### 1.6 * Added basic styling for Table of contents, it's far from perfect, but it should be aligned to the pages * Fixed default formatting of Homebrewery that caused first line after the h1 to be written in small capital letters. ### 1.5 * Updated bestiary page. Templating is slightly more complicated (uses tables this time), but it's much cleaner. It still lacks better visual consistency, but it's step forward from previous verison. ### 1.4 * Remade template to no longer match original dress 1:1 * Implemented changes to class template by Kowari. * Included initial version of Bestiary entry (visual identity is still WIP). * Implemented slight corrections to page size by Kowari, now you can get proper A5 pdf without issues. * Added page numbering, and chapter identifiers on the side of page. Chapter identifier is still WIP. {{pageNumber 11}}