devs
/
PCv5
6
10
Fork 3
Code Issues 19 Pull Requests Releases Wiki Activity

less: switched to lesscpy as Less compiler

Browse Source 
*Lephe entering god mode*
pull/103/head
Darks 2 years ago
parent c6ef83d32c
commit a5ca1a252c
Signed by: Darks
GPG Key ID: 7515644268BE1433
14 changed files with 169 additions and 271 deletions
Show Stats Download Patch File Download Diff File

2
Makefile
Unescape View File

@ -1,4 +1,4 @@
CSSC := lessc
CSSC := lesscpy
src := $(wildcard app/static/less/*.less)
obj := $(src:app/static/less/%.less=app/static/css/%.css)

16
app/static/css/container.css
Unescape View File

@ -1,15 +1,7 @@
/* Currently 3 screen sizes supported :
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
.container {
margin-left: 110px;
}
@media screen and (max-width: 849px) {
@media screen and (max-width:849px) {
.container {
margin-left: 0;
}
@ -18,13 +10,13 @@ section {
width: 80%;
margin: 20px auto 0 auto;
}
@media screen and (max-width: 1449px) {
@media screen and (max-width:1449px) {
section {
width: 90%;
}
}
@media screen and (max-width: 1199px) {
@media screen and (max-width:1199px) {
section {
width: 95%;
}
}
}

5
app/static/css/flash.css
Unescape View File

@ -1,6 +1,3 @@
/*
flash overlay
*/
.flash {
margin: 5px auto;
display: flex;
@ -29,4 +26,4 @@
}
.flash svg {
margin: 15px 20px 10px 30px;
}
}

5
app/static/css/footer.css
Unescape View File

@ -1,6 +1,3 @@
/*
Footer
*/
footer {
margin: 20px 0 0 0;
padding: 10px 10%;
@ -13,4 +10,4 @@ footer {
}
footer p {
margin: 3px 0;
}
}

16
app/static/css/form.css
Unescape View File

@ -1,7 +1,3 @@
/* Full-page forms */
.form {
/* anti-bots field */
}
.form form > div:not(:last-child):not(.editor-toolbar) {
margin-bottom: 16px;
}
@ -12,7 +8,7 @@
.form form label + .desc {
margin: 0 0 4px 0;
font-size: 80%;
opacity: 0.75;
opacity: .75;
}
.form form .avatar {
width: 128px;
@ -35,8 +31,7 @@
background: var(--background);
color: var(--text);
border: var(--border);
/* Transitions when resizing with the mouse produces apparent lag */
transition: all 0.15s ease, width 0s, height 0s;
transition: all .15s ease, width 0s, height 0s;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
@ -55,7 +50,6 @@
.form input[type='search']:focus-within,
.form textarea:focus-within,
.form select:focus-within {
/* Override an annoying Firefox default */
outline: none;
}
.form input[type='checkbox'],
@ -73,7 +67,6 @@
}
.form progress.entropy {
display: none;
/* Display with Js enabled */
width: 100%;
margin-top: 5px;
background: var(--background);
@ -105,7 +98,6 @@
.form .abfield {
display: none;
}
/* Interactive filter forms */
.form.filter {
margin-bottom: 16px;
}
@ -130,7 +122,7 @@
margin-top: 2px;
}
.form.filter .syntax-explanation code {
background: rgba(0, 0, 0, 0.05);
background: rgba(0,0,0,.05);
padding: 1px 2px;
border-radius: 2px;
}
}

22
app/static/css/global.css
Unescape View File

