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 diff --git a/README.md b/README.md index f5895e0b..36db29d2 100644 --- a/README.md +++ b/README.md @@ -1,5 +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 + +https://brennanfulmer.github.io/assignment_markup_warmup/ diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..46d41b6b --- /dev/null +++ b/css/style.css @@ -0,0 +1,150 @@ +header, aside, h1, article, footer { + border: 3px solid black; + float: left; +} + +header, h1, footer, .container { + width: 100%; + box-sizing: border-box; +} + +header { + background-color: rgb(246, 248, 124); + position: fixed; + padding: 12px; + z-index: 99; + font-size: 22px; + font-weight: bold; + margin-top: -60px; +} + +.container { + margin: 60px 0px; +} + +aside { + background-color: rgb(238, 133, 234); + width: 25%; + min-height: 500px; + z-index: 100; + position: relative; + text-align: center; +} + +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: rgb(168, 243, 134); + 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-size: 17px; +} + +.BoxCaption { + line-height: 110%; + font-size: 18px; + margin: 120px 0px; +} + +article { + background-color: rgb(133, 198, 238); + width: 30%; + margin: 1%; +} + +footer { + font-size: 16px; + padding: 14px; + background-color: rgb(133, 198, 238); + 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%; +} + +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..d4e52783 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + The Lorem Ipsum Blog Page + + + + + +
+ The Lorem Micro Blog +
+ +
+ + + +
+ +

+

+ 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 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. +

+
+ +
+

+ 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/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 */ diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc new file mode 100644 index 00000000..a40cd413 Binary files /dev/null and b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc differ diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc new file mode 100644 index 00000000..b12bb625 Binary files /dev/null and b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc differ 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%; +} + +}