]> jfr.im git - irc/freenode/web-7.0.git/commitdiff
projects / irc / freenode / web-7.0.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (from parent 1: bf95ca3)
Yey i had some stuff stached!
authorSvante Bengtson <redacted>
Sun, 21 Feb 2016 19:05:00 +0000 (20:05 +0100)
committerSvante Bengtson <redacted>
Sun, 21 Feb 2016 19:05:00 +0000 (20:05 +0100)
css/mock1.css patch | blob | blame | history
index_mock1.html patch | blob | blame | history

diff --git a/css/mock1.css b/css/mock1.css
index 4ac98b72bf62f0a3a142b547598177acffe89842..6aa59c0e58202614c234f933a9c8432a71a7814f 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,12 +1,30 @@
+/* vars */
+:root {
+  --navbar-bg: white;
+  --nlink-col: black;
+  --jumbotron-bg: rgba(75,235,74,.4);
+  --footer-bg: #eee;
+  --link-color: #428bca;
+  --text-color: #333;
+  --border-color: 0,0,0;
+  --box-hover-color: #eee;
+}
+
+/* global */
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--text-color);
+}
+a {
+  color: var(--link-color);
+  text-decoration: none;
 }
 
 /* navbar */
 .navbar {
   width: 100%;
   height: 50px;
-  background-color: white;
+  background-color: var(--navbar-bg);
   position: fixed;
   left: 0;
   right: 0;
@@ -15,7 +33,7 @@ body {
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid rgba(var(--border-color),.3);
   z-index: 100;
 }
 .nlogo {
@@ -23,7 +41,7 @@ body {
 }
 .nlink {
   text-decoration: none;
-  color: black;
+  color: var(--nlink-col);
 }
 
 /* main */
@@ -36,12 +54,12 @@ body {
   width: 100%; 
   margin-left: 0;
   margin-right: 0;
-  position: relative;
+  position: static;
 }
 
 /* jumbotron */
 .jumbotron {
-  background: rgba(75,235,74,.4);
+  background: var(--jumbotron-bg);
   width: 100%;
 }
 .child {
@@ -56,23 +74,26 @@ body {
 .box {
   text-align: center;
   text-decoration: none;
-  color: black;
+  color: var(--text-color);
   margin-bottom: 5px;
-  border: 1px solid #000;
+  border: 1px solid rgb(var(--border-color));
   flex-basis: 30%;
-  height: 120px;
+  height: 105px;
   background-color: #fff;
 }
 .box:hover, .box:active {
-  background-color: #eee;
+  background-color: var(--box-hover-color);
 }
 .title {
   text-align: center;
 }
 
 /* articles feed */
+h1 {
+  margin: 0;
+}
 div.art {
-  border-bottom: 1px solid #eee;
+  border-top: 1px solid rgba(var(--border-color),.3);
 }
 div.art:last-child {
   border-bottom: none;
@@ -91,24 +112,23 @@ p.art-date {
   color: #ccc;
   margin-top: 0;
 }
-a {
-  color: #0645AD;
-  text-decoration: none;
-}
 p.art-link {
   margin-top: 0;
 }
 
 /* footer */
 .footer {
-  background: #eee;
-  width: 100%;
+  background: var(--footer-bg);
+  width: device-width;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+}
+.footer .footerchild p {
+  margin: 0;
 }
 .footerline {
   border-right: 1px solid #000;
diff --git a/index_mock1.html b/index_mock1.html
index 297357630cf322034b3a608a365293a90534b3e7..62da5020115d21242049a3566b2c13aea4f4472b 100644 (file)
--- a/index_mock1.html
+++ b/index_mock1.html
@@ -10,26 +10,31 @@
 </head>
 <body>
     <nav class="navbar">
-        <img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="Freenode" />
-        <a href="" class="nlink">Chat</a>
-        <a href="" class="nlink">Collaborate</a>
-        <a href="" class="nlink">Support&nbsp;</a>
+        <a href="index"><img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="Freenode" /></a>
+        <a href="about" class="nlink">About</a>
+        <a href="help" class="nlink">Help</a>
+        <a href="contribute" class="nlink">Contribute</a>
+        <a href="projects" class="nlink">Projects&nbsp;</a>
     </nav>
     <div class="container">
         <div class="jumbotron">
             <h2 class="child">I want to...</h2>
             <div class="box-container">
-                <a href="" class="box">
+                <a href="about" class="box">
                     <img src="" alt="chat" height="60px" width="60px" /><br />
-                    Join a community
+                    Know what freenode is
                 </a>
-                <a href="" class="box">
-                    <img src="" alt="group" height="60px" width="60px" /><br />
-                    Get my project on freenode
-                </a>
-                <a href="" class="box">
+                <a href="help" class="box">
                     <img src="" alt="support" height="60px" width="60px" /><br />
-                    Support freenode
+                    Get help
+                </a>
+                <a href="contribute" class="box">
+                    <img src="" alt="server" height="60px" width="60px" /><br />
+                    Contribute to freenode
+                </a>
+                <a href="projects" class="box">
+                    <img src="" alt="gms" height="60px" width="60px" /><br />
+                    Know who's using freenode
                 </a>
             </div>
         </div>
@@ -48,7 +53,8 @@
                 <p class="art-link"><a href="">Read More</a></p>
             </div>
         </div>
-        <div class="footer">
+    </div>
+        <footer class="footer">
             <div class="footerchild">
             Hello dear
             </div>
@@ -58,9 +64,12 @@
             </div>
             <span class="footerline"></span>
             <div class="footerchild">
-            Some other links
+            <p><a>Some other links</a></p>
+            <p><a>Some other links</a></p>
+            <p><a>Some other links</a></p>
+            <p><a>Some other links</a></p>
             </div>
-        </div>
+        </footer>
     </div>
 </body>
 </html>
Unnamed repository; edit this file 'description' to name the repository.