@ -1,13 +1,3 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
/* Fonts */
@font-face {
font-family: NotoSans;
src: url(../fonts/noto_sans.ttf);
@ -30,12 +20,9 @@
src: url(../fonts/Cantarell-Bold.otf);
font-display: swap;
}
/* Whole page */
* {
box-sizing: border-box;
/* This transition value is replicated everywhere transitions are customized,
make sure to track them when editing */
transition: 0.15s ease;
transition: .15s ease;
}
body {
margin: 0;
@ -44,12 +31,11 @@ body {
font-family: 'DejaVu Sans', sans-serif;
font-size: 13px;
}
@media screen and (min-width: 1449px) {
@media screen and (min-width:1449px) {
body {
font-size: 14px;
}
}
/* General */
a {
text-decoration: none;
color: var(--links);
@ -83,7 +69,6 @@ section h2 {
color: var(--text-light);
padding-bottom: 2px;
}
/* Buttons */
.button,
input[type="button"],
input[type="submit"] {
@ -102,7 +87,6 @@ input[type="button"]:focus,
input[type="submit"]:focus {
text-decoration: none;
}
/* Bootstrap-style rules */
.flex {
display: flex;
}
@ -146,4 +130,4 @@ input[type="submit"]:focus {
}
.skip-to-content-link:focus {
transform: translateY(0%);
}
}

55
app/static/css/header.css
Unescape View File

@ -1,12 +1,3 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
header {
margin: 0;
padding: 8px 16px;
@ -39,33 +30,18 @@ header .links {
header .form {
margin-right: -26px;
}
@media screen and (max-width: 849px) {
header .form {
display: none;
}
}
header .form input[type="search"] {
display: inline-block;
width: 250px;
padding: 5px 35px 5px 10px;
}
@media screen and (max-width: 1199px) {
header .form input[type="search"] {
width: 200px;
}
}
@media screen and (min-width: 1449px) {
header .form input[type="search"] {
font-size: 14px;
}
}
header .form input[type="search"]:focus ~ a {
opacity: 1;
}
header .form input[type="search"] ~ a {
position: relative;
left: -33px;
opacity: 0.7;
opacity: .7;
}
header .form input[type="search"] ~ a > svg > path {
fill: var(--text);
@ -82,18 +58,33 @@ header .form svg {
width: 24px;
height: 24px;
vertical-align: middle;
transition: 0.15s ease;
transition: .15s ease;
}
header #spotlight {
margin-left: 16px;
}
@media screen and (max-width: 1199px) {
header #spotlight {
header #spotlight a {
display: block;
}
@media screen and (max-width:849px) {
header .form {
display: none;
}
}
header #spotlight a {
display: block;
@media screen and (max-width:1199px) {
header .form input[type="search"] {
width: 200px;
}
}
@media screen and (min-width:1449px) {
header .form input[type="search"] {
font-size: 14px;
}
}
@media screen and (max-width:1199px) {
header #spotlight {
display: none;
}
}
#server-speed-warning {
background: var(--warn);
@ -103,5 +94,5 @@ header #spotlight a {
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

21
app/static/css/homepage.css
Unescape View File

@ -1,11 +1,8 @@
/*
home-title
*/
.home-title {
margin: 20px 0;
padding: 10px 5%;
background: #bf1c11;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px rgba(0,0,0,.3);
border-top: 10px solid #ab170c;
}
.home-title h1 {
@ -22,9 +19,6 @@
color: inherit;
text-decoration: underline;
}
/*
pinned-content
*/
.home-pinned-content > div {
display: flex;
justify-content: space-between;
@ -47,7 +41,7 @@
.home-pinned-content a:hover div,
.home-pinned-content a:focus div {
padding: 200px 5% 10px 5%;
background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8));
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8));
}
.home-pinned-content img {
width: 100%;
@ -69,12 +63,9 @@
margin: 0;
padding: 30px 5% 10px 5%;
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8));
text-shadow: 1px 1px 0 rgba(0,0,0,.6);
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8));
}
/*
home-articles
*/
.home-articles {
display: flex;
justify-content: space-between;
@ -110,7 +101,7 @@
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0,0,0,.2);
}
.home-articles article > img {
float: left;
@ -141,4 +132,4 @@
color: #22292c;
font-weight: 400;
font-style: italic;
}
}

210
app/static/css/navbar.css
Unescape View File

