Merge branch 'master' of http://github.com/mission712/web-7.0

Need to push it up

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.swo b/css/.mock1.css.swo
new file mode 100644 (file)
index 0000000..8122859
Binary files /dev/null and b/css/.mock1.css.swo differ

diff --git a/css/.mock1.css.swp b/css/.mock1.css.swp
new file mode 100644 (file)
index 0000000..bf84786
Binary files /dev/null and b/css/.mock1.css.swp differ

diff --git a/css/mock1.css b/css/mock1.css
index 4ac98b72bf62f0a3a142b547598177acffe89842..d2164f6146b17d84a6da6555f579d4c4b18ec31a 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,84 +1,228 @@
+<<<<<<< HEAD
+/* reset css for browser compat */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  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;
   top: 0;
   display: flex;
   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 {
   height: 40px;
 }
-.nlink {
+/* navigation links */
+.navlinks {
+        position: relative;
+        display: table;
+        height: 50px;
+        margin: 0 20px;
+        list-style-type: none;
+}
+
+.navlinks > li {
   text-decoration: none;
+<<<<<<< HEAD
+  font-size: 20px;
   color: black;
+  float: left;
+  display: table-cell;
+  margin: 0 15px;
+  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 */
 .container {
-  margin-top: 51px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+  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: relative;
+  position: static;
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0
 }
 
 /* jumbotron */
 .jumbotron {
-  background: rgba(75,235,74,.4);
+<<<<<<< HEAD
+  color: white;
+  height: 50%;
   width: 100%;
+  top: 50%;
+  margin: 5% 0;
+  position: relative;
+  display: flex;
+  padding: 25px;
+  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;
 }
-.box-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  align-items: center;
-}
 .box {
   text-align: center;
   text-decoration: none;
+<<<<<<< HEAD
   color: black;
+  margin: 0 1%;
   margin-bottom: 5px;
   border: 1px solid #000;
+  height: 250px;
+  background-color: #fff;
+  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: 120px;
+  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;
 }
 
+/* a big welcome for newcomers ;) */
+.welcome-big {
+  position: relative;
+  margin-top: 51px;
+  border-bottom: 1px solid #888;
+  width: 100%;
+
+  background: rgb(65,225,64); /* fallback */
+  background: rgba(15, 75, 14, .6);
+
+  padding: 10%;
+
+  text-align: center;
+  color: white;
+  text-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
+
+  box-shadow: 0 3px 5px rgba(0,0,0, 0.36);
+
+  height: 50%;
+
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.welcome-big h1 { /* make this stand out */
+  font-size: 50px;
+  line-height: 80px;
+} 
+
+.welcome-big h3 {
+  font-size: 22px;
+  width: 70%;
+  margin: 0 auto;
+  vertical-align: middle;
+  }
+
+.welcome-learnmore {
+  border: 1px solid #666;
+  background-color: white;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+
+  padding: 5px 8px;
+
+  border-radius: 8px;
+
+  box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
+
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  vertical-align: middle;
+  bottom: -50%;
+  transform: translate(0, 50%);
+
+  }
 /* 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;
@@ -89,28 +233,100 @@ 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 {
-  background: #eee;
+<<<<<<< HEAD
+  background: #666; /* >:^) */
   width: 100%;
+  /* margin and padding are reset at line 1-5 */
+  display: flex;
+  flex-wrap: wrap;
+  color: #eee;
+  font-size: 18px;
+  line-height: 22px;
+  
+  min-height: 22px;
+  height: auto;
+
+  position: fixed;
+  bottom: 0;
+} /* plz no justify ;_; */
+
+.footer a {
+  text-decoration: none;
+  color: #7bf;
+  }
+
+.footer-links {
+  position: absolute;
+  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: center;
+  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%;
-}
\ No newline at end of file
+}
+>>>>>>> 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 300199ff1adbc2e7288a3d220bcbffae7a06d736..05239a2396e60228c1f404a44e28c83521751d15 100644 (file)
--- a/index_mock1.html
+++ b/index_mock1.html
@@ -10,29 +10,64 @@
 </head>
 <body>
     <nav class="navbar">
+<<<<<<< HEAD
         <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>
+        <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">
+            <h1>Welcome to the new home of your projects.</h1>
+            <h3>freenode aims to maximize efficiency in development by allowing a collaborative and relaxed environment for developers while allowing users to get an answer for their problems.</h3>
+            <button type="button" class="welcome-learnmore">Learn More &gt;&gt;</button>
+        </div>
         <div class="jumbotron">
-            <h2 class="child">I want to...</h2>
-            <div class="box-container">
-                <a href="" class="box">
+<<<<<<< HEAD
+                <div href="" class="box">
                     <img src="" alt="chat" height="60px" width="60px" /><br />
                     Join a community
-                </a>
-                <a href="" class="box">
+                </div>
+                <div href="" class="box">
                     <img src="" alt="group" height="60px" width="60px" /><br />
                     Get my project on freenode
-                </a>
-                <a href="" class="box">
+                </div>
+                <div href="" class="box">
                     <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">
@@ -48,7 +83,18 @@
                 <p class="art-link"><a href="">Read More</a></p>
             </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.
+            <span class="footer-links">
+                <a href="/sitemap.xml">Sitemap</a> - <a href="/anotherlink.html">Another Link</a>
+            </span>
+        </div>
+=======
+    
+        <footer class="footer">
             <div class="footerchild">
             Hello dear
             </div>
@@ -58,7 +104,13 @@
             </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>
-    </div>
\ No newline at end of file
+        </footer>
+    </div>
+</body>
+</html>
+>>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0