User:WillowsGuardian

From Book of Travels Wiki
Jump to navigation Jump to search


STATUS: On a break from wiki-ing for an unknown duration due to Real Life circumstances.

  • Emote-General-Rest.png

USER PROFILE

Name: Willows

Nickname: Willow

Pronouns: She/They

Role: Admin

Region: NA

Age: Middle

Quote: Play Book of Travels? No: wiki Book of Travels.

Outline Proposal

  • Book of Travels
    • Game Mechanics
      • Character
        • Creation
        • Skills
          • Tea
          • Passive
          • Knot
          • Abilities
        • Traits
        • Effects
          • Skill
          • Key
          • General
          • Event
          • Equipment
        • Death
        • Inventory
      • World
        • Day/Night Cycle
        • Servers
        • Events
      • Tools
        • Map
        • Journal
        • Menu
          • Tutorials
      • Interactions
        • Trade
        • Combat
        • Travel
        • Looting
          • Reagents
          • Loot Containers
        • Mini-Games
          • Casting
          • Passage
    • Official Content
      • Game Updates
      • Developer Blogs
    • Locations
      • Braided Shore
        • North
        • South
        • East
        • West
    • Items
      • Equipment
        • Main hand
          • Sword
          • Fishing Pole
        • Off Hand
          • Cane
          • Cover/Light Source or High/Low
        • Neck
        • Instrument
        • Head
        • Cloak
        • Body
        • Backpack
        • Arm
      • Consumables
      • Trade Goods
        • Materials
          • Fall Gems
          • Master-Iron
          • Rainstone
        • Type
          • Discs
          • Nails
          • Bread
    • Setting
      • Quests
      • Prologue
      • The Journey Begins
    • Culture
      • History
        • Ages
          • Elden
          • Varhim
          • Settlement
          • Dynasty
          • Fifth
        • Figures
        • Events
      • Vellen
      • Origins
      • Colour
      • Legends
      • Magic
      • Technology
      • Spirits
      • Games
    • People
      • Organizations
        • Councils
        • Unions
          • Machinists
          • Skalds
          • Hands
          • Free
          • Merchants
          • Growers
          • Learners
          • Woodshapers
          • Wardens
          • Warriors
          • Crafters
          • Esoteric
          • Children
        • Coroners
        • Gangs
          • Jade Foot
          • Umber Deer
          • Cobalt Ribbons
          • Cinnabar Salt
          • Cobalt Wolf
          • Rustle Grass
          • Soot Spike
          • Shipguards
        • Cults
          • Wall
          • Tirum
          • Flowering Heath
          • Kasyran
        • Families
          • Noble Families of New Foundry
            • Yehan
            • Pelgen
            • Nehm
          • Droil
        • Other Groups
          • Moonstone Order
          • Keepers of the Flame of Weld
          • Myrt Tea Cooperative
          • etc.
          • Loyal Halzhaanists
          • Asken Folk League
      • Individuals
        • Bandit
        • Beggar
        • Child
        • Conductor
        • Merchant
        • Musician
        • Mystic
        • Naturefolk
        • Peasant
        • Scholar
        • Steward
        • Voice
        • Warden
        • Worker
    • Spirits
      • Sefra
      • Kettem
      • Ghosts
      • Shades
      • Omin
    • Animals
    • Wiki
      • How to
      • To Do
        • Projects
      • Outline
      • Templates
      • Resources
      • Category Tree
      • Archived Decision-related Discussions
      • Styling (such as image naming conventions, how to format references)
      • Admin-Specific
        • CSS Pages
        • Other Special Pages
      • Admin Noticeboard

That time I tried to do CSS

/*SETTING THE FONT*/

/*Font is web-safe*/ /*Font closely matches BoT in-game font*/

/*asterisk (*) selects all elements*/ /*font sets the properties of an element's font*/ /*font-family specifies fonts in decreasing order of priority*/

{ 

    font-family: "Times New Roman", Times, sans-serif;

}

/*MAKING SURE MEDIA IS NEVER TOO WIDE*/

/*img selects all image elements*/ /*video selects all video elements*/ /*max-width is used to set the maximum width of an element*/ /*setting max-width to a percentage makes an element scale automatically*/ /*max-width: 100% makes it so an element's width will never scale to larger than its original size*/ /*height is used to set the height of an element*/ /*height: auto makes an element's height scale automatically*/

img, video { 

    max-width: 100%;
    height: auto;

}

/*MAKING SURE THE OUTSIDE PARTS OF AN ELEMENT ARE INCLUDED WHEN REFERENCING IT*/

/*asterisk (*) selects all elements*/ /*box-sizing allows an element's padding and border to be included in the element's width and height*/ /*box-sizing: border-box includes an element's padding and border in the element's width and height*/