@ -1,21 +1,11 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
nav a {
opacity: 0.8;
opacity: .8;
cursor: pointer;
}
nav a:hover,
nav a:focus {
opacity: 1;
}
/* Menu */
#logo {
position: relative;
display: block;
@ -23,14 +13,7 @@ nav a:focus {
margin-bottom: 10px;
opacity: 1;
background: var(--logo-bg);
transition: 0.15s ease;
}
@media screen and (max-width: 849px) {
#logo {
width: auto;
height: 100%;
margin-bottom: 0;
}
transition: .15s ease;
}
#logo:hover,
#logo:focus {
@ -45,17 +28,24 @@ nav a:focus {
height: 65px;
margin: 0 auto;
padding: 0;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0));
transition: filter 0.15s ease;
filter: drop-shadow(0 0 2px rgba(0,0,0,.0));
transition: filter .15s ease;
}
@media screen and (max-width:849px) {
#logo {
width: auto;
height: 100%;
margin-bottom: 0;
}
}
@media screen and (max-width: 1199px) {
@media screen and (max-width:1199px) {
#logo img {
width: 60px;
height: inherit;
margin-bottom: -4.5px;
}
}
@media screen and (max-width: 499px) {
@media screen and (max-width:499px) {
#logo img {
width: 50px;
}
@ -74,7 +64,41 @@ nav a:focus {
background: var(--background);
box-shadow: var(--shadow);
}
@media screen and (max-width: 849px) {
#light-menu li {
width: 100%;
color: var(--text);
}
#light-menu li > a {
display: flex;
flex-direction: column;
flex-grow: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 20px 0;
color: var(--text);
transition: opacity .15s ease;
}
#light-menu li > a > img {
display: block;
width: 60px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px 5px 7px;
border-radius: 10%;
}
#light-menu li > a > svg {
display: block;
width: 25px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px;
}
#light-menu li > a > svg > path {
fill: var(--icons);
}
@media screen and (max-width:849px) {
#light-menu {
position: unset;
display: flex;
@ -86,16 +110,12 @@ nav a:focus {
overflow-y: hidden;
}
}
@media screen and (max-width: 499px) {
@media screen and (max-width:499px) {
#light-menu {
height: 50px;
}
}
#light-menu li {
width: 100%;
color: var(--text);
}
@media screen and (max-width: 849px) {
@media screen and (max-width:849px) {
#light-menu li {
display: flex;
flex-direction: column;
@ -105,29 +125,7 @@ nav a:focus {
font-size: 12px;
}
}
#light-menu li > a {
display: flex;
flex-direction: column;
flex-grow: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 20px 0;
color: var(--text);
transition: opacity 0.15s ease;
/* because Chrome sucks */
/* Avatar */
}
#light-menu li > a > img {
display: block;
width: 60px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px 5px 7px;
border-radius: 10%;
}
@media screen and (max-width: 849px) {
@media screen and (max-width:849px) {
#light-menu li > a > img {
width: 45px;
margin: 0;
@ -136,33 +134,21 @@ nav a:focus {
display: none;
}
}
@media screen and (max-width: 499px) {
@media screen and (max-width:499px) {
#light-menu li > a > img {
width: 40px;
}
}
#light-menu li > a > svg {
display: block;
width: 25px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px;
}
#light-menu li > a > svg > path {
fill: var(--icons);
}
@media screen and (max-width: 499px) {
@media screen and (max-width:499px) {
#light-menu li > a > div {
display: none;
}
}
/* Overlay */
#menu {
position: fixed;
z-index: 5;
left: -190px;
width: 300px;
/* default: left-to-right animation */
height: 100%;
overflow-x: hidden;
overflow-y: auto;
@ -170,31 +156,11 @@ nav a:focus {
background: var(--background);
color: var(--text);
box-shadow: var(--shadow);
transition: 0.15s ease;
/* Set class="scroll-animation" to menu to apply scroll animation */
/* Login form */
}
@media screen and (max-width: 849px) {
#menu {
width: 100%;
height: 0;
overflow-x: hidden;
font-family: NotoSans;
transition: 0.1s ease;
position: unset;
left: unset;
}
transition: .15s ease;
}
#menu.opened {
left: 110px;
}
@media screen and (max-width: 849px) {
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}
}
#menu.scroll-animation {
left: 110px;
width: 0;
@ -207,12 +173,6 @@ nav a:focus {
padding: 16px;
display: none;
}
@media screen and (max-width: 849px) {
#menu > div {
width: 100%;
padding-bottom: 2px;
}
}
#menu > div.opened {
display: block;
}
@ -225,11 +185,6 @@ nav a:focus {
display: flex;
align-items: center;
}
@media screen and (max-width: 499px) {
#menu h2 {
font-size: 15px;
}
}
#menu h2 a {
margin: 0;
font-size: inherit;
@ -244,11 +199,6 @@ nav a:focus {
vertical-align: middle;
margin-right: 8px;
}
@media screen and (max-width: 499px) {
#menu h2 > svg {
width: 24px;
}
}
#menu h2 img {
height: 48px;
vertical-align: middle;
@ -264,7 +214,7 @@ nav a:focus {
#menu hr {
margin: 15px 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
#menu ul {
margin: 0;
@ -276,7 +226,7 @@ nav a:focus {
display: block;
margin: 10px 0;
color: var(--text);
transition: opacity 0.15s ease;
transition: opacity .15s ease;
}
#menu li > a {
display: inline;
@ -297,11 +247,6 @@ nav a:focus {
#menu form {
padding: 0 8%;
}
@media screen and (max-width: 849px) {
#menu form {
padding: 0;
}
}
#menu form input[type="text"],
#menu form input[type="password"] {
margin: 8px 0;
@ -310,7 +255,7 @@ nav a:focus {
border: var(--input-border);
background: var(--input-bg);
color: var(--input-text);
opacity: 0.8;
opacity: .8;
}
#menu form input[type="text"]:focus,
#menu form input[type="password"]:focus {
@ -322,5 +267,44 @@ nav a:focus {
}
#menu form label {
font-size: 13px;
opacity: 0.8;
opacity: .8;
}
@media screen and (max-width:849px) {
#menu {
width: 100%;
height: 0;
overflow-x: hidden;
font-family: NotoSans;
transition: .1s ease;
position: unset;
left: unset;
}
}
@media screen and (max-width:849px) {
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}
}
@media screen and (max-width:849px) {
#menu > div {
width: 100%;
padding-bottom: 2px;
}
}
@media screen and (max-width:499px) {
#menu h2 {
font-size: 15px;
}
}
@media screen and (max-width:499px) {
#menu h2 > svg {
width: 24px;
}
}
@media screen and (max-width:849px) {
#menu form {
padding: 0;
}
}

