Template:NewHomeNavigation/style.css: Difference between revisions

Revision as of 03:36, 6 October 2024

.homeContainer {
    display: flex;
    flex-direction: column;
    width: 230px;
    height: 500px;
    margin: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hover-target a {
    width: 150px;
    clip-path: polygon(0 0,93% 0,100% 100%,7% 100%);
    color: black;
    text-decoration: none;
    height: 40px;
    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;
}

.hover-target a:hover {
    opacity: 0.8;
}

.beasties a {
    background: repeating-linear-gradient(135deg, #fd79b4, #fd79b4 10px, #fc5ca4 10px, #fc5ca4 20px);
}
.plays a {
    background: repeating-linear-gradient(135deg, #32d790, #32d790 10px, #05ce78 10px, #05ce78 20px);
}
.relationships a {
    background: repeating-linear-gradient(135deg, #bba6ed, #bba6ed 10px, #ac92e9 10px, #ac92e9 20px);
}
.characters a {
    background: repeating-linear-gradient(135deg, #ffaa55, #ffaa55 10px, #ff8e4a 10px, #ff8e4a 20px);
}
.locations a {
    background: repeating-linear-gradient(135deg, #f0b49e, #f0b49e 10px, #eea58b 10px, #eea58b 20px);
}
.items a {
    background: repeating-linear-gradient(135deg, #a8caba, #a8caba 10px, #9dbdb1 10px, #9dbdb1 20px);
}
.sponsors a {
    background: repeating-linear-gradient(135deg, #95e4fd, #95e4fd 10px, #7bbafb 10px, #7bbafb 20px);
}

.hover-content { 
    background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/SpreckoIdle.png");
    width: 200px;
    height: 200px;
} 

.beasties:hover ~ .hover-content { 
    background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/KichikIdle.png");
}
.plays:hover ~ .hover-content { 
    background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/BilditIdle.png");
}
.relationships:hover ~ .hover-content { 
    background-image: url("https://beastiepediaimg.s3.amazonaws.com/d76cpgnhqk1hcr/DiggumIdle.png");
}