]> 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 (parent: dcfb1e1)
Trying to start with help page, also some rounding
authorSvante Bengtson <redacted>
Sun, 21 Feb 2016 22:42:10 +0000 (23:42 +0100)
committerSvante Bengtson <redacted>
Sun, 21 Feb 2016 22:42:10 +0000 (23:42 +0100)
css/mock1.css patch | blob | blame | history
help_mock1.html [new file with mode: 0644] patch | blob
index_mock1.html patch | blob | blame | history

diff --git a/css/mock1.css b/css/mock1.css
index b196d94eb37fe82cffc1724a0159e2e7d64da088..9faa9880b6f26ca528be3201813311d48a63c593 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -8,6 +8,7 @@
   --text-color: #333;
   --border-color: 0,0,0;
   --box-hover-color: #eee;
+  --box-round: 10px;
 }
 
 /* global */
@@ -61,6 +62,12 @@ a {
 .jumbotron {
   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);
 }
 .child {
   text-align: center;
@@ -80,6 +87,9 @@ a {
   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);
 }
 .box:hover, .box:active {
   background-color: var(--box-hover-color);
@@ -116,6 +126,44 @@ 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: var(--footer-bg);
@@ -126,6 +174,12 @@ p.art-link {
   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;
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 1c31b5bddf735869b94f1b60bc01a015edf4ea2c..5798a3e354c6324c616b0eea99edae1a0857c1ea 100644 (file)
--- a/index_mock1.html
+++ b/index_mock1.html
@@ -38,6 +38,7 @@
                 </a>
             </div>
         </div>
+        
         <div class="main">
             <h1>News</h1>
             <div class="art">
@@ -54,6 +55,7 @@
             </div>
         </div>
     </div>
+    
         <footer class="footer">
             <div class="footerchild">
             Hello dear
Unnamed repository; edit this file 'description' to name the repository.