6
app/static/css/pagination.css
Unescape View File

@ -1,4 +1,4 @@
.pagination {
text-align: center;
margin: 5px 0;
}
text-align: center;
margin: 5px 0;
}

6
app/static/css/shoutbox.css
Unescape View File

@ -13,7 +13,7 @@
}
#shoutbox > div > div {
padding: 2px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0,0,0,.3);
font-size: 11px;
}
#shoutbox > div > div:hover {
@ -30,5 +30,5 @@
}
#shoutbox > input:focus {
border-color: var(--border-focus);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
}
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(161,34,34,0.6);
}

49
app/static/css/table.css
Unescape View File

@ -3,11 +3,6 @@ table {
border-color: var(--border);
border-style: solid;
border-width: 0 0 1px 0;
/* Code fragments */
/* Forum and sub-forum listings */
/* Topic table */
/* Thread table */
/* Tables with filters */
}
table tr:nth-child(even) {
background: var(--background);
@ -28,10 +23,6 @@ table:not(.codehilitetable) td {
table.codehilitetable {
border: none;
width: 100%;
/* This seems to be the only way to prevent the automatic table size
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
table-layout: fixed;
}
table.codehilitetable tr:nth-child(even),
@ -72,14 +63,13 @@ table.forumlist tr > th:last-child {
}
table.forumlist tr:nth-child(4n+2),
table.forumlist tr:nth-child(4n+3) {
background: rgba(0, 0, 0, 0.05);
background: rgba(0,0,0,.05);
}
table.topiclist {
width: 100%;
margin: auto;
}
table.topiclist tr > *:nth-child(n+2) {
/* This matches all children except the first column */
table.topiclist tr > * :nth-child(n+2) {
text-align: center;
}
table.topiclist tr > td:last-child,
@ -106,22 +96,10 @@ table.thread td {
table.thread td.author {
width: 256px;
}
@media screen and (max-width: 1199px) {
table.thread td.author {
/* Includes padding */
width: 136px;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 849px) {
table.thread td.author {
width: 104px;
}
}
table.thread td.message {
padding-top: 8px;
}
table.thread td.message > *:nth-child(2) {
table.thread td.message > * :nth-child(2) {
margin-top: 0;
}
table.thread td.message img {
@ -134,11 +112,6 @@ table.thread div.info {
text-align: right;
position: relative;
}
@media screen and (max-width: 1199px) {
table.thread div.info {
float: none;
}
}
table.thread div.info > * {
display: inline-block;
vertical-align: top;
@ -183,3 +156,19 @@ table.filter-target th:after {
font-family: monospace;
font-weight: normal;
}
@media screen and (max-width:1199px) {
table.thread td.author {
width: 136px;
overflow-wrap: anywhere;
}
}
@media screen and (max-width:849px) {
table.thread td.author {
width: 104px;
}
}
@media screen and (max-width:1199px) {
table.thread div.info {
float: none;
}
}

9
app/static/css/vars.css
Unescape View File

@ -1,9 +0,0 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/

18
app/static/css/widgets.css
Unescape View File

@ -1,12 +1,3 @@
/* Currently 3 screen sizes supported :
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
/* Profile summaries */
.profile {
display: flex;
align-items: center;
@ -64,7 +55,7 @@
font-style: normal;
margin-bottom: 8px;
}
@media (max-width: 1199px) {
@media (max-width:1199px) {
table.thread .profile {
flex-direction: column;
width: 96px;
@ -86,7 +77,7 @@
display: inline;
}
}
@media (max-width: 849px) {
@media (max-width:849px) {
table.thread .profile {
width: 96px;
}
@ -95,7 +86,6 @@
height: 64px;
}
}
/* Trophies */
.trophies {
display: flex;
flex-wrap: wrap;
@ -113,7 +103,7 @@
}
.trophy.disabled {
filter: grayscale(100%);
opacity: 0.5;
opacity: .5;
border-left: 1px solid #c5c5c5;
}
.trophy.form-disabled {
@ -137,4 +127,4 @@
}
hr.signature {
opacity: 0.2;
}
}
Write Preview
Loading…
Cancel
Save