From 5a912bac08bf0c2e416b428e08586148803cb4e3 Mon Sep 17 00:00:00 2001 From: Toni Tesori Date: Tue, 31 Oct 2017 09:51:48 -0400 Subject: [PATCH 1/5] Added name to README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f5895e0b..01ac65ee 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ 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) + +Written by Toni Tesori From 448dbc3fc232646d72cb52ca25ab186c17834504 Mon Sep 17 00:00:00 2001 From: Toni Tesori Date: Tue, 31 Oct 2017 10:09:51 -0400 Subject: [PATCH 2/5] Wrote initial markup --- index.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 0 2 files changed, 79 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..c64296cc --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + + + Document + + +
+

The Lorem Micro Blog

+
+
+
+
+

+ Check out my vertically centered ad! + +

+
+
+ +
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+ +
+
+

A Most Posty Post

+ +
+

First Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+

Additional Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, cumque vel nobis quidem porro, in alias, et dolore atque aspernatur velit suscipit nostrum ipsam. Suscipit possimus vel voluptatum incidunt! +

+
+ +
+
+

Another Posty Post

+ +
+

Only Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+
+ +
+
+

A Posty Post

+

Written 1/2/2020

+
+

Be It Resolved

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. +

+

+ Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+ +
+ +
+
+

+ This copyrighted blogcast is presented by the 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 blog may not be disseminated without express written consent. +

+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e69de29b From ae1f9567895078862ad5de8b1512665e96367446 Mon Sep 17 00:00:00 2001 From: Toni Tesori Date: Tue, 31 Oct 2017 11:52:51 -0400 Subject: [PATCH 3/5] Finish blog styles and HTML tweaks --- index.html | 98 ++++++++++++++++++++++--------------------- styles.css | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 171 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index c64296cc..5c690f2f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,6 +8,7 @@ Document +

The Lorem Micro Blog

@@ -14,10 +16,10 @@

The Lorem Micro Blog

-

- Check out my vertically centered ad! - -

+

+ Check out my vertically centered ad! + +

@@ -27,53 +29,55 @@

The Lorem Micro Blog

By Foo Bar

-
-
-

A Most Posty Post

- -
-

First Thoughts...

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. -

-

Additional Thoughts...

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, cumque vel nobis quidem porro, in alias, et dolore atque aspernatur velit suscipit nostrum ipsam. Suscipit possimus vel voluptatum incidunt! -

-
+
+
+
+

A Most Posty Post

+ +
+

First Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+

Additional Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, cumque vel nobis quidem porro, in alias, et dolore atque aspernatur velit suscipit nostrum ipsam. Suscipit possimus vel voluptatum incidunt! +

+
-
-
-

Another Posty Post

- -
-

Only Thoughts...

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. -

-
+
+
+

Another Posty Post

+ +
+

Only Thoughts...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+
-
-
-

A Posty Post

-

Written 1/2/2020

-
-

Be It Resolved

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. -

+
+
+

A Posty Post

+ +
+

Be It Resolved

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. +

+

+ Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. +

+ +
+
+

- Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque. + This copyrighted blogcast is presented by the 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 blog may not be disseminated without express written consent.

- - - +
-
-

- This copyrighted blogcast is presented by the 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 blog may not be disseminated without express written consent. -

-
- + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29b..b65db7f1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,120 @@ +@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css'; +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + font-family: Arial, Helvetica, sans-serif; + line-height: 1.3; + padding: 4.5em 0 1em 0; +} + +body>header { + background: #000; + color: #fff; + padding: 0.5em; + position: fixed; + top: 0; + width: 100%; +} + +body>header h1 { + font-size: 1em; + text-transform: uppercase; +} + +.ad-container { + display: none; +} + +main>header { + background: #ccc; + padding: 0.5em 1em; + text-align: center; + line-height: 1; + margin-bottom: 1em; +} + +main>header h1 { + margin-bottom: 0; +} + +main>header h2 { + font-size: 1.3em; + font-style: italic; + font-weight: normal; +} + +main article { + background: #eee; + padding: 0.5em 1em; + margin: 0.5em; +} + +main article header { + text-align: center; +} + +main article header h1 { + font-size: 1.5em; + margin-bottom: 0.15em; +} + +footer { + background: #999; + font-size: 0.8em; + padding: 0.5em 1em; +} + +@media only screen and (min-width: 500px) { + main .posts { + display: flex; + flex-flow: row wrap; + } + main article { + flex: 45%; + } + main article:last-child { + flex: 100%; + } +} + +@media only screen and (min-width: 990px) { + .container { + display: flex; + flex-flow: row wrap; + margin: 0 auto; + max-width: 1200px; + } + .ad-container { + display: flex; + flex: 1; + align-items: center; + margin-right: 1em; + padding: 1em; + background: #aaa; + text-align: center; + } + main { + flex: 5; + margin: 0; + display: block; + } + main .posts { + flex-wrap: nowrap; + } + main .posts article { + margin: 0; + margin: 0 1em 1em 0; + flex: 33%; + } + main article:last-child { + margin-right: 0; + } +} \ No newline at end of file From 88b01c1acb58c9e8f317cad2bc4bc39a9cfbeb2b Mon Sep 17 00:00:00 2001 From: Toni Tesori Date: Tue, 31 Oct 2017 11:54:01 -0400 Subject: [PATCH 4/5] Add HTML title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5c690f2f..08bbfb98 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Document + Lorem Micro Blog From 22602823000af5f530a2b63d139ef5f08bcebab3 Mon Sep 17 00:00:00 2001 From: Toni Tesori Date: Tue, 31 Oct 2017 11:55:43 -0400 Subject: [PATCH 5/5] Forgot rounded corners --- styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles.css b/styles.css index b65db7f1..b0a28066 100644 --- a/styles.css +++ b/styles.css @@ -106,6 +106,9 @@ footer { margin: 0; display: block; } + main > header, main footer { + border-radius:1em; + } main .posts { flex-wrap: nowrap; }