landing-styleshit.css

/*
ThatStella7922 Landing Website Stylesheet

mreowww :3

v2024.0829.0
*/

/* small css reset because something was causing issues and im too dumb to figure out what it was */
body {
    margin: 0px 0px 0px 0px;
    background-color: #6d6d6d;
}

/* Prevent font scaling in landscape mode on mobile devices while still allowing user zoom */
@media screen and (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

/* Styling for all device sizes */
body {
    font-family: "Hind", sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
}

a {
    color: #e872e2;
    font-weight: bold;
}

p {
    padding-left: 10px;
    padding-right: 10px;
}

body:before {
    z-index: -9; /* Appear under everything */
    content: '';
	position: fixed;
    top: -2vh;
    left: -2vw;
	width: 104vw;
	height: 104vh;
    background-image: url('http://thatstel.la/landing-assets/BloomRainbow.jpg');
    background-image: url('//thatstel.la/landing-assets/BloomRainbow.jpg');
    background-size: 100% 100%; /* for older browsers to scale the bg to the viewport */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

#master {
    z-index: 1;
    text-align: center;
    border-bottom: 4px solid #e872e2;
    min-height: 100vh;
    height: 100%;
}

#verticalcontainer {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    width: calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left));
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* Move the ThatStella7922 text down */
#master #verticalcontainer #abovelinks {
    display: block;
    margin-top: 15vh;
    font-size: 49px;
}

/* Styling for the main ThatStella7922 text */
#master #verticalcontainer #abovelinks #displayname {
    font-weight: 300;
    margin: 0 0 20px 0;
    word-break: break-all;
    color: #ffffff;
}

/* Styling for my profile picture image */
#master #verticalcontainer #abovelinks #profilepicture {
    width: 92px; /* fallback for ancient browsers */
    height: 92px; /* fallback for ancient browsers */
    width: calc(1em + 40px);
    height: calc(1em + 40px);
    object-fit: cover;
    margin: 0 0 0 0;
    transform: translateY(20px);
}

/*

Links Styling

*/
/* Maximum width for the social link div */
/* This is done so that the social link buttons and quotes text don't span across the entire width of the viewport in the case of a wide viewport */
#master #horizontalcontainer .social-links {
    max-width: 600px;
    display: inline-block;
}
/* Arrangement for the social links */
#master #horizontalcontainer .social-links .social-link-buttons p {
    padding: 0;
    margin: auto;
    display: inline-block;
}
/* Arrangement for the social section label */
#master #horizontalcontainer .social-links  {
    margin-top: 5vh;
    margin-bottom: 0;
}
/* Styling for the social links */
#master #horizontalcontainer .social-links .social-link-buttons p {
    background-color: transparent;
    border: none;
    color: white;
    padding: 9px 15px;
    margin: 4px;
    cursor: pointer;
    font-size: 100%;
}
/* Override styling for the social link anchor elements so they are not pink or underlined */
#master #horizontalcontainer .social-links .social-link-buttons p a {
    color: white;
    font-weight: normal;
    text-decoration: underline;
}

/* Arrangement for the website buttons */
#master #horizontalcontainer .links .button {
    padding: 0;
    margin: auto;
    display: inline-block;
}
/* Styling for the website link buttons (buttons pt2) */
#master #verticalcontainer #horizontalcontainer .links .button {
    /* basically make a button */
    background-color: #e872e2;
    border-radius: 25px;
    border: none;
    color: white;
    padding: 5px 25px;
    margin: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 100%;
    font-weight: normal;
}

/*

Contentview Styling

*/
#master #verticalcontainer #contentview-container {
    display: grid;
}
/* Maximum width for the contentview div */
/* This is done so that the contentview section doesn't span across the entire width of the viewport in the case of a wide viewport */
#master #verticalcontainer #contentview-container #contentview-items {
    max-width: 600px;
    display: inline-block;
}
/* Styling for all contentview headings */
#master #verticalcontainer #contentview-container #contentview-headings  {
    margin-top: 7vh;
    font-size: 18px;
    display: block;
}
/* Styling for not selected contentview headings */
#master #verticalcontainer #contentview-container #contentview-headings .contentview-notselected {
    font-weight: lighter;
    cursor: pointer;
    color:#b4b4b4
}
#master #verticalcontainer #contentview-container #contentview-headings .contentview-selected {
    font-weight: bold;
    cursor: normal;
    color: #FFFFFF;
}


/*

Cat Video Styling

*/
#master #verticalcontainer #catvideo-container {
    max-width: 600px;
    max-height: 600px;
    display: none;
    overflow: hidden;
}

#master #verticalcontainer #catvideo {
    height: 50vh;
}

