Template:Zone/Infobox: Difference between revisions

From HorizonXI Wiki
(testing improvements on zone infobox)
 
(fixed flex box code)
Line 1: Line 1:
<noinclude>[[Category:Templates|{{PAGENAMEE}}]]</noinclude><includeonly><onlyinclude>
<noinclude>[[Category:Templates|{{PAGENAMEE}}]]</noinclude><includeonly><onlyinclude>
<!-- outer flex container for the entire Zone Infobox -->
<!-- outer flex container for the entire Zone Infobox -->
<div style="display: flex; flex-wrap: wrap; justify-content: start; width: 100%; gap: 8px;">
<div style="display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;">
<!-- Left part with description, TOC, map and connections-->
<!-- Left part with description, TOC, map and connections-->
<div style="flex-grow: 7; background-color: #eddce7; padding: 8px;">
<div style="flex-grow: 9; flex-basis: 300px; background-color: #eddce7; padding: 8px;">
<!-- inner flex container for the left side to arrange description, TOC, map and connections -->
<!-- inner flex container for the left side to arrange description, TOC, map and connections -->
<div style="display: flex; flex-wrap: wrap; justify-content: start; width: 100%; gap: 8px;">
<div style="display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;">
<!-- first row: description: full width -->
<!-- first row: description: full width -->
<div style="flex-grow: 0; flex-basis: 100%;">
<div style="flex-grow: 1; flex-basis: 100%;">
<div style="background-color:#bc73a1; font-size:120%; font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Description</div>
<div style="background-color:#bc73a1; font-size:120%; font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Description</div>
<div style="background-color: #eddce7; padding:0.2em 0.4em;">{{{Description}}}</div>
<div style="background-color: #eddce7; padding:0.2em 0.4em;">{{{Description}}}</div>
Line 13: Line 13:
<!-- close first row: description-->
<!-- close first row: description-->
<!-- second row col 1: TOC and connections: half width-->
<!-- second row col 1: TOC and connections: half width-->
<div style="flex-grow: 1; style="background-color: #eddce7">
<div style="flex-grow: 1; flex-basis: 300px; style="background-color: #eddce7">


<div style="background-color:#bc73a1; padding:0.2em 0.4em;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Table of Contents</span></div>
<div style="background-color:#bc73a1; padding:0.2em 0.4em;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Table of Contents</span></div>
Line 24: Line 24:
<!-- close second row col 1: TOC and connections -->
<!-- close second row col 1: TOC and connections -->
<!-- second row col 2: Map-->
<!-- second row col 2: Map-->
<div style="flex-grow: 1; margin: 0; background-color: #eddce7">
<div style="flex-grow: 1; flex-basis: 300px; background-color: #eddce7">


<div style="background-color:#bc73a1; padding:0.2em 0.4em;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Interactive Map</span></div>
<div style="background-color:#bc73a1; padding:0.2em 0.4em;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Interactive Map</span></div>
Line 36: Line 36:
<!-- close inner flex container and left part: description, TOC, map, connections-->
<!-- close inner flex container and left part: description, TOC, map, connections-->
<!-- Start of right part: zone information -->
<!-- Start of right part: zone information -->
<div style="flex-grow: 1; flex-basis: 300px; margin: 0; background-color: #eddce7; padding: 8px;">
<div style="flex-grow: 1; flex-basis: 300px; background-color: #eddce7; padding: 8px;">
<div style="background-color:#bc73a1; padding:0.2em 0.4em; margin-left: 3px;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Zone Information</span></div>
<div style="background-color:#bc73a1; padding:0.2em 0.4em; margin-left: 3px;"><span style="font-size:120%; font-weight:bold; text-align:left; color:#000;">Zone Information</span></div>



Revision as of 17:49, 1 April 2024

Usage

Example

Description
This enormous expanse of dunes can be found along the Bhefhel Gulf. While a majority of the surrounding coastline is too shallow for larger sea vessels, one natural harbor does exist. Near this harbor lies the independent port town of Selbina.
Valkurm-dunes-pic.jpg
Interactive Map

{{{interactive map}}}

Zone Information
Area Name Valkurm Dunes
Type Outdoor
Maps
Valkurm Dunes.png
Map Acquisition Purchase
Miscellaneous Able to ride Mounts Able to use Tractor Able to call Adventuring Fellow
Hobbies
Zone/Infobox/HELM
Weather
Zone/Infobox/Weather Icons
Region Zulkheim
Expansion Original
Requirements None
Restrictions None
Background music
Notes None