diff --git a/app/static/css/admin/form.css b/app/static/css/admin/form.css
deleted file mode 100644
index f7bcb8d..0000000
--- a/app/static/css/admin/form.css
+++ /dev/null
@@ -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;
-}
diff --git a/app/static/css/container.css b/app/static/css/container.css
index b82bd9f..8c1037f 100644
--- a/app/static/css/container.css
+++ b/app/static/css/container.css
@@ -1,47 +1,30 @@
-.container {
- margin-left: 110px;
-}
+/* 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) {
+ .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%;
+ }
}
diff --git a/app/static/css/editor.css b/app/static/css/editor.css
deleted file mode 100644
index 16b0ac0..0000000
--- a/app/static/css/editor.css
+++ /dev/null
@@ -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;
-}
diff --git a/app/static/css/flash.css b/app/static/css/flash.css
index 7f08e3b..1d6cca3 100644
--- a/app/static/css/flash.css
+++ b/app/static/css/flash.css
@@ -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;
}
diff --git a/app/static/css/footer.css b/app/static/css/footer.css
index 9292ac1..dee682e 100644
--- a/app/static/css/footer.css
+++ b/app/static/css/footer.css
@@ -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;
}
diff --git a/app/static/css/form.css b/app/static/css/form.css
index bab32f3..4ecf2cb 100644
--- a/app/static/css/form.css
+++ b/app/static/css/form.css
@@ -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,
-.trophies-panel p {
- display: inline-block;
- margin-bottom: 4px;
+.form form label {
+ display: inline-block;
+ margin: 0 5px 4px 0;
}
-.form label + .desc {
- margin: 0 0 4px 0;
+.form form label + .desc {
+ margin: 0 0 4px 0;
+ font-size: 80%;
+ opacity: 0.75;
+}
+.form form .avatar {
+ width: 128px;
+ height: 128px;
+}
+.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);
+ 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;
+ height: 3px;
+ border: var(--hr-border);
+ border-width: 1px 0;
+ margin: 24px 0;
}
-.trophies-panel label {
- margin-right: 5px;
+.form .msgerror {
+ color: var(--error);
+ font-weight: 400;
+ margin-top: 5px;
}
-.trophies-panel p:first-child {
- margin-top: 0;
+.form .abfield {
+ display: none;
}
-.trophies-panel p label {
- margin: 0;
-}
-
-/* Editor */
-
-.editor textarea {
- font-family: monospace;
- height: 192px;
-}
-
/* 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;
}
diff --git a/app/static/css/global.css b/app/static/css/global.css
index b3105a0..daee05e 100644
--- a/app/static/css/global.css
+++ b/app/static/css/global.css
@@ -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%);
}
diff --git a/app/static/css/header.css b/app/static/css/header.css
index fbeaf70..d625025 100644
--- a/app/static/css/header.css
+++ b/app/static/css/header.css
@@ -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;
+ 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;
}
-@media screen and (max-width: 1199px) {
- #spotlight {
- display: none;
- }
- header input[type="search"] {
- width: 200px;
- }
+header .title {
+ margin: 4px 0;
}
-@media screen and (max-width: 849px) {
- header .form {
- display: none;
- }
-}
-
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 a:hover > svg, header a:focus > svg {
- fill: var(--text);
-}
-header a {
- fill: #363636;
- cursor: pointer;
-}
-
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;
+ 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;
+ 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: .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);
}
diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css
index fa5bfbd..0277403 100644
--- a/app/static/css/homepage.css
+++ b/app/static/css/homepage.css
@@ -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 a {
- display: block;
-}
-
-.home-pinned-content img {
- 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 h2 {
- display: block; margin: 5px 0;
- font-size: 18px; font-family: NotoSans; font-weight: 200;
- line-height: 20px;
+ display: block;
+ margin: 5px 0;
+ font-size: 18px;
+ font-family: NotoSans;
+ font-weight: 200;
+ line-height: 20px;
}
-
-
-/*
- home-articles
-*/
-
-.home-articles {
- display: flex; justify-content: space-between;
+.home-pinned-content a {
+ display: block;
}
-.home-articles > div {
- flex-grow: 1; max-width: 48%;
-}
-.home-articles h1 {
- 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;
-}
-
-.home-articles article {
- padding: 10px; margin: 10px 0; display: flex; align-items: center;
- background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
-}
-.home-articles article > img {
- float: left; margin-right: 10px; flex-shrink: 0;
-}
-.home-articles article > img.screeshot {
- width: 128px; height: 64px;
-}
-.home-articles article > div {
- flex-shrink: 1;
-}
-.home-articles article h3 {
- margin: 0;
- color: #424242; font-weight: normal;
-}
-.home-articles p {
- margin: 5px 0;
- text-align: justify;
- color: #808080;
-}
-.home-articles .metadata {
- 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);
+ 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));
+ 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);
+}
+.home-pinned-content article {
+ flex-grow: 1;
+ margin: 0 1px;
+ padding: 0;
+ position: relative;
+ max-width: 250px;
+ overflow: hidden;
+}
+.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 {
+ display: flex;
+ justify-content: space-between;
+}
+.home-articles > div {
+ flex-grow: 1;
+ max-width: 48%;
+}
+.home-articles h1 {
+ 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: #234d5f;
}
-
.home-articles h1 a:hover,
.home-articles h1 a:focus {
- padding-right: 10px;
+ 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, 0.2);
+}
+.home-articles article > img {
+ float: left;
+ margin-right: 10px;
+ flex-shrink: 0;
+}
+.home-articles article > img.screeshot {
+ width: 128px;
+ height: 64px;
+}
+.home-articles article > div {
+ flex-shrink: 1;
+}
+.home-articles article h3 {
+ margin: 0;
+ color: #424242;
+ font-weight: normal;
}
.home-articles article a:hover,
.home-articles article a:focus {
- text-decoration: underline;
+ text-decoration: underline;
+}
+.home-articles .metadata {
+ margin: 0;
+ color: #22292c;
+}
+.home-articles .metadata a {
+ color: #22292c;
+ font-weight: 400;
+ font-style: italic;
}
diff --git a/app/static/css/light.css b/app/static/css/light.css
deleted file mode 100644
index 4c8973d..0000000
--- a/app/static/css/light.css
+++ /dev/null
@@ -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;
-}
diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css
index fcdcf20..8438f45 100644
--- a/app/static/css/navbar.css
+++ b/app/static/css/navbar.css
@@ -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%; overflow-y: auto;
- margin: 0; padding: 0;
- text-indent: 0;
- background: var(--background); box-shadow: var(--shadow);
-}
-
#logo {
- position: relative; display: block;
- width: 100%;
- margin-bottom: 10px;
- opacity: 1;
- background: var(--logo-bg);
- transition: .15s ease;
+ position: relative;
+ display: block;
+ width: 100%;
+ margin-bottom: 10px;
+ opacity: 1;
+ background: var(--logo-bg);
+ transition: 0.15s ease;
}
-#logo img {
- display: block; height: 65px;
- margin: 0 auto; padding: 0;
- 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;
+ }
}
#logo:hover,
#logo:focus {
- background: var(--logo-active);
+ background: var(--logo-active);
}
#logo:hover img,
#logo:focus img {
- filter: drop-shadow(var(--logo-shadow));
+ filter: drop-shadow(var(--logo-shadow));
+}
+#logo img {
+ display: block;
+ height: 65px;
+ margin: 0 auto;
+ padding: 0;
+ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0));
+ transition: filter 0.15s ease;
+}
+@media screen and (max-width: 1199px) {
+ #logo img {
+ width: 60px;
+ height: inherit;
+ margin-bottom: -4.5px;
+ }
+}
+@media screen and (max-width: 499px) {
+ #logo img {
+ width: 50px;
+ }
+}
+#light-menu {
+ position: fixed;
+ z-index: 10;
+ list-style: none;
+ width: 110px;
+ height: 100%;
+ overflow-y: auto;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ font-size: 13px;
+ 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);
+ 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; flex-grow: 0;
- align-items: center; justify-content: center;
- width: 100%; height: 100%;
- margin: 20px 0;
- color: var(--text);
- transition: opacity .15s ease; /* because Chrome sucks */
+ 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%;
+ display: block;
+ width: 60px;
+ flex-shrink: 0;
+ flex-grow: 0;
+ 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; flex-shrink: 0; flex-grow: 0;
- margin: 0 7px;
+ display: block;
+ width: 25px;
+ flex-shrink: 0;
+ flex-grow: 0;
+ margin: 0 7px;
}
#light-menu li > a > svg > path {
- fill: var(--icons);
+ fill: var(--icons);
}
-
-#light-menu li div {
- /*flex-grow: 1;*/
+@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;
- background: var(--background); color: var(--text);
- box-shadow: var(--shadow);
- transition: .15s ease;
+ position: fixed;
+ z-index: 5;
+ left: -190px;
+ width: 300px;
+ /* default: left-to-right animation */
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ font-size: 13px;
+ 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;
+ }
}
#menu.opened {
- left: 110px;
+ left: 110px;
+}
+@media screen and (max-width: 849px) {
+ #menu.opened {
+ height: 100%;
+ overflow-y: auto;
+ left: unset;
+ }
}
-
-/* Just apply class="scroll-animation" to menu to change to scroll animation */
#menu.scroll-animation {
- left: 110px; width: 0;
+ left: 110px;
+ width: 0;
}
#menu.scroll-animation.opened {
- width: 300px;
+ width: 300px;
}
-
-
#menu > div {
- width: 300px;
- padding: 16px;
- display: none;
+ width: 300px;
+ padding: 16px;
+ display: none;
+}
+@media screen and (max-width: 849px) {
+ #menu > div {
+ width: 100%;
+ padding-bottom: 2px;
+ }
}
#menu > div.opened {
- display: block;
+ display: block;
}
-
#menu h2 {
- margin: 0 0 20px 0;
- font-family: Cantarell; font-weight: bold; font-size: 18px;
- color: var(--text);
- display: flex; align-items: center;
+ margin: 0 0 20px 0;
+ font-family: Cantarell;
+ font-weight: bold;
+ font-size: 18px;
+ color: var(--text);
+ display: flex;
+ align-items: center;
+}
+@media screen and (max-width: 499px) {
+ #menu h2 {
+ font-size: 15px;
+ }
}
#menu h2 a {
- margin: 0;
- font-size: inherit; opacity: inherit;
-}
-#menu h2 > svg {
- width: 32px; vertical-align: middle; margin-right: 8px;
-}
-#menu h2 img {
- height: 48px; vertical-align: middle; margin-right: 10px;
+ margin: 0;
+ font-size: inherit;
+ opacity: inherit;
}
#menu h2 a:hover,
#menu h2 a:focus {
- text-decoration: underline;
+ text-decoration: underline;
+}
+#menu h2 > svg {
+ width: 32px;
+ 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;
+ margin-right: 10px;
}
-
#menu h3 {
- margin: 16px 0;
- font-family: Cantarell; font-weight: bold; font-size: 15px;
- color: var(--text);
+ margin: 16px 0;
+ font-family: Cantarell;
+ font-weight: bold;
+ font-size: 15px;
+ color: var(--text);
}
#menu hr {
- margin: 15px 0;
- border: none;
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ margin: 15px 0;
+ border: none;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
-
#menu ul {
- margin: 0; padding: 0; list-style: none;
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
#menu a,
#menu li {
- display: block; margin: 10px 0;
- color: var(--text);
- transition: opacity .15s ease;
+ display: block;
+ margin: 10px 0;
+ color: var(--text);
+ transition: opacity 0.15s ease;
}
#menu li > a {
- display: inline;
- margin: 0; font-style: normal;
- font-size: 13px;
+ display: inline;
+ margin: 0;
+ font-style: normal;
+ font-size: 13px;
}
#menu a > img {
- vertical-align: middle;
- margin-right: 15px;
+ vertical-align: middle;
+ margin-right: 15px;
}
#menu a > svg {
- width: 20px; height: 20px; vertical-align: middle;
- margin-right: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ margin-right: 10px;
}
-
#menu form {
- padding: 0 8%;
+ 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; padding: 5px 2%;
- font-size: 14px; color: inherit;
- border: var(--input-border);
- background: var(--input-bg); color: var(--input-text); opacity: .8;
+ margin: 8px 0;
+ padding: 5px 2%;
+ font-size: 14px;
+ border: var(--input-border);
+ background: var(--input-bg);
+ color: var(--input-text);
+ opacity: 0.8;
}
#menu form input[type="text"]:focus,
#menu form input[type="password"]:focus {
- opacity: 1;
+ opacity: 1;
}
#menu form input[type="submit"] {
- width: 100%;
- margin: 8px 0 5px 0;
+ width: 100%;
+ margin: 8px 0 5px 0;
}
#menu form label {
- font-size: 13px; opacity: .8;
+ font-size: 13px;
+ opacity: 0.8;
}
diff --git a/app/static/css/responsive.css b/app/static/css/responsive.css
deleted file mode 100644
index 7cdba98..0000000
--- a/app/static/css/responsive.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@media all and (max-width: 1399px) {
- body, input {
- font-size: 13px;
- }
-
- header input[type="search"] {
- font-size: 14px;
- }
-
- #menu li {
- font-size: 10px;
- }
- #menu a {
- font-size: 13px;
- }
-}
-
-@media all and (min-width: 1400px) {
- body, input {
- font-size: 13px;
- }
-
- header input[type="search"] {
- font-size: 14px;
- }
-
- #menu li {
- font-size: 11px;
- }
-}
-
-@media screen and (max-width: 1199px) {
- .home-pinned-content article:nth-child(5) {
- display: none;
- }
-}
-
-@media screen and (max-width: 849px) {
- .home-pinned-content article:nth-child(4) {
- display: none;
- }
-}
diff --git a/app/static/css/shoutbox.css b/app/static/css/shoutbox.css
index e7d2aca..6f2f83e 100644
--- a/app/static/css/shoutbox.css
+++ b/app/static/css/shoutbox.css
@@ -1,34 +1,34 @@
#shoutbox {
- margin: 20px 5% 10px 5%;
- /*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/
- background: #ffffff;
- /*border: 1px solid #999999;*/
+ margin: 20px 5% 10px 5%;
+ background: #ffffff;
}
-
#shoutbox > div {
- margin: 0; padding: 0; height: 125px; width: 100%;
- overflow-y: scroll; border-bottom: 1px solid #999999;
- border-radius: 5px 5px 0 0;
- border: 1px solid #999999;
+ margin: 0;
+ padding: 0;
+ height: 125px;
+ width: 100%;
+ overflow-y: scroll;
+ border-bottom: 1px solid var(--border);
+ border-radius: 5px 5px 0 0;
}
-#shoutbox > input {
- width: 100%; padding: 5px 0;
- border-radius: 0 0 5px 5px;
- border: 1px solid #999999;
-}
-#shoutbox > input:focus {
- border-color: #a12222;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
-}
-
#shoutbox > div > div {
- padding: 2px 10px;
- border-bottom: 1px solid rgba(0, 0, 0, .3);
- font-size: 11px;
-}
-#shoutbox > div > div:last-child {
- border-bottom: none;
+ padding: 2px 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ font-size: 11px;
}
#shoutbox > div > div:hover {
- background: #e0e0e0;
-}
\ No newline at end of file
+ background: var(--background);
+}
+#shoutbox > div > div:last-child {
+ border-bottom: none;
+}
+#shoutbox > input {
+ width: 100%;
+ padding: 5px 0;
+ border-radius: 0 0 5px 5px;
+ border: 1px solid var(--border);
+}
+#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);
+}
diff --git a/app/static/css/table.css b/app/static/css/table.css
index 2e9a54f..809a741 100644
--- a/app/static/css/table.css
+++ b/app/static/css/table.css
@@ -3,6 +3,11 @@ 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);
@@ -18,18 +23,15 @@ table th {
padding: 2px 6px;
}
table:not(.codehilitetable) td {
- padding: 4px 6px;
+ padding: 4px 6px;
}
-
-/* Code fragments */
-
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 */
+ 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),
@@ -54,34 +56,24 @@ table.codehilitetable pre {
table.codehilitetable pre {
overflow-x: auto;
}
-
-/* Forum and sub-forum listings */
-
table.forumlist {
border-collapse: separate;
border-spacing: 0;
-
margin: 16px 0;
width: 100%;
}
-
-/* table.forumlist th {
- background: #d05950;
- border-color: #b04940;
- color: white;
-} */
-
table.forumlist tr {
background: unset;
}
+table.forumlist tr > td:last-child,
+table.forumlist tr > th:last-child {
+ width: 20%;
+ text-align: center;
+}
table.forumlist tr:nth-child(4n+2),
table.forumlist tr:nth-child(4n+3) {
- background: rgba(0, 0, 0, .05);
+ background: rgba(0, 0, 0, 0.05);
}
-
-
-/* Topic table */
-
table.topiclist {
width: 100%;
margin: auto;
@@ -90,18 +82,11 @@ table.topiclist tr > *:nth-child(n+2) {
/* This matches all children except the first column */
text-align: center;
}
-
-
-table.forumlist th > td:last-child,
-table.forumlist tr > td:last-child,
-table.topiclist th > td:last-child,
-table.topiclist tr > td:last-child {
- width: 20%; text-align: center;
+table.topiclist tr > td:last-child,
+table.topiclist tr > th:last-child {
+ width: 20%;
+ text-align: center;
}
-
-
-/* Thread table */
-
table.thread {
width: 100%;
border-width: 1px 0;
@@ -109,40 +94,50 @@ table.thread {
table.thread.topcomment {
border: none;
}
-table.thread td.author {
- width: 256px;
+table.thread.topcomment td.message {
+ padding-top: 0;
+}
+table.thread.topcomment div.info {
+ padding-bottom: 4px;
}
table.thread td {
vertical-align: top;
}
+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.topcomment td.message {
- padding-top: 0;
-}
table.thread td.message > *:nth-child(2) {
margin-top: 0;
}
table.thread td.message img {
max-width: 100%;
}
-
-table.thread .topcomment-placeholder div {
- font-style: italic;
- opacity: 0.5;
- padding: 8px 0;
+table.thread:not(.topcomment) div.info {
+ float: right;
}
-
table.thread div.info {
text-align: right;
position: relative;
}
-table.thread.topcomment div.info {
- padding-bottom: 4px;
-}
-table.thread:not(.topcomment) div.info {
- float: right;
+@media screen and (max-width: 1199px) {
+ table.thread div.info {
+ float: none;
+ }
}
table.thread div.info > * {
display: inline-block;
@@ -153,7 +148,11 @@ table.thread div.info summary {
cursor: pointer;
user-select: none;
}
-
+table.thread .topcomment-placeholder div {
+ font-style: italic;
+ opacity: 0.5;
+ padding: 8px 0;
+}
table.thread .context-menu {
position: absolute;
right: 0;
@@ -163,7 +162,6 @@ table.thread .context-menu {
box-shadow: var(--shadow);
border-radius: 4px;
transition: none;
-
background: var(--background);
z-index: 2;
border: 1px solid var(--border);
@@ -178,25 +176,6 @@ table.thread .context-menu a:hover {
background: var(--background-light);
text-decoration: none;
}
-
-@media screen and (max-width: 1199px) {
- table.thread div.info {
- float: none;
- }
- table.thread td.author {
- /* Includes padding */
- width: 136px;
- overflow-wrap: anywhere;
- }
-}
-@media screen and (max-width: 849px) {
- table.thread td.author {
- width: 104px;
- }
-}
-
-/* Tables with filters */
-
table.filter-target th:after {
content: attr(data-filter);
display: block;
diff --git a/app/static/css/vars.css b/app/static/css/vars.css
new file mode 100644
index 0000000..493d9ab
--- /dev/null
+++ b/app/static/css/vars.css
@@ -0,0 +1,9 @@
+/* Currently 3 screen sizes supported :
+ - micro: < 500px
+ - tiny: < 850px
+ - small: < 1200px
+ - normal: >= 1200px
+
+ Ex:
+ @media screen and (max-width: @var)
+*/
diff --git a/app/static/css/widgets.css b/app/static/css/widgets.css
index 8838117..85485d5 100644
--- a/app/static/css/widgets.css
+++ b/app/static/css/widgets.css
@@ -1,158 +1,140 @@
+/* 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;
- width: 265px;
+ display: flex;
+ align-items: center;
+ width: 265px;
}
-
.profile-avatar {
- width: 128px;
- height: 128px;
- margin-right: 16px;
+ width: 128px;
+ height: 128px;
+ margin-right: 16px;
}
-
.profile-name {
- font-weight: bold;
+ font-weight: bold;
}
-
.profile-title {
- margin-bottom: 8px;
+ margin-bottom: 8px;
}
-
.profile-points {
- font-size: 11px;
+ font-size: 11px;
}
-
.profile-points span {
- color: gray;
+ color: gray;
}
-
.profile-points-small {
- display: none;
+ display: none;
}
-
.profile-xp {
- height: 10px;
- min-width: 96px;
- max-width: 96px;
- background: var(--background);
- border: var(--border);
+ height: 10px;
+ min-width: 96px;
+ max-width: 96px;
+ background: var(--background);
+ border: var(--border);
}
-
.profile-xp-100 {
- background: var(--background-xp);
- border: var(--border-xp);
+ background: var(--background-xp);
+ border: var(--border-xp);
}
-
.profile-xp div {
- height: 10px;
- background: var(--background-xp);
- border: var(--border-xp);
- margin: -1px;
+ height: 10px;
+ background: var(--background-xp);
+ border: var(--border-xp);
+ margin: -1px;
}
-
.profile-xp-100 div {
- background: var(--background-xp-100);
+ background: var(--background-xp-100);
}
-
.profile.guest {
- flex-direction: column;
- width: 100%;
- padding-top: 12px;
- text-align: center;
+ flex-direction: column;
+ width: 100%;
+ padding-top: 12px;
+ text-align: center;
}
-
.profile.guest em {
- display: block;
- font-weight: bold;
- font-style: normal;
- margin-bottom: 8px;
+ display: block;
+ font-weight: bold;
+ font-style: normal;
+ margin-bottom: 8px;
}
-
-@media screen and (max-width: 1199px) {
- table.thread .profile {
- flex-direction: column;
- width: 96px;
- text-align: center;
- }
-
- table.thread .profile-avatar {
- order: 1;
- margin-right: 0;
- margin-top: 4px;
- width: 96px;
- height: 96px;
- }
-
- table.thread .profile-title,
- table.thread .profile-points,
- table.thread .profile-xp {
- display: none;
- }
-
- table.thread .profile-points-small {
- display: inline;
- }
+@media (max-width: 1199px) {
+ table.thread .profile {
+ flex-direction: column;
+ width: 96px;
+ text-align: center;
+ }
+ table.thread .profile-avatar {
+ order: 1;
+ margin-right: 0;
+ margin-top: 4px;
+ width: 96px;
+ height: 96px;
+ }
+ table.thread .profile-title,
+ table.thread .profile-points,
+ table.thread .profile-xp {
+ display: none;
+ }
+ table.thread .profile-points-small {
+ display: inline;
+ }
}
-@media screen and (max-width: 849px) {
- table.thread .profile {
- width: 96px;
- }
- table.thread .profile-avatar {
- width: 64px;
- height: 64px;
- }
+@media (max-width: 849px) {
+ table.thread .profile {
+ width: 96px;
+ }
+ table.thread .profile-avatar {
+ width: 64px;
+ height: 64px;
+ }
}
-
/* Trophies */
.trophies {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
}
-
.trophy {
- display: flex;
- align-items: center;
- width: 260px;
- margin: 5px;
- padding: 5px;
- border: 1px solid #c5c5c5;
- border-left: 5px solid var(--links);
- border-radius: 2px;
+ display: flex;
+ align-items: center;
+ width: 260px;
+ margin: 5px;
+ padding: 5px;
+ border: 1px solid #c5c5c5;
+ border-left: 5px solid var(--links);
+ border-radius: 2px;
}
-
-.trophy img {
- height: 48px;
- margin-right: 8px;
-}
-
-.trophy div > * {
- display: block;
-}
-
-.trophy em {
- font-style: normal;
- font-weight: bold;
- margin-bottom: 3px;
-}
-
-.trophy span {
- font-size: 80%;
-}
-
.trophy.disabled {
- filter: grayscale(100%);
- opacity: .5;
- border-left: 1px solid #c5c5c5;
+ filter: grayscale(100%);
+ opacity: 0.5;
+ border-left: 1px solid #c5c5c5;
}
-
.trophy.form-disabled {
- border-left: 1px solid #c5c5c5;
- flex-grow: 1;
+ border-left: 1px solid #c5c5c5;
+ flex-grow: 1;
+}
+.trophy img {
+ height: 48px;
+ margin-right: 8px;
+}
+.trophy div > * {
+ display: block;
+}
+.trophy em {
+ font-style: normal;
+ font-weight: bold;
+ margin-bottom: 3px;
+}
+.trophy span {
+ font-size: 80%;
}
-
hr.signature {
- opacity: 0.2;
+ opacity: 0.2;
}
diff --git a/app/static/less/container.less b/app/static/less/container.less
new file mode 100644
index 0000000..94b9bb2
--- /dev/null
+++ b/app/static/less/container.less
@@ -0,0 +1,21 @@
+@import "vars";
+
+.container {
+ margin-left: 110px;
+
+ @media screen and (max-width: @tiny) {
+ margin-left: 0;
+ }
+}
+
+section {
+ width: 80%;
+ margin: 20px auto 0 auto;
+
+ @media screen and (max-width: @normal) {
+ width: 90%;
+ }
+ @media screen and (max-width: @small) {
+ width: 95%;
+ }
+}
diff --git a/app/static/less/flash.less b/app/static/less/flash.less
new file mode 100644
index 0000000..e75f5c1
--- /dev/null
+++ b/app/static/less/flash.less
@@ -0,0 +1,39 @@
+/*
+ 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);
+
+ &.info {
+ border-color: var(--info);
+ }
+
+ &.ok {
+ border-color: var(--ok);
+ }
+
+ &.warning {
+ border-color: var(--warn);
+ }
+
+ &.error {
+ border-color: var(--error);
+ }
+
+ span {
+ flex-grow: 1;
+ margin: 15px 10px 10px 0;
+ }
+
+ svg {
+ margin: 15px 20px 10px 30px;
+ }
+}
diff --git a/app/static/less/footer.less b/app/static/less/footer.less
new file mode 100644
index 0000000..0091485
--- /dev/null
+++ b/app/static/less/footer.less
@@ -0,0 +1,14 @@
+/*
+ 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);
+
+ p {
+ margin: 3px 0;
+ }
+}
diff --git a/app/static/less/form.less b/app/static/less/form.less
new file mode 100644
index 0000000..c391989
--- /dev/null
+++ b/app/static/less/form.less
@@ -0,0 +1,152 @@
+/* Full-page forms */
+
+.form {
+ form {
+ & > div:not(:last-child):not(.editor-toolbar) {
+ margin-bottom: 16px;
+ }
+
+ label {
+ display: inline-block;
+ margin: 0 5px 4px 0;
+
+ & + .desc {
+ margin: 0 0 4px 0;
+ font-size: 80%;
+ opacity: .75;
+ }
+ }
+
+ .avatar {
+ width: 128px; height: 128px;
+
+ & + input[type="file"] {
+ margin: 16px 0 0 0;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ input[type='text'],
+ input[type='email'],
+ input[type='date'],
+ input[type='password'],
+ input[type='search'],
+ textarea,
+ 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 .15s ease, width 0s, height 0s;
+
+ &:focus {
+ border-color: var(--border-focused);
+ box-shadow: 0 0 0 3px var(--shadow-focused);
+ }
+
+ &:focus-within {
+ /* Override an annoying Firefox default */
+ outline: none;
+ }
+ }
+
+ input[type='checkbox'],
+ input[type='radio'] {
+ display: inline;
+ vertical-align: middle;
+ margin: 0 4px 0 0;
+ }
+
+ textarea {
+ max-width: 100%;
+ resize: vertical;
+ }
+
+ select {
+ width: auto;
+ }
+
+ progress.entropy {
+ display: none; /* Display with Js enabled */
+ width: 100%; margin-top: 5px;
+ background: var(--background);
+ border: var(--border);
+
+ &.low {
+ &::-moz-progress-bar,
+ &::-webkit-progress-bar {
+ background: var(--error);
+ }
+ }
+ &.medium {
+ &::-moz-progress-bar,
+ &::-webkit-progress-bar {
+ background: var(--warn);
+ }
+ }
+ &.high {
+ &::-moz-progress-bar,
+ &::-webkit-progress-bar {
+ background: var(--ok);
+ }
+ }
+ }
+
+ hr {
+ height: 3px;
+ border: var(--hr-border);
+ border-width: 1px 0;
+ margin: 24px 0;
+ }
+
+ .msgerror {
+ color: var(--error);
+ font-weight: 400;
+ margin-top: 5px;
+ }
+
+ /* anti-bots field */
+ .abfield {
+ display: none;
+ }
+}
+
+
+/* Interactive filter forms */
+
+.form.filter {
+ margin-bottom: 16px;
+
+ & > p:first-child {
+ font-size: 80%;
+ color: gray;
+ margin-bottom: 2px;
+ }
+
+ input {
+ font-family: monospace;
+ }
+
+ .syntax-explanation {
+ font-size: 80%;
+ color: gray;
+ margin-top: 8px;
+
+ ul {
+ font-size: inherit;
+ color: inherit;
+ padding-left: 16px;
+ line-height: 20px;
+ margin-top: 2px;
+ }
+
+ code {
+ background: rgba(0,0,0,.05);
+ padding: 1px 2px;
+ border-radius: 2px;
+ }
+ }
+}
diff --git a/app/static/less/global.less b/app/static/less/global.less
new file mode 100644
index 0000000..7459f26
--- /dev/null
+++ b/app/static/less/global.less
@@ -0,0 +1,131 @@
+@import "vars";
+
+/* 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; }
+
+/* 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;
+}
+
+body {
+ margin: 0;
+ background: var(--background);
+ color: var(--text);
+ font-family: 'DejaVu Sans', sans-serif;
+ font-size: 13px;
+
+ @media screen and (min-width: @normal) {
+ font-size: 14px;
+ }
+}
+
+/* General */
+
+a {
+ text-decoration: none;
+ color: var(--links);
+
+ &:hover, &:focus {
+ text-decoration: underline;
+ outline: none;
+ }
+}
+
+section {
+ p {
+ line-height: 20px;
+ word-wrap: anywhere;
+ }
+
+ ul {
+ line-height: 24px;
+ }
+
+ h1 {
+ margin-top: 0;
+ border-bottom: var(--hr-border);
+ font-family: Cantarell; font-weight: bold;
+ font-size: 26px;
+ color: var(--text-light);
+ }
+
+ h2 {
+ 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;
+
+ &:hover, &:focus {
+ text-decoration: none;
+ }
+}
+
+
+/* Bootstrap-style rules */
+.flex {
+ display: flex;
+}
+
+.bg-ok {
+ background: var(--ok);
+ color: var(--ok-text);
+
+ &:hover, &:focus, &:active {
+ background: var(--ok-active);
+ }
+}
+
+.bg-error {
+ background: var(--error);
+ color: var(--error-text);
+
+ &:hover, &:focus, &:active {
+ background: var(--error-active);
+ }
+}
+
+.bg-warn {
+ background: var(--warn);
+ color: var(--warn-text);
+
+ &:hover, &:focus, &:active {
+ background: var(--warn-active);
+ }
+}
+
+
+.skip-to-content-link {
+ height: 30px;
+ left: 50%;
+ padding: 8px;
+ position: absolute;
+ transform: translateY(-100%);
+ transition: transform 0.3s;
+ background: var(--links);
+ color: var(--warn-text);
+ border-radius: 1px;
+
+ &:focus {
+ transform: translateY(0%);
+ }
+}
diff --git a/app/static/less/header.less b/app/static/less/header.less
new file mode 100644
index 0000000..c4436ca
--- /dev/null
+++ b/app/static/less/header.less
@@ -0,0 +1,105 @@
+@import "vars";
+
+header {
+ 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;
+
+ .title {
+ margin: 4px 0;
+
+ a {
+ color: inherit;
+ }
+
+ h1 {
+ font-family: Cantarell; font-weight: bold; font-size: 18px;
+ display: inline;
+ }
+ }
+
+ .spacer {
+ flex: 1 0 auto;
+ }
+
+ .links {
+ margin-left: 16px;
+ }
+
+ .form {
+ margin-right: -26px;
+
+ @media screen and (max-width: @tiny) {
+ display: none;
+ }
+
+ input[type="search"] {
+ display: inline-block; width: 250px;
+ padding: 5px 35px 5px 10px;
+
+ @media screen and (max-width: @small) {
+ width: 200px;
+ }
+ @media screen and (min-width: @normal) {
+ font-size: 14px;
+ }
+
+ &:focus {
+ & ~ a {
+ opacity: 1;
+ }
+ }
+
+ & ~ a {
+ position: relative; left: -33px;
+ opacity: .7;
+
+ & > svg > path {
+ fill: var(--text);
+ }
+ }
+ }
+
+ a {
+ fill: #363636;
+ cursor: pointer;
+
+ &:hover, &:focus {
+ & > svg {
+ fill: var(--text);
+ }
+ }
+ }
+ svg {
+ width: 24px; height: 24px; vertical-align: middle;
+ transition: .15s ease;
+ }
+ }
+
+ #spotlight {
+ margin-left: 16px;
+
+ @media screen and (max-width: @small) {
+ display: none;
+ }
+
+ 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);
+}
diff --git a/app/static/less/homepage.less b/app/static/less/homepage.less
new file mode 100644
index 0000000..37eda35
--- /dev/null
+++ b/app/static/less/homepage.less
@@ -0,0 +1,140 @@
+/*
+ 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;
+
+ h1 {
+ margin-top: 0;
+ color: #ffffff; border-color: #ffffff;
+ }
+
+ p {
+ margin-bottom: 0; text-align: justify;
+ color: #ffffff;
+ }
+
+ a {
+ color: inherit; text-decoration: underline;
+ }
+}
+
+
+/*
+ pinned-content
+*/
+
+.home-pinned-content {
+ & > div {
+ display: flex; justify-content: space-between;
+ }
+
+ h2 {
+ display: block; margin: 5px 0;
+ font-size: 18px; font-family: NotoSans; font-weight: 200;
+ line-height: 20px;
+ }
+
+ a {
+ display: block;
+
+ &:hover, &:focus {
+ img {
+ filter: blur(3px);
+ }
+ div {
+ padding: 200px 5% 10px 5%;
+ background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
+ }
+ }
+ }
+
+ img {
+ width: 100%; filter: blur(0px);
+ }
+
+ article {
+ flex-grow: 1; margin: 0 1px; padding: 0;
+ position: relative;
+ max-width: 250px; overflow: hidden;
+
+ 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-articles
+*/
+
+.home-articles {
+ display: flex; justify-content: space-between;
+
+ & > div {
+ flex-grow: 1; max-width: 48%;
+ }
+
+ h1 {
+ display: flex; justify-content: space-between; align-items: center;
+
+ a {
+ padding: 0;
+ font-family: NotoSans; font-size: 16px;
+ font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f;
+
+ &:hover, &:focus {
+ padding-right: 10px;
+ }
+ }
+ }
+
+ p {
+ margin: 5px 0;
+ text-align: justify;
+ color: #808080;
+ }
+
+ article {
+ padding: 10px; margin: 10px 0; display: flex; align-items: center;
+ background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
+
+ & > img {
+ float: left; margin-right: 10px; flex-shrink: 0;
+
+ &.screeshot {
+ width: 128px; height: 64px;
+ }
+ }
+
+ & > div {
+ flex-shrink: 1;
+ }
+
+ h3 {
+ margin: 0;
+ color: #424242; font-weight: normal;
+ }
+
+ a:hover, a:focus {
+ text-decoration: underline;
+ }
+ }
+
+ .metadata {
+ margin: 0;
+ color: #22292c;
+
+ a {
+ color: #22292c; font-weight: 400; font-style: italic;
+ }
+ }
+}
diff --git a/app/static/less/navbar.less b/app/static/less/navbar.less
new file mode 100644
index 0000000..a9143c7
--- /dev/null
+++ b/app/static/less/navbar.less
@@ -0,0 +1,279 @@
+@import "vars";
+
+nav a {
+ opacity: .8;
+ cursor: pointer;
+
+ &:hover, &:focus {
+ opacity: 1;
+ }
+}
+
+
+/* Menu */
+
+#logo {
+ position: relative; display: block;
+ width: 100%;
+ margin-bottom: 10px;
+ opacity: 1;
+ background: var(--logo-bg);
+ transition: .15s ease;
+
+ @media screen and (max-width: @tiny) {
+ width: auto; height: 100%; margin-bottom: 0;
+ }
+
+ &:hover, &:focus {
+ background: var(--logo-active);
+
+ img {
+ filter: drop-shadow(var(--logo-shadow));
+ }
+ }
+
+ img {
+ display: block; height: 65px;
+ margin: 0 auto; padding: 0;
+ filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
+ transition: filter .15s ease;
+
+ @media screen and (max-width: @small) {
+ width: 60px; height: inherit;
+ margin-bottom: -4.5px;
+ }
+ @media screen and (max-width: @micro) {
+ width: 50px;
+ }
+ }
+}
+
+#light-menu {
+ position: fixed; z-index: 10;
+ list-style: none;
+ width: 110px;
+ height: 100%; overflow-y: auto;
+ margin: 0; padding: 0;
+ text-indent: 0; font-size: 13px;
+ background: var(--background); box-shadow: var(--shadow);
+
+ @media screen and (max-width: @tiny) {
+ 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: @micro) {
+ height: 50px;
+ }
+
+
+ li {
+ width: 100%;
+ color: var(--text);
+
+ @media screen and (max-width: @tiny) {
+ display: flex; flex-direction: column;
+ align-items: center; flex-grow: 1;
+ padding: 0 2px; font-size: 12px;
+ }
+
+ & > 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; /* because Chrome sucks */
+
+ /* Avatar */
+ & > img {
+ display: block; width: 60px; flex-shrink: 0; flex-grow: 0;
+ margin: 0 7px 5px 7px;
+ border-radius: 10%;
+
+ @media screen and (max-width: @tiny) {
+ width: 45px;
+ margin: 0;
+
+ & ~ div {
+ display: none;
+ }
+ }
+ @media screen and (max-width: @micro) {
+ width: 40px;
+ }
+ }
+
+ & > svg {
+ display: block; width: 25px; flex-shrink: 0; flex-grow: 0;
+ margin: 0 7px;
+
+ & > path {
+ fill: var(--icons);
+ }
+ }
+
+ & > div {
+ @media screen and (max-width: @micro) {
+ 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;
+ font-size: 13px;
+ background: var(--background); color: var(--text);
+ box-shadow: var(--shadow);
+ transition: .15s ease;
+
+ @media screen and (max-width: @tiny) {
+ width: 100%; height: 0; overflow-x: hidden;
+ font-family: NotoSans;
+ transition: .1s ease;
+ position: unset;
+ left: unset;
+ }
+
+ &.opened {
+ left: 110px;
+
+ @media screen and (max-width: @tiny) {
+ height: 100%;
+ overflow-y: auto;
+ left: unset;
+ }
+ }
+
+/* Set class="scroll-animation" to menu to apply scroll animation */
+ &.scroll-animation {
+ left: 110px; width: 0;
+ &.opened {
+ width: 300px;
+ }
+ }
+
+ & > div {
+ width: 300px;
+ padding: 16px;
+ display: none;
+
+ @media screen and (max-width: @tiny) {
+ width: 100%;
+ padding-bottom: 2px;
+ }
+
+ &.opened {
+ display: block;
+ }
+ }
+
+ h2 {
+ margin: 0 0 20px 0;
+ font-family: Cantarell; font-weight: bold; font-size: 18px;
+ color: var(--text);
+ display: flex; align-items: center;
+
+ @media screen and (max-width: @micro) {
+ font-size: 15px;
+ }
+
+ a {
+ margin: 0;
+ font-size: inherit; opacity: inherit;
+
+ &:hover, &:focus {
+ text-decoration: underline;
+ }
+ }
+
+ & > svg {
+ width: 32px; vertical-align: middle; margin-right: 8px;
+
+ @media screen and (max-width: @micro) {
+ width: 24px;
+ }
+ }
+
+ img {
+ height: 48px; vertical-align: middle; margin-right: 10px;
+ }
+ }
+
+ h3 {
+ margin: 16px 0;
+ font-family: Cantarell; font-weight: bold; font-size: 15px;
+ color: var(--text);
+ }
+
+ hr {
+ margin: 15px 0;
+ border: none;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ ul {
+ margin: 0; padding: 0; list-style: none;
+ }
+
+ a, li {
+ display: block; margin: 10px 0;
+ color: var(--text);
+ transition: opacity .15s ease;
+ }
+
+ li > a {
+ display: inline;
+ margin: 0; font-style: normal;
+ font-size: 13px;
+ }
+
+ a > img {
+ vertical-align: middle;
+ margin-right: 15px;
+ }
+
+ a > svg {
+ width: 20px; height: 20px; vertical-align: middle;
+ margin-right: 10px;
+ }
+
+ /* Login form */
+ form {
+ padding: 0 8%;
+
+ @media screen and (max-width: @tiny) {
+ padding: 0;
+ }
+
+ input[type="text"],
+ input[type="password"] {
+ margin: 8px 0; padding: 5px 2%;
+ font-size: 14px;
+ border: var(--input-border);
+ background: var(--input-bg);
+ color: var(--input-text);
+ opacity: .8;
+
+ &:focus {
+ opacity: 1;
+ }
+ }
+
+ input[type="submit"] {
+ width: 100%;
+ margin: 8px 0 5px 0;
+ }
+
+ label {
+ font-size: 13px; opacity: .8;
+ }
+ }
+}
diff --git a/app/static/less/pagination.less b/app/static/less/pagination.less
new file mode 100644
index 0000000..2f59ca5
--- /dev/null
+++ b/app/static/less/pagination.less
@@ -0,0 +1,4 @@
+.pagination {
+ text-align: center;
+ margin: 5px 0;
+}
diff --git a/app/static/less/shoutbox.less b/app/static/less/shoutbox.less
new file mode 100644
index 0000000..957aea1
--- /dev/null
+++ b/app/static/less/shoutbox.less
@@ -0,0 +1,35 @@
+#shoutbox {
+ margin: 20px 5% 10px 5%;
+ background: #ffffff;
+
+ & > div {
+ margin: 0; padding: 0; height: 125px; width: 100%;
+ overflow-y: scroll; border-bottom: 1px solid var(--border);
+ border-radius: 5px 5px 0 0;
+
+ & > div {
+ padding: 2px 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, .3);
+ font-size: 11px;
+
+ &:hover {
+ background: var(--background);
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+
+ & > input {
+ width: 100%; padding: 5px 0;
+ border-radius: 0 0 5px 5px;
+ border: 1px solid var(--border);
+
+ &: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);
+ }
+ }
+}
diff --git a/app/static/less/table.less b/app/static/less/table.less
new file mode 100644
index 0000000..de1cfcf
--- /dev/null
+++ b/app/static/less/table.less
@@ -0,0 +1,220 @@
+@import "vars";
+
+table {
+ border-collapse: collapse;
+ border-color: var(--border);
+ border-style: solid;
+ border-width: 0 0 1px 0;
+
+ tr {
+ &:nth-child(even) {
+ background: var(--background);
+ }
+ &:nth-child(odd) {
+ background: var(--background);
+ }
+ }
+
+ th {
+ background: var(--background);
+ border-color: var(--border);
+ border-style: solid;
+ border-width: 1px 0;
+ padding: 2px 6px;
+ }
+
+ &:not(.codehilitetable) td {
+ padding: 4px 6px;
+ }
+
+ /* Code fragments */
+ &.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;
+
+ tr:nth-child(even),
+ tr:nth-child(odd) {
+ background: none;
+ }
+
+ td {
+ padding: 0;
+
+ &.linenos {
+ width: 40px;
+ text-align: right;
+ span {
+ padding-right: 8px;
+ }
+ }
+ }
+
+ td.code,
+ pre {
+ margin: 0;
+ width: 100%;
+ }
+
+ pre {
+ overflow-x: auto;
+ }
+ }
+
+ /* Forum and sub-forum listings */
+ &.forumlist {
+ border-collapse: separate;
+ border-spacing: 0;
+ margin: 16px 0;
+ width: 100%;
+
+ tr {
+ background: unset;
+
+ & > td:last-child,
+ & > th:last-child {
+ width: 20%; text-align: center;
+ }
+
+ &:nth-child(4n+2),
+ &:nth-child(4n+3) {
+ background: rgba(0, 0, 0, .05);
+ }
+ }
+ }
+
+ /* Topic table */
+ &.topiclist {
+ width: 100%;
+ margin: auto;
+
+ tr {
+ & > *:nth-child(n+2) {
+ /* This matches all children except the first column */
+ text-align: center;
+ }
+
+ & > td:last-child,
+ & > th:last-child {
+ width: 20%; text-align: center;
+ }
+ }
+ }
+
+ /* Thread table */
+ &.thread {
+ width: 100%;
+ border-width: 1px 0;
+
+ &.topcomment {
+ border: none;
+
+ td.message {
+ padding-top: 0;
+ }
+
+ div.info {
+ padding-bottom: 4px;
+ }
+ }
+
+ td {
+ vertical-align: top;
+
+ &.author {
+ width: 256px;
+
+ @media screen and (max-width: @small) {
+ /* Includes padding */
+ width: 136px;
+ overflow-wrap: anywhere;
+ }
+
+ @media screen and (max-width: @tiny) {
+ width: 104px;
+ }
+ }
+
+ &.message {
+ padding-top: 8px;
+
+ & > *:nth-child(2) {
+ margin-top: 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+ }
+ }
+
+ &:not(.topcomment) div.info {
+ float: right;
+ }
+ div.info {
+ text-align: right;
+ position: relative;
+
+ @media screen and (max-width: @small) {
+ float: none;
+ }
+
+ & > * {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ summary {
+ list-style: none;
+ cursor: pointer;
+ user-select: none;
+ }
+ }
+
+ .topcomment-placeholder div {
+ font-style: italic;
+ opacity: 0.5;
+ padding: 8px 0;
+ }
+
+ .context-menu {
+ position: absolute;
+ right: 0;
+ top: 100%;
+ margin: 0;
+ padding: 4px 0;
+ box-shadow: var(--shadow);
+ border-radius: 4px;
+ transition: none;
+
+ background: var(--background);
+ z-index: 2;
+ border: 1px solid var(--border);
+
+ a {
+ display: block;
+ padding: 4px 8px;
+ text-align: center;
+ color: inherit;
+
+ &:hover {
+ background: var(--background-light);
+ text-decoration: none;
+ }
+ }
+ }
+ }
+
+ /* Tables with filters */
+ &.filter-target th:after {
+ content: attr(data-filter);
+ display: block;
+ font-size: 80%;
+ font-family: monospace;
+ font-weight: normal;
+ }
+}
diff --git a/app/static/less/vars.less b/app/static/less/vars.less
new file mode 100644
index 0000000..2da7160
--- /dev/null
+++ b/app/static/less/vars.less
@@ -0,0 +1,14 @@
+/* Currently 3 screen sizes supported :
+ - micro: < 500px
+ - tiny: < 850px
+ - small: < 1200px
+ - normal: >= 1200px
+
+ Ex:
+ @media screen and (max-width: @var)
+*/
+
+@micro: 499px;
+@tiny: 849px;
+@small: 1199px;
+@normal: 1449px;
diff --git a/app/static/less/widgets.less b/app/static/less/widgets.less
new file mode 100644
index 0000000..185cb79
--- /dev/null
+++ b/app/static/less/widgets.less
@@ -0,0 +1,162 @@
+@import "vars";
+
+/* Profile summaries */
+
+.profile {
+ display: flex;
+ align-items: center;
+ width: 265px;
+}
+
+.profile-avatar {
+ width: 128px;
+ height: 128px;
+ margin-right: 16px;
+}
+
+.profile-name {
+ font-weight: bold;
+}
+
+.profile-title {
+ margin-bottom: 8px;
+}
+
+.profile-points {
+ font-size: 11px;
+}
+
+.profile-points span {
+ color: gray;
+}
+
+.profile-points-small {
+ display: none;
+}
+
+.profile-xp {
+ height: 10px;
+ min-width: 96px;
+ max-width: 96px;
+ background: var(--background);
+ border: var(--border);
+}
+
+.profile-xp-100 {
+ background: var(--background-xp);
+ border: var(--border-xp);
+}
+
+.profile-xp div {
+ height: 10px;
+ background: var(--background-xp);
+ border: var(--border-xp);
+ margin: -1px;
+}
+
+.profile-xp-100 div {
+ background: var(--background-xp-100);
+}
+
+.profile.guest {
+ flex-direction: column;
+ width: 100%;
+ padding-top: 12px;
+ text-align: center;
+}
+
+.profile.guest em {
+ display: block;
+ font-weight: bold;
+ font-style: normal;
+ margin-bottom: 8px;
+}
+
+@media (max-width: @small) {
+ table.thread {
+ .profile {
+ flex-direction: column;
+ width: 96px;
+ text-align: center;
+ }
+
+ .profile-avatar {
+ order: 1;
+ margin-right: 0;
+ margin-top: 4px;
+ width: 96px;
+ height: 96px;
+ }
+
+ .profile-title,
+ .profile-points,
+ .profile-xp {
+ display: none;
+ }
+
+ .profile-points-small {
+ display: inline;
+ }
+ }
+}
+@media (max-width: @tiny) {
+ table.thread .profile {
+ width: 96px;
+ }
+ table.thread .profile-avatar {
+ width: 64px;
+ height: 64px;
+ }
+}
+
+/* Trophies */
+.trophies {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.trophy {
+ display: flex;
+ align-items: center;
+ width: 260px;
+ margin: 5px;
+ padding: 5px;
+ border: 1px solid #c5c5c5;
+ border-left: 5px solid var(--links);
+ border-radius: 2px;
+
+ &.disabled {
+ filter: grayscale(100%);
+ opacity: .5;
+ border-left: 1px solid #c5c5c5;
+ }
+
+ &.form-disabled {
+ border-left: 1px solid #c5c5c5;
+ flex-grow: 1;
+ }
+
+ img {
+ height: 48px;
+ margin-right: 8px;
+ }
+
+ div > * {
+ display: block;
+ }
+
+ em {
+ font-style: normal;
+ font-weight: bold;
+ margin-bottom: 3px;
+ }
+
+ span {
+ font-size: 80%;
+ }
+}
+
+hr.signature {
+ opacity: 0.2;
+}
diff --git a/app/templates/base/head.html b/app/templates/base/head.html
index 347760d..3a91943 100644
--- a/app/templates/base/head.html
+++ b/app/templates/base/head.html
@@ -9,5 +9,4 @@
{% for s in styles %}
{% endfor %}
-
-
+
diff --git a/app/utils/render.py b/app/utils/render.py
index 659a7ac..73ae1af 100644
--- a/app/utils/render.py
+++ b/app/utils/render.py
@@ -16,7 +16,6 @@ def render(*args, styles=[], scripts=[], **kwargs):
'css/flash.css',
'css/table.css',
'css/pagination.css',
- 'css/responsive.css',
'css/simplemde.min.css',
'css/simplemde-override.css',
]