#master #verticalcontainer #catvideo video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Styling for the cat video play/pause button */
#master #verticalcontainer #catvideo-container #catbuttons-container button {
    /* basically make a button */
    background-color: #e872e2;
    border-radius: 25px;
    border: none;
    color: white;
    padding: 9px 25px;
    margin: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 100%;
}


/*

NTAS Widget (see https://www.dhs.gov/ntas-widget, I added because lordofpc734 in Fruitycord thought it would be funny)

*/
#master #verticalcontainer #ntaswidget-container {
    max-width: 600px;
    max-height: 600px;
    display: none;
    overflow: hidden;
}

#master #verticalcontainer #ntaswidget {
    height: 50vh;
}

#master #verticalcontainer #ntaswidget iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Footer */
footer {
    z-index: 2;
    text-align: center;
    background-color: #1a1a1a;
}
#footer-sidebyside {
    display: inline-block;
}

/* Twemoji sizing */
img.emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.2em;
}


/* Fallback CSS for devices that don't support the "fancier" stuff below with translucency and blurs */
#master {
    /*fallback to plain black*/
    background-color: rgb(0, 0, 0);
    /*Translucent black if the browser supports it*/
    background-color: rgba(0, 0, 0, 0.15);
}

#backdrop-warning {
    display: block;
    margin: 5px;
    color: #ffffff;
    font-size: 14px;
}


/* Media query for checking if blending modes are supported */
@supports (mix-blend-mode: color-dodge) {
    #master #verticalcontainer #abovelinks #displayname {
        mix-blend-mode: color-dodge;
        color: #a2a2a2;
    }

    #backdrop-warning {
        display: none;
    }
}

/* This media query checks if the browser does the brightness filter */
@supports ((-webkit-filter: brightness(0.85)) or (-moz-filter: brightness(0.85)) or (-o-filter: brightness(0.85)) or (-ms-filter: brightness(0.85)) or (filter: brightness(0.85))) {
    #master {
        /* Unset fallback from above */
        background-color: initial;
    }

    body:before {
        /* dim the background */
        -webkit-filter: brightness(0.85);
        -moz-filter: brightness(0.85);
        -o-filter: brightness(0.85);
        -ms-filter: brightness(0.85);
        filter: brightness(0.85);
    }
    
    #backdrop-warning {
        display: none;
    }
}
  
/* Media query for screens wider than 800px */
@media screen and (min-width: 800px) {
    #master #verticalcontainer #abovelinks {
        display: flex;
        font-size: 78px;
    }

    /* Styling for the main ThatStella7922 text */
    #master #verticalcontainer #abovelinks #displayname {
        font-weight: 300;
        margin: 20px 0 20px 0;
        word-break: break-all;
    }

    /* Styling for my profile picture image */
    #master #verticalcontainer #abovelinks #profilepicture {
        width: calc(1em + 40px);
        height: calc(1em + 40px);
        object-fit: cover;
        margin: 18px 20px 0px 0;
        transform: none; /* if the browser doesn't have support for initial */
        transform: initial;
    }

    #horizontalcontainer {
        display: inline-flex;
    }

    /* Pad and ensure consistent size of the three divs */
    #master #verticalcontainer #horizontalcontainer #navigation {
        max-width: 50vw;
        padding-right: 15px;
    }
    #master #verticalcontainer #horizontalcontainer #contentview-container {
        max-width: 50vw;
        padding-right: 15px;
    }

    #master #verticalcontainer #horizontalcontainer #catvideo {
        max-width: 50vw;
        padding-right: 15px;
    }

    /* Move the ThatStella7922 text down */
    #master #verticalcontainer #abovelinks {
        margin-top: 5vh;
    }

    /* Left align the about heading on big screens */
    #master #verticalcontainer #contentview-container #contentview-headings,
    #master #verticalcontainer #contentview-container #contentview-headings #contentview-about-heading,
    #master #verticalcontainer #contentview-container #contentview-headings #contentview-projects-heading {
        margin-top: 0;
        display: flex;
    }

    /* Allow elements in the footer to sit side by side */
    #footer-sidebyside {
        display: inline-flex;
    }
}

/* dark mode styling! */
@media (prefers-color-scheme: dark) {
    /* Set the body color to a very dark gray */
    body {
        background-color: #0b0b0b;
        color:#FFFFFF;
    }

    /* Make the image darker */
    body:before {
        -webkit-filter: blur(9px) brightness(0.4);
        -moz-filter: blur(9px brightness(0.4));
        -o-filter: blur(9px) brightness(0.4);
        -ms-filter: blur(9px) brightness(0.4);
        filter: blur(9px) brightness(0.4);
    }

    /* Media query for checking if blending modes are supported
    This sets a different color in dark mode if blending is supported*/
    @supports (mix-blend-mode: color-dodge) {
        #master #verticalcontainer #abovelinks #displayname {
            mix-blend-mode: color-dodge;
            color: #d8d8d8;
        }
    }
}