{ 

    box-sizing: border-box;

}

/*PAGE LAYOUT AND RESPONSIVENESS*/

/*Responsive web design typically uses a grid-based view with twelve columns*/ /*This allows us to more easily directly control the layout of pages*/ /*This allows us to accommodate the various screen- and browser-sizes Khelim may use to access the wiki*/ /*A lot of websites are moving toward a Mobile-First approach to formatting, which results in pages loading faster on mobile devices*/ /*Using breakpoints as references for coding, we can actively control what and how information on pages are presented to a Khelim*/ /*A breakpoint for screensize is below 600px for extra small devices such as many smartphones*/ /*A breakpoint for screensize is 600px for small devices such as portrait tablets and large smartphones*/ /*A breakpoint for screensize is 768px for medium devices such as landscape tablets*/ /*A breakpoint for screensize is 992px for large devices such as laptops and desktop monitors*/ /*A breakpoint for screensize is 1200px for extra large devices such as large laptops and desktop monitors*/

/*class is used to select and style all elements with a specified attribute*/ /*class*="col-" selects all elements that have a class starting with the phrase "col-", so all columns*/ /*setting width to a percentage makes the column scale automatically*/

/*Mobile-First approach*/ /*setting width to 100% will make the content go all the way across the page*/

[class*="col-"] { 

    width: 100%;

}

/*For laptops and desktop monitors*/ /*@media is a rule used in media queries to apply styling based on screen- or browser-size*/ /*only is a keyword that prevents older browsers (that do not support media queries with media features) from applying the styling; this has no effect on modern browsers*/ /*screen is the media type, used for computer screens, tablets, smartphones, etc.*/ /*and is a keyword that combines a media feature with a media type or with other media features*/ /*min-width is used to define the minimum width of an element*/ /*min-width: 768px sets the minimum width for the associated coding to apply*/ /*@media only screen and (min-width: 768px) means if the width of the screen or browser the Khelim is using to view the page is 768px or wider*/ /*.col-1 through .col-12 create a class for each of the twelve columns*/ /*setting width to a percentage makes the column scale automatically*/ /*the percentages below list how wide each column is, so column twelve goes 100% across the page while column three goes 25% across the page*/

@media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }

/*class*="col-" selects all elements that have a class starting with the phrase "col-", so all of the created column classes*/ /*float is used to position and format content and elements*/ /*float: left, in this context, will "float" the columns next to each other (instead of on top of each other) */ /*padding is used to provide space between content and its border*/ /*relative length units specify a length relative to another length property*/ /*em is relative to the font-size of the element*/

[class*="col-"] { 

    float: left;
    padding: .5em;

}

/*when placing items on a page, we will place them in rows*/ /*we will create a class called row, and the columns in each row must add up to twelve (the number of columns in the Page Layout)*/ /*since the columns in each row are floating to the left, they are not in the "flow" of the page: other elements would be placed as though the columns do not exist*/ /*by clearing the flow after each row, other elements will be placed with consideration for the columns within the rows*/

/*.row selects all elements with the row class*/ /*The code commented below is used in general for most webpages, hence it's non-specific nature:*/

/*::after inserts something after the content of the selected elements*/ /*content is used to to insert generated content*/ /*"" is the content inserted (nothing)*/ /*clear is used to control the flow next to floated elements*/ /*clear:both pushes the element below both left and right floated elements*/ /*display specifies if and how an element is displayed*/ /*display: table lets the element behave like a table element*/

.row::after { 

    content: "";
    clear: both;
    display: table;

}

/*DEFAULT THEMING - DARK*/

/*SETTING THE BACKGROUND IMAGE*/

/*To set a background image that covers the entire browser window at all times, the image must fill the entire page, scale as needed, be centered on the page, and not cause scrollbars*/ /*Always set a background color in case the image is not available*/

/*html element is always at least the height of the browser window*/ /*background is shorthand for the "background-image" property*/ /*url() is the location of the image to be used for the background*/ /*no-repeat means the background image will not repeat*/ /*center centers the background image*/ /*fixed makes it so the background image will not scroll with the page*/ /*background-color is used to specify the color of the background; in this instance it is specified in case the background image is not available*/ /*#000000 is the color black in hexadecimal format*/ /*background-size is used to specify the size of background images*/ /*cover is a keyword that scales the background image so the content area is completely covered by the background image; the image width and height are equal to or exceed the content area (in which case, some parts of the background image may not be visible)*/


html { 

    background: url(/images/f/f0/Caravaners_play_at_night.png) no-repeat center fixed;
    background-color: #000000;
    background-size: cover;

}

