columns: the final commit for now probably
This commit is contained in:
parent
5af506713c
commit
07bf8a6bde
|
@ -175,12 +175,26 @@ a:hover {
|
|||
background: #faecc0;
|
||||
}
|
||||
|
||||
.userpages-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
.userpages-list ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
list-style-type: none;
|
||||
li {
|
||||
min-width: 30%;
|
||||
width: auto;
|
||||
padding: 4px 8px;
|
||||
background-color: #484b53;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.userpages-list ul li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* public-sans-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Public Sans';
|
||||
|
@ -244,4 +258,4 @@ a:hover {
|
|||
main {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,181 @@
|
|||
body {
|
||||
background: #fff;
|
||||
margin:0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
width: calc(100% - 16px); /* css weirdness */
|
||||
padding: 50px 8px 100px 8px;
|
||||
background: #B7EBCA;
|
||||
color: #316A3A;
|
||||
letter-spacing: 2px;
|
||||
line-height: 225%;
|
||||
}
|
||||
.header-wiki {
|
||||
padding: 80px 8px 140px 8px;
|
||||
}
|
||||
.subtitle {
|
||||
margin: 12px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.header:after {
|
||||
background: linear-gradient(-45deg, #fff 16px, transparent 0), linear-gradient(45deg, #fff 16px, transparent 0);
|
||||
background-position: left bottom;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 32px 32px;
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
padding: 24px 10%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #316A3A;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: #ceedda;
|
||||
}
|
||||
|
||||
|
||||
h1,h2,h3 {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
}
|
||||
|
||||
hr.zig, hr.zag {
|
||||
border: none;
|
||||
height: 30px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
hr.zig{
|
||||
background: linear-gradient(-135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-position: center bottom;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 20px 40px;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
hr.zag {
|
||||
background: linear-gradient(-135deg, #b1b1b1 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #b1b1b1 20px, #FFF 0) 0 5px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-position: center bottom;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 20px 40px;
|
||||
z-index: 50;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
/* legacy colours */
|
||||
|
||||
.header-blue {
|
||||
background: #b2cbf0;
|
||||
color: #395c91;
|
||||
}
|
||||
|
||||
.header-red {
|
||||
background: #f0b2b2;
|
||||
color: #7e1616;
|
||||
}
|
||||
|
||||
.header-orange {
|
||||
background: #f0d5b2;
|
||||
color: #7e3c16;
|
||||
}
|
||||
|
||||
/* code blocks */
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
color: #1a3d1f;
|
||||
background-color: #e4f1e9;
|
||||
padding: 12px 18px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
code {
|
||||
font-family: 'Comic Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: #1a3d1f;
|
||||
background-color: #e4f1e9;
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* new colour system (still needs work) */
|
||||
|
||||
/* blue */
|
||||
.blue a {
|
||||
color: #395c91;
|
||||
}
|
||||
.blue a:hover {
|
||||
background-color: #d0def2;
|
||||
}
|
||||
.blue .header {
|
||||
background: #b2cbf0;
|
||||
color: #395c91;
|
||||
}
|
||||
.blue pre {
|
||||
background-color: #e9f0fa;
|
||||
color: #1c2e4a;
|
||||
}
|
||||
.blue code {
|
||||
background-color: #e9f0fa;
|
||||
color: #1c2e4a;
|
||||
}
|
||||
|
||||
/* orange */
|
||||
.orange a {
|
||||
color: #7e3c16;
|
||||
}
|
||||
.orange a:hover {
|
||||
background-color: #f7ede1;
|
||||
}
|
||||
.orange .header {
|
||||
background: #f0d5b2;
|
||||
color: #7e3c16;
|
||||
}
|
||||
.orange pre {
|
||||
background-color: #f7ede1;
|
||||
color: #45220e;
|
||||
}
|
||||
.orange code {
|
||||
background-color: #f7ede1;
|
||||
color: #45220e;
|
||||
}
|
||||
|
||||
/* red */
|
||||
.red a {
|
||||
color: #7e1616
|
||||
}
|
||||
.red a:hover {
|
||||
background-color: #f0dddd;
|
||||
}
|
||||
.red .header {
|
||||
background: #f0b2b2;
|
||||
color: #7e1616;
|
||||
}
|
||||
.red pre {
|
||||
background-color: #f7e9e9;
|
||||
color: #571010;
|
||||
}
|
||||
.red code {
|
||||
background-color: #f7e9e9;
|
||||
color: #571010;
|
||||
}
|
|
@ -54,10 +54,10 @@
|
|||
$lastModified = date ("F d Y H:i:s.", filemtime($user));
|
||||
$user = basename(dirname($user));
|
||||
$usercount++; ?>
|
||||
<div><li><a href="/~<?=$user?>/" class="userpage-item">~<?=$user?></a><br><p style="font-size: 0.75em; margin: 4px 0;">Last Updated: <?=$lastModified?></p></li></div>
|
||||
<li><a href="/~<?=$user?>/" class="userpage-item">~<?=$user?></a><br><p style="font-size: 0.75em; margin: 4px 0;">Last Updated: <?=$lastModified?></p></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
Reference in New Issue