Skip to content
Snippets Groups Projects
Select Git revision
  • 22ca39cc00193a474255486f0f025cf3de368df4
  • main default protected
2 results

main.c

Blame
  • styles.css 19.22 KiB
    /*** CREDITS ***/
        /** Dynamic text sizes calculated using https://clamp.font-size.app **/
    
    /* Base stylesheet is for desktop, media queries alter layout for tablet and mobile */
    
    /*** Font Imports ***/
    
        /* Poppins Bold Font Import */
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
    
        /* Segoe UI Semilight Configuration */
        @font-face {
        font-family: "Segoe UI";
        font-weight: 300;
        src: local("Segoe UI Semilight");
        }
    
    /*** Global Styles ***/
    
        :root {
            /** This is the primary background colour for the website **/
                /* USAGE: index.html:hero && rules.html:rules && All borders */
                    --main-dark: #03080c;
    
            /** These are colours used for the main sections of the website **/
                /* USAGE: index.html:about && location.html:directions */
                    --section-blue: #194263;
    
                /* USAGE: index.html:sign-up-form && location.html:map */
                    --section-pink: #fb5aba;
    
                /* USAGE: rules.html:rules */ 
                    --section-baby-pink: #fd98d4;
    
                /* USAGE: about.html:hero */
                    --section-purple: #6e539a;
    
                /* USAGE: about.html:about */
                    --section-purple-saturated: #6f277b;
    
            /** The colour of checked items in the sign up form **/
                /* USAGE: index.html:sign-up-form > online-in-person && index.html:sign-up-form > interests */
                    --form-filled: #2c74ae;
    
            /** Pink accent colours used across website **/
                /* USAGE: index.html:hero > sign up button && rules.html:rules > sign up button */
                    --accent-pink: #c30576;
    
                /* USAGE: index.html:hero > sign up button:active && rules.html:rules > sign up button:active */
                    --accent-pink-lighter: #fa2aa6;
                
                /* USAGE: index.html:about > hyperlinks && locations.html:directions > hyperlinks */
                    --accent-baby-pink: #fd98d4;
    
            /** Blue accent colours used across website **/
                /* USAGE: 
                        index.html:hero > text
                        && index.html:sign-up-form > sign up button 
                        && about.html:hero > hyperlinks 
                        && about.html:about > hyperlinks 
                        && rules.html:rules > hyperlinks 
                        && location.html:directions > selected tab + sign up button
                */
                    --accent-blue: #00eded;
    
                /* USAGE: index.html:sign-up-form > sign up button:active && location.html:directions > sign up button:active */
                    --accent-blue-lighter: #54ffff;
                
                /* USAGE: All pages:visited hyperlinks */
                    --accent-baby-blue: #c1ffff;
    
            /** Purple accent colour used on homepage **/
                /* USAGE: index.html:hero > text */
                    --accent-purple: #b144c4;
    
            /** Purple background colour for footer **/
                /* USAGE: All pages:footer && All pages:main navigation on mobile */
                    --footer-purple: #1f172c;
        }
    
        * {
            margin: 0;
            padding: 0;
    
            box-sizing: border-box;
        }
    
        html {
            background-color: var(--main-dark);
    
            font-family: "Segoe UI", sans-serif;
    
            scroll-behavior: smooth;
        }
    
        section {
            /* Creates border present between all sections */
                border-bottom: var(--main-dark) .25rem solid;
        }
    
        footer {
            background-color: var(--footer-purple);
        }
    
        section, header, footer {
            padding: 2rem;
        }
    
        header {
            padding-block: 1rem;
        }
    
        h1, h2, h3, h4, h5, h6 {
            margin-bottom: .5em;
    
            font-family: "Poppins", sans-serif;
        }
    
        h2 {
            font-size: clamp(1.75rem, 0.8917rem + 3.8147vw, 3.3331rem);
        }
    
        p {
            margin-bottom: 1em;
        }
    
        a {
            color: var(--accent-blue);
            text-decoration: none;
        }
    
        #home__about a, #locations__directions a {
            color: var(--accent-baby-pink);
        }
    
        a:visited, #home__about a:visited, #locations__directions a:visited {
            color: var(--accent-baby-blue);
        }
    
        ul {
            list-style-type: none;
        }
    
        img {
            max-width: 100%;
    
            /* Creates border present around majority of images */
                border: var(--main-dark) solid;
                border-width: .3rem .45rem .45rem .3rem;
    
            object-fit: cover;
        }
    
        button {
            border: none;
    
            cursor: pointer;
        }
    
    /*** Icons ***/
    
        /** Define extendable icon class **/
        /** Icons created using mask can easily have their colour and size manipulated relative to their label **/
            span[class|="icon"] {
                display: inline-block;
    
                height: 1em;
                width: 1em;
    
                margin-right: .5em;
    
                background-color: #fff;
    
                transform: translateY(15%);
    
                -webkit-mask-size: contain;
                mask-size: contain;
            }
    
        /** Navigation **/
            .icon--home {
                -webkit-mask: url("assets/icons/house-solid.svg") no-repeat;
                mask: url("assets/icons/house-solid.svg") no-repeat;
            }
          
            .icon--about {
                -webkit-mask: url("assets/icons/circle-info-solid.svg") no-repeat;
                mask: url("assets/icons/circle-info-solid.svg") no-repeat;
            }
    
            .icon--rules {
                -webkit-mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
                mask: url("assets/icons/clipboard-list-solid.svg") no-repeat;
            }
    
            .icon--location {
                -webkit-mask: url("assets/icons/location-dot-solid.svg") no-repeat;
                mask: url("assets/icons/location-dot-solid.svg") no-repeat;
            }
    
        /** Social **/
    
            .icon--twitter {
                -webkit-mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
                mask: url("assets/icons/twitter-logo-white.svg") no-repeat;
            }
    
            .icon--insta {
                -webkit-mask: url("assets/icons/insta-logo-white.svg") no-repeat;
                mask: url("assets/icons/insta-logo-white.svg") no-repeat;
            }
    
            .icon--fb {
                -webkit-mask: url("assets/icons/fbook-logo.svg") no-repeat;
                mask: url("assets/icons/fbook-logo.svg") no-repeat;
            }
    
        /** Links **/
            /* Add open in new tab icon for target blank links */
                a[target="_blank"]::after {
                    content: "";
                    -webkit-mask: url("assets/icons/up-right-from-square-solid.svg");
                    mask: url("assets/icons/up-right-from-square-solid.svg");
                    -webkit-mask-size: contain;
                    mask-size: contain;
    
                    background-color: var(--accent-blue);
    
                    display: inline-block;
    
                    margin-left: .2em;
    
                    height: .5em;
                    width: .5em;
    
                    transform: translateY(-50%);
                }
    
            /* Remove any external link icons from btns and social icons in footer */
                a[class|="btn"]::after, #socials a::after {
                    mask: none;
                    margin: 0;
                    height: 0;
                    width: 0;
                }
            
                #home__about a[target="_blank"]::after, #locations__directions a[target="_blank"]::after {
                    background-color: var(--accent-baby-pink);
                }
            
                a:visited::after, #home__about a:visited::after, #locations__directions a:visited::after {
                    background-color: var(--accent-baby-blue);
                }
    
    /*** Buttons ***/
        /** Define extendable btn class **/
            a[class|="btn"],
            button[class|="btn"] {
                position: relative;
    
                display: flex;
                align-items: center;
                justify-content: center;
    
                height: 2.5rem;
                width: 35%;
                max-width: 14rem;
                min-width: 8rem;
    
                margin: 5%;
    
                color: white;
                font-size: 1rem;
            }
    
        /** Main Site Buttons **/
    
            .btn--primary {
                box-shadow: .25rem .25rem 0 white;
    
                background-color: var(--accent-pink);
            
                font-family: "Poppins", sans-serif;
            
                transition: all .25s;
                text-transform: uppercase;
            }
            
            .btn--primary:hover {
                box-shadow: 0 0 0 white;
            }
            
            .btn--primary:active {
                background-color: var(--accent-pink-lighter);
            }
            
            /* Button outline on click */
            .btn--primary::after {
                content: "";
                position: absolute;
            
                transition: all .025s;
                transform: scale(.85);
            }
            
            .btn--primary:active::after {
                height: 3.5rem;
                width: 110%;
                max-width: 15rem;
                min-width: 9rem;
                border: .25rem solid var(--accent-pink-lighter);
                border-radius: .2rem;
            
                transform: scale(1);
            }
            
            /* Modifiers for blue button */
                .btn--primary.blue {
                    background-color: var(--accent-blue);
                    box-shadow: .25rem .25rem 0 var(--main-dark);
                
                    color: var(--main-dark);
                }
                
                .btn--primary.blue:hover {
                    box-shadow: 0 0 0 var(--main-dark);
                }
                
                .btn--primary.blue:active {
                    background-color: var(--accent-blue-lighter);
                }
                
                .btn--primary.blue:active::after {
                    border: .25rem solid var(--accent-blue-lighter);
                }
        
        /** Twitter Button **/
            /* Twitter Share Button */
                .btn--twitter {
                    border-radius: 1.25rem;
    
                    background-color: #1d9bf0;
                    box-shadow: none;
    
                    font-family: "Segoe UI", sans-serif;
                }
    
                .btn--twitter:hover {
                    background-color: #62c0ff;
                }
    
                .btn--twitter:active {
                    background-color: #1077bb;
                }
    
    /*** Reusable Styles ***/
        /** Hero **/
            /* USAGE: index.html && about.html */
                .hero {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-gap: 2rem;
    
                    min-height: 90vh;
    
                    padding-top: 0;
                }
    
                .hero article {
                    display: grid;
                    grid-auto-rows: auto;
                }
    
                .hero article > * {
                    display: flex;
    
                    justify-content: space-evenly;
                }
    
                .hero > img {
                    height: 100%;
                }
    
    
    /*** Main Navigation Styles ***/
    
        #main-navigation {
            /* This will apply when the js script applies position:sticky on scroll */
                top: -100%;
                z-index: 3;
    
            display: flex;
            justify-content: flex-end;
            align-items: center;
    
            background-color: var(--main-dark);
    
            transition: all .3s;
        }
    
        #main-navigation img {
            width: calc(100%/3);
            min-width: calc(64em/6);
    
            border: none;
    
            margin-right: auto;
        }
    
        #main-navigation .navbar {
            display: flex;
        }
    
        #main-navigation .navbar li {
            padding: 1em .5em;
        }
    
        #main-navigation .navbar a {
            color: white;
        }
    
        #main-navigation .navbar a:hover,
        #main-navigation .navbar a[aria-current="page"] {
            color: var(--accent-pink);
        }
    
        #main-navigation .navbar a:hover span[class|="icon"],
        #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
            background-color: var(--accent-pink);
        }
    
        /** Toggleable class used to show and hide navbar **/
            #main-navigation.show {
                top: 0;
            }
    
        /** Hamburger button for tablet **/
            .hamburger {
                position: fixed;
                top: 1.5rem;
                right: 1.5rem;
    
                display: none;
    
                width: 2.5rem;
    
                background-color: transparent;
            }
    
        /** Create the bars of the hamburger button **/
            div[class|="hamburger"] {
                width: 100%;
                height: .3rem;
    
                margin-bottom: .5rem;
    
                border-radius: .15rem;
    
                background-color: white;
    
                box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41);
            }
    
    /*** Footer Styles ***/
        footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1em;
    
            color: white;
        }
    
        footer p {
            margin: 0;
        }
    
        footer a {
            text-decoration: underline;
        }
    
        footer a, footer a:visited {
            color: white;
        }
    
        footer ul {
            display: flex;
            flex-wrap: wrap;
        }
    
        footer ul li {
            margin-right: 1em;
        }
    
        footer ul li span[class|="icon"] {
            margin: 0;
        }
    
    /*** Homepage Styles ***/
        /** Hero Section **/
            #home .hero {
                padding-right: 0;
                padding-bottom: 0;
    
                text-align: center;
                font-size: 2rem;
            }
    
            #home .hero img {
                border: none;
            }
    
            #home .hero article {
                display: grid;
                grid-gap: 1em;
    
                color: var(--accent-purple);
            }
    
            #home .hero article p {
                margin: 0;
            }
    
            /* Control size of logo on homepage */
                #home .hero article > img {
                    max-width: 25rem;
                    width: 100%;
    
                    margin: 0 auto;
                }
    
            #home .hero article div:last-of-type {
                flex-wrap: wrap;
                gap: 1em;
    
                padding-bottom: 2rem;
    
                color: var(--accent-blue);
                font-size: 1.2rem;
            }
    
            #home .hero article div:last-of-type img {
                width: 50%;
                min-width: 12.5rem;
    
                background-color: white;
    
                object-fit: initial;
            }
    
        /** About Section **/
            #home__about {
                background-color: var(--section-blue);
    
                color: white;
            }
    
            .grid-2x2 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, min-content);
                grid-gap: 1em;
            }
    
            .grid-2x2 img {
                width: 100%;
                /* This trick makes the image height correspond to the text height instead of vice versa */
                    height: 0;
                    min-height: 100%;
            }
    
    
    /* 64em == 1024px */
    @media only screen and (min-width: 64em) {
        /*** Global Styles ***/
            section, header, footer, #home .hero {
                /* Restrict content of website to max 64em */
                    padding-inline: calc((100vw - 64rem + 2rem) / 2);
            }
    }
    
    /* 37.5625em == 601px */
    @media only screen and (max-width: 37.5625em) {
        /*** Global Styles -- Tablet ***/
            h2 {
                text-align: center;
            }
        /*** Reusable Styles -- Tablet ***/
            /** Hero **/
                /* USAGE: index.html && about.html */
                .hero {
                    grid-template-columns: 1fr;
                }
    
        /*** Main Navigation Styles ***/
            #main-navigation nav {
                position: fixed;
                top: 0;
                left: -100vw;
                z-index: 2;
    
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
    
                visibility: hidden;
    
                width: 100vw;
                height: 100vh;
    
                background-color: inherit;
    
                transition: all .3s;
            }
    
            #main-navigation.show nav {
                left: 0;
    
                visibility: initial;
            }
    
            #main-navigation .navbar {
                flex-direction: column;
    
                font-size: 1.75rem;
            }
    
            .hamburger {
                z-index: 3;
                display: initial;
            }
    
        /*** Homepage Styles ***/
            /** Hero Section **/
                #home .hero {
                    padding: 2rem;
                }
    
                #home .hero > img {
                    display: none;
                }
    
                #home .hero article div:last-of-type {
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: center;
    
                    padding-bottom: 0;
                }
    
            /** About Section **/
                .grid-2x2 {
                    grid-template-columns: 1fr;
                    grid-template-rows: repeat(3, auto);
                    grid-gap: 0;
                }
    
                .grid-2x2 img:first-of-type {
                    order: 3;
                    height: 100%;
                }
    
                .grid-2x2 img:last-of-type {
                    display: none;
                }
    }
    
    /* 22.5em == 360px */
    @media only screen and (max-width: 22.5em) {
        /*** Global Styles -- Mobile ***/
        /*** Main Navigation Styles ***/
            #main-navigation nav {
                /* Remove styles set for tablet */
                    all: unset;
                position: fixed;
                bottom: 0;
                right: 0;
                z-index: 2;
            }
    
            #main-navigation .navbar {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
    
                border-top: var(--main-dark) .1rem solid;
    
                width: 100vw;
                height: 3rem;
    
                background-color: var(--footer-purple);
            }
    
            #main-navigation .navbar li {
                padding: 0;
    
                border-right: var(--main-dark) .1rem solid;
            }
    
            #main-navigation .navbar li:last-of-type {
                border-right: none;
            }
    
            #main-navigation .navbar a {
                display: flex;
                justify-content: center;
                align-items: center;
    
                width: 100%;
                height: 100%;
    
            }
    
            #main-navigation .navbar span[class|="icon"] {
                /* Remove margin so icons are centred properly */
                    margin: 0;
    
                font-size: 1.5rem;
    
                /* Remove transform so icons are centred properly */
                    transform: translateY(0);
            }
    
            /** Reset anchor tag styles in nav because the list background should be coloured instead **/
                #main-navigation .navbar a:hover,
                #main-navigation .navbar a[aria-current="page"] {
                    color: white;
                }
    
                #main-navigation .navbar a:hover span[class|="icon"],
                #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
                    background-color: white;
                }
    
            /** Hover and current page states **/
                #main-navigation .navbar a:hover,
                #main-navigation .navbar a[aria-current="page"] {
                    background-color: var(--accent-pink);
                }
    
            .hideable-text {
                display: none;
            }
    
            .hamburger {
                display: none;
            }
    
        /*** Footer Styles ***/
            footer {
                display: grid;
                grid-template: repeat(2, auto) / repeat(2, 1fr);
                gap: 0;
    
                padding: 0;
                /* Space for navbar */
                    padding-bottom: 3rem;
            }
    
            footer > * {
                justify-content: flex-end;
                padding: 2rem;
            }
    
            #sitemap {
                grid-area: 1 / 1 / span 1 / span 2;
                border-bottom: 0.2rem solid var(--main-dark);
            }
    
            #sitemap ul {
                flex-direction: column;
                align-items: center;
                gap: 1em;
            }
    }