Merge pull request 'Switch to LessCSS' (#102) from lesscss into dev

Reviewed-on: devs/PCv5#102
preprod
Darks 1 year ago
commit fbc500e833
  1. 13
      Makefile
  2. 59
      app/static/css/admin/form.css
  3. 61
      app/static/css/container.css
  4. 22
      app/static/css/editor.css
  5. 33
      app/static/css/flash.css
  6. 17
      app/static/css/footer.css
  7. 179
      app/static/css/form.css
  8. 182
      app/static/css/global.css
  9. 156
      app/static/css/header.css
  10. 188
      app/static/css/homepage.css
  11. 223
      app/static/css/light.css
  12. 363
      app/static/css/navbar.css
  13. 42
      app/static/css/responsive.css
  14. 52
      app/static/css/shoutbox.css
  15. 123
      app/static/css/table.css
  16. 9
      app/static/css/vars.css
  17. 212
      app/static/css/widgets.css
  18. 21
      app/static/less/container.less
  19. 39
      app/static/less/flash.less
  20. 14
      app/static/less/footer.less
  21. 152
      app/static/less/form.less
  22. 131
      app/static/less/global.less
  23. 105
      app/static/less/header.less
  24. 140
      app/static/less/homepage.less
  25. 279
      app/static/less/navbar.less
  26. 4
      app/static/less/pagination.less
  27. 35
      app/static/less/shoutbox.less
  28. 220
      app/static/less/table.less
  29. 14
      app/static/less/vars.less
  30. 162
      app/static/less/widgets.less
  31. 3
      app/templates/base/head.html
  32. 1
      app/utils/render.py

@ -0,0 +1,13 @@
CSSC := lessc
src := $(wildcard app/static/less/*.less)
obj := $(src:app/static/less/%.less=app/static/css/%.css)
run: css
@flask run
css: $(obj)
app/static/css/%.css: app/static/less/%.less
$(CSSC) $< $@
.PHONY: css run

@ -1,59 +0,0 @@
.form .avatar {
width: 128px; height: 128px;
}
.form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form form > div:not(:last-child) {
margin-bottom: 15px;
}
.form form label {
display: inline-block;
margin-bottom: 5px;
}
.form input {
cursor: pointer; /* don't know why it is not a cursor by default */
}
.form input[type='text'],
.form input[type='email'],
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form textarea {
display: block;
width: 100%; padding: 6px 8px;
border: 1px solid #c8c8c8;
/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form textarea:focus {
border-color: #91bfef;
box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.4);
}
.form textarea {
max-width: 100%;
resize: vertical;
}
.form input[type="submit"] {
/*width: 20%;*/
}
.form form .msgerror {
color: red;
font-weight: 400;
margin-top: 5px;
}

@ -1,47 +1,30 @@
/* Currently 3 screen sizes supported :
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
.container {
margin-left: 110px;
margin-left: 110px;
}
@media screen and (max-width: 849px) {
.container {
margin-left: 0;
}
}
section {
width: 80%;
margin: 20px auto 0 auto;
margin: 20px auto 0 auto;
}
@media screen and (max-width: 1399px) {
section {
width: 90%;
}
@media screen and (max-width: 1449px) {
section {
width: 90%;
}
}
@media screen and (max-width: 1199px) {
section {
width: 95%;
}
}
section .avatar {
display: block;
width: 128px; height: 128px;
}
/* Some grid */
.flex-grid {
display: flex;
flex-flow: row wrap;
}
.flex-grid > * {
min-width: 250px;
flex: auto;
}
/* Two columns */
.flex-grid.fg2 > * {
width: 50%;
}
/* Three columns */
.flex-grid.fg3 > * {
width: 33%;
}
/* Four columns */
.flex-grid.fg4 > * {
width: 25%;
section {
width: 95%;
}
}

@ -1,22 +0,0 @@
.editor div {
display: flex; flex-direction: row;
flex-wrap: wrap; align-items: center;
margin-bottom: 5px;
}
.editor button {
height: 25px; margin: 0 0px; padding: 0 3px;
border: var(--border); border-radius: 2px;
cursor: pointer;
background: var(--background);
}
.editor button > img {
opacity: .7;
}
.editor button:hover,
.editor button:focus {
border: var(--border-focused);
}
.editor button:hover > img,
.editor button:focus > img {
opacity: 1;
}

@ -1,33 +1,32 @@
/*
flash overlay
flash overlay
*/
.flash {
margin: 5px auto;
display: flex;
align-items: center;
width: 80%;
font-size: 14px;
border-bottom: 5px solid var(--info);
border-radius: 1px;
box-shadow: var(--shadow);
margin: 5px auto;
display: flex;
align-items: center;
width: 80%;
font-size: 14px;
border-bottom: 5px solid var(--info);
border-radius: 1px;
box-shadow: var(--shadow);
}
.flash.info {
border-color: var(--info);
border-color: var(--info);
}
.flash.ok {
border-color: var(--ok);
border-color: var(--ok);
}
.flash.warning {
border-color: var(--warn);
border-color: var(--warn);
}
.flash.error {
border-color: var(--error);
border-color: var(--error);
}
.flash span {
flex-grow: 1;
margin: 15px 10px 10px 0;
flex-grow: 1;
margin: 15px 10px 10px 0;
}
.flash svg {
margin: 15px 20px 10px 30px;
margin: 15px 20px 10px 30px;
}

@ -1,13 +1,16 @@
/*
Footer
Footer
*/
footer {
margin: 20px 0 0 0; padding: 10px 10%;
text-align: center; font-size: 11px; font-style: italic;
background: var(--background); color: var(--text);
border-top: var(--border);
margin: 20px 0 0 0;
padding: 10px 10%;
text-align: center;
font-size: 11px;
font-style: italic;
background: var(--background);
color: var(--text);
border-top: var(--border);
}
footer p {
margin: 3px 0;
margin: 3px 0;
}

@ -1,159 +1,122 @@
.form .avatar {
width: 128px; height: 128px;
/* Full-page forms */
.form {
/* anti-bots field */
}
.form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form form > div:not(:last-child):not(.editor-toolbar) {
margin-bottom: 16px;
margin-bottom: 16px;
}
.form form label {
display: inline-block;
margin: 0 5px 4px 0;
}
.form form label + .desc {
margin: 0 0 4px 0;
font-size: 80%;
opacity: 0.75;
}
.form form label,
.trophies-panel p {
display: inline-block;
margin-bottom: 4px;
.form form .avatar {
width: 128px;
height: 128px;
}
.form label + .desc {
margin: 0 0 4px 0;
.form form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form input[type='text'],
.form input[type='email'],
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form textarea,
.form select,
.trophies-panel > div {
display: block;
width: 100%; padding: 6px 8px;
background: var(--background); color: var(--text);
border: var(--border);
/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
.form select {
display: block;
width: 100%;
padding: 6px 8px;
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;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form textarea:focus {
border-color: var(--border-focused);
box-shadow: 0 0 0 3px var(--shadow-focused);
.form textarea:focus,
.form select:focus {
border-color: var(--border-focused);
box-shadow: 0 0 0 3px var(--shadow-focused);
}
.form input[type='text']:focus-within,
.form input[type='email']:focus-within,
.form input[type='date']:focus-within,
.form input[type='password']:focus-within,
.form input[type='search']:focus-within,
.form textarea:focus {
/* Override an annoying Firefox default */
outline: none;
.form textarea:focus-within,
.form select:focus-within {
/* Override an annoying Firefox default */
outline: none;
}
.form input[type='checkbox'],
.form input[type='radio'] {
display: inline;
vertical-align: middle;
margin: 0 4px 0 0;
}
.form textarea {
max-width: 100%;
resize: vertical;
max-width: 100%;
resize: vertical;
}
.form select {
width: auto;
width: auto;
}
.form progress.entropy {
display: none; /* display with Js enabled */
width: 100%; margin-top: 5px;
background: var(--background);
border: var(--border);
}
.form progress.entropy.low::-moz-progress-bar {
background: var(--error);
}
display: none;
/* Display with Js enabled */
width: 100%;
margin-top: 5px;
background: var(--background);
border: var(--border);
}
.form progress.entropy.low::-moz-progress-bar,
.form progress.entropy.low::-webkit-progress-bar {
background: var(--error);
}
.form progress.entropy.medium::-moz-progress-bar {
background: var(--warn);
background: var(--error);
}
.form progress.entropy.medium::-moz-progress-bar,
.form progress.entropy.medium::-webkit-progress-bar {
background: var(--warn);
}
.form progress.entropy.high::-moz-progress-bar {
background: var(--ok);
background: var(--warn);
}
.form progress.entropy.high::-moz-progress-bar,
.form progress.entropy.high::-webkit-progress-bar {
background: var(--ok);
}
.form input[type="checkbox"],
.form input[type="radio"] {
display: inline;
vertical-align: middle;
}
.form input[type="submit"] {
/*width: 20%;*/
}
.form input.abfield {
display: none;
}
.form form .msgerror {
color: var(--error);
font-weight: 400;
margin-top: 5px;
}
.form .desc {
font-size: 80%;
opacity: .75;
}
.form hr {
height: 3px;
border: var(--hr-border);
border-width: 1px 0;
margin: 24px 0;
}
.trophies-panel label {
margin-right: 5px;
background: var(--ok);
}
.trophies-panel p:first-child {
margin-top: 0;
.form hr {
height: 3px;
border: var(--hr-border);
border-width: 1px 0;
margin: 24px 0;
}
.trophies-panel p label {
margin: 0;
.form .msgerror {
color: var(--error);
font-weight: 400;
margin-top: 5px;
}
/* Editor */
.editor textarea {
font-family: monospace;
height: 192px;
.form .abfield {
display: none;
}
/* Interactive filter forms */
.form.filter {
margin-bottom: 16px;
}
.form.filter > p:first-child {
font-size: 80%;
color: gray;
margin-bottom: 2px;
}
.form.filter {
margin-bottom: 16px;
}
.form.filter input {
font-family: monospace;
}
.form.filter .syntax-explanation {
font-size: 80%;
color: gray;
@ -166,10 +129,8 @@
line-height: 20px;
margin-top: 2px;
}
.form.filter .syntax-explanation li {
}
.form.filter .syntax-explanation code {
background: rgba(0,0,0,.05);
background: rgba(0, 0, 0, 0.05);
padding: 1px 2px;
border-radius: 2px;
}

@ -1,143 +1,138 @@
/* 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); font-display: swap; }
@font-face { font-family: Twemoji; src: url(../fonts/TwitterColorEmoji.ttf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; }
@font-face {
font-family: NotoSans;
src: url(../fonts/noto_sans.ttf);
font-display: swap;
}
@font-face {
font-family: Twemoji;
src: url(../fonts/TwitterColorEmoji.ttf);
font-display: swap;
}
@font-face {
font-family: Cantarell;
font-weight: normal;
src: url(../fonts/Cantarell-Regular.otf);
font-display: swap;
}
@font-face {
font-family: Cantarell;
font-weight: bold;
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: .15s ease;
box-sizing: border-box;
/* This transition value is replicated everywhere transitions are customized,
make sure to track them when editing */
transition: 0.15s ease;
}
body {
margin: 0;
background: var(--background); color: var(--text);
font-family: 'DejaVu Sans', sans-serif;
margin: 0;
background: var(--background);
color: var(--text);
font-family: 'DejaVu Sans', sans-serif;
font-size: 13px;
}
@media screen and (min-width: 1449px) {
body {
font-size: 14px;
}
}
/* General */
a {
text-decoration: none;
color: var(--links);
}
a:hover {
text-decoration: underline;
text-decoration: none;
color: var(--links);
}
a:hover,
a:focus {
outline: none;
text-decoration: underline;
outline: none;
}
section p {
line-height: 20px;
word-wrap: anywhere;
line-height: 20px;
word-wrap: anywhere;
}
section ul {
line-height: 24px;
line-height: 24px;
}
section h1 {
margin-top: 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 26px;
color: var(--text-light);
margin-top: 0;
border-bottom: var(--hr-border);
font-family: Cantarell;
font-weight: bold;
font-size: 26px;
color: var(--text-light);
}
section h2 {
margin: 24px 0 16px 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 18px;
color: var(--text-light);
margin: 24px 0 16px 0;
border-bottom: var(--hr-border);
font-family: Cantarell;
font-weight: bold;
font-size: 18px;
color: var(--text-light);
padding-bottom: 2px;
}
/* Buttons */
.button,
input[type="button"],
input[type="submit"] {
padding: 6px 10px; border-radius: 2px;
cursor: pointer;
font-family: 'DejaVu Sans', sans-serif; font-weight: 400;
border: 0;
}
padding: 6px 10px;
border-radius: 2px;
cursor: pointer;
font-family: 'DejaVu Sans', sans-serif;
font-weight: 400;
border: 0;
}
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
text-decoration: none;
.button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
text-decoration: none;
}
@media screen and (max-width: 1499px) {
.profile-avatar {
width: 96px;
height: 96px;
}
.profile-xp {
height: 8px;
min-width: 64px;
}
.profile-xp div {
height: 8px;
}
}
@media screen and (max-width: 1199px) {
.profile-points {
display: none;
}
.profile-points-small {
display: unset;
}
}
/*
Bootstrap-style rules
*/
/* Bootstrap-style rules */
.flex {
display: flex;
display: flex;
}
.bg-ok,
.bg-ok {
background: var(--ok);
color: var(--ok-text);
background: var(--ok);
color: var(--ok-text);
}
.bg-ok:hover,
.bg-ok:focus,
.bg-ok:active {
background: var(--ok-active);
background: var(--ok-active);
}
.bg-error,
.bg-error {
background: var(--error);
color: var(--error-text);
background: var(--error);
color: var(--error-text);
}
.bg-error:hover,
.bg-error:focus,
.bg-error:active {
background: var(--error-active);
background: var(--error-active);
}
.bg-warn {
background: var(--warn);
color: var(--warn-text);
background: var(--warn);
color: var(--warn-text);
}
.bg-warn:hover,
.bg-warn:focus,
.bg-warn:active {
background: var(--warn-active);
background: var(--warn-active);
}
.skip-to-content-link {
height: 30px;
left: 50%;
@ -149,7 +144,6 @@ input[type="submit"]:hover,
color: var(--warn-text);
border-radius: 1px;
}
.skip-to-content-link:focus {
transform: translateY(0%);
}

@ -1,99 +1,107 @@
/*
header
*/
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
header {
height: 50px; margin: 0; padding: 0 16px;
background: var(--background); border-bottom: var(--border);
display: flex; align-items: center; justify-content: space-between;
flex-flow: row wrap;
/* When the search field occupies the rightmost position, the calculated
position of the svg icon (on the right) might overflow from the header and
induce horizontal scrolling. */
overflow: hidden;
}
@media screen and (max-width: 1199px) {
#spotlight {
display: none;
}
header input[type="search"] {
width: 200px;
}
}
@media screen and (max-width: 849px) {
header .form {
display: none;
}
margin: 0;
padding: 8px 16px;
background: var(--background);
border-bottom: var(--border);
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: row wrap;
overflow: hidden;
}
header .title {
margin: 4px 0;
}
header .title a {
color: inherit;
color: inherit;
}
header .title h1 {
font-family: Cantarell; font-weight: bold; font-size: 18px;
display: inline;
font-family: Cantarell;
font-weight: bold;
font-size: 18px;
display: inline;
}
header .spacer {
flex: 1 0 auto;
flex: 1 0 auto;
}
header .links {
margin-left: 16px;
margin-left: 16px;
}
header svg {
width: 24px; height: 24px; vertical-align: middle;
transition: .15s ease;
header .form {
margin-right: -26px;
}
header a:hover > svg, header a:focus > svg {
fill: var(--text);
@media screen and (max-width: 849px) {
header .form {
display: none;
}
}
header a {
fill: #363636;
cursor: pointer;
header .form input[type="search"] {
display: inline-block;
width: 250px;
padding: 5px 35px 5px 10px;
}
header .form {
/* The search icon is draws inside the input field but its space is allocated
on the right. Apply a negative margin to compensate this:
-24px for the search icon
-2px for the spacing between the search icon and the field */
margin-right: -26px;
@media screen and (max-width: 1199px) {
header .form input[type="search"] {
width: 200px;
}
}
header .form input[type="search"] {
display: inline-block; width: 250px;
padding: 5px 35px 5px 10px;
@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: .7;
position: relative;
left: -33px;
opacity: 0.7;
}
header .form input[type="search"] ~ a > svg > path {
fill: var(--text);
fill: var(--text);
}
header .form input[type="search"] ~ a:hover,
header .form input[type="search"]:focus ~ a {
opacity: 1;
header .form a {
fill: #363636;
cursor: pointer;
}
#spotlight {
margin-left: 16px;
header .form a:hover > svg,
header .form a:focus > svg {
fill: var(--text);
}
#spotlight a {
display: block;
header .form svg {
width: 24px;
height: 24px;
vertical-align: middle;
transition: 0.15s ease;
}
header #spotlight {
margin-left: 16px;
}
@media screen and (max-width: 1199px) {
header #spotlight {
display: none;
}
}
header #spotlight a {
display: block;
}
#server-speed-warning {
background: var(--warn);
color: var(--warn-text);
text-align: center;
border-radius: 2px;
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
background: var(--warn);
color: var(--warn-text);
text-align: center;
border-radius: 2px;
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

@ -1,134 +1,144 @@
/*
home-title
home-title
*/
.home-title {
margin: 20px 0; padding: 10px 5%;
background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
border-top: 10px solid #ab170c;
margin: 20px 0;
padding: 10px 5%;
background: #bf1c11;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
border-top: 10px solid #ab170c;
}
.home-title h1 {
margin-top: 0;
color: #ffffff; border-color: #ffffff;
.home-title h1 {
margin-top: 0;
color: #ffffff;
border-color: #ffffff;
}
.home-title p {
margin-bottom: 0; text-align: justify;
color: #ffffff;
margin-bottom: 0;
text-align: justify;
color: #ffffff;
}
.home-title a {
color: inherit; text-decoration: underline;
color: inherit;
text-decoration: underline;
}
/*
pinned-content
pinned-content
*/
.home-pinned-content > div {
display: flex; justify-content: space-between;
display: flex;
justify-content: space-between;
}
.home-pinned-content article {
flex-grow: 1; margin: 0 1px; padding: 0;
position: relative;
max-width: 250px; overflow: hidden;
.home-pinned-content h2 {
display: block;
margin: 5px 0;
font-size: 18px;
font-family: NotoSans;
font-weight: 200;
line-height: 20px;
}
.home-pinned-content a {
display: block;
display: block;
}
.home-pinned-content a:hover img,
.home-pinned-content a:focus img {
filter: blur(3px);
}
.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));
}
.home-pinned-content img {
width: 100%; filter: blur(0px);
width: 100%;
filter: blur(0px);
}
.home-pinned-content article div {
position: absolute; bottom: 0; z-index: 3;
width: 90%; margin: 0;
padding: 30px 5% 10px 5%;
color: #ffffff; 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-pinned-content article {
flex-grow: 1;
margin: 0 1px;
padding: 0;
position: relative;
max-width: 250px;
overflow: hidden;
}
.home-pinned-content h2 {
display: block; margin: 5px 0;
font-size: 18px; font-family: NotoSans; font-weight: 200;
line-height: 20px;
.home-pinned-content article div {
position: absolute;
bottom: 0;
z-index: 3;
width: 90%;
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));
}
/*
home-articles
home-articles
*/
.home-articles {
display: flex; justify-content: space-between;
display: flex;
justify-content: space-between;
}
.home-articles > div {
flex-grow: 1; max-width: 48%;
flex-grow: 1;
max-width: 48%;
}
.home-articles h1 {
display: flex; justify-content: space-between; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-articles h1 a {
padding: 0;
font-family: NotoSans; font-size: 16px;
font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f;
padding: 0;
font-family: NotoSans;
font-size: 16px;
font-weight: 400;
color: #234d5f;
}
.home-articles h1 a:hover,
.home-articles h1 a:focus {
padding-right: 10px;
}
.home-articles p {
margin: 5px 0;
text-align: justify;
color: #808080;
}
.home-articles article {
padding: 10px; margin: 10px 0; display: flex; align-items: center;
background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
padding: 10px;
margin: 10px 0;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.home-articles article > img {
float: left; margin-right: 10px; flex-shrink: 0;
float: left;
margin-right: 10px;
flex-shrink: 0;
}
.home-articles article > img.screeshot {
width: 128px; height: 64px;
width: 128px;
height: 64px;
}
.home-articles article > div {
flex-shrink: 1;
flex-shrink: 1;
}
.home-articles article h3 {
margin: 0;
color: #424242; font-weight: normal;
margin: 0;
color: #424242;
font-weight: normal;
}
.home-articles p {
margin: 5px 0;
text-align: justify;
color: #808080;
.home-articles article a:hover,
.home-articles article a:focus {
text-decoration: underline;
}
.home-articles .metadata {
margin: 0;
color: #22292c;
margin: 0;
color: #22292c;
}
.home-articles .metadata a {
color: #22292c; font-weight: 400; font-style: italic;
}
/*
hover rules
*/
.home-pinned-content a:hover img,
.home-pinned-content a:focus img {
filter: blur(3px);
}
.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,.7) 40px,rgba(0,0,0,.8));
}
.home-articles h1 a:hover,
.home-articles h1 a:focus {
padding-right: 10px;
}
.home-articles article a:hover,
.home-articles article a:focus {
text-decoration: underline;
color: #22292c;
font-weight: 400;
font-style: italic;
}

@ -1,223 +0,0 @@
/* Whole page */
.light-hidden {
display: none;
}
.container {
margin-left: 0;
}
/* Menu */
#light-menu {
position: unset;
display: flex; flex-direction: row; align-items: center;
width: 100%; height: 60px;
overflow-x: auto; overflow-y: hidden;
}
#logo {
width: auto; height: 100%; margin-bottom: 0;
}
#logo img {
width: 60px; height: inherit;
margin-bottom: -4.5px;
}
#light-menu li {
display: flex; flex-direction: column;
align-items: center; flex-grow: 1;
height: 100%;
padding: 0 2px;
}
#light-menu li > a {
cursor: pointer; margin: 0;
}
#light-menu li > a:hover {
text-decoration: none;
}
#light-menu li > a > svg {
width: 20px;
}
#light-menu li > a > div {
display: block;
font-size: 12px;
}
#light-menu li:not(.opened) > a:hover::after,
#light-menu li:not(.opened) > a:focus::after {
display: none;
}
#light-menu li span[notifications]:not([notifications="0"])::before {
content: attr(notifications);
display: inline-block; margin-right: 6px;
vertical-align: middle;
padding: 0 5px 0 4px; border-radius: 5px;
font-family: NotoSans;
background: #ffffff; color: #000000;
}
#menu {
width: 100%; height: 0; overflow-x: hidden;
font-family: NotoSans; font-size: 12px;
transition: .1s ease;
position: unset;
left: unset;
}
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}
#menu > div {
width: 100%;
}
#menu h2 {
font-size: 15px;
}
#menu h2 > svg {
width: 24px;
}
#menu span {
display: block;
color: #b8b8b8;
font-size: 10px;
}
#menu span > a {
display: inline;
margin: 0; font-style: normal;
font-size: 12px;
}
#menu ul {
list-style: none;
margin: 10px 0; padding: 0;
line-height: 20px;
color: #b8b8b8;
}
#menu li {
margin: 5px 0;
}
@media screen and (max-width: 499px) {
#light-menu, #spacer-menu {
height: 40px;
}
#logo img {
width: 40px;
}
#light-menu li > a > div {
display: none;
}
}
#menu form input {
display: block;
margin: 5px 15px; padding: 5px 10px;
font-size: 14px;
transition: .15s ease;
}
#menu form label {
float: left; margin-right: 10px;
}
#menu form input:first-child {
margin-bottom: 0; border-bottom: none;
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
}
#menu form input:nth-child(2) {
margin-top: 0; border-top: 1px solid #dddddd;
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
}
#menu form a {
display: block; margin-left: 15px;
}
/* Header */
header {
padding: 0 8px;
}
/* Homepage */
#shoutbox {
display: none;
}
section {
width: unset;
margin: 12px;
}
.home-title {
padding: 10px;
}
.home-title p {
font-size: 14px;
}
.home-pinned-content {
margin-top: 30px;
}
.home-pinned-content article {
margin: 5px 0;
}
.home-pinned-content article > a {
width: 100%;
display: flex; align-items: center;
text-decoration: none;
}
.home-pinned-content img {
flex-shrink: 0;
width: 100px; height: 100px;
}
.home-pinned-content article div {
flex-grow: 1; margin-left: 10px;
}
.home-pinned-content h2 {
margin: 0; color: #242424;
text-decoration: underline;
}
.home-pinned-content span {
color: #000000; font-size: 14px;
}
.home-articles > div {
margin-top: 30px;
}
.home-articles article {
margin-bottom: 15px;
}
.home-articles article > img {
flex-shrink: 0; width: 128px; height: 64px;
}
.home-articles article > div {
margin-left: 5px;
}
.home-articles h1 > a {
font-size: 13px; color: #666666;
}
.home-articles p {
font-size: 14px;
}
/* Notifications */
.alert {
display: none;
}

@ -1,183 +1,326 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
nav a {
opacity: .8;
cursor: pointer;
opacity: 0.8;
cursor: pointer;
}
nav a:hover,
nav a:focus {
opacity: 1;
opacity: 1;
}
/* Menu */
#light-menu {
position: fixed; z-index: 10;
list-style: none;
width: 110px;
height: 100%;