From a3736563420ede5bf554813e4df50ca1bff77543 Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Sat, 7 Oct 2017 23:35:01 -0400 Subject: [PATCH 01/10] finished project --- README.md | 7 ++ blog_mockup_narrow.png | 0 blog_mockup_wide.png | 0 index.html | 104 +++++++++++++++++ style.css | 260 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 371 insertions(+) create mode 100644 README.md create mode 100644 blog_mockup_narrow.png create mode 100644 blog_mockup_wide.png create mode 100644 index.html create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 00000000..ac3aabf8 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +assignment_markup_warmup_sprint +=============================== + +And 1 and 2! And 1, and 2...! +[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) + +Brennan Fulmer diff --git a/blog_mockup_narrow.png b/blog_mockup_narrow.png new file mode 100644 index 00000000..e69de29b diff --git a/blog_mockup_wide.png b/blog_mockup_wide.png new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..6b847468 --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ + + + + + The Lorem Ipsum Blog Page + + + + +
+ The Lorem Micro Blog +
+ +
+
+ Check out my vertically centered ad! +
+
+
+
+ +

+

+ The Lorem Micro Blog +
+ By Foo Bar +

+

+ +
+

+ A Most Posty Post +

+

+ Written 1/3/2000 +

+

+ First Thoughts... +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +

+
+

+ Additional Thoughts... +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +

+
+ +
+

+ Another Posty Post +

+

+ Written 1/2/2000 +

+

+ Only Thoughts... +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +

+
+ +
+

+ A Posty Post +

+

+ Written 1/1/2000 +

+

+ Be it Resolved +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est +

+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..465333ba --- /dev/null +++ b/style.css @@ -0,0 +1,260 @@ +/* Start of CSS Reset */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* End of CSS Reset */ + +.blue { + background-color: rgb(133, 198, 238); +} + +.absolute { + position: absolute; +} + +.bordery { + border: medium solid black; +} + +.curved { + border-radius: 12px; +} + +.boldy { + font-weight: bold; +} + +.third { + width: 230px; +} + +.wordy { + line-height: 110%; +} + +.fonty24px { + font-size: 24px; +} + +.fonty18px { + font-size: 18px; +} + +.postparamargin { + margin: 6px 14px -9px; +} + +header { + background-color: rgb(246, 248, 124); + position: fixed; + width: 100%; + padding: 12px 0px 12px 12px; + z-index: 99; + font-size: 22px; +} + +.purplecanvas { + background-color: rgb(238, 133, 234); + height: 500px; + top: 50%; + transform: translate(-50%, -50%); + left: 125px; + z-index: 100; +} + +.message { + margin-top: 50%; + text-align: center; +} + +.box { + height: 185px; + width: 185px; + background-color: white; + border: medium solid black; + margin: 71% 50% 50% 8.4%; + position: relative; +} + +.box::after { + content: "\d7"; + color: black; + display:flex; + justify-content:center; + align-items:center; + width: 100%; + height: 100%; + font-size: 480px; +} + +h1 { + background-color: rgb(168, 243, 134); + width: 716px; + height: 95px; + margin: 58.3px 250px 1020px; + text-align: center; + font-size: 22px; + font-style: italic; + display: table; +} + +.title { + display: table-cell; + vertical-align: middle; + text-align: center; + line-height: 140%; +} + +.title::first-line { + font-size: 30px; + font-weight: bold; + font-style: normal; +} + +h2 { + text-align: center; + margin: 12px 0px 8px; +} + +h4 { + text-align: center; +} + +h3 { + margin: 18px 0px 10px 14px; +} + +.NewestPost { + margin: 165px 250px 140px; + height: 415px; + overflow: hidden; +} + +.MiddlePost { + margin: 165px 493px 180px; + height: 270px; +} + +.OldestPost { + margin: 165px 736px 130px; + height: 345px; + overflow: hidden; +} + +footer { + margin: 592px 250px 100px; + width: 714px; + height: 61px; + font-size: 16px; + padding: 6px 6px 0px; +} + +@media screen and (max-width: 989px) { + +.curved { + border-radius: 0; +} + +.purplecanvas { + display: none; +} + +header { + width: 98%; +} + +h1 { + margin: 50px 0px 0px; + padding: 0px; + width: 99%; +} + +.NewestPost { + height: 330px; + width: 308px; + margin: 170px 20px 0px; + font-size: 14px; +} + +.MiddlePost{ + height: 200px; + width: 308px; + margin: 170px 365px 0px; + font-size: 14px; +} + +.OldestPost { + height: 195px; + width: 630px; + margin: 525px 30px 0px; + font-size: 14px; +} + +footer{ + margin: 770px 0px 0px; + width: 98%; + font-size: 18px; + height: 60px; + font-size: 14px; +} + +h2 { + margin: 10px 0px 2px; + font-size: 18px; +} + +h4 { + font-size: 17px; +} + +h3 { + margin: 8px 0px 6px 16px; + font-size: 16px; +} + +.postparamargin { + margin: 4px 16px 8px; +} + +} From e5bd3b7ec29f71db7525ce186c2d549ba19f9aa5 Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 10 Oct 2017 16:06:51 -0400 Subject: [PATCH 02/10] revised after reviewing solution repo recommendations --- blog_mockup_narrow.png | 0 blog_mockup_wide.png | 0 index.html | 101 +++++++++-------- style.css | 252 ++++++++++++----------------------------- 4 files changed, 127 insertions(+), 226 deletions(-) delete mode 100644 blog_mockup_narrow.png delete mode 100644 blog_mockup_wide.png diff --git a/blog_mockup_narrow.png b/blog_mockup_narrow.png deleted file mode 100644 index e69de29b..00000000 diff --git a/blog_mockup_wide.png b/blog_mockup_wide.png deleted file mode 100644 index e69de29b..00000000 diff --git a/index.html b/index.html index 6b847468..42972d16 100644 --- a/index.html +++ b/index.html @@ -3,23 +3,30 @@ The Lorem Ipsum Blog Page - + + -
+
The Lorem Micro Blog
-
-
- Check out my vertically centered ad! -
+
+ +
+ -

