diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..fe37da1 --- /dev/null +++ b/Makefile @@ -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 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', ]