pixel perfect

Parbhat · Parbhat · commit e15946ba3d6d · 2015-08-23T16:18:09.000+05:30
diff --git a/css/app-custom.css b/css/app-custom.css
@@ -932,7 +932,12 @@ code .comment {
 .app-logo
 {
 	width: 125px;
-	margin-left: 30px;
+	margin-left: -30px;
+}
+
+.fa-2x
+{
+	font-size: 2.15em !important;
 }
 
 /* ==========================================================================
@@ -954,12 +959,13 @@ code .comment {
 	#heading-social
 	{
 		width: 100%;
+		margin-top: 47px;
 	}
 
 	.app-logo
 	{
 		width: 134px;
 		height: 105px;
-		margin-left: 0px;
+		margin-left: -20px;
 	}
 }
diff --git a/css/main.css b/css/main.css
@@ -70,52 +70,62 @@ p
     text-align: center;
 }
 
-#header
+#heading
 {
     background-color: #29dcb2;
     text-align: center;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 0;
     box-shadow: 0 0 3px #333;
     margin: 0px;
     color: #fff;
+    overflow: hidden;
 }
 
-#header h1
+#heading h1
 {
-    font-family: 'Open Sans', sans-serif;
     font-weight: normal;
     font-size: 42px;
     margin: 0px;
-    margin-top: 5px;
+    margin-top: 4px;
 }
 
-#header h4
+#heading h4
 {
     line-height: 1.6;
     font-size: 18px;
     font-weight: 500;
-    margin-bottom: 10px;
-    margin-top: 0px;
+    margin-bottom: 7px;
+    margin-top: 3px;
     text-align: center;
+    padding-right: 15px;
+    padding-left: 15px;
 }
 
-#header-social
+#heading-logo
 {
-    margin-top: 30px;
+    width: 20%;
+    float: left;
 }
 
-#header .line
+#heading-content
 {
-    margin: 0px;
+    width: 60%;
+    float: left;
+}
+
+#heading-social
+{
+    margin-top: 40px;
+    width: 20%;
+    float: left;
 }
 
-#header a
+#heading a
 {
     color: #fff;
 }
 
-#header a:hover
+#heading a:hover
 {
     color: green;
 }
@@ -396,10 +406,21 @@ footer a:hover
    ========================================================================== */
 
 @media only screen and (max-width: 768px) {
-    #logo
+    #heading-logo
+    {
+        width: 100%;
+        margin-top: 20px;
+        margin-bottom: 25px;
+    }
+
+    #heading-content
+    {
+        width: 100%;
+    }
+
+    #heading-social
     {
-        margin-top: 30px;
-        margin-bottom: 30px;
+        width: 100%;
     }
 }
 
diff --git a/index.html b/index.html
@@ -26,21 +26,17 @@
             <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
 
-        <div id="header">
-            <div class="line">
-                <div class="line-l-3 line-m-2 line-s-3" id="logo">
-                    <a href="/"><div class="python-logo"></div></a>
-                </div>
-                <div class="line-l-6 line-m-8 line-s-6">
-                    <h1>Python Pedia</h1>
-                    <h4>One Stop for Python Programming Resources. It's all about Python.</h4>
-                </div>
-                <div class="line-l-3 line-m-2 line-s-3">
-                    <div id="header-social">
-                        <a href="https://twitter.com/pythonpedia" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
-                        <a href="https://github.com/parbhat/python-pedia" target="_blank"><i class="fa fa-github fa-2x"></i></a>
-                    </div>
-                </div>
+        <div id="heading">
+            <div id="heading-logo"><a href="/"><div class="python-logo"></div></a></div>
+
+            <div id="heading-content">
+                <h1>Python Pedia</h1>
+                <h4>One Stop for Python Programming Resources. It's all about Python.</h4>
+            </div>
+
+            <div id="heading-social">
+                <a href="https://twitter.com/pythonpedia" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
+                <a href="https://github.com/parbhat/python-pedia" target="_blank"><i class="fa fa-github fa-2x"></i></a>
             </div>
         </div>
 

Original file line number	Diff line number	Diff line change
`@@ -932,7 +932,12 @@ code .comment {`
`932`	`932`	`.app-logo`
`933`	`933`	`{`
`934`	`934`	`width: 125px;`
`935`		`- margin-left: 30px;`
	`935`	`+ margin-left: -30px;`
	`936`	`+}`
	`937`	`+`
	`938`	`+.fa-2x`
	`939`	`+{`
	`940`	`+ font-size: 2.15em !important;`
`936`	`941`	`}`
`937`	`942`
`938`	`943`	`/* ==========================================================================`
`@@ -954,12 +959,13 @@ code .comment {`
`954`	`959`	`#heading-social`
`955`	`960`	`{`
`956`	`961`	`width: 100%;`
	`962`	`+ margin-top: 47px;`
`957`	`963`	`}`
`958`	`964`
`959`	`965`	`.app-logo`
`960`	`966`	`{`
`961`	`967`	`width: 134px;`
`962`	`968`	`height: 105px;`
`963`		`- margin-left: 0px;`
	`969`	`+ margin-left: -20px;`
`964`	`970`	`}`
`965`	`971`	`}`
Original file line number	Diff line number	Diff line change
`@@ -70,52 +70,62 @@ p`
`70`	`70`	`text-align: center;`
`71`	`71`	`}`
`72`	`72`
`73`		`-#header`
	`73`	`+#heading`
`74`	`74`	`{`
`75`	`75`	`background-color: #29dcb2;`
`76`	`76`	`text-align: center;`
`77`		`- padding-top: 10px;`
`78`		`- padding-bottom: 10px;`
	`77`	`+ padding: 10px 0;`
`79`	`78`	`box-shadow: 0 0 3px #333;`
`80`	`79`	`margin: 0px;`
`81`	`80`	`color: #fff;`
	`81`	`+ overflow: hidden;`
`82`	`82`	`}`
`83`	`83`
`84`		`-#header h1`
	`84`	`+#heading h1`
`85`	`85`	`{`
`86`		`- font-family: 'Open Sans', sans-serif;`
`87`	`86`	`font-weight: normal;`
`88`	`87`	`font-size: 42px;`
`89`	`88`	`margin: 0px;`
`90`		`- margin-top: 5px;`
	`89`	`+ margin-top: 4px;`
`91`	`90`	`}`
`92`	`91`
`93`		`-#header h4`
	`92`	`+#heading h4`
`94`	`93`	`{`
`95`	`94`	`line-height: 1.6;`
`96`	`95`	`font-size: 18px;`
`97`	`96`	`font-weight: 500;`
`98`		`- margin-bottom: 10px;`
`99`		`- margin-top: 0px;`
	`97`	`+ margin-bottom: 7px;`
	`98`	`+ margin-top: 3px;`
`100`	`99`	`text-align: center;`
	`100`	`+ padding-right: 15px;`
	`101`	`+ padding-left: 15px;`
`101`	`102`	`}`
`102`	`103`
`103`		`-#header-social`
	`104`	`+#heading-logo`
`104`	`105`	`{`
`105`		`- margin-top: 30px;`
	`106`	`+ width: 20%;`
	`107`	`+ float: left;`
`106`	`108`	`}`
`107`	`109`
`108`		`-#header .line`
	`110`	`+#heading-content`
`109`	`111`	`{`
`110`		`- margin: 0px;`
	`112`	`+ width: 60%;`
	`113`	`+ float: left;`
	`114`	`+}`
	`115`	`+`
	`116`	`+#heading-social`
	`117`	`+{`
	`118`	`+ margin-top: 40px;`
	`119`	`+ width: 20%;`
	`120`	`+ float: left;`
`111`	`121`	`}`
`112`	`122`
`113`		`-#header a`
	`123`	`+#heading a`
`114`	`124`	`{`
`115`	`125`	`color: #fff;`
`116`	`126`	`}`
`117`	`127`
`118`		`-#header a:hover`
	`128`	`+#heading a:hover`
`119`	`129`	`{`
`120`	`130`	`color: green;`
`121`	`131`	`}`
`@@ -396,10 +406,21 @@ footer a:hover`
`396`	`406`	`========================================================================== */`
`397`	`407`
`398`	`408`	`@media only screen and (max-width: 768px) {`
`399`		`- #logo`
	`409`	`+ #heading-logo`
	`410`	`+ {`
	`411`	`+ width: 100%;`
	`412`	`+ margin-top: 20px;`
	`413`	`+ margin-bottom: 25px;`
	`414`	`+ }`
	`415`	`+`
	`416`	`+ #heading-content`
	`417`	`+ {`
	`418`	`+ width: 100%;`
	`419`	`+ }`
	`420`	`+`
	`421`	`+ #heading-social`
`400`	`422`	`{`
`401`		`- margin-top: 30px;`
`402`		`- margin-bottom: 30px;`
	`423`	`+ width: 100%;`
`403`	`424`	`}`
`404`	`425`	`}`
`405`	`426`