playing with header

paleomedia · Feb 19, 2015 · f808772 · f808772
1 parent bee2e97
commit f808772
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 38 deletions.
diff --git a/functions.php b/functions.php
@@ -1,6 +1,6 @@
- outputs e.g.  somefile.txt was last modified: December 29 2002 22:16:23.
+<?php   // outputs e.g.  somefile.txt was last modified: December 29 2002 22:16:23.
 
-$filename = 'somefile.txt';
+$filename = 'index.html';
 if (file_exists($filename)) {
     echo "$filename was last modified: " . date ("F d Y H:i:s.", filemtime($filename));
 }

diff --git a/images/Twitter-Icon.png → images/twittericon.png b/images/Twitter-Icon.png → images/twittericon.png
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
   <meta name="keywords" content="Idaho, legislature, bills, laws, legislation" />  <!-- Make dynamic based on homepage -->
   <meta name="author" content="Nathaniel Hoffman"
   <meta name="revised" content="<?php filemtime(index.html);" />   <!-- last mod of index.html -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link href="styles.css" type="text/scc" rel="stylesheet" />
   <link rel="shortcut icon" href="favicon.ico" />
@@ -20,42 +21,36 @@
   <body>
 
   <header>
-  <div class="tops">
-  	  		
+  <div class="tops">  	  		
+
 		<div id="topline">
-  			<div class="wrapper">
-  				<div id="socials">
+  			<div class="socials">
   				<ul>
-  				<li>Twit</li>
-  				<li>RSS</li>
-  				<li>Git</li>
-  				<li>Mail</li>
-  				<li>FB</li>
+  				<li class="social_tw"><a href="http://twitter.com/idleg">t</a></li>
+  				<li class="social_rss"><a href="http://idleg.com/rss">t</a></li>
+  				<li class="social_git"><a href="http://github.com">t</a></li>
+  				<li class="social_mail"><a href="mailto:[email protected]">t</a></li>
+  				<li class="social_fb"><a href="http://facebook.com">t</a></li>
   				</ul>	
-  				</div>
-  			</div>
+  		    </div>
   		</div>
 
   		<div id="logoline">
-  			<div class="wrapper">
-  				<div id="logo"><h1>#IDleg</h1></div>
-  				<div id="slogan"><h2>The socio-political social network</h2></div>
-  				<div id="search">Search</div>  			
-  			</div>
+  			<div id="logo"><h1>#IDleg</h1></div>
+  			<div id="slogan"><h2>The socio-political social network</h2></div>
+  			<div id="search">Search</div>  			
   		</div>
-
+  		  		
   		<div id="menu">
-  			<div class="wrapper">
   				<ul>
   				<li>Home</li>
   				<li>About</li>
   				<li>Bills</li>
   				<li>Lawmakers</li>
   				<li>Topics</li>
   				</ul>		
-  			</div>
   		</div>
-
+  		
   </div>
 
   </header> 

diff --git a/styles.css b/styles.css
@@ -1,49 +1,89 @@
-.wrapper {
-	margin: 0 auto;
-	width: 960px;
-	opacity: 1.0;
-	}
+
+
+
 
 .tops {
 	width: 100%;
-	height: 165px;
+	height: 145px;
 	background-image: url("images/topo.png");
 	background-repeat: repeat;  
+	float: left;
 	}
 
 #topline {
 	width: 100%;
 	height: 40px;
 	background-color: #99cccc;
 	opacity: 0.4;
-	}
-
-#logo {
 	float: left;
 	}
 
 
-#socials {
-	list-style: none;
+div.socials {	
     margin: 0;
-    padding: 0;
+    position: absolute;
+	top: 0;
+	right: 0;
+	text-align: right;
+	font-size: 1.2em;
+	padding: 1.25em .5em;
     }
 
+.socials ul {
+	list-style: none;
+	}
+
+.socials li {
+    position: relative;
+	display: inline-block;
+	margin-right: .125em;
+	}
+
+li.social_tw a {
+	text-decoration: none;
+	background-image: url("images/twittericon.png");
+	} 
+
+#logoline {
+	width: 100%;
+	height: 65px;
+	float: left;
+	}
+
+div#logo {
+	float: left;
+	font-family: Garamond, "Times New Roman", serif;
+	font-size: 16px;
+	}
+
+
+
 #slogan {
 	float: left;
+	font-family: Garamond, "Times New Roman", serif;
+	font-size: 10px
+	padding: 40
 	}
 
 #menu {
 	width: 100%;
-	height: 60px;
+	height: 40px;
 	background-color: #99cccc;
 	opacity: 0.4;
 	clear: both;
+	float: left;
+    }
+
+#menu ul {
 	list-style: none;
     margin: 0;
     padding: 0;
-    }
+    overflow: hidden;
+}
 
-li {
-	display: inline;
+#menu li {
+	float: left;
+	display: inline-block
+	padding: .5em;
+	margin: 10;
 	}