less: switched to lesscpy as Less compiler
*Lephe entering god mode*
This commit is contained in:
parent
c6ef83d32c
commit
a5ca1a252c
2
Makefile
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)
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,6 +1,3 @@
|
|||
/*
|
||||
flash overlay
|
||||
*/
|
||||
.flash {
|
||||
margin: 5px auto;
|
||||
display: flex;
|
||||
|
@ -29,4 +26,4 @@
|
|||
}
|
||||
.flash svg {
|
||||
margin: 15px 20px 10px 30px;
|
||||
}
|
||||
}
|
|
@ -1,6 +1,3 @@
|
|||
/*
|
||||
Footer
|
||||
*/
|
||||
footer {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 10px 10%;
|
||||
|
@ -13,4 +10,4 @@ footer {
|
|||
}
|
||||
footer p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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%);
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
.pagination {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
/* Currently 3 screen sizes supported :
|
||||
- micro: < 500px
|
||||
- tiny: < 850px
|
||||
- small: < 1200px
|
||||
- normal: >= 1200px
|
||||
|
||||
Ex:
|
||||
@media screen and (max-width: @var)
|
||||
*/
|
|
@ -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…
Reference in New Issue