less: switched to lesscpy as Less compiler

*Lephe entering god mode*

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)
 

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%;
   }
-}
+}

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;
-}
+}

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;
-}
+}

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;
-}
+}

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%);
-}
+}

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);
+}

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;
-}
+}

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: 1199px) {
+@media screen and (max-width:849px) {
+  #logo {
+    width: auto;
+    height: 100%;
+    margin-bottom: 0;
+  }
+}
+@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,37 +64,10 @@ nav a:focus {
   background: var(--background);
   box-shadow: var(--shadow);
 }
-@media screen and (max-width: 849px) {
-  #light-menu {
-    position: unset;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    height: 60px;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-}
-@media screen and (max-width: 499px) {
-  #light-menu {
-    height: 50px;
-  }
-}
 #light-menu li {
   width: 100%;
   color: var(--text);
 }
-@media screen and (max-width: 849px) {
-  #light-menu li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-grow: 1;
-    padding: 0 2px;
-    font-size: 12px;
-  }
-}
 #light-menu li > a {
   display: flex;
   flex-direction: column;
@@ -115,9 +78,7 @@ nav a:focus {
   height: 100%;
   margin: 20px 0;
   color: var(--text);
-  transition: opacity 0.15s ease;
-  /* because Chrome sucks */
-  /* Avatar */
+  transition: opacity .15s ease;
 }
 #light-menu li > a > img {
   display: block;
@@ -127,20 +88,6 @@ nav a:focus {
   margin: 0 7px 5px 7px;
   border-radius: 10%;
 }
-@media screen and (max-width: 849px) {
-  #light-menu li > a > img {
-    width: 45px;
-    margin: 0;
-  }
-  #light-menu li > a > img ~ div {
-    display: none;
-  }
-}
-@media screen and (max-width: 499px) {
-  #light-menu li > a > img {
-    width: 40px;
-  }
-}
 #light-menu li > a > svg {
   display: block;
   width: 25px;
@@ -151,18 +98,57 @@ nav a:focus {
 #light-menu li > a > svg > path {
   fill: var(--icons);
 }
-@media screen and (max-width: 499px) {
+@media screen and (max-width:849px) {
+  #light-menu {
+    position: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+@media screen and (max-width:499px) {
+  #light-menu {
+    height: 50px;
+  }
+}
+@media screen and (max-width:849px) {
+  #light-menu li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    padding: 0 2px;
+    font-size: 12px;
+  }
+}
+@media screen and (max-width:849px) {
+  #light-menu li > a > img {
+    width: 45px;
+    margin: 0;
+  }
+  #light-menu li > a > img ~ div {
+    display: none;
+  }
+}
+@media screen and (max-width:499px) {
+  #light-menu li > a > img {
+    width: 40px;
+  }
+}
+@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;
+  }
+}

app/static/css/pagination.css

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

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);
+}

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;
+  }
+}

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)
-*/

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;
-}
+}