flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
+ max-width: 800px;
+ margin: 0 auto;
}
.box {
- text-align: left;
+ text-align: center;
text-decoration: none;
color: var(--text-color);
margin-bottom: 5px;
-moz-border-radius: var(--box-round);
}
+.box span {
+ display: block;
+}
+
.box:hover,.box:active {
background-color: var(--box-hover-color);
}
}
div.art {
- border-bottom: 1px solid rgba(var(--border-color),.3);
+ clear: right;
}
-div.art:last-child {
- border-bottom: none;
+div.art:not(:first-child) {
+ border-top: 1px solid rgba(var(--border-color),.3);
}
b.art {
}
.art-date {
+ float: right;
color: #ccc;
- margin: 0;
+ margin: 0 .5em;
}
p.heading {
color: rgba(var(--footer-text-color),.9);
margin-top: 2vh;
display: flex;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
min-height: 27vh;
justify-content: space-between;
align-items: flex-start;
.footerchild {
margin-top: .5em;
+ flex: 1 1 1px;
+ min-width: 12em;
+}
+
+.footer-push {
+ margin-left: auto;
+ min-width: 12em;
+ max-width: max-content;
}
.footer a {
padding-left: 30px;
}
-@media all and (max-width: 500px) {
+@media all and (max-width: 600px) {
.footer {
flex-direction: column;
}
width: 100%;
}
+ .footer-push {
+ margin-left: 0;
+ }
+
.footerchild ul li:last-child {
margin-bottom: .5em;
}
margin: 0;
}
+ .box-container {
+ flex-direction: column;
+ margin: 0 .5em;
+ }
+
.box div {
position: relative;
top: initial;
text-align: right;
}
-@media all and (max-width: 500px) {
+@media all and (max-width: 600px) {
.copyright {
height: 5vh;
}
</li>
</ul>
</div>
- <div class="footerchild hdn">
-
- </div>
<div class="footerchild">
+ <div class="footer-push">
<h2>Social Media</h2>
<ul>
<li>
Private Internet Access</a>
</li>
</ul>
+ </div>
</div>
</footer>
<footer class="copyright">
<h2 class="child">Welcome to freenode, the new home of your
projects.</h2>
<div class="box-container">
- <a class="box" href="about"><i class=
- "fa fa-comment fa-4x"></i><br>
- Chat</a> <a class="box" href="help"><i class=
- "fa fa-question fa-4x"></i><br>
- FAQ</a> <a class="box" href="contribute"><i class=
- "fa fa-users fa-4x"></i><br>
- Register a group</a>
+ <a class="box" href="about">
+ <i class="fa fa-comment fa-4x"></i>
+ <span>Chat</span>
+ </a>
+ <a class="box" href="help">
+ <i class="fa fa-question fa-4x"></i>
+ <span>FAQ</span>
+ </a>
+ <a class="box" href="contribute">
+ <i class="fa fa-users fa-4x"></i>
+ <span>Register a group</span>
+ </a>
</div>
</div>
<div class="main">