User:Lakelimbo/Main Page/styles.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

#container {
    container-type: inline-size;
}

#main-page {
    display: grid;
    gap: 0.5rem;
    grid-template-areas:
        "welcome"
        "browsing"
        "today"
        "twitch"
        "message"
        "languages"
        "niwa"
        "bulbagarden";
}

#main-page .section {
    border: 3px solid #4e8234;
    background-color: #ffe;
    padding: 0.5rem;
    border-radius: 0.75rem;
}
#main-page .section li {
    list-style: none;
}
#main-page .section > .box-title {
    background-color: #C4E673;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.4rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

#welcome {
    grid-area: welcome;
    border-width: 4px!important;
    padding: 0.2rem!important;
    border-radius: 1.5rem!important;
    text-align: center;
    font-size: 0.9rem;
}

#welcome h1 {
    border: none;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    overflow: unset;
    padding: 1rem 0 0 0;
    margin: unset;
    line-height: 1;
}
#welcome > div:nth-child(3) {
    padding: 0.5rem 1rem;
}

#welcome > div:last-of-type {
    background: #C4E673;
    border-radius: 0 0 1rem 1rem;
    padding: 0.25rem;
    font-size: 0.75rem;
}

#twitch {
    grid-area: twitch;
}

#today {
    grid-area: today;
}

#twitch > div:last-of-type, #today > div:last-of-type {
    position: relative;
    width: 100%;
    height: 310px
}
#twitch > div:last-of-type > iframe, #today > div:last-of-type > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#browsing {
    grid-area: browsing
}
#browsing li a:last-of-type {
    margin-left: 1rem
}

#message {
    grid-area: message;
}

#languages {
    grid-area: languages;
}

#niwa {
    grid-area: niwa;
}

#bulbagarden {
    grid-area: bulbagarden;
    text-align: center;
}
#bulbagarden > div:last-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
#bulbagarden > div:last-of-type a:not(span a) {
    border: 2px solid #4E8234;
    background-color: #C4E673;
    border-radius: 100%;
    display: block;
    padding: 0.5rem;
}
#bulbagarden > div:last-of-type span {
    margin-top: 1rem;
    display: block;
}

@container (min-width: 765px) {
    #main-page {
        grid-template-areas: "welcome welcome welcome welcome"
                             "twitch twitch today today"
                            "message message message browsing"
                            "languages languages niwa niwa"                             
                            "bulbagarden bulbagarden bulbagarden bulbagarden";
    }
}

@container (min-width: 992px) {
    #main-page {
        grid-template-areas: "welcome welcome welcome"
                         "twitch today browsing"
                         "message message browsing"
                         "languages niwa niwa"
                         "bulbagarden bulbagarden bulbagarden";
    }

    #welcome > div:nth-child(3) img {
        float: right;
        padding: 0.5rem 2rem;
    }

    #niwa > div:last-of-type {
        column-count: 2;
        padding: 0 1rem;
    }
}