diff --git a/styles.css b/styles.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0ca9c725cb4999f8e77fbbd6182936519bbec202 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,57 @@ +/* Globals */ + +: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: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 visited hyperlinks */ + --accent-baby-blue: #c1ffff; + + /* USAGE: Footer Background Colour */ + --footer-purple: #1f172c; +}