+
+ +

The Lorem Micro Blog
@@ -27,78 +34,82 @@

-
-

+
+

A Most Posty Post

-

+

Written 1/3/2000

-

+

First Thoughts...

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.

-
-

+

Additional Thoughts...

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.

-
-

+
+

Another Posty Post

-

+

Written 1/2/2000

-

+

Only Thoughts...

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.

-
-

+
+

A Posty Post

-

+

Written 1/1/2000

-

+

Be it Resolved

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.

- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore - eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est -

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est +

-
- This copyrighted telecast is presented by authority of the Office of the Commissioner of Blogging. It may not be - reproduced or retransmitted in any form, and the accounts and descriptions of this game may not be disseminated, +
+ This copyrighted telecast is presented by authority of the Office of the + Commissioner of Blogging. It may not be reproduced or retransmitted in any + form, and the accounts and descriptions of this game may not be disseminated, without express written consent.
- +

+

+ diff --git a/style.css b/style.css index 465333ba..46d41b6b 100644 --- a/style.css +++ b/style.css @@ -1,160 +1,94 @@ -/* Start of CSS Reset */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +header, aside, h1, article, footer { + border: 3px solid black; + float: left; } -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -/* End of CSS Reset */ - -.blue { - background-color: rgb(133, 198, 238); -} - -.absolute { - position: absolute; -} - -.bordery { - border: medium solid black; -} - -.curved { - border-radius: 12px; +header, h1, footer, .container { + width: 100%; + box-sizing: border-box; } -.boldy { +header { + background-color: rgb(246, 248, 124); + position: fixed; + padding: 12px; + z-index: 99; + font-size: 22px; font-weight: bold; + margin-top: -60px; } -.third { - width: 230px; +.container { + margin: 60px 0px; } -.wordy { - line-height: 110%; +aside { + background-color: rgb(238, 133, 234); + width: 25%; + min-height: 500px; + z-index: 100; + position: relative; + text-align: center; } -.fonty24px { - font-size: 24px; +p { + margin: 6px 14px 20px; + line-height: 120%; } -.fonty18px { +.BoxCaption { + line-height: 110%; font-size: 18px; + margin: 120px 0px; } -.postparamargin { - margin: 6px 14px -9px; +aside > div { + width: 100%; + border: 3px solid black; } -header { - background-color: rgb(246, 248, 124); - position: fixed; - width: 100%; - padding: 12px 0px 12px 12px; - z-index: 99; - font-size: 22px; -} - -.purplecanvas { - background-color: rgb(238, 133, 234); - height: 500px; +.box { + position: absolute; + background-color: orange; + width: 150px; + min-height: 150px; top: 50%; + left: 50%; transform: translate(-50%, -50%); - left: 125px; - z-index: 100; } -.message { - margin-top: 50%; - text-align: center; -} - -.box { - height: 185px; - width: 185px; - background-color: white; - border: medium solid black; - margin: 71% 50% 50% 8.4%; - position: relative; -} - -.box::after { - content: "\d7"; - color: black; - display:flex; - justify-content:center; - align-items:center; - width: 100%; - height: 100%; - font-size: 480px; +main { + width: 73%; + float: right; } h1 { background-color: rgb(168, 243, 134); - width: 716px; - height: 95px; - margin: 58.3px 250px 1020px; text-align: center; - font-size: 22px; + font-size: 18px; font-style: italic; display: table; + border-radius: 12px; + padding: 8px; } .title { display: table-cell; vertical-align: middle; text-align: center; - line-height: 140%; } .title::first-line { - font-size: 30px; + font-size: 24px; font-weight: bold; font-style: normal; } h2 { text-align: center; - margin: 12px 0px 8px; + margin: 8px 0px 8px; + font-weight: bold; + font-size: 20px; } h4 { @@ -162,99 +96,55 @@ h4 { } h3 { - margin: 18px 0px 10px 14px; -} - -.NewestPost { - margin: 165px 250px 140px; - height: 415px; - overflow: hidden; + margin: 14px 0px 14px 14px; + font-weight: bold; + font-size: 17px; } -.MiddlePost { - margin: 165px 493px 180px; - height: 270px; +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; } -.OldestPost { - margin: 165px 736px 130px; - height: 345px; - overflow: hidden; +article { + background-color: rgb(133, 198, 238); + width: 30%; + margin: 1%; } footer { - margin: 592px 250px 100px; - width: 714px; - height: 61px; font-size: 16px; - padding: 6px 6px 0px; + padding: 14px; + background-color: rgb(133, 198, 238); + border-radius: 12px; + line-height: 110%; } @media screen and (max-width: 989px) { -.curved { - border-radius: 0; -} - -.purplecanvas { +aside { display: none; } header { - width: 98%; + margin-top: -60px; } -h1 { - margin: 50px 0px 0px; - padding: 0px; - width: 99%; +h1, footer { + border-radius: 0; } -.NewestPost { - height: 330px; - width: 308px; - margin: 170px 20px 0px; - font-size: 14px; +main { + width: 100%; } -.MiddlePost{ - height: 200px; - width: 308px; - margin: 170px 365px 0px; - font-size: 14px; +article { + width: 46%; } .OldestPost { - height: 195px; - width: 630px; - margin: 525px 30px 0px; - font-size: 14px; -} - -footer{ - margin: 770px 0px 0px; - width: 98%; - font-size: 18px; - height: 60px; - font-size: 14px; -} - -h2 { - margin: 10px 0px 2px; - font-size: 18px; -} - -h4 { - font-size: 17px; -} - -h3 { - margin: 8px 0px 6px 16px; - font-size: 16px; -} - -.postparamargin { - margin: 4px 16px 8px; + width: 98%; } } From 44d049c4a72e469ffc4360845a16e042bcb1e92f Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 10 Oct 2017 16:08:07 -0400 Subject: [PATCH 03/10] moved mockup images into seperate folder --- Mockups/blog_mockup_narrow.png | 0 Mockups/blog_mockup_wide.png | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Mockups/blog_mockup_narrow.png create mode 100644 Mockups/blog_mockup_wide.png diff --git a/Mockups/blog_mockup_narrow.png b/Mockups/blog_mockup_narrow.png new file mode 100644 index 00000000..e69de29b diff --git a/Mockups/blog_mockup_wide.png b/Mockups/blog_mockup_wide.png new file mode 100644 index 00000000..e69de29b From b0acbafbbabbbfc1ea89c0f826a3c90f716ac42a Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 10 Oct 2017 16:08:35 -0400 Subject: [PATCH 04/10] added now seperated css reset file --- reset.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 reset.css diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..ce90d2f9 --- /dev/null +++ b/reset.css @@ -0,0 +1,46 @@ +/* Start of CSS Reset */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* End of CSS Reset */ From 3a98b853e16b5bde0730bd4235def59e3c68c853 Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 10 Oct 2017 16:14:44 -0400 Subject: [PATCH 05/10] added github pages link to readme for seperate public version repo --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ac3aabf8..5079e314 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,5 @@ And 1 and 2! And 1, and 2...! [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) Brennan Fulmer + +https://brennanfulmer.github.io/Public_Responsive_Blog_From_Mockup/ From 48764fce9ce1f61aabc36a0259042606f9e1cd00 Mon Sep 17 00:00:00 2001 From: BrennanFulmer <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 7 Nov 2017 11:47:43 -0500 Subject: [PATCH 06/10] Update README.md modified readme to clarify what the link is for --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5079e314..e7fc68c2 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,6 @@ And 1 and 2! And 1, and 2...! Brennan Fulmer +Click this link to view as an actual web page: + https://brennanfulmer.github.io/Public_Responsive_Blog_From_Mockup/ From ed670a4646527d5d8e4ffe5e69d82571c4b3b0b4 Mon Sep 17 00:00:00 2001 From: BrennanFulmer <31666354+BrennanFulmer@users.noreply.github.com> Date: Tue, 7 Nov 2017 11:48:44 -0500 Subject: [PATCH 07/10] Update README.md modified readme to clarify what the link is for --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5079e314..b8e0a32d 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,6 @@ And 1 and 2! And 1, and 2...! Brennan Fulmer +Click this link to view the current production version as an actual web page: + https://brennanfulmer.github.io/Public_Responsive_Blog_From_Mockup/ From 31e0be0199c7d3e7cc2aaf92c3f275ed5219017a Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Sat, 11 Nov 2017 14:53:50 -0500 Subject: [PATCH 08/10] updated project to account for sass rework --- style.css => css/style.css | 0 index.html | 2 +- .../colors.scssc | Bin 0 -> 3043 bytes .../style2.scssc | Bin 0 -> 31507 bytes sass/colors.scss | 9 + sass/output.css | 128 +++++++++++++ sass/output.css.map | 7 + sass/style.scss | 181 ++++++++++++++++++ 8 files changed, 326 insertions(+), 1 deletion(-) rename style.css => css/style.css (100%) create mode 100644 sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc create mode 100644 sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc create mode 100644 sass/colors.scss create mode 100644 sass/output.css create mode 100644 sass/output.css.map create mode 100644 sass/style.scss diff --git a/style.css b/css/style.css similarity index 100% rename from style.css rename to css/style.css diff --git a/index.html b/index.html index 42972d16..d4e52783 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ The Lorem Ipsum Blog Page - + diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc new file mode 100644 index 0000000000000000000000000000000000000000..a40cd413da2c3ed40ab312f6a80365b223e5615d GIT binary patch literal 3043 zcmcJR-EQMV6vtBurHR`*ZMW&?euUD67E1HsY@5#97?!Q5v|S<6Ef>A8Ch^1_)$v#} z4y6<>;Q@FDB%Xwa;es0^#2uV*;@D2y3NE;aBHJ^+Ip_TUb7qW#7Y9aV_fwZrn|V&< zmF>_yt=a0eI!5zF@32*G9UFF&9v;4FE+|Fl zOU{Eg+@|wLH@jENwFUJqHIAMn2VD@sNXMmWppG=tBYk?hU2<7KZ>j6@n>@%hOl)o|f-yC9rS9v9VYA{==M0cOsB4T}ll7SWvf zHE{=YYS@K(i_n`vze9zFOKj#(v|w^SVBC{;IaD^iK_3tS7uLXIfxOJ2HPfaZ?=vs; zRyVm|4!m?Byhig7!aITRT;@@hN6V(<1JR|HAf5wZtdFt{UqV6E+afBNG9V(bd@ecK zN)P#hOQxcl#bw~lo4nVPG+=8GF7@ni3f>4m;!U;*EBBZS^v|lPpcge*&|-{Gv0-gc!8{5uxoHr_4D(y z*A?Q~m6z>y^%E(Xn<#?@#*Lhs^$9OC8^b9{X%lL`8igzZ#-%Ww*jphU3cT?b|I*1;Obb0s{V z>I8TJnm|gu-=~V)Fe3E|6Y3RU&#aAuP*0o5)Y9M|roeT>7^#;9j%}g957^?jDR9Gx zY>@?yZK1#^Tj1v$zdwsVxXa;P`0ds3hc%EiixNw!C{vQ+k7{^-Lc=UftYHchX*kEj z&KKzyZZq_3)Z#`xf7Fa$s*VNQFmw#~lLUc~cSTeXaC*)BjWh=iA&<@cjEWuT-YkbS z;`&#lm#?E0=qkRT68aBO-STuhxp0|j6T)kda%n8QdMYP{&q_WE5htHQM9J&w&0O}ucZPqnFtLQHd}B-`VQ97gpx#4GLZ47ihXt3$S*WL#WG&L_ z{W@LbX%vI*cJ+$vc)~>Wl*eBGgKM= zM{~kWKAZx(RY742?1B)gy4C2LBGr%80HX!pLStp0jrnnb@{n0RG6viz;R0htx9{_R E0QQ>RssI20 literal 0 HcmV?d00001 diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc new file mode 100644 index 0000000000000000000000000000000000000000..b12bb625a60d91547fe093d063d7c9dd52e23c46 GIT binary patch literal 31507 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 literal 0 HcmV?d00001 diff --git a/sass/colors.scss b/sass/colors.scss new file mode 100644 index 00000000..3f50ff0f --- /dev/null +++ b/sass/colors.scss @@ -0,0 +1,9 @@ +$liteyellow: rgb(246, 248, 124); + +$litepurple: rgb(238, 133, 234); + +$orange: orange; + +$litegreen: rgb(168, 243, 134); + +$blue: rgb(133, 198, 238); diff --git a/sass/output.css b/sass/output.css new file mode 100644 index 00000000..4824b03b --- /dev/null +++ b/sass/output.css @@ -0,0 +1,128 @@ +.majorelements, header, h1, footer { + border: 3px solid black; + float: left; + width: 100%; + box-sizing: border-box; } + +header { + background-color: #f6f87c; + position: fixed; + padding: 12px; + z-index: 99; + font-size: 22px; + font-weight: bold; + margin-top: -60px; } + +.container { + margin: 60px 0px; + width: 100%; + box-sizing: border-box; } + +aside { + background-color: #ee85ea; + width: 25%; + min-height: 500px; + z-index: 100; + position: relative; + text-align: center; + border: 3px solid black; + float: left; } + +p { + margin: 6px 14px 20px; + line-height: 120%; } + +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; } + +aside > div { + width: 100%; + border: 3px solid black; } + +.box { + position: absolute; + background-color: orange; + width: 150px; + min-height: 150px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } + +main { + width: 73%; + float: right; } + +h1 { + background-color: #a8f386; + text-align: center; + font-size: 18px; + font-style: italic; + display: table; + border-radius: 12px; + padding: 8px; } + +.title { + display: table-cell; + vertical-align: middle; + text-align: center; } + +.title::first-line { + font-size: 24px; + font-weight: bold; + font-style: normal; } + +h2 { + text-align: center; + margin: 8px 0px 8px; + font-weight: bold; + font-size: 20px; } + +h4 { + text-align: center; } + +h3 { + margin: 14px 0px 14px 14px; + font-weight: bold; + font-font-size: 17px; } + +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; } + +article { + background-color: #85c6ee; + width: 30%; + margin: 1%; + border: 3px solid black; + float: left; } + +footer { + font-size: 16px; + padding: 14px; + background-color: #85c6ee; + border-radius: 12px; + line-height: 110%; } + +@media screen and (max-width: 989px) { + aside { + display: none; } + + header { + margin-top: -60px; } + + h1, footer { + border-radius: 0; } + + main { + width: 100%; } + + article { + width: 46%; } + + .OldestPost { + width: 98%; } } + +/*# sourceMappingURL=output.css.map */ diff --git a/sass/output.css.map b/sass/output.css.map new file mode 100644 index 00000000..86a5f3b0 --- /dev/null +++ b/sass/output.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AASA,kCAAe;EACd,MAAM,EARE,eAAe;EASvB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,UAAU;;AAGvB,MAAO;EACN,gBAAgB,ECjBJ,OAAkB;EDkB9B,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,EAAE;EAGV,SAAI,EAAE,IAAI;EACV,WAAM,EAAE,IAAI;EAGb,UAAU,EAAE,KAAK;;AAIlB,UAAW;EACV,MAAM,EAAE,QAAQ;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,UAAU;;AAGvB,KAAM;EACL,gBAAgB,ECpCJ,OAAkB;EDqC9B,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,QAAQ;EACjB,UAAU,EAAE,MAAM;EAtCnB,MAAM,EAHE,eAAe;EAIvB,KAAK,EAAE,IAAI;;AAyCZ,CAAE;EACD,MAAM,EAAE,aAAa;EACrB,WAAW,EAAE,IAAI;;AAGlB,WAAY;EACX,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,SAAS;;AAGlB,WAAY;EACR,KAAK,EAAE,IAAI;EACb,MAAM,EA1DC,eAAe;;AA6DxB,IAAK;EACJ,QAAQ,EAAE,QAAQ;EAClB,gBAAgB,EC7DR,MAAM;ED8Dd,KAAK,EAAE,KAAK;EACX,UAAU,EAAE,KAAK;EAClB,GAAG,EAAE,GAAG;EACP,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,qBAAqB;;AAGlC,IAAK;EACJ,KAAK,EAAE,GAAG;EACT,KAAK,EAAE,KAAK;;AAGd,EAAG;EACF,gBAAgB,ECzEL,OAAkB;ED0E7B,UAAU,EAAE,MAAM;EAGjB,SAAI,EAAE,IAAI;EACV,UAAK,EAAE,MAAM;EAGd,OAAO,EAAE,KAAK;EACd,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAIb,MAAO;EACN,OAAO,EAAE,UAAU;EAClB,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,MAAM;;AAGpB,kBAAmB;EAEjB,SAAI,EAAE,IAAI;EACV,WAAM,EAAE,IAAI;EACZ,UAAK,EAAE,MAAM;;AAIf,EAAG;EACF,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,WAAW;EAGlB,WAAM,EAAE,IAAI;EACZ,SAAI,EAAE,IAAI;;AAKZ,EAAG;EACF,UAAU,EAAE,MAAM;;AAGnB,EAAG;EACF,MAAM,EAAE,kBAAkB;EAGzB,WAAM,EAAE,IAAI;EACZ,cAAS,EAAE,IAAI;;AAKjB,WAAY;EACX,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,SAAS;;AAGlB,OAAQ;EACP,gBAAgB,ECnIV,OAAkB;EDoIxB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,EAAE;EAxIV,MAAM,EAHE,eAAe;EAIvB,KAAK,EAAE,IAAI;;AA2IZ,MAAO;EACN,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,IAAI;EACb,gBAAgB,EC5IV,OAAkB;ED6IvB,aAAa,EAAE,IAAI;EACpB,WAAW,EAAE,IAAI;;AAIlB,oCAAqC;EAErC,KAAM;IACL,OAAO,EAAE,IAAI;;EAGd,MAAO;IACN,UAAU,EAAE,KAAK;;EAGlB,UAAW;IACV,aAAa,EAAE,CAAC;;EAGjB,IAAK;IACJ,KAAK,EAAE,IAAI;;EAGZ,OAAQ;IACP,KAAK,EAAE,GAAG;;EAGX,WAAY;IACV,KAAK,EAAE,GAAG", +"sources": ["style2.scss","colors.scss"], +"names": [], +"file": "output.css" +} diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 00000000..c6baaf50 --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,181 @@ +@import "colors.scss"; + +$border: 3px solid black; + +@mixin border-and-left { + border: $border; + float: left; +} + +.majorelements { + border: $border; + float: left; + width: 100%; + box-sizing: border-box; +} + +header { + background-color: $liteyellow; + position: fixed; + padding: 12px; + z-index: 99; + + font: { + size: 22px; + weight: bold; + } + + margin-top: -60px; + @extend .majorelements; +} + +.container { + margin: 60px 0px; + width: 100%; + box-sizing: border-box; +} + +aside { + background-color: $litepurple; + width: 25%; + min-height: 500px; + z-index: 100; + position: relative; + text-align: center; + @include border-and-left; +} + +p { + margin: 6px 14px 20px; + line-height: 120%; +} + +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; +} + +aside > div { + width: 100%; + border: $border; +} + +.box { + position: absolute; + background-color: $orange; + width: 150px; + min-height: 150px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +main { + width: 73%; + float: right; +} + +h1 { + background-color: $litegreen; + text-align: center; + + font: { + size: 18px; + style: italic; + } + + display: table; + border-radius: 12px; + padding: 8px; + @extend .majorelements; +} + +.title { + display: table-cell; + vertical-align: middle; + text-align: center; +} + +.title::first-line { + font: { + size: 24px; + weight: bold; + style: normal; + } +} + +h2 { + text-align: center; + margin: 8px 0px 8px; + + font: { + weight: bold; + size: 20px; + } + +} + +h4 { + text-align: center; +} + +h3 { + margin: 14px 0px 14px 14px; + + font: { + weight: bold; + font-size: 17px; + } + +} + +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; +} + +article { + background-color: $blue; + width: 30%; + margin: 1%; + @include border-and-left; +} + +footer { + font-size: 16px; + padding: 14px; + background-color: $blue; + border-radius: 12px; + line-height: 110%; + @extend .majorelements; +} + +@media screen and (max-width: 989px) { + +aside { + display: none; +} + +header { + margin-top: -60px; +} + +h1, footer { + border-radius: 0; +} + +main { + width: 100%; +} + +article { + width: 46%; +} + +.OldestPost { + width: 98%; +} + +} From f87bd71c9f7cf89e3fb0ea08b1b0ee73a17f7ed4 Mon Sep 17 00:00:00 2001 From: Brennan <31666354+BrennanFulmer@users.noreply.github.com> Date: Sat, 11 Nov 2017 15:04:08 -0500 Subject: [PATCH 09/10] merged remote changes with local repo --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5079e314..e7fc68c2 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,6 @@ And 1 and 2! And 1, and 2...! Brennan Fulmer +Click this link to view as an actual web page: + https://brennanfulmer.github.io/Public_Responsive_Blog_From_Mockup/ From 6d5fadc779ec17cd7500c985498434781e81312c Mon Sep 17 00:00:00 2001 From: Brennan Fulmer <31666354+BrennanFulmer@users.noreply.github.com> Date: Thu, 8 Mar 2018 14:58:14 -0500 Subject: [PATCH 10/10] Update README.md --- README.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b8e0a32d..36db29d2 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,6 @@ assignment_markup_warmup_sprint =============================== -And 1 and 2! And 1, and 2...! -[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) +by Brennan Fulmer -Brennan Fulmer - -Click this link to view the current production version as an actual web page: - -https://brennanfulmer.github.io/Public_Responsive_Blog_From_Mockup/ +https://brennanfulmer.github.io/assignment_markup_warmup/