[11] - info/navigation; nostromo

[loupnoir]

// NAV

TITLE
- SUBSECTION
- LINK
- LINK
- LINK
- LINK

// TITLE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SUBSECTION

Morbi quis commodo odio aenean sed adipiscing diam. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Adipiscing tristique risus nec feugiat in fermentum posuere.

< isopods >

// TITLE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SUBSECTION

Morbi quis commodo odio aenean sed adipiscing diam. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Adipiscing tristique risus nec feugiat in fermentum posuere.

HOME

PREMISE

FAQ

TAKEN

RULES

LOCATIONS

MOD CONTACT

< isopods >

NOSTROMO

A minimal, terminal-style info/navigation page. Can be used for game info, FAQs, event posts, character info--whatever your heart desires! Comes in two different styles--sticky side navbar (best viewed on desktop), and footer navbar (mobile friendly)--and four preset colors!

INSTRUCTIONS:

→ Feel free to edit, modify, or repurpose the template as you see fit.

→ I designed the sidebar nav with the intent of allowing the user to jump to different sections of the text--however, you are also free to have them link to external pages, too.

→ Not a fan of the scrolling scan lines? Delete background-image: url('https://i.imgur.com/i6QRZSX.gif'); in the first div tag, and adjust the --backgroundColor variable to be your desired background color.

→ This template uses variables for color/theme consistency. To change the colors, just find the appropriate variable(s) in the first div tag and put your new hex code. All of the appropriate elements will change color, accordingly!

→ I've provided four different preset pallets below for you to pick from: simply replace the variables at the top of the code with the following values for each color.

→ Need help or have any other questions? Let me know in the comments below!

SIDE NAV:

<raw-code> <!-- Below are variables for the layout colors. Modifying a variable will change the colors of all elements labelled with that variable. --> <!-- Hooray for consistent colors! --> <div style=" --backgroundColor: rgba(109, 177, 201, 0.25); --textColor: white; --boxColor: rgba(20, 68, 71, 0.8); --headerColor: rgba(78, 199, 205, 0.75); --navColor: rgba(78, 199, 205, 0.85); --borderSettings: 3px solid rgba(78, 199, 205, 0.75); --linkColor: white; border: var(--borderSettings); width: 900px; margin: auto; background-image: url('https://i.imgur.com/i6QRZSX.gif');"> <!-- Get rid of the above background image URL if you don't want the scrolling scan lines. --> <div style="background-color: var(--backgroundColor); z-index: 2; height: 100%; font-family: 'Lucida Console', monospace; padding: 15px;"> <!-- BEGINNING OF CONTENT --> <div style="color: var(--textColor); display: flex; align-items: flex-start; justify-content: space-around;"> <!-- SIDE NAV BAR --> <div style="position: sticky; display: inline-block; font-size: 14px; background-color: var(--boxColor); margin: 15px; border: var(--borderSettings); flex-grow: 1; min-width: 200px; top: 15px;"> <!-- NAV TITLE --> <div style="background-color: var(--headerColor); font-size: 24px; margin: 0px 0px 15px 0px; padding: 5px 15px 5px 15px; font-weight: 800;"> // NAV </div> <!-- NAV TITLE END --> <div style="margin: 15px;"> <!-- LINKS --> <!-- Feel free to add more links as you see fit. --> <big><b><a href="#title" style="color: var(--linkColor); text-decoration: none;">TITLE</a></b></big><br/> - <a href="#subsection" style="color: var(--linkColor); text-decoration: none;">SUBSECTION</a> <br /> - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br /> - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br /> - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br /> - <a href="https://crouton.net/" style="color: var(--linkColor); text-decoration: none;">LINK</a> <br /> <!-- LINKS END --> </div> </div> <!-- SIDE NAV BAR END --> <!-- MAIN CONTENT --> <div style="flex-grow: 2;"> <div style="font-family: 'Lucida Console', monospace; font-size: 14px; text-align: justify; background-color: var(--boxColor); margin: 15px; border: var(--borderSettings);"> <!-- The below anchor tag is linked on the sidebar nav. --> <a name="title"></a> <!-- Anchor tag end. --> <!-- CONTENT TITLE --> <div style="background-color: var(--headerColor); font-size: 24px; margin: 0px 0px 15px 0px; padding: 5px 15px 5px 15px; font-weight: 800;"> // TITLE HERE </div> <!-- CONTENT BODY --> <div style="margin: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <!-- SUBSECTION TITLE --> <div style="background-color: var(--headerColor); font-size: 24px; margin: 15px 0px 15px 0px; padding: 5px; font-weight: 800; text-align: center;"> <!-- The below anchor tag is linked on the sidebar nav. --> <!-- Feel free to delete this if you don't want to use it. --> <a name="subsection"></a> SUBSECTION </div> <!-- SUBSECTION TITLE END --> TEXT GOES HERE </div> </div> </div> <!-- MAIN CONTENT END --> <!-- You can continue to copy and paste main content beneath this line, --> <!-- if you want the effect of 'multiple windows' in one post. --> </div> <!-- END OF CONTENT --> <!-- CREDIT, DO NOT DELETE --> <div> <center><a href="https://isopods.dreamwidth.org/9617.html" style="text-decoration: none; color: white; font-size: 12px;"> < isopods > </a></center> </div> </div> </div> </raw-code>

