diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..6d46e01 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,166 @@ -/* Write your CSS here */ +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); +@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css); + +html { + background: mediumseagreen; + font-size: 14px; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: 300px; + overflow-x: hidden; + overflow-y: scroll; + text-rendering: optimizeLegibility; +} + +body { + color: #666; + font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.4; +} + +a { + text-decoration: none; + transition: all 0.3s cubic-bezier(.25, .8, .25, 1); +} + +div, h2, p, figure { + margin: 0; + padding: 0; +} + +.header { + color: white; + padding: 40px 0 20px; + text-align: center; +} + +.header h1 { + font-size: 40px; + font-weight: bold; +} + +.header h2 a { + border-bottom: 1px solid rgba(255, 255, 255, 0.5); + color: white; + font-size: 20px; + opacity: 0.5; +} + +.header h2 a:hover { + border-bottom-color: white; + opacity: 1; +} + +.main { + margin: 0 auto; + max-width: 1040px; + padding: 10px; +} + +.column { + flex: 1; + flex-direction: column; +} + +.article { + background: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + color: #666; + display: flex; + flex: 1; + flex-direction: column; + flex-basis: auto; + margin: 10px; +} + +.article:hover, +.article:focus { + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + color: #444; +} + +.article-image { + background: #eee; + display: block; + padding-top: 75%; + position: relative; + width: 100%; +} + +.article-image img { + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.article-image.is-3by2 { + padding-top: 66.6666%; +} + +.article-image.is-16by9 { + padding-top: 56.25%; +} + +.article-body { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; +} + +.article-title { + color: #333; + flex-shrink: 0; + font-size: 1.4em; + font-weight: 700; + line-height: 1.2; +} + +.article-content { + flex: 1; + margin-top: 5px; +} + +.article-info { + display: flex; + font-size: 0.85em; + justify-content: space-between; + margin-top: 10px; +} + +@media screen and (min-width: 800px) { + .columns, + .column { + display: flex; + } +} + +@media screen and (min-width: 1000px) { + .first-article { + flex-direction: row; + } + + .first-article .article-body { + flex: 1; + } + + .first-article .article-image { + height: 300px; + order: 2; + padding-top: 0; + width: 400px; + } + + .main-column { + flex: 3; + } + + .nested-column { + flex: 2; + } +} diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..0a772c3 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -2,10 +2,168 @@ - Flexbox Layout + Matt's Guitars +
+

Matt's Guitars

+

My Facebook

+
+ +
+
+ +
+ +
+
+

+ Fender Stratocaster +

+

+ This is my Fender Stratocaster. It has lasers. It literally shoots lasers at Republicans. I'm not joking. As you can see it's totally badass. It's sunglasses are not pictured as they're being repaired by the International Space Laboratory. Even more amazing than all that is the fact that this guitar is a eunuch. No penis. Rock on. +

+
+ By Matt Cain + 0 comments +
+
+ + +
+
+ +
+ +
+
+

+ Fender Telecaster +

+

+ Oh my god. Holy lord. This thing was with me when I played before Ted Cruz at the Republican National Convention. Ted Cruz was caught looking at porn on Twitter the other day. That's why I've named this guitar "Lyin' Ted." It was filmed during the infamous 90s porn flick "Hollywood Hot Tubs" in the scene where a truck driver slams into a police barricade and pirahnas burst out of every orifice in the earth. +

+
+ By Matt Cain + 0 comments +
+
+ +
+ +
+ +
+ +
+
+

+ Gibson Les Paul +

+

+ Not a big deal. Hakeem Olajuwon played this guitar at Larry David's bat mitzvah. +

+
+ By Matt Cain + 0 comments +
+
+ + +
+

+ Think About Your Dad. +

+

+ What's your dad like? +

+
+ By Matt Cain + 0 comments +
+
+ + +
+

+ The Earth is Flat +

+

+ The universe is a series of flat circles surrounded by flat brimmed hats. +

+
+ By Matt Cain + 0 comments +
+
+ +
+
+
+ +
+ +
+ +
+
+

+ Gibson Flying V +

+

+ This thing coupled with socks in your pants tends to get the ladies swooning. Use at your own risk if you have a wife. No lie. +

+
+ By Matt Cain + 0 comments +
+
+ + +
+

+ Fun Fact #1 +

+

+ Did you know that my first dog was named Spot and I named him because I thought that was an original name for a dog? I was 5. Gimme a break. +

+
+ By Matt Cain + 0 comments +
+
+ + +
+

+ Fun Fact #2 +

+

+ I once had a date with someone who liked Toby Keith. After I placed a restraining order on her I bought a hot dog and ate it on the side of Highway 123. +

+
+ By Matt Cain + 0 comments +
+
+ + +
+

+ Fun Fact #3 +

+

+ I really am trying to be a web developer. I'm scared. Hold me. +

+ +
+ +
+
\ No newline at end of file