Made some changes

diff --git a/README.md b/README.md
index 2df9bd2aaca5f1bcb88147444bddaa3648bbe9bb..dc16d405ace25a79d534d05546d6881c57cdb58e 100644 (file)
--- a/README.md
+++ b/README.md
@@ -2,6 +2,11 @@
 
 ## Goals
 
-The goal is to create a new, modern responsive, easily navigated website for freenode.net
+The goal is to create a new, modernly responsive, and easily navigated website for freenode.net
 
 ## TODO
+1. Get the basic static page up, and how to connect (latest two news about the reformation + about page, kinda)
+2. FAQ pages structure, start adding FAQ's (note: tagging could be a good thing for searching and finding) 
+3. Add possibility to edit on-site integrated with services (log in with your nickserv acc)
+4. Gms integration
+5. Further development TODO: TODO

diff --git a/css/mock1.css b/css/mock1.css
index 7b46a31de9a06690d74fee6f7a8157637618a7ef..d2164f6146b17d84a6da6555f579d4c4b18ec31a 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /* reset css for browser compat */
 * {
     margin: 0;
@@ -9,13 +10,36 @@ body {
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 16px;
   color: #222222;
+=======
+/* 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;
+  --box-round: 10px;
+}
+
+/* global */
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--text-color);
+}
+a {
+  color: var(--link-color);
+  text-decoration: none;
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 
 /* navbar */
 .navbar {
   width: 100%;
   height: 50px;
-  background-color: white;
+  background-color: var(--navbar-bg);
   position: fixed;
   left: 0;
   right: 0;
@@ -23,7 +47,7 @@ body {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid rgba(var(--border-color),.3);
   z-index: 100;
 }
 .nlogo {
@@ -40,6 +64,7 @@ body {
 
 .navlinks > li {
   text-decoration: none;
+<<<<<<< HEAD
   font-size: 20px;
   color: black;
   float: left;
@@ -48,6 +73,9 @@ body {
   padding-top: 25px;
   transform: translate(0, -25%); /* I have no idea how or why this works but it just does. */
   cursor: pointer; /* for pseudo-links to still feel like links */
+=======
+  color: var(--nlink-col);
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 
 /* main */
@@ -55,13 +83,20 @@ body {
   margin: 51px 0 0; /* merged margins into one */
   padding: 0;
   width: 100%; 
+<<<<<<< HEAD
   position: relative;
   height: auto;
   min-height: 100%; /* height is needed for some properties */
+=======
+  margin-left: 0;
+  margin-right: 0;
+  position: static;
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 
 /* jumbotron */
 .jumbotron {
+<<<<<<< HEAD
   color: white;
   height: 50%;
   width: 100%;
@@ -73,6 +108,16 @@ body {
   wrap-flex: wrap;
   justify-content: center;
   align-items: center;
+=======
+  background: var(--jumbotron-bg);
+  width: 100%;
+  -webkit-border-bottom-right-radius: var(--box-round);
+  -webkit-border-bottom-left-radius: var(--box-round);
+  -moz-border-radius-bottomright: var(--box-round);
+  -moz-border-radius-bottomleft: var(--box-round);
+  border-bottom-right-radius: var(--box-round);
+  border-bottom-left-radius: var(--box-round);
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 .child {
   text-align: center;
@@ -80,6 +125,7 @@ body {
 .box {
   text-align: center;
   text-decoration: none;
+<<<<<<< HEAD
   color: black;
   margin: 0 1%;
   margin-bottom: 5px;
@@ -89,9 +135,20 @@ body {
   border-radius: 10px;
   width: 350px;
   display: inline-block;
+=======
+  color: var(--text-color);
+  margin-bottom: 5px;
+  border: 1px solid rgb(var(--border-color));
+  flex-basis: 30%;
+  height: 105px;
+  background-color: #fff;
+  border-radius: var(--box-round);
+  -webkit-border-radius: var(--box-round);
+  -moz-border-radius: var(--box-round);
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 .box:hover, .box:active {
-  background-color: #eee;
+  background-color: var(--box-hover-color);
 }
 .title {
   text-align: center;
@@ -155,14 +212,17 @@ body {
 
   }
 /* articles feed */
+h1 {
+  margin: 0;
+}
 div.art {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(var(--border-color),.3);
 }
 div.art:last-child {
   border-bottom: none;
 }
 h3.art {
-  margin: 0;
+  margin-bottom: 0;
 }
 p.art {
   margin: 0;
@@ -173,18 +233,53 @@ p.art-ingress {
 }
 p.art-date {
   color: #ccc;
-  margin-top: 0;
-}
-a {
-  color: #0645AD;
-  text-decoration: none;
+  margin: 0;
 }
 p.art-link {
   margin-top: 0;
 }
 
+/* help */
+.hmain {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+a.hchild {
+  color: var(--text-color);
+  height: 40px;
+  width: 95%;
+  text-align: center;
+  border-top: 1px solid rgba(var(--border-color),.6);
+  border-left: 1px solid rgba(var(--border-color),.6);
+  border-right: 1px solid rgba(var(--border-color),.6);
+}
+a.hchild:hover, a.hchild:active {
+  background-color: var(--box-hover-color);
+}
+.hchild:first-child {
+  margin-top: 10px;
+  -webkit-border-top-left-radius: var(--box-round);
+  -webkit-border-top-right-radius: var(--box-round);
+  -moz-border-radius-topleft: var(--box-round);
+  -moz-border-radius-topright: var(--box-round);
+  border-top-left-radius: var(--box-round);
+  border-top-right-radius: var(--box-round);
+}
+.hchild:last-child {
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(var(--border-color),.6);
+  -webkit-border-bottom-right-radius: var(--box-round);
+  -webkit-border-bottom-left-radius: var(--box-round);
+  -moz-border-radius-bottomright: var(--box-round);
+  -moz-border-radius-bottomleft: var(--box-round);
+  border-bottom-right-radius: var(--box-round);
+  border-bottom-left-radius: var(--box-round);
+}
+
 /* footer */
 .footer {
+<<<<<<< HEAD
   background: #666; /* >:^) */
   width: 100%;
   /* margin and padding are reset at line 1-5 */
@@ -211,3 +306,27 @@ p.art-link {
   right: 0;
   margin-right: 8px;
   }
+=======
+  background: var(--footer-bg);
+  width: device-width;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+/*  -webkit-border-top-left-radius: var(--box-round);
+  -webkit-border-top-right-radius: var(--box-round);
+  -moz-border-radius-topleft: var(--box-round);
+  -moz-border-radius-topright: var(--box-round);
+  border-top-left-radius: var(--box-round);
+  border-top-right-radius: var(--box-round);*/
+}
+.footer .footerchild p {
+  margin: 0;
+}
+.footerline {
+  border-right: 1px solid #000;
+  height: 100%;
+}
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0

diff --git a/help_mock1.html b/help_mock1.html
new file mode 100644 (file)
index 0000000..3d07f4e
--- /dev/null
+++ b/help_mock1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>freenode - help</title>
+    <link href="css/mock1.css" rel="stylesheet" />
+</head>
+<body>
+    <nav class="navbar">
+        <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">
+        <h1>Help...</h1>
+        <div class="hmain">
+            <a class="hchild">...I know nothing, wtf</a>
+            <a class="hchild">...I'm part of a project and want to chat</a>
+            <a class="hchild">...I run a project</a>
+            <a class="hchild">...I'm generally interested and want to know interesting stuff</a>
+        </div>
+        
+        <footer class="footer">
+            <div class="footerchild">
+                Hello dear
+            </div>
+            <span class="footerline"></span>
+            <div class="footerchild">
+                Some links
+            </div>
+            <span class="footerline"></span>
+            <div class="footerchild">
+                <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>
+        </footer>
+    </div>
+</body>
+</html>

diff --git a/index_mock1.html b/index_mock1.html
index 2bce219e6849df4943fa79f3964e7063eed47eb9..05239a2396e60228c1f404a44e28c83521751d15 100644 (file)
--- a/index_mock1.html
+++ b/index_mock1.html
@@ -10,12 +10,20 @@
 </head>
 <body>
     <nav class="navbar">
+<<<<<<< HEAD
         <img src="img/logos/coloured-alphabg.svg" class="nlogo" alt="Freenode" />
         <ul class="navlinks">
             <li href="" >Chat</li>
             <li href="" >Collaborate</li>
             <li href="" >Support&nbsp;</li>
         </ul>
+=======
+        <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>
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
     </nav>
     <div class="container">
         <div class="welcome-big">
@@ -24,6 +32,7 @@
             <button type="button" class="welcome-learnmore">Learn More &gt;&gt;</button>
         </div>
         <div class="jumbotron">
+<<<<<<< HEAD
                 <div href="" class="box">
                     <img src="" alt="chat" height="60px" width="60px" /><br />
                     Join a community
@@ -36,7 +45,29 @@
                     <img src="" alt="support" height="60px" width="60px" /><br />
                     Support freenode
                 </div>
+=======
+            <h2 class="child">I want to...</h2>
+            <div class="box-container">
+                <a href="about" class="box">
+                    <img src="" alt="chat" height="60px" width="60px" /><br />
+                    Know what freenode is
+                </a>
+                <a href="help" class="box">
+                    <img src="" alt="support" height="60px" width="60px" /><br />
+                    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>
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
         </div>
+        
         <div class="main">
             <h1>News</h1>
             <div class="art">
@@ -53,6 +84,7 @@
             </div>
         </div>
     </div>
+<<<<<<< HEAD
     <!--I do not even know why footer was put in the container-->
         <div class="footer">
                 &nbsp;&copy; freenode 1995?-2016. All rights reserved.
@@ -60,3 +92,25 @@
                 <a href="/sitemap.xml">Sitemap</a> - <a href="/anotherlink.html">Another Link</a>
             </span>
         </div>
+=======
+    
+        <footer class="footer">
+            <div class="footerchild">
+            Hello dear
+            </div>
+            <span class="footerline"></span>
+            <div class="footerchild">
+            Some links
+            </div>
+            <span class="footerline"></span>
+            <div class="footerchild">
+            <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>
+        </footer>
+    </div>
+</body>
+</html>
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0