diff --git a/Style-guide.md b/docs/Style-guide.md similarity index 95% rename from Style-guide.md rename to docs/Style-guide.md index 33716ee..fe57833 100644 --- a/Style-guide.md +++ b/docs/Style-guide.md @@ -1,47 +1,47 @@ -# Front-end Style Guide - -## Layout - -The designs were created to the following widths: - -- Desktop: 1440px -- iPhone: 393px -- Android: 360px - -## Colors - -### Primary - -- Yellow: hsla(40, 100%, 67%, 1) -- Orange: hsla(2, 70%, 53%, 1) -- Cyan: hsla(186, 71%, 31%, 1) -- Turquoise: hsla(194, 85%, 21%, 1) - -### Neutral - -- White: hsla(0, 0%, 100%, 1) -- Faded Gray: hsla(330, 3%, 49%, 1)) -- Dark Gray: hsla(330, 2%, 19%, 1) -- Faded Turquoise: hsla(194, 27%, 26%, 1) -- Faded Orange: hsla(2, 60%, 64%, 1) -- Faded Yellow: hsla(40, 41%, 61%, 1) -- Black: hsla(0, 0%, 0%, 1) - -## Typography - -### Body Copy - -- Font size (inputs): Varied (32, 40, 64, 128, 160...) - -### Font - -- Family: [Dokdo](https://fonts.google.com/specimen/Dokdo) -- Weight: 400 - -## Cursors - -We created two custom cursors, each in 3 color variations for the players to use during their turn. - -## Icons - +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Desktop: 1440px +- iPhone: 393px +- Android: 360px + +## Colors + +### Primary + +- Yellow: hsla(40, 100%, 67%, 1) +- Orange: hsla(2, 70%, 53%, 1) +- Cyan: hsla(186, 71%, 31%, 1) +- Turquoise: hsla(194, 85%, 21%, 1) + +### Neutral + +- White: hsla(0, 0%, 100%, 1) +- Faded Gray: hsla(330, 3%, 49%, 1)) +- Dark Gray: hsla(330, 2%, 19%, 1) +- Faded Turquoise: hsla(194, 27%, 26%, 1) +- Faded Orange: hsla(2, 60%, 64%, 1) +- Faded Yellow: hsla(40, 41%, 61%, 1) +- Black: hsla(0, 0%, 0%, 1) + +## Typography + +### Body Copy + +- Font size (inputs): Varied (32, 40, 64, 128, 160...) + +### Font + +- Family: [Dokdo](https://fonts.google.com/specimen/Dokdo) +- Weight: 400 + +## Cursors + +We created two custom cursors, each in 3 color variations for the players to use during their turn. + +## Icons + We created two custom icons which are used on the Leaderboard/History page: A rocket blasting off for a win, and a rocket crashing for a loss. But these could also be replaced by dots or other markers to represent previous game results. \ No newline at end of file diff --git a/game_page.html b/game_page.html index 65f0701..1005037 100644 --- a/game_page.html +++ b/game_page.html @@ -34,7 +34,7 @@ href="https://fonts.googleapis.com/css2?family=Dokdo&display=swap" rel="stylesheet" /> - + Array Game @@ -220,8 +220,7 @@

The Array Game

Alex, Nazgul, Gabriela, - Moriah, - John + John
@@ -244,9 +243,9 @@

The Array Game

> | - Meet Team 05 + Meet Team 05 - + diff --git a/index.html b/index.html index 40d1d11..b9bfafb 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ rel="stylesheet" /> - + Array Game @@ -50,7 +50,6 @@

The Array Game

Alex, Nazgul, Gabriela, - Moriah, John
@@ -73,6 +72,6 @@

The Array Game

| Meet Team 05 - + diff --git a/meet_team.html b/meet_team.html new file mode 100644 index 0000000..bb5a7b9 --- /dev/null +++ b/meet_team.html @@ -0,0 +1,83 @@ + + + + + + + + + Meet the team + + +
+

The Array Game

+
+
+

Chingu Team 05

+

is

+
+
+ Alex Papparotto +

developer

+
+
+ Nazgul Duisenbay +

developer

+
+
+ Gabriela de Paula +

developer

+
+
+ John Foughty +

Ux Research & Design

+
+
+
+

Acknowledgements

+ +
+ Back +
+ + + diff --git a/landingpage.css b/src/css/landingpage.css similarity index 100% rename from landingpage.css rename to src/css/landingpage.css diff --git a/src/css/meetpage.css b/src/css/meetpage.css new file mode 100644 index 0000000..5f8da63 --- /dev/null +++ b/src/css/meetpage.css @@ -0,0 +1,315 @@ +*/ *, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin +*/ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application +*/ +html, +body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults +*/ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles +*/ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows +*/ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context +*/ +#root, +#__next { + isolation: isolate; +} + +body { + display: grid; + place-items: center; + font-family: "Dokdo", cursive; + background-image: url("/docs/images/wood-grain-texture.jpg"); + background-size: cover; + text-align: center; + font-weight: 400; +} + +header { + position: absolute; + width: 100%; + height: 6em; + left: 0px; + top: 0px; + background: #177e89; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +header h1 { + margin: 0 auto; + font-style: normal; + font-weight: 400; + font-size: 60px; + line-height: 120px; + text-align: center; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +main { + margin-top: 1em; + color: #084c61; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +main p { + color: rgba(255, 200, 87, 1); + font-size: 30px; +} + +.chingu_team { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.chingu_member { + margin: 0 1em; +} +.chingu_member p, +.chingu_member a { + font-weight: bold; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); + font-size: 30px; + color: #084c61; + text-decoration: none; +} + +.chingu_member p { + font-size: 20px; +} + +.back_link { + position: relative; + top: 1.5em; + color: White; + font-size: 20px; +} +.chingu_acknowledgements h1 { + margin-top: 1em; + color: rgba(255, 200, 87, 1); +} + +ul li { + list-style: none; + color: #084c61; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); + font-size: 25px; +} + +footer { + background: #177e89; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); + position: fixed; + left: 0; + bottom: 0; + width: 100%; + text-align: center; +} + +.footer_info { + position: relative; + top: 10px; +} + +.footer_infotwo { + position: relative; + bottom: 8px; +} + +@media only screen and (max-width: 800px) { + */ *, + *::before, + *::after { + box-sizing: border-box; + } + /* + 2. Remove default margin +*/ + * { + margin: 0; + } + /* + 3. Allow percentage-based heights in the application +*/ + html, + body { + height: 100%; + } + /* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering +*/ + body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; + } + /* + 6. Improve media defaults +*/ + img, + picture, + video, + canvas, + svg { + display: block; + max-width: 100%; + } + /* + 7. Remove built-in form typography styles +*/ + input, + button, + textarea, + select { + font: inherit; + } + /* + 8. Avoid text overflows +*/ + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + } + /* + 9. Create a root stacking context +*/ + #root, + #__next { + isolation: isolate; + } + body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + header { + position: absolute; + width: 100%; + height: 6em; + left: 0px; + top: 0px; + background: #177e89; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); + } + + header h1 { + margin: 0 auto; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 120px; + text-align: center; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); + } + .chingu_team { + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + main h1 { + margin: 0; + font-size: 25px; + } + main p { + color: rgba(255, 200, 87, 1); + font-size: 25px; + } + .chingu_member p, + .chingu_member a { + font-size: 15px; + color: white; + } + + ul li { + font-size: 15px; + } + .back_link { + position: relative; + top: 0.2em; + color: White; + font-size: 20px; + } + footer { + background: #177e89; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), + 0px 4px 4px rgba(0, 0, 0, 0.25); + position: fixed; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + } + + .footer_info { + position: relative; + top: 10px; + } + + .footer_infotwo { + position: relative; + bottom: 8px; + } +} diff --git a/style.css b/src/css/style.css similarity index 100% rename from style.css rename to src/css/style.css diff --git a/app.js b/src/js/app.js similarity index 100% rename from app.js rename to src/js/app.js