BOTTOM NAV:

<raw-code> <!-- Below are variables for the layout colors. Modifying a variable will change the colors of all elements labelled with that variable. --> <!-- Hooray for consistent colors! --> <div style=" --backgroundColor: rgba(109, 177, 201, 0.25); --textColor: white; --boxColor: rgba(20, 68, 71, 0.8); --headerColor: rgba(78, 199, 205, 0.75); --navColor: rgba(78, 199, 205, 0.85); --borderSettings: 3px solid rgba(78, 199, 205, 0.75); --linkColor: white; border: var(--borderSettings); width: 900px; margin: auto; background-image: url('https://i.imgur.com/i6QRZSX.gif');"> <!-- Get rid of the above background image URL if you don't want the scrolling scan lines. --> <div style="background-color: var(--backgroundColor); z-index: 2; height: 100%; color: white; padding: 15px; font-family: 'Lucida Console', monospace;"> <!-- MAIN CONTENT --> <div style="font-size: 14px; text-align: justify; background-color: var(--boxColor); margin: 15px; border: var(--borderSettings);"> <!-- CONTENT TITLE --> <div style="background-color: var(--headerColor); font-size: 24px; margin: 0px 0px 15px 0px; padding: 5px 15px 5px 15px; font-weight: 800;"> // TITLE HERE </div> <!-- CONTENT BODY --> <div style="margin: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> <!-- SUBSECTION TITLE --> <div style="background-color: var(--headerColor); font-size: 24px; margin: 15px 0px 15px 0px; padding: 5px; font-weight: 800; text-align: center;"> SUBSECTION </div> <!-- SUBSECTION TITLE END --> TEXT GOES HERE </div> </div> <!-- END OF MAIN CONTENT --> <!-- NAV START --> <div style="font-family: 'Lucida Console', monospace; font-size: 14px; background-color: var(--navColor); margin: 15px; border: var(--borderSettings);"> <div style="margin: 5px; text-align: center; font-size: 16px; font-weight: 800; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;"> <!-- PUT LINKS BELOW THIS LINE --> <div style="margin: 10px; flex-grow: 1;"> <a href="" style="color: var(--linkColor); text-decoration: none;"> LINK NAME </a> </div> <div style="margin: 10px; flex-grow: 1;"> <a href="LINK HERE" style="color: var(--linkColor); text-decoration: none;"> LINK NAME </a> </div> <div style="margin: 10px; flex-grow: 1;"> <a href="LINK HERE" style="color: var(--linkColor); text-decoration: none;"> LINK NAME </a> </div> <div style="margin: 10px; flex-grow: 1;"> <a href="LINK HERE" style="color: var(--linkColor); text-decoration: none;"> LINK NAME </a> </div> <div style="margin: 10px; flex-grow: 1;"> <a href="LINK HERE" style="color: var(--linkColor); text-decoration: none;"> LINK NAME </a> </div> <!-- PUT LINKS ABOVE THIS LINE --> </div> </div> <!-- NAV END --> <!-- CREDIT, DO NOT DELETE --> <div> <center><a href="https://isopods.dreamwidth.org/9617.html" style="text-decoration: none; color: white; font-size: 12px;"> < isopods > </a></center> </div> </div> </div> </raw-code>

COLOR PRESETS:

BLUE (default): --backgroundColor: rgba(109, 177, 201, 0.25); --textColor: white; --boxColor: rgba(20, 68, 71, 0.8); --headerColor: rgba(78, 199, 205, 0.75); --navColor: rgba(78, 199, 205, 0.85); --borderSettings: 3px solid rgba(78, 199, 205, 0.75); --linkColor: white;

GREEN: --backgroundColor: rgba(109, 201, 129, 0.25); --textColor: white; --boxColor: rgba(22, 71, 20, 0.8); --headerColor: rgba(61, 230, 45, 0.75); --navColor: rgba(61, 230, 45, 0.85); --borderSettings: 3px solid rgba(61, 230, 45, 0.75); --linkColor: white;

RED: --backgroundColor: rgba(201, 109, 109, 0.25); --textColor: white; --boxColor: rgba(71, 20, 20, 0.8); --headerColor: rgba(219, 63, 63, 0.75); --navColor: rgba(219, 63, 63, 0.85); --borderSettings: 3px solid rgba(219, 63, 63, 0.75); --linkColor: white;

YELLOW: --backgroundColor: rgba(146, 132, 50, 0.25); --textColor: white; --boxColor: rgba(71, 70, 20, 0.8); --headerColor: rgba(252, 199, 26, 0.75); --navColor: rgba(252, 199, 26, 0.85); --borderSettings: 3px solid rgba(252, 199, 26, 0.75); --linkColor: white;