--text-color: #333;
--border-color: 0,0,0;
--box-hover-color: #eee;
+ --box-round: 10px;
}
/* global */
.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;
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);
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);
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;
--- /dev/null
+<!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 </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>