Browse Source

less: switched to lesscpy as Less compiler

*Lephe entering god mode*
pull/103/head
Darks 12 months ago
parent
commit
a5ca1a252c
Signed by: Darks
GPG Key ID: 7515644268BE1433
  1. 2
      Makefile
  2. 16
      app/static/css/container.css
  3. 5
      app/static/css/flash.css
  4. 5
      app/static/css/footer.css
  5. 16
      app/static/css/form.css
  6. 22
      app/static/css/global.css
  7. 55
      app/static/css/header.css
  8. 21
      app/static/css/homepage.css
  9. 210
      app/static/css/navbar.css
  10. 6
      app/static/css/pagination.css
  11. 6
      app/static/css/shoutbox.css
  12. 49
      app/static/css/table.css
  13. 9
      app/static/css/vars.css
  14. 18
      app/static/css/widgets.css

2
Makefile

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

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

6
app/static/css/shoutbox.css

@ -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

@ -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

@ -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

@ -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;
}
}
Loading…
Cancel
Save