/*SETTING THE COLOR OF TEXT*/

/*asterisk (*) selects all elements*/ /*color specifies the color of text*/ /*#add8e6 is light blue in hexadecimal*/

{ 

    color: #add8e6;

}

/*STYLING LINKS*/

/*Links are underlined by default*/

/*a is for all links*/ /*a:link is for a normal, unvisited link*/ /*a:visited is for a link the Khelim has visited*/ /*a:hover is for a link the Khelim is hovering the mouse over*/ /*a:active is for a link the moment it is clicked*/ /*a:hover MUST come after a:link and a:visited*/ /*a:active MUST come after a:hover*/ /*color specifies the color of text*/ /*#ffff00 is yellow in hexadecimal*/ /*#ffa500 is orange in hexadecimal*/ /*text-decoration is shorthand for text-decoration-line/color/style/thickness*/ /*text-decoration: none removes underline*/

a:link, a:visited { 

    color: #ffff00;
    text-decoration: none;

}

a:hover, a:active { 

    color: #ffa500;

}

/*BULLETS FOR LISTS OF UNORDERED ITEMS*/

/*Below is a workaround to appropriately resize the image chosen for bullets*/ /*While we would typically use list-style-image to use an image for bullets, it does not allow us to change the size of the image*/

/*ul stands for unordered list - a list in which items are marked with bullets*/ /*list-style-type none removes the default bullet*/ /*padding is the space around an element's content inside of its defined borders*/ /*setting the padding to zero removes the space*/

/*ul li is for list items of unordered lists*/ /*padding-left specifies the padding on the left of the listed item*/ /*setting the padding-left to 1.5em provides space for and around the image we will use as a bullet for unordered lists*/ /*background is short for background-color/image/position/size/repeat/origin/clip/attachment*/ /*background: url() specifies the image to use for the background*/ /*left center no-repeat sets the image on the left center and tells it not to repeat*/ /*background-size specifies the size of the background image*/ /*setting the background-size to 1em 1em makes it the height and width of the font*/ /*margin-bottom sets the bottom margin of an element*/ /*setting the margin-bottom to 0.5em provides half of the font's size as extra space after each listed item*/

ul { 

 list-style-type: none;
 padding: 0;

}

ul li { 

 padding-left: 1.5em;
 background: url(images/5/55/Endeavour_Slot_Neutral_Active.png) left center no-repeat;
 background-size: 1em 1em;
 margin-bottom: 0.5em;

}

/*ChatGPT assisted with coding.*/

Effects

Effects are penalties, boons, or neutral factors that affect Khelims.

Effect Cards show active Effects and can be hovered over to obtain more information about the displayed Effect. Effect Cards are displayed at the top left of the game window, but not all Effects will display an Effect Card when active.

Types of Effects:

  • General
  • Event
  • Skill
  • Key

General Effects

Sources of General Effects:

  • Consumables
  • Environment
  • Khelim actions
  • Groups


Effect Name Source Effect Card Note Effect Nature Effect Start Notification End Notification
Wet Rain Your clothes are soaked and the discomfort drains your energy. Sit by a fire to dry them. Penalty Drains Energy Your clothes are soaked. Rest by a fire to dry them. You are dry.
Moving into or through a substantial amount of water for a substantial amount of time
Sheltered Indoors, under a large tree or weather shield You are protected from weather and wind. Boon Protected from weather and wind You are protected from weather and wind. You are no longer sheltered.
Tired Participating in a battle or walking a long distance You are worn out and feel the urge to rest. Your energy is draining faster and your movement is slow. Penalty Drains Energy and slows movement You are tired, and feel the need to rest. You are no longer tired.
Harsh Weather Bad weather The weather drains your energy. Seeking shelter will protect you. Penalty Drains Energy The weather drains you. The weather no longer drains you.
Night Night Traveling at night has you more cautious. Unknown Unknown And so, the shiver of the night has appeared. The morning sun has vanquished the night.
Hungry Not consuming an appropriate edible You feel the need to eat something. Your Energy and Endurance are draining faster. Penalty Drains Energy and Endurance You feel the need to eat something. You are no longer hungry.
Nauseous On a boat in motion Something stirs deep in your gut. You just might retch, or be doomed to carry this unease for a while. Unknown Unknown None None
Consuming an inappropriate edible that is not a blowfish

Sources of Event Effects:

  • Dormant Altars
  • Sefra Shrines
  • Haunted Headstones

Sources of Skill Effects:

  • Teas
  • Knots
  • Abilities
  • Passives


Sources of Quest Effects:

Retrieved from "https://bookoftravels.wiki.gg/index.php?title=User:WillowsGuardian&oldid=62702"