Basic HTML and CSS for article-view page

Includes image resources used on this page
gittower · Jun 28, 2017 · 7b8bcad · 7b8bcad
1 parent 6412fe9
commit 7b8bcad
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 2 deletions.
diff --git a/www/article-view.html b/www/article-view.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>The Moustache Monthly</title>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
+
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+
+
+  <body>
+
+    <div class="row-wrapper">
+      <div class="grid-container">
+        <header>
+          <div id="logo">
+            <img src="img/logo.svg" />
+          </div>
+          <nav>
+            <a href="#">Home</a>
+            <a href="#">About</a>
+            <a href="#">Contact</a>
+          </nav>
+        </header>
+      </div>
+    </div>
+
+    <div class="row-wrapper">
+      <div class="grid-container">
+        <article id="full-article">
+          <div id="main-image"></div>
+          <div id="article-content">
+            <div class="meta">Mar 10, 2015 by Ralph Grando</div>
+            <h1>The Chevron</h1>
+            <p>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.</p>
+            <p>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 laborum.
+  </p>
+            <p>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 laborum.</p>
+            <div class="content-image"></div>
+            <p>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 laborum.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+    <div class="row-wrapper">
+      <div class="grid-container">
+        <section id="author">
+          <div class="author-icon"></div>
+          <div class="author-content">
+            <h5>About Ralph Grando</h5>
+            <p>A man of style, Ralph grew his first moustache in the tender age of 12. Over the years, he has become what can safely be called a "connoisseur" of facial hair.</p>
+          </div>
+        </section>
+
+        <section id="recommended-reading">
+          <h5>Don't miss the next moustache!</h5>
+          <ul>
+            <li><a href="#">Trimming &amp; Clipping: The Basic Techniques</a></li>
+            <li><a href="#">An Ode to the Moustache</a></li>
+            <li><a href="#">The Horseshoe: A Grown Man's Beard</a></li>
+            <li><a href="#">All Articles</a></li>
+          </ul>
+        </section>
+      </div>
+    </div>
+
+    <div class="row-wrapper">
+      <div class="grid-container">
+        <section id="about">
+          <h5>About Us</h5>
+          <h3>Tower - Not a moustache, but the best Git client.</h3>
+          <div class="tower-icon"></div>
+          <p>We help over 40,000 users in companies like Apple, Google, Amazon, Twitter, and Facebook to easily &amp; productively work with the Git version control system.</p>
+            <a class="button button--try" href="http://www.git-tower.com">Try it 30 days for free</a>
+          </p>
+        </section>
+      </div>
+    </div>
+
+    <div class="row-wrapper">
+      <div class="grid-container">
+        <footer>&copy; 2015 <a href="http://www.fournova.com">fournova</a></footer>
+      </div>
+    </div>
+
+  </body>
+</html>
diff --git a/www/css/styles.css b/www/css/styles.css
diff --git a/www/img/author.jpg b/www/img/author.jpg
diff --git a/www/img/author@2x.jpg b/www/img/author@2x.jpg
diff --git a/www/img/chevron-main-image.jpg b/www/img/chevron-main-image.jpg
diff --git a/www/img/chevron-main-image@2x.jpg b/www/img/chevron-main-image@2x.jpg
diff --git a/www/img/image-article-content.jpg b/www/img/image-article-content.jpg
diff --git a/www/img/image-article-content@2x.jpg b/www/img/image-article-content@2x.jpg
diff --git a/www/scss/_layout.scss b/www/scss/_layout.scss
@@ -68,7 +68,7 @@ article.teaser--top {
 #recent-posts {
   @include grid-column(8, $neat-grid--page);
   @include grid-push(2, $neat-grid--page);
-//  @include pad(10px 0px 75px 0px);
+  padding: 10px 0px 75px 0px;
 
   .teaser--recent {
     margin-top:50px;
@@ -81,6 +81,46 @@ article.teaser--top {
 }
 
 
+/************ Article Detail */
+#full-article {
+  width: 100%;
+
+  #article-content {
+    @include grid-column(10, $neat-grid--page);
+    @include grid-push(1, $neat-grid--page);
+  }
+
+  %article-images {
+    background-position:center;
+    border-radius:$base-border-radius;
+  }
+  #main-image {
+    @extend %article-images;
+    margin:72px 0px 60px 0px;
+    @include size($main-image-width, $main-image-height);
+    background-image:url(../img/chevron-main-image.jpg);
+    @media
+      screen and (-webkit-min-device-pixel-ratio: 2),
+      screen and (min-resolution: 192dpi),
+      screen and (min-resolution: 2dppx) {
+        background-image:url(../img/chevron-main-image@2x.jpg);
+    }
+  }
+  .content-image {
+    @extend %article-images;
+    margin:15px 0px 27px 0px;
+    @include size($content-image-width, $content-image-height);
+    background-image:url(../img/image-article-content.jpg);
+    @media
+      screen and (-webkit-min-device-pixel-ratio: 2),
+      screen and (min-resolution: 192dpi),
+      screen and (min-resolution: 2dppx) {
+        background-image:url(../img/image-article-content@2x.jpg);
+    }
+  } 
+}
+
+
 /************ Subscribe */
 #subscribe {
   @include grid-column(10, $neat-grid--page);

diff --git a/www/scss/base/_variables.scss b/www/scss/base/_variables.scss
@@ -29,6 +29,10 @@ $small-spacing: $base-spacing / 2;
 $base-z-index: 0;
 $teaser-image-width: 624px;
 $teaser-image-height: 228px;
+$main-image-width: 100%;
+$main-image-height: 348px;
+$content-image-width: 100%;
+$content-image-height: 264px;
 
 // Colors
 $blue: #1565c0;