Select Git revision
-
Cole2.Hansen@live.uwe.ac.uk authoredCole2.Hansen@live.uwe.ac.uk authored
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;
}
}