From c273c5d72d875edf7044f305d8c51a54c252bdd9 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Wed, 23 Aug 2017 01:00:33 -0500 Subject: [PATCH 01/10] Updated the index and style sheets for the Viking Code School project 1. --- index.html | 5 ++- style.css | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 112 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3a88ff2..b3525a9 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,9 @@ Viking CSS Garden - + + + @@ -77,4 +79,3 @@

Other Gardens

- diff --git a/style.css b/style.css index 64192bc..ae25586 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,115 @@ -/* ----------------------------------- * - * Your Styles Here - * ----------------------------------- */ +body { + background-color: #EACC7E; +} +body::before, body::after { + clear:both; +} +h1 { + font-family: tangerine, cursive; + font-size: 4em; + font-weight: bold; + color: maroon; +} +header h2 { + font-family: tangerine, cursive; + font-size: 2.5em; + font-weight: 900; + color: maroon; + padding: 0px; + margin: 0px; +} +h2 { + font-family: tangerine, serif; + color: black; + font-weight: bold; + font-size: 2.5em; + padding: 10px 0px 10px 5px; +} +header { + max-width: 100%; + text-align: center; + margin: auto; + padding: 25px; + background-color: #9aa864; + position: relative; +} +.site-title { + position: relative; + padding: 10px; + width: 100%; + margin: 0px; +} +.tagline { + display: absolute; + margin: auto; + width: 100%; +} +main { + max-width: 66%; + margin: 0px 0px 0px 0px; + float: right; + background-color: #eeeeee; + padding: 10px; - \ No newline at end of file +} + +article { + max-width: inherit; +} + +aside { + margin: 0px; + padding: 40px; + background-color: #c54444; + position: relative; + text-align: center; + max-width: 200px; +} + +.section-title { + margin: 0px 10px 10px 5px; +} + +li { + list-style-type: none; + margin: 0px 10px 0px -10px; + padding: 0px 0px 0px 1px; + text-align: left; + font-size: 1em; +} +a:link { + color: black; + position: relative; + text-decoration: underline; + text-align: left; +} +a:visited { + color: maroon; +} +a:hover { + color: maroon; +} + +aside h2 { + font-weight: bold; + color: black; + padding: 5px 0px 0px 0px; + margin: 0px; +} +p:first-letter { + font-family: raleway, serif; + font-size: 1.55em; + color: black; + font-weight: bold; + padding: 0px; +} +p { + font-family: raleway, serif; + line-height: 1.5em; + padding: 5px 0px 0px 5px; +} From c2feca15bffcf6c3a3f2399cd4bf883ee3cd2e80 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Wed, 23 Aug 2017 02:07:59 -0500 Subject: [PATCH 02/10] Updated Index and Style for Viking Assignment. --- index.html | 9 ++++--- style.css | 71 +++++++++++++++++++++++++++++------------------------- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index b3525a9..8a68dd7 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

A place for your styling creativity to grow

+

Growing Your Garden

@@ -44,11 +45,11 @@

Norse mythology

- From Norse Mythology
-
+ -
+
diff --git a/style.css b/style.css index ae25586..cadb252 100644 --- a/style.css +++ b/style.css @@ -2,10 +2,6 @@ body { background-color: #EACC7E; } -body::before, body::after { - clear:both; -} - h1 { font-family: tangerine, cursive; font-size: 4em; @@ -18,8 +14,8 @@ header h2 { font-size: 2.5em; font-weight: 900; color: maroon; - padding: 0px; - margin: 0px; + padding: 0; + margin: 0; } h2 { @@ -27,65 +23,71 @@ h2 { color: black; font-weight: bold; font-size: 2.5em; - padding: 10px 0px 10px 5px; + padding: 10px 0 0 20px; } header { - max-width: 100%; + max-width: 940px; text-align: center; margin: auto; - padding: 25px; + padding: 0; background-color: #9aa864; - position: relative; + padding: 0 0 20px 0; +} + +.main-box { + width: 940px; + margin: auto; + padding: 0; } .site-title { position: relative; - padding: 10px; + padding: 20px 0 20px 0; width: 100%; - margin: 0px; + margin: 0; } .tagline { - display: absolute; margin: auto; width: 100%; } main { - max-width: 66%; - margin: 0px 0px 0px 0px; + max-width: 70%; + margin: 0; float: right; background-color: #eeeeee; - padding: 10px; - -} - -article { - max-width: inherit; + padding: 0; } aside { - margin: 0px; - padding: 40px; + padding: 25px; background-color: #c54444; - position: relative; + float: left; text-align: center; - max-width: 200px; + max-width: 33%; } .section-title { - margin: 0px 10px 10px 5px; + margin: auto; +} + +article { + max-width:90%; + text-align: left; + padding: 0 0 0 15px; } li { list-style-type: none; - margin: 0px 10px 0px -10px; - padding: 0px 0px 0px 1px; + font-family: raleway, serif; + margin: 0 30px 0 0; + padding: 5px 0 5px 0; text-align: left; font-size: 1em; } a:link { color: black; position: relative; - text-decoration: underline; + text-decoration: none; text-align: left; } a:visited { @@ -98,18 +100,21 @@ a:hover { aside h2 { font-weight: bold; color: black; - padding: 5px 0px 0px 0px; - margin: 0px; + padding: 5px 0 0 0; + margin: 0; } p:first-letter { font-family: raleway, serif; font-size: 1.55em; color: black; font-weight: bold; - padding: 0px; + padding: 0; } p { font-family: raleway, serif; line-height: 1.5em; - padding: 5px 0px 0px 5px; + padding: 5px 0 0 5px; +} +footer { + clear: both; } From 5d69f8b85a61eea5e17b2b05ea1040c5e65ee276 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Wed, 23 Aug 2017 10:38:07 -0500 Subject: [PATCH 03/10] changed max-width to width on the header --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index cadb252..91caacf 100644 --- a/style.css +++ b/style.css @@ -27,7 +27,7 @@ h2 { } header { - max-width: 940px; + width: 940px; text-align: center; margin: auto; padding: 0; From 8cce3cd98bfd7998a6e746e8dc7cd3293f0897c3 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Wed, 23 Aug 2017 23:31:29 -0500 Subject: [PATCH 04/10] Flexbox Branch, Flexbox styling beginning --- style.css | 138 ++++++++++++------------------------------------------ 1 file changed, 29 insertions(+), 109 deletions(-) diff --git a/style.css b/style.css index 91caacf..16eea1f 100644 --- a/style.css +++ b/style.css @@ -1,120 +1,40 @@ -body { - background-color: #EACC7E; -} - -h1 { - font-family: tangerine, cursive; - font-size: 4em; - font-weight: bold; - color: maroon; -} - -header h2 { - font-family: tangerine, cursive; - font-size: 2.5em; - font-weight: 900; - color: maroon; - padding: 0; - margin: 0; -} - -h2 { - font-family: tangerine, serif; - color: black; - font-weight: bold; - font-size: 2.5em; - padding: 10px 0 0 20px; -} - -header { - width: 940px; - text-align: center; - margin: auto; - padding: 0; - background-color: #9aa864; - padding: 0 0 20px 0; -} - -.main-box { - width: 940px; - margin: auto; - padding: 0; -} -.site-title { - position: relative; - padding: 20px 0 20px 0; +#main-header { + display: inline-flex; + flex-direction: row; + flex-wrap: nowrap; width: 100%; - margin: 0; + height: 200px; + background-color: beige; + font-family: tangerine; + font-size: 3em; } -.tagline { +.site-title { + order: 1; + flex-grow: 2; margin: auto; - width: 100%; -} -main { - max-width: 70%; - margin: 0; - float: right; - background-color: #eeeeee; - padding: 0; -} - -aside { - padding: 25px; - background-color: #c54444; - float: left; text-align: center; - max-width: 33%; } - -.section-title { +.tagline { + order: 2; + flex-grow: 1; margin: auto; + text-align: center; } - -article { - max-width:90%; - text-align: left; - padding: 0 0 0 15px; -} - -li { - list-style-type: none; - font-family: raleway, serif; - margin: 0 30px 0 0; - padding: 5px 0 5px 0; - text-align: left; - font-size: 1em; -} -a:link { - color: black; - position: relative; - text-decoration: none; - text-align: left; -} -a:visited { - color: maroon; +.main-box { + diplay: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + border: 2px solid black; } -a:hover { - color: maroon; +#sidebar { + order: 2; + flex-grow: 1; + width: auto; } +#main-content { + order: 4; + flex-grow: 3; + width: auto; -aside h2 { - font-weight: bold; - color: black; - padding: 5px 0 0 0; - margin: 0; -} -p:first-letter { - font-family: raleway, serif; - font-size: 1.55em; - color: black; - font-weight: bold; - padding: 0; -} -p { - font-family: raleway, serif; - line-height: 1.5em; - padding: 5px 0 0 5px; -} -footer { - clear: both; } From 1602d92a8e33a0ca4998b435cb7c7eb3833202f3 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 08:20:57 -0500 Subject: [PATCH 05/10] Added FlexBox and Styling to Viking CSS page. --- style.css | 66 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 53 insertions(+), 13 deletions(-) diff --git a/style.css b/style.css index 16eea1f..3c938d8 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,15 @@ +body { + background: linear-gradient(to bottom, beige, white); +} #main-header { display: inline-flex; flex-direction: row; - flex-wrap: nowrap; + flex-wrap: wrap; width: 100%; - height: 200px; - background-color: beige; + height: auto; font-family: tangerine; font-size: 3em; + background: linear-gradient(to bottom, #B78E3D, beige) } .site-title { order: 1; @@ -22,19 +25,56 @@ } .main-box { diplay: flex; - flex-direction: row; - flex-wrap: nowrap; - width: 100%; - border: 2px solid black; + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: center; } #sidebar { order: 2; - flex-grow: 1; - width: auto; + margin: 0; + text-align: center; +} +aside h2 { + display: inline-block; + margin: 0; + font-family: raleway, serif; + padding: 20px 0 0 0; +} +li { + font-family: raleway, serif; + display: inline-block; + text-decoration: none; + order: 3; + margin: 0; + background: linear-gradient(to top, #B78E3D, beige); + margin: 0px; + width: 150px; + height: 20px; +} +#section-title { + order: 2; +} +li a { + text-decoration: none; + font-family: Raleway, serif; + color: black; +} +li:hover { + background: linear-gradient(to top, #926A1B, beige) } #main-content { - order: 4; - flex-grow: 3; - width: auto; - + order: 1; + width: 66%; + text-align: center; + font-family: raleway, serif; + line-height: 1.5em; } From 0c8242dfeaa29eaa4fc301d1c66482a05cbc318a Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 08:24:01 -0500 Subject: [PATCH 06/10] aside h2 changes --- style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 3c938d8..57092ca 100644 --- a/style.css +++ b/style.css @@ -46,8 +46,9 @@ body { aside h2 { display: inline-block; margin: 0; - font-family: raleway, serif; - padding: 20px 0 0 0; + font-family: tangerine, serif; + font-size: 2.25em; + padding: 30px 0 0 0; } li { font-family: raleway, serif; From 20d906b53515d177d09fa125e388f856c5881a2f Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 08:28:12 -0500 Subject: [PATCH 07/10] Added name to readme file --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 7bc2383..f30fed7 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,9 @@ assignment_viking_css_garden A place for your styling creativity to grow +James Cosgrove +J.Cosgrove88@icloud.com + **NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.* From dd430a622a0dd3f52539c4fdd16eaea6c996e145 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 10:49:24 -0500 Subject: [PATCH 08/10] Stylesheet update --- style.css | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 57092ca..0c4b5eb 100644 --- a/style.css +++ b/style.css @@ -7,14 +7,15 @@ body { flex-wrap: wrap; width: 100%; height: auto; - font-family: tangerine; - font-size: 3em; + font-family: tangerine, cursive; + font-size: 2.75em; background: linear-gradient(to bottom, #B78E3D, beige) } .site-title { order: 1; flex-grow: 2; margin: auto; + padding: 20px 0 0 0; text-align: center; } .tagline { @@ -22,11 +23,12 @@ body { flex-grow: 1; margin: auto; text-align: center; + padding: 20px 40px 0 0; } .main-box { diplay: flex; padding: 0; - margin: 0; + margin: auto; list-style: none; display: -webkit-box; @@ -37,12 +39,19 @@ body { -webkit-flex-flow: row wrap; justify-content: center; + max-width: 1028px; } #sidebar { order: 2; margin: 0; text-align: center; } +section h2 { + margin: 50px 0 0 0; + font-family: raleway, serif; + font-size: 1.75em; + +} aside h2 { display: inline-block; margin: 0; @@ -74,7 +83,7 @@ li:hover { } #main-content { order: 1; - width: 66%; + max-width: 1028px; text-align: center; font-family: raleway, serif; line-height: 1.5em; From c9a5fd9fd45d4d947fac861fbcd708f3f9d27151 Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 12:38:56 -0500 Subject: [PATCH 09/10] Small changes --- style.css | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index 0c4b5eb..1e90cfa 100644 --- a/style.css +++ b/style.css @@ -39,7 +39,7 @@ body { -webkit-flex-flow: row wrap; justify-content: center; - max-width: 1028px; + max-width: 1200px; } #sidebar { order: 2; @@ -64,12 +64,20 @@ li { display: inline-block; text-decoration: none; order: 3; - margin: 0; background: linear-gradient(to top, #B78E3D, beige); - margin: 0px; + margin: 0 0 100px 0; width: 150px; - height: 20px; + height: 25px; + border-bottom: 2px solid #926A1B; + +} +li:hover { + background: linear-gradient(to top, #926A1B, beige) +} +li:visited { + background: linear-gradient(to top, #926A1B, beige) } + #section-title { order: 2; } @@ -78,13 +86,16 @@ li a { font-family: Raleway, serif; color: black; } -li:hover { - background: linear-gradient(to top, #926A1B, beige) -} + #main-content { order: 1; - max-width: 1028px; + max-width: 900px; text-align: center; font-family: raleway, serif; line-height: 1.5em; } + +.main-content:first-child { + width: 50%; + +} From 5e7d3c1536c8f044242c24cb949d11d3e6b9750e Mon Sep 17 00:00:00 2001 From: Seamus88 Date: Sat, 26 Aug 2017 12:46:36 -0500 Subject: [PATCH 10/10] Changes before creating a new branch. --- style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/style.css b/style.css index 1e90cfa..5fee9ca 100644 --- a/style.css +++ b/style.css @@ -94,8 +94,3 @@ li a { font-family: raleway, serif; line-height: 1.5em; } - -.main-content:first-child { - width: 50%; - -}