#6 HTML and CSS for Project Page

sorted footer and drop down menus Signed-off-by: Dave <[email protected]>
websuperheroes · Nov 21, 2013 · 72a7a55 · 72a7a55
1 parent 9db8042
commit 72a7a55
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 31 deletions.
diff --git a/www/app/project.html b/www/app/project.html
@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>Dev Elephant</title>
-	<link rel="stylesheet" type="text/css" href="css/core.css" media="screen">
+	<link rel="stylesheet" type="text/css" href="assets/css/style.min.css" media="screen">
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
@@ -28,7 +28,7 @@ <h1>Dev Elephant</h1>
 					<li>
 				</ul>
 			</nav>
-		</header>
+			<div class="logo"></div>		</header>
 	</div>
 	<div class="content-wrapper">
 		<main class="global-width">
@@ -49,7 +49,7 @@ <h1>Dev Elephant</h1>
                 </fieldset>
                 <fieldset>
                 	<legend><span class="h2">To do</span></legend>
-                        <ul>
+                        <ul class="project-list">
                             <li>
                                 <div class="label">
                                     <label for="Item1">Item 1</label>
@@ -59,39 +59,52 @@ <h1>Dev Elephant</h1>
                                 </div>
                                 <ul class="sub">
                                 	<li>
-	                                	<li><a href="#">Settings</a>
+                                		<a  class="icon-cog" href="#"><span>Settings</span></a>
 	                                	<ul>
 		                                	<li><a href="#" title="Completed Item">Complete!</a></li>
 											<li><a href="#" title="Edit item Name">Edit Name</a></li>
-											<li><a href="#" title="Delete Iteam">Delete</a></li>
+											<li><a href="#" title="Delete Item">Delete</a></li>
 										</ul>
-                            </li>
-                            <li>
+									</li>
+								</ul>
+							</li>
+							<li>
                                 <div class="label">
                                     <label for="Item2">Item 2</label>
                                 </div>
                                 <div class="value">
-                                    <input data-val="true" name="Item2" type="text" value="Minify JS" />
+                                    <input data-val="true" name="Item2" type="text" value="Compile Somethin" />
                                 </div>
                                 <ul class="sub">
-                                	<li><a href="#" title="Completed Item">Complete!</a></li>
-									<li><a href="#" title="Edit item Name">Edit Name</a></li>
-									<li><a href="#" title="Delete Iteam">Delete</a></li>
+                                	<li>
+                                		<a class="icon-cog" href="#"><span>Settings</span></a>
+	                                	<ul>
+		                                	<li><a href="#" title="Completed Item">Complete!</a></li>
+											<li><a href="#" title="Edit item Name">Edit Name</a></li>
+											<li><a href="#" title="Delete Item">Delete</a></li>
+										</ul>
+									</li>
 								</ul>
-                            </li>
-                            <li>
+							</li>
+							<li>
                                 <div class="label">
                                     <label for="Item3">Item 3</label>
                                 </div>
                                 <div class="value">
-                                    <input data-val="true" name="Project2" type="text" value="Minify CSS" />
+                                    <input data-val="true" name="Item3" type="text" value="Minify CSS" />
                                 </div>
                                 <ul class="sub">
-                                	<li><a href="#" title="Completed Item">Complete!</a></li>
-									<li><a href="#" title="Edit item Name">Edit Name</a></li>
-									<li><a href="#" title="Delete Iteam">Delete</a></li>
+                                	<li>
+                                		<a class="icon-cog" href="#"><span>Settings</span></a>
+	                                	<ul>
+		                                	<li><a href="#" title="Completed Item">Complete!</a></li>
+											<li><a href="#" title="Edit item Name">Edit Name</a></li>
+											<li><a href="#" title="Delete Iteam">Delete</a></li>
+										</ul>
+									</li>
 								</ul>
-                            </li>                            
+							</li>
+
                         </ul>
                 </fieldset>						
 		</main>
@@ -113,8 +126,7 @@ <h1>Dev Elephant</h1>
 	                                <a href="#" class="icon-btn" title="Add Item">Add Item</a>
 	                            </li>
 	                        </ul>
-						</li>
-						<li><a href="#" title="Save project">Save</a></li>
+						</li><li><a href="#" title="Save project">Save</a></li>
 					</ul>
 				</fieldset>
 			</form>

diff --git a/www/src/scss/modules/_app.scss b/www/src/scss/modules/_app.scss
@@ -0,0 +1,23 @@
+.sub {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+.sub a {
+	color: #CCC;
+}
+.sub span {
+	text-indent: -999em;
+	display: block;
+}
+.sub ul {
+	position: absolute;
+	left: -9999em;
+	background: #333;
+	padding: 5px;
+	z-index: 1;
+	width: 130px;
+}
+.sub:hover ul {
+	left: -105px;
+}
diff --git a/www/src/scss/modules/_defaults.scss b/www/src/scss/modules/_defaults.scss
@@ -5,7 +5,7 @@
   padding: 0 8px;
 }
 h1 {
-	margin-left: 40px;
+	margin-left: 50px;
 	color: #FFF;
 	font-size: 25px;
 	line-height: 40px;
@@ -16,6 +16,7 @@ h2, .h2 {
 }
 a {
 	color: #FF6B6B;
+	text-decoration: none;
 }
 p {
 	margin: 20px 0;

diff --git a/www/src/scss/modules/_reset.scss b/www/src/scss/modules/_reset.scss
@@ -35,12 +35,11 @@ html, body {
   height: 100%;
 }
 body {
-  font-family: $font-family;
-  font-size: $default-font-size-px;
-  font-size: $default-font-size-rem;
-  line-height: $default-line-height;
-  background: #FFF;
-  color: $default-text-color;
+  font-family: arial;
+  font-size: 20px;
+  font-size: 2rem;
+  background: #EADDC4;
+  color: #333;
 }
 ol, ul {
   list-style: none;

diff --git a/www/src/scss/partials/_footer.scss b/www/src/scss/partials/_footer.scss
@@ -1,11 +1,43 @@
 footer {
 	text-align: center;
-	margin-top: 50px;
+	position: relative;
+}
+footer legend {
+	position: absolute;
+	left: -999em;
 }
 footer p {
-	font-size: 14px;
+	font-size: 11px;
+	font-size: 1.1rem;
+	color: #AAA;
+	margin: 4px auto;
 }
 footer a {
-	color: #222;
+	color: #FFF;
 	text-decoration: none;
+}
+.footer-wrapper {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: #333;
+}
+
+.add-item {
+	position: absolute;
+	left: -999em;
+}
+.project-options > li {
+	display: inline-block;
+	width: 50%;
+	padding: 5px;
+	border-left: 1px solid #555;
+}
+.project-options > li a{
+	display: block;
+}
+.project-options > li:first-child {
+	border-left:none;
+	border-right: 1px solid #222;
 }
diff --git a/www/src/scss/partials/_header.scss b/www/src/scss/partials/_header.scss
@@ -1,6 +1,11 @@
 .head-wrap {
 	height: 40px;
 	background: #FF6B6B;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1;
 }
 header {
 	position: relative;

diff --git a/www/src/scss/partials/_main.scss b/www/src/scss/partials/_main.scss
@@ -0,0 +1,3 @@
+.content-wrapper {
+	margin-top: 50px;
+}
diff --git a/www/src/scss/partials/_nav.scss b/www/src/scss/partials/_nav.scss
@@ -13,7 +13,7 @@ nav {
 	position: absolute;
 	left: -9999em;
 	top: 40px;
-	background: #222;
+	background: #333;
 	width: 150px;
 	padding: 8px;
 }