Responsive Gophercon Ads

layouts/index.html

@@ -1,15 +1,10 @@
 {{ partial "header.html" . }}
-			<div class="header-content">
-				<div class="container">
-					<div class="row">
-						<div class="col-md-8 col-md-offset-2 interior-header">
+	<div class="gophercon-ad">
+		<a href="http://www.gophercon.com" target="_blank">
+			<span></span>
+		</a>
+	</div>
 
-              <a href="http://www.gophercon.com"><img src="/images/gc-banner-ad.png" alt="GopherCon 2016" title="GopherCon 2016"  /></a>
-
-						</div><!-- col-md-8 -->
-					</div><!-- row -->
-				</div><!-- container -->
-			</div><!-- header-content -->
   <div id="article-body">
       {{ range .Paginator.Pages }}
 	      <article>
@@ -41,7 +36,4 @@
 
   {{ partial "pagination.html" . }}
   {{ partial "footer.html" . }}
-  </div>
-
-
- {{ partial "scroll.html" . }}
+  </div>

static/css/hc.css

@@ -845,8 +845,8 @@ time2
 }
 
 #article, #article-body {
-  padding: 30px 50px 10px 70px;
-  margin: -30px -50px 0px -74px;
+  padding: 20px 50px 10px 70px;
+  margin: 0 -50px 0px -74px;
   border-radius: 0px;
   background: white;
 }
@@ -994,8 +994,102 @@ mark {
 	}
 }
 
-.gophercon-banner {
-  text-align: center;
-  margin-top: 30px;
-  clear: both;
+.gophercon-ad a span{
+	color: #fff;
+	background: url(../images/gc-banner-ad.jpg) #314D65 no-repeat;
+	display: block;
+	width: 100%;
+	height: 100px;
+	background-position: center bottom;
+	cursor: pointer;
+	background-size: auto 90%;
+}
+.gophercon-ad {
+	background: #314D65;
+	width: 100%;
+	height: 100px;
+	display: block;
+	clear: both;
 }
+
+
+/*==================================================
+=            Bootstrap 3 Media Queries             =
+==================================================*/
+
+
+
+
+    /*==========  Mobile First Method  ==========*/
+
+    /* Custom, iPhone Retina */ 
+    @media only screen and (min-width : 320px) {
+
+    }
+
+    /* Extra Small Devices, Phones */ 
+    @media only screen and (min-width : 480px) {
+
+    }
+
+    /* Small Devices, Tablets */
+    @media only screen and (min-width : 768px) {
+
+    }
+
+    /* Medium Devices, Desktops */
+    @media only screen and (min-width : 992px) {
+
+    }
+
+    /* Large Devices, Wide Screens */
+    @media only screen and (min-width : 1200px) {
+
+    }
+
+
+
+    /*==========  Non-Mobile First Method  ==========*/
+
+    /* Large Devices, Wide Screens */
+    @media only screen and (max-width : 1200px) {
+			.gophercon-ad a span{
+				background: url(../images/gc-banner-ad-2.jpg) #314D65 no-repeat;
+				background-position: center bottom;
+				background-size: auto 90%;
+			}
+    }
+
+    /* Medium Devices, Desktops */
+    @media only screen and (max-width : 992px) {
+			.gophercon-ad a span{
+				background: url(../images/gc-banner-ad-3.jpg) #314D65 no-repeat;
+				background-position: center bottom;
+				background-size: auto 90%;
+			}
+    }
+
+    /* Small Devices, Tablets */
+    @media only screen and (max-width : 768px) {
+			.gophercon-ad a span{
+				background: url(../images/gc-banner-ad-3.jpg) #314D65 no-repeat;
+				background-position: center bottom;
+				background-size: auto 85%;	
+			}
+    }
+
+    /* Extra Small Devices, Phones */ 
+    @media only screen and (max-width : 480px) {
+			.gophercon-ad a span{
+				height: 80px;
+				background-size: auto 100%;
+			}
+			.gophercon-ad {
+				height: 80px;
+			}
+    }
+
+    /* Custom, iPhone Retina */ 
+    @media only screen and (max-width : 320px) {
+
+    }