Happy Early Access Launch! Please bear with us: We're doing our best to get the site updated. If we currently don't have what you're looking for, try checking our sister site, beastieball.info.
If you're looking to contribute to the site, we're happy to have you! Check out Beastiepedia:To Do List to see what needs done.
Find us in the Wishes Unlimited Discord in the "Beastiepedia: The Beastieball Wiki" thread in the Forums!
Template:NewHomeNavigation/style.css: Difference between revisions
From Beastiepedia: The Beastieball Wiki
DrChillbrain (talk | contribs) No edit summary Tag: Manual revert |
No edit summary |
||
(41 intermediate revisions by one other user not shown) | |||
Line 2: | Line 2: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
width: | width: 420px; | ||
height: 350px; | |||
justify-content: flex-start; | |||
flex-wrap: wrap; | |||
margin: auto; | margin: auto; | ||
position: relative; | |||
} | |||
p { | |||
padding: 0; | |||
margin: 0; | |||
border: 0; | |||
} | } | ||
.hover-target a { | .hover-target a { | ||
width: 150px; | width: 150px; | ||
height: 50px; | |||
clip-path: polygon(0 0,93% 0,100% 100%,7% 100%); | clip-path: polygon(0 0,93% 0,100% 100%,7% 100%); | ||
color: black; | color: black; | ||
text-decoration: none; | text-decoration: none; | ||
text-align: center; | text-align: center; | ||
font-family: "Go Banana", sans-serif; | font-family: "Go Banana", sans-serif; | ||
Line 19: | Line 29: | ||
align-items: center; | align-items: center; | ||
display: flex; | display: flex; | ||
position: absolute; | |||
} | } | ||
.hover-target a:hover { | .hover-target a:hover { | ||
filter: brightness(1.2); | |||
} | } | ||
.beasties a { | .beasties a { | ||
background: repeating-linear-gradient(135deg, #fd79b4, #fd79b4 10px, #fc5ca4 10px, #fc5ca4 20px); | background: repeating-linear-gradient(135deg, #fd79b4, #fd79b4 10px, #fc5ca4 10px, #fc5ca4 20px); | ||
margin-left: 100px; | |||
} | } | ||
.plays a { | .plays a { | ||
background: repeating-linear-gradient(135deg, #32d790, #32d790 10px, #05ce78 10px, #05ce78 20px); | background: repeating-linear-gradient(135deg, #32d790, #32d790 10px, #05ce78 10px, #05ce78 20px); | ||
margin-left: 111px; | |||
margin-top: 50px; | |||
} | } | ||
.relationships a { | .relationships a { | ||
background: repeating-linear-gradient(135deg, #bba6ed, #bba6ed 10px, #ac92e9 10px, #ac92e9 20px); | background: repeating-linear-gradient(135deg, #bba6ed, #bba6ed 10px, #ac92e9 10px, #ac92e9 20px); | ||
margin-left: 122px; | |||
margin-top: 100px; | |||
} | } | ||
.characters a { | .characters a { | ||
background: repeating-linear-gradient(135deg, #ffaa55, #ffaa55 10px, #ff8e4a 10px, #ff8e4a 20px); | background: repeating-linear-gradient(135deg, #ffaa55, #ffaa55 10px, #ff8e4a 10px, #ff8e4a 20px); | ||
margin-left: 133px; | |||
margin-top: 150px; | |||
} | } | ||
.locations a { | .locations a { | ||
background: repeating-linear-gradient(135deg, #f0b49e, #f0b49e 10px, #eea58b 10px, #eea58b 20px); | background: repeating-linear-gradient(135deg, #f0b49e, #f0b49e 10px, #eea58b 10px, #eea58b 20px); | ||
margin-left: 144px; | |||
margin-top: 200px; | |||
} | } | ||
.items a { | .items a { | ||
background: repeating-linear-gradient(135deg, #a8caba, #a8caba 10px, #9dbdb1 10px, #9dbdb1 20px); | background: repeating-linear-gradient(135deg, #a8caba, #a8caba 10px, #9dbdb1 10px, #9dbdb1 20px); | ||
margin-left: 155px; | |||
margin-top: 250px; | |||
} | } | ||
.sponsors a { | .sponsors a { | ||
background: repeating-linear-gradient(135deg, #95e4fd, #95e4fd 10px, #7bbafb 10px, #7bbafb 20px); | background: repeating-linear-gradient(135deg, #95e4fd, #95e4fd 10px, #7bbafb 10px, #7bbafb 20px); | ||
margin-left: 166px; | |||
margin-top: 300px; | |||
} | } | ||
.hover-content { | .hover-content { | ||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ | background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/DefaultMenuImg.png"); | ||
width: | width: 420px; | ||
height: | height: 350px; | ||
position: absolute; | |||
z-index: -10; | |||
} | } | ||
.beasties:hover ~ .hover-content { | .beasties:hover ~ .hover-content { | ||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ | background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/BeastiesMenuImg.png"); | ||
} | } | ||
.plays:hover ~ .hover-content { | .plays:hover ~ .hover-content { | ||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ | background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/PlaysMenuImg.png"); | ||
} | } | ||
.relationships:hover ~ .hover-content { | .relationships:hover ~ .hover-content { | ||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ | background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/RelationshipsMenuImg.png"); | ||
} | |||
.characters:hover ~ .hover-content { | |||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/CharactersMenuImg.png"); | |||
} | |||
.locations:hover ~ .hover-content { | |||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/LocationsMenuImg.png"); | |||
} | |||
.items:hover ~ .hover-content { | |||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ItemsMenuImg.png"); | |||
} | |||
.sponsors:hover ~ .hover-content { | |||
background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/SponsorsMenuImg.png"); | |||
} | } |
Latest revision as of 18:29, 23 October 2024
.homeContainer { display: flex; flex-direction: column; width: 420px; height: 350px; justify-content: flex-start; flex-wrap: wrap; margin: auto; position: relative; } p { padding: 0; margin: 0; border: 0; } .hover-target a { width: 150px; height: 50px; clip-path: polygon(0 0,93% 0,100% 100%,7% 100%); color: black; text-decoration: none; text-align: center; font-family: "Go Banana", sans-serif; font-size: 1.5em; transition: opacity 0.1s; justify-content: center; align-items: center; display: flex; position: absolute; } .hover-target a:hover { filter: brightness(1.2); } .beasties a { background: repeating-linear-gradient(135deg, #fd79b4, #fd79b4 10px, #fc5ca4 10px, #fc5ca4 20px); margin-left: 100px; } .plays a { background: repeating-linear-gradient(135deg, #32d790, #32d790 10px, #05ce78 10px, #05ce78 20px); margin-left: 111px; margin-top: 50px; } .relationships a { background: repeating-linear-gradient(135deg, #bba6ed, #bba6ed 10px, #ac92e9 10px, #ac92e9 20px); margin-left: 122px; margin-top: 100px; } .characters a { background: repeating-linear-gradient(135deg, #ffaa55, #ffaa55 10px, #ff8e4a 10px, #ff8e4a 20px); margin-left: 133px; margin-top: 150px; } .locations a { background: repeating-linear-gradient(135deg, #f0b49e, #f0b49e 10px, #eea58b 10px, #eea58b 20px); margin-left: 144px; margin-top: 200px; } .items a { background: repeating-linear-gradient(135deg, #a8caba, #a8caba 10px, #9dbdb1 10px, #9dbdb1 20px); margin-left: 155px; margin-top: 250px; } .sponsors a { background: repeating-linear-gradient(135deg, #95e4fd, #95e4fd 10px, #7bbafb 10px, #7bbafb 20px); margin-left: 166px; margin-top: 300px; } .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/DefaultMenuImg.png"); width: 420px; height: 350px; position: absolute; z-index: -10; } .beasties:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/BeastiesMenuImg.png"); } .plays:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/PlaysMenuImg.png"); } .relationships:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/RelationshipsMenuImg.png"); } .characters:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/CharactersMenuImg.png"); } .locations:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/LocationsMenuImg.png"); } .items:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/ItemsMenuImg.png"); } .sponsors:hover ~ .hover-content { background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/SponsorsMenuImg.png"); }