diff --git a/Makefile b/Makefile index fe37da1..5ede6f3 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -CSSC := lessc +CSSC := lesscpy src := $(wildcard app/static/less/*.less) obj := $(src:app/static/less/%.less=app/static/css/%.css) diff --git a/app/static/css/container.css b/app/static/css/container.css index 8c1037f..06fe90a 100644 --- a/app/static/css/container.css +++ b/app/static/css/container.css @@ -1,15 +1,7 @@ -/* Currently 3 screen sizes supported : - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ .container { margin-left: 110px; } -@media screen and (max-width: 849px) { +@media screen and (max-width:849px) { .container { margin-left: 0; } @@ -18,13 +10,13 @@ section { width: 80%; margin: 20px auto 0 auto; } -@media screen and (max-width: 1449px) { +@media screen and (max-width:1449px) { section { width: 90%; } } -@media screen and (max-width: 1199px) { +@media screen and (max-width:1199px) { section { width: 95%; } -} +} \ No newline at end of file diff --git a/app/static/css/flash.css b/app/static/css/flash.css index 1d6cca3..3067713 100644 --- a/app/static/css/flash.css +++ b/app/static/css/flash.css @@ -1,6 +1,3 @@ -/* - flash overlay -*/ .flash { margin: 5px auto; display: flex; @@ -29,4 +26,4 @@ } .flash svg { margin: 15px 20px 10px 30px; -} +} \ No newline at end of file diff --git a/app/static/css/footer.css b/app/static/css/footer.css index dee682e..0266495 100644 --- a/app/static/css/footer.css +++ b/app/static/css/footer.css @@ -1,6 +1,3 @@ -/* - Footer -*/ footer { margin: 20px 0 0 0; padding: 10px 10%; @@ -13,4 +10,4 @@ footer { } footer p { margin: 3px 0; -} +} \ No newline at end of file diff --git a/app/static/css/form.css b/app/static/css/form.css index 4ecf2cb..23dff8a 100644 --- a/app/static/css/form.css +++ b/app/static/css/form.css @@ -1,7 +1,3 @@ -/* Full-page forms */ -.form { - /* anti-bots field */ -} .form form > div:not(:last-child):not(.editor-toolbar) { margin-bottom: 16px; } @@ -12,7 +8,7 @@ .form form label + .desc { margin: 0 0 4px 0; font-size: 80%; - opacity: 0.75; + opacity: .75; } .form form .avatar { width: 128px; @@ -35,8 +31,7 @@ background: var(--background); color: var(--text); border: var(--border); - /* Transitions when resizing with the mouse produces apparent lag */ - transition: all 0.15s ease, width 0s, height 0s; + transition: all .15s ease, width 0s, height 0s; } .form input[type='text']:focus, .form input[type='email']:focus, @@ -55,7 +50,6 @@ .form input[type='search']:focus-within, .form textarea:focus-within, .form select:focus-within { - /* Override an annoying Firefox default */ outline: none; } .form input[type='checkbox'], @@ -73,7 +67,6 @@ } .form progress.entropy { display: none; - /* Display with Js enabled */ width: 100%; margin-top: 5px; background: var(--background); @@ -105,7 +98,6 @@ .form .abfield { display: none; } -/* Interactive filter forms */ .form.filter { margin-bottom: 16px; } @@ -130,7 +122,7 @@ margin-top: 2px; } .form.filter .syntax-explanation code { - background: rgba(0, 0, 0, 0.05); + background: rgba(0,0,0,.05); padding: 1px 2px; border-radius: 2px; -} +} \ No newline at end of file diff --git a/app/static/css/global.css b/app/static/css/global.css index daee05e..ef8577e 100644 --- a/app/static/css/global.css +++ b/app/static/css/global.css @@ -1,13 +1,3 @@ -/* Currently 3 screen sizes supported : - - micro: < 500px - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ -/* Fonts */ @font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); @@ -30,12 +20,9 @@ src: url(../fonts/Cantarell-Bold.otf); font-display: swap; } -/* Whole page */ * { box-sizing: border-box; - /* This transition value is replicated everywhere transitions are customized, - make sure to track them when editing */ - transition: 0.15s ease; + transition: .15s ease; } body { margin: 0; @@ -44,12 +31,11 @@ body { font-family: 'DejaVu Sans', sans-serif; font-size: 13px; } -@media screen and (min-width: 1449px) { +@media screen and (min-width:1449px) { body { font-size: 14px; } } -/* General */ a { text-decoration: none; color: var(--links); @@ -83,7 +69,6 @@ section h2 { color: var(--text-light); padding-bottom: 2px; } -/* Buttons */ .button, input[type="button"], input[type="submit"] { @@ -102,7 +87,6 @@ input[type="button"]:focus, input[type="submit"]:focus { text-decoration: none; } -/* Bootstrap-style rules */ .flex { display: flex; } @@ -146,4 +130,4 @@ input[type="submit"]:focus { } .skip-to-content-link:focus { transform: translateY(0%); -} +} \ No newline at end of file diff --git a/app/static/css/header.css b/app/static/css/header.css index d625025..7429d1e 100644 --- a/app/static/css/header.css +++ b/app/static/css/header.css @@ -1,12 +1,3 @@ -/* Currently 3 screen sizes supported : - - micro: < 500px - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ header { margin: 0; padding: 8px 16px; @@ -39,33 +30,18 @@ header .links { header .form { margin-right: -26px; } -@media screen and (max-width: 849px) { - header .form { - display: none; - } -} header .form input[type="search"] { display: inline-block; width: 250px; padding: 5px 35px 5px 10px; } -@media screen and (max-width: 1199px) { - header .form input[type="search"] { - width: 200px; - } -} -@media screen and (min-width: 1449px) { - header .form input[type="search"] { - font-size: 14px; - } -} header .form input[type="search"]:focus ~ a { opacity: 1; } header .form input[type="search"] ~ a { position: relative; left: -33px; - opacity: 0.7; + opacity: .7; } header .form input[type="search"] ~ a > svg > path { fill: var(--text); @@ -82,18 +58,33 @@ header .form svg { width: 24px; height: 24px; vertical-align: middle; - transition: 0.15s ease; + transition: .15s ease; } header #spotlight { margin-left: 16px; } -@media screen and (max-width: 1199px) { - header #spotlight { +header #spotlight a { + display: block; +} +@media screen and (max-width:849px) { + header .form { display: none; } } -header #spotlight a { - display: block; +@media screen and (max-width:1199px) { + header .form input[type="search"] { + width: 200px; + } +} +@media screen and (min-width:1449px) { + header .form input[type="search"] { + font-size: 14px; + } +} +@media screen and (max-width:1199px) { + header #spotlight { + display: none; + } } #server-speed-warning { background: var(--warn); @@ -103,5 +94,5 @@ header #spotlight a { padding: 4px; margin: 0 8px; font-weight: bold; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -} + text-shadow: 0 1px 1px rgba(0,0,0,.5); +} \ No newline at end of file diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css index 0277403..c0d487e 100644 --- a/app/static/css/homepage.css +++ b/app/static/css/homepage.css @@ -1,11 +1,8 @@ -/* - home-title -*/ .home-title { margin: 20px 0; padding: 10px 5%; background: #bf1c11; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0,0,0,.3); border-top: 10px solid #ab170c; } .home-title h1 { @@ -22,9 +19,6 @@ color: inherit; text-decoration: underline; } -/* - pinned-content -*/ .home-pinned-content > div { display: flex; justify-content: space-between; @@ -47,7 +41,7 @@ .home-pinned-content a:hover div, .home-pinned-content a:focus div { padding: 200px 5% 10px 5%; - background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8)); + background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8)); } .home-pinned-content img { width: 100%; @@ -69,12 +63,9 @@ margin: 0; padding: 30px 5% 10px 5%; color: #ffffff; - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); - background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8)); + text-shadow: 1px 1px 0 rgba(0,0,0,.6); + background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8)); } -/* - home-articles -*/ .home-articles { display: flex; justify-content: space-between; @@ -110,7 +101,7 @@ display: flex; align-items: center; background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0,0,0,.2); } .home-articles article > img { float: left; @@ -141,4 +132,4 @@ color: #22292c; font-weight: 400; font-style: italic; -} +} \ No newline at end of file diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css index 8438f45..ab0d404 100644 --- a/app/static/css/navbar.css +++ b/app/static/css/navbar.css @@ -1,21 +1,11 @@ -/* Currently 3 screen sizes supported : - - micro: < 500px - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ nav a { - opacity: 0.8; + opacity: .8; cursor: pointer; } nav a:hover, nav a:focus { opacity: 1; } -/* Menu */ #logo { position: relative; display: block; @@ -23,14 +13,7 @@ nav a:focus { margin-bottom: 10px; opacity: 1; background: var(--logo-bg); - transition: 0.15s ease; -} -@media screen and (max-width: 849px) { - #logo { - width: auto; - height: 100%; - margin-bottom: 0; - } + transition: .15s ease; } #logo:hover, #logo:focus { @@ -45,17 +28,24 @@ nav a:focus { height: 65px; margin: 0 auto; padding: 0; - filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0)); - transition: filter 0.15s ease; + filter: drop-shadow(0 0 2px rgba(0,0,0,.0)); + transition: filter .15s ease; } -@media screen and (max-width: 1199px) { +@media screen and (max-width:849px) { + #logo { + width: auto; + height: 100%; + margin-bottom: 0; + } +} +@media screen and (max-width:1199px) { #logo img { width: 60px; height: inherit; margin-bottom: -4.5px; } } -@media screen and (max-width: 499px) { +@media screen and (max-width:499px) { #logo img { width: 50px; } @@ -74,37 +64,10 @@ nav a:focus { background: var(--background); box-shadow: var(--shadow); } -@media screen and (max-width: 849px) { - #light-menu { - position: unset; - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - height: 60px; - overflow-x: auto; - overflow-y: hidden; - } -} -@media screen and (max-width: 499px) { - #light-menu { - height: 50px; - } -} #light-menu li { width: 100%; color: var(--text); } -@media screen and (max-width: 849px) { - #light-menu li { - display: flex; - flex-direction: column; - align-items: center; - flex-grow: 1; - padding: 0 2px; - font-size: 12px; - } -} #light-menu li > a { display: flex; flex-direction: column; @@ -115,9 +78,7 @@ nav a:focus { height: 100%; margin: 20px 0; color: var(--text); - transition: opacity 0.15s ease; - /* because Chrome sucks */ - /* Avatar */ + transition: opacity .15s ease; } #light-menu li > a > img { display: block; @@ -127,20 +88,6 @@ nav a:focus { margin: 0 7px 5px 7px; border-radius: 10%; } -@media screen and (max-width: 849px) { - #light-menu li > a > img { - width: 45px; - margin: 0; - } - #light-menu li > a > img ~ div { - display: none; - } -} -@media screen and (max-width: 499px) { - #light-menu li > a > img { - width: 40px; - } -} #light-menu li > a > svg { display: block; width: 25px; @@ -151,18 +98,57 @@ nav a:focus { #light-menu li > a > svg > path { fill: var(--icons); } -@media screen and (max-width: 499px) { +@media screen and (max-width:849px) { + #light-menu { + position: unset; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 60px; + overflow-x: auto; + overflow-y: hidden; + } +} +@media screen and (max-width:499px) { + #light-menu { + height: 50px; + } +} +@media screen and (max-width:849px) { + #light-menu li { + display: flex; + flex-direction: column; + align-items: center; + flex-grow: 1; + padding: 0 2px; + font-size: 12px; + } +} +@media screen and (max-width:849px) { + #light-menu li > a > img { + width: 45px; + margin: 0; + } + #light-menu li > a > img ~ div { + display: none; + } +} +@media screen and (max-width:499px) { + #light-menu li > a > img { + width: 40px; + } +} +@media screen and (max-width:499px) { #light-menu li > a > div { display: none; } } -/* Overlay */ #menu { position: fixed; z-index: 5; left: -190px; width: 300px; - /* default: left-to-right animation */ height: 100%; overflow-x: hidden; overflow-y: auto; @@ -170,31 +156,11 @@ nav a:focus { background: var(--background); color: var(--text); box-shadow: var(--shadow); - transition: 0.15s ease; - /* Set class="scroll-animation" to menu to apply scroll animation */ - /* Login form */ -} -@media screen and (max-width: 849px) { - #menu { - width: 100%; - height: 0; - overflow-x: hidden; - font-family: NotoSans; - transition: 0.1s ease; - position: unset; - left: unset; - } + transition: .15s ease; } #menu.opened { left: 110px; } -@media screen and (max-width: 849px) { - #menu.opened { - height: 100%; - overflow-y: auto; - left: unset; - } -} #menu.scroll-animation { left: 110px; width: 0; @@ -207,12 +173,6 @@ nav a:focus { padding: 16px; display: none; } -@media screen and (max-width: 849px) { - #menu > div { - width: 100%; - padding-bottom: 2px; - } -} #menu > div.opened { display: block; } @@ -225,11 +185,6 @@ nav a:focus { display: flex; align-items: center; } -@media screen and (max-width: 499px) { - #menu h2 { - font-size: 15px; - } -} #menu h2 a { margin: 0; font-size: inherit; @@ -244,11 +199,6 @@ nav a:focus { vertical-align: middle; margin-right: 8px; } -@media screen and (max-width: 499px) { - #menu h2 > svg { - width: 24px; - } -} #menu h2 img { height: 48px; vertical-align: middle; @@ -264,7 +214,7 @@ nav a:focus { #menu hr { margin: 15px 0; border: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255,255,255,0.1); } #menu ul { margin: 0; @@ -276,7 +226,7 @@ nav a:focus { display: block; margin: 10px 0; color: var(--text); - transition: opacity 0.15s ease; + transition: opacity .15s ease; } #menu li > a { display: inline; @@ -297,11 +247,6 @@ nav a:focus { #menu form { padding: 0 8%; } -@media screen and (max-width: 849px) { - #menu form { - padding: 0; - } -} #menu form input[type="text"], #menu form input[type="password"] { margin: 8px 0; @@ -310,7 +255,7 @@ nav a:focus { border: var(--input-border); background: var(--input-bg); color: var(--input-text); - opacity: 0.8; + opacity: .8; } #menu form input[type="text"]:focus, #menu form input[type="password"]:focus { @@ -322,5 +267,44 @@ nav a:focus { } #menu form label { font-size: 13px; - opacity: 0.8; + opacity: .8; } +@media screen and (max-width:849px) { + #menu { + width: 100%; + height: 0; + overflow-x: hidden; + font-family: NotoSans; + transition: .1s ease; + position: unset; + left: unset; + } +} +@media screen and (max-width:849px) { + #menu.opened { + height: 100%; + overflow-y: auto; + left: unset; + } +} +@media screen and (max-width:849px) { + #menu > div { + width: 100%; + padding-bottom: 2px; + } +} +@media screen and (max-width:499px) { + #menu h2 { + font-size: 15px; + } +} +@media screen and (max-width:499px) { + #menu h2 > svg { + width: 24px; + } +} +@media screen and (max-width:849px) { + #menu form { + padding: 0; + } +} \ No newline at end of file diff --git a/app/static/css/pagination.css b/app/static/css/pagination.css index 2f59ca5..834294f 100644 --- a/app/static/css/pagination.css +++ b/app/static/css/pagination.css @@ -1,4 +1,4 @@ .pagination { - text-align: center; - margin: 5px 0; -} + text-align: center; + margin: 5px 0; +} \ No newline at end of file diff --git a/app/static/css/shoutbox.css b/app/static/css/shoutbox.css index 6f2f83e..8b49ee8 100644 --- a/app/static/css/shoutbox.css +++ b/app/static/css/shoutbox.css @@ -13,7 +13,7 @@ } #shoutbox > div > div { padding: 2px 10px; - border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-bottom: 1px solid rgba(0,0,0,.3); font-size: 11px; } #shoutbox > div > div:hover { @@ -30,5 +30,5 @@ } #shoutbox > input:focus { border-color: var(--border-focus); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6); -} + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(161,34,34,0.6); +} \ No newline at end of file diff --git a/app/static/css/table.css b/app/static/css/table.css index 809a741..8555168 100644 --- a/app/static/css/table.css +++ b/app/static/css/table.css @@ -3,11 +3,6 @@ table { border-color: var(--border); border-style: solid; border-width: 0 0 1px 0; - /* Code fragments */ - /* Forum and sub-forum listings */ - /* Topic table */ - /* Thread table */ - /* Tables with filters */ } table tr:nth-child(even) { background: var(--background); @@ -28,10 +23,6 @@ table:not(.codehilitetable) td { table.codehilitetable { border: none; width: 100%; - /* This seems to be the only way to prevent the automatic table size - algorithm from assigning extreme widths when content overflows. - Fortunately the structure of the table is very simple, so we can afford to - set a fixed width on line numbers and move on */ table-layout: fixed; } table.codehilitetable tr:nth-child(even), @@ -72,14 +63,13 @@ table.forumlist tr > th:last-child { } table.forumlist tr:nth-child(4n+2), table.forumlist tr:nth-child(4n+3) { - background: rgba(0, 0, 0, 0.05); + background: rgba(0,0,0,.05); } table.topiclist { width: 100%; margin: auto; } -table.topiclist tr > *:nth-child(n+2) { - /* This matches all children except the first column */ +table.topiclist tr > * :nth-child(n+2) { text-align: center; } table.topiclist tr > td:last-child, @@ -106,22 +96,10 @@ table.thread td { table.thread td.author { width: 256px; } -@media screen and (max-width: 1199px) { - table.thread td.author { - /* Includes padding */ - width: 136px; - overflow-wrap: anywhere; - } -} -@media screen and (max-width: 849px) { - table.thread td.author { - width: 104px; - } -} table.thread td.message { padding-top: 8px; } -table.thread td.message > *:nth-child(2) { +table.thread td.message > * :nth-child(2) { margin-top: 0; } table.thread td.message img { @@ -134,11 +112,6 @@ table.thread div.info { text-align: right; position: relative; } -@media screen and (max-width: 1199px) { - table.thread div.info { - float: none; - } -} table.thread div.info > * { display: inline-block; vertical-align: top; @@ -183,3 +156,19 @@ table.filter-target th:after { font-family: monospace; font-weight: normal; } +@media screen and (max-width:1199px) { + table.thread td.author { + width: 136px; + overflow-wrap: anywhere; + } +} +@media screen and (max-width:849px) { + table.thread td.author { + width: 104px; + } +} +@media screen and (max-width:1199px) { + table.thread div.info { + float: none; + } +} \ No newline at end of file diff --git a/app/static/css/vars.css b/app/static/css/vars.css index 493d9ab..e69de29 100644 --- a/app/static/css/vars.css +++ b/app/static/css/vars.css @@ -1,9 +0,0 @@ -/* Currently 3 screen sizes supported : - - micro: < 500px - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ diff --git a/app/static/css/widgets.css b/app/static/css/widgets.css index 85485d5..42fcd1e 100644 --- a/app/static/css/widgets.css +++ b/app/static/css/widgets.css @@ -1,12 +1,3 @@ -/* Currently 3 screen sizes supported : - - tiny: < 850px - - small: < 1200px - - normal: >= 1200px - - Ex: - @media screen and (max-width: @var) -*/ -/* Profile summaries */ .profile { display: flex; align-items: center; @@ -64,7 +55,7 @@ font-style: normal; margin-bottom: 8px; } -@media (max-width: 1199px) { +@media (max-width:1199px) { table.thread .profile { flex-direction: column; width: 96px; @@ -86,7 +77,7 @@ display: inline; } } -@media (max-width: 849px) { +@media (max-width:849px) { table.thread .profile { width: 96px; } @@ -95,7 +86,6 @@ height: 64px; } } -/* Trophies */ .trophies { display: flex; flex-wrap: wrap; @@ -113,7 +103,7 @@ } .trophy.disabled { filter: grayscale(100%); - opacity: 0.5; + opacity: .5; border-left: 1px solid #c5c5c5; } .trophy.form-disabled { @@ -137,4 +127,4 @@ } hr.signature { opacity: 0.2; -} +} \ No newline at end of file