diff --git a/styles.css b/styles.css index 0ca9c725cb4999f8e77fbbd6182936519bbec202..297eabe30f23fcae1468324d5bb853348a3ac41b 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,4 @@ -/* Globals */ +/*** Globals ***/ :root { /** This is the primary background colour for the website **/ @@ -6,7 +6,6 @@ --main-dark: #03080c; /** These are colours used for the main sections of the website **/ - /* USAGE: index.html:about && location.html:directions */ --section-blue: #194263; @@ -38,7 +37,8 @@ /** Blue accent colours used across website **/ /* USAGE: - index.html:sign-up-form > sign up button + index.html:hero > text + && index.html:sign-up-form > sign up button && about.html:hero > hyperlinks && about.html:about > hyperlinks && rules.html:rules > hyperlinks @@ -49,9 +49,21 @@ /* USAGE: index.html:sign-up-form > sign up button:active && location.html:directions > sign up button:active */ --accent-blue-lighter: #54ffff; - /* USAGE: All visited hyperlinks */ + /* USAGE: All pages:visited hyperlinks */ --accent-baby-blue: #c1ffff; - /* USAGE: Footer Background Colour */ + /** Purple accent colour used on homepage **/ + /* USAGE: index.html:hero > text */ + --accent-purple: #b144c4; + + /** Purple background colour for footer **/ + /* USAGE: All pages:footer */ --footer-purple: #1f172c; } + +@media only screen and (min-width: 1024px) { + section, header, footer { + /* Restrict content of website to max 1024px */ + padding-block: calc((100vw - 1024px) / 2); + } +} \ No newline at end of file