From 9519891b92aea67a3dc00c06320d2eba7b95cea4 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Tue, 20 Jul 2021 19:30:49 +0100 Subject: [PATCH] [TWIG][CSS] Panels are now animated when shown, main content width as well as panel's is now correctly configured. WIP: displaying side panels by default when space is available, "details" element state cannot be manipulated through CSS only, need a better solution. --- public/assets/css/base.css | 250 +++++++++-------- public/assets/css/directory/actors.css | 13 +- public/assets/css/directory/groups.css | 13 +- public/assets/css/left/left.css | 6 +- public/assets/css/network/simple_stream.css | 4 +- public/assets/css/reset.css | 49 +++- public/assets/css/right/right.css | 3 + public/assets/css/security/security.css | 123 +++++---- public/assets/fonts/inter/inter.css | 292 ++++++++++---------- public/assets/fonts/manrope/manrope.css | 4 +- templates/sidepanel/left/left.html.twig | 1 + 11 files changed, 427 insertions(+), 331 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 76aa808c13..44219c7ffc 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -1,176 +1,210 @@ :root { - /* FONTS */ - --display-font: 'Manrope-ExtraBold', sans-serif; - --main-font: 'Inter', sans-serif; + /* FONTS */ + --display-font: 'Manrope-ExtraBold', sans-serif; + --main-font: 'Inter', sans-serif; - /* UNITS - * unit size - every element should be a multiplier of this - * main size - used for headers and icons - * medium size - same as above, except that the element in question is contained in something else - * small size - used in common text, borders - */ - --unit-size: 0.5rem; - --main-size: 1.5rem; - --medium-size: 1.125rem; - --small-size: 1rem; + /* UNITS + * unit size - every element should be a multiplier of this + * main size - used for headers and icons + * medium size - same as above, except that the element in question is contained in something else + * small size - used in common text, borders + */ + --unit-size: 0.5rem; + --main-size: 1.5rem; + --medium-size: 1.125rem; + --small-size: 1rem; - /* colours and shadows */ - --black: #040506; - --bg1: #383E51; - --bg2: #434A60; - --bg3: #5C6684; - --white: #EEDFD4; + /* colours and shadows */ + --black: #040506; + --bg1: #383E51; + --bg2: #434A60; + --bg3: #5C6684; + --white: #EEDFD4; - --accent-blue: #8E8DBE; - --accent-red: #FF6666; - --accent-green: #2EC4B6; + --accent-blue: #8E8DBE; + --accent-red: #FF6666; + --accent-green: #2EC4B6; - --shadow: 0px 0px 16px 0px #383E51; + --shadow: 0px 0px 16px 0px #383E51; } /* TYPOGRAPHY */ html { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } h1 { - font-family: var(--display-font); - font-size: var(--main-size); - font-weight: 900; - opacity: 1.00; - letter-spacing: -0.40px; - word-spacing: 4.00px; + font-family: var(--display-font); + font-size: var(--main-size); + font-weight: 900; + opacity: 1.00; + letter-spacing: -0.40px; + word-spacing: 4.00px; } h2 { - font-family: var(--display-font); - font-size: var(--medium-size); - font-weight: 800; - letter-spacing: -0.75px; - word-spacing: 3.00px; - text-transform: none; + font-family: var(--display-font); + font-size: var(--medium-size); + font-weight: 800; + letter-spacing: -0.75px; + word-spacing: 3.00px; + text-transform: none; } h3 { - font-family: var(--display-font); - font-size: var(--medium-size); - font-weight: 600; - line-height: 1.00; - letter-spacing: -0.20px; - word-spacing: 1.00px; - text-transform: none; + font-family: var(--display-font); + font-size: var(--medium-size); + font-weight: 600; + line-height: 1.00; + letter-spacing: -0.20px; + word-spacing: 1.00px; + text-transform: none; } p { - font-family: var(--main-font); - font-size: var(--small-size); - font-weight: 400; - letter-spacing: -0.30px; - word-spacing: -0.10px; - text-transform: none; + font-family: var(--main-font); + font-size: var(--small-size); + font-weight: 400; + letter-spacing: -0.30px; + word-spacing: -0.10px; + text-transform: none; } ul { - text-decoration: none; - margin: 0; - padding: 0; - list-style: none; + text-decoration: none; + margin: 0; + padding: 0; + list-style: none; } li { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } a:link { - text-decoration: none; - outline: 0; - color: var(--bg3); + text-decoration: none; + outline: 0; + color: var(--bg3); } + a:visited { - outline: 0; - color: var(--bg3); - margin: 0; - padding: 0; + outline: 0; + color: var(--bg3); + margin: 0; + padding: 0; } + a:hover { - color: var(--accent-blue); - transition: all 0.8s ease; + color: var(--accent-blue); + transition: all 0.8s ease; } + a:focus { - color: var(--accent-blue); - transition: all 0.8s ease; + color: var(--accent-blue); + transition: all 0.8s ease; } /* DEFAULTS */ body, html { - height: 100%; - width: auto; - color: var(--white); + height: 100%; + width: auto; + color: var(--white); - /* BLENDING BANDING IN FIREFOX */ - background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)), - url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); - background-blend-mode: multiply; - background-attachment: fixed; + /* BLENDING BANDING IN FIREFOX */ + background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; + background-attachment: fixed; } #header { - display: flex; - justify-content: center; - position: fixed; - pointer-events: none; + display: flex; + justify-content: center; + position: fixed; + pointer-events: none; - width: 100%; - height: calc(5 * var(--unit-size)); - padding: var(--small-size); + width: 100%; + height: calc(5 * var(--unit-size)); + padding: var(--small-size); - background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)), - url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); - background-blend-mode: multiply; - background-attachment: fixed; - box-shadow: var(--shadow); + background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; + background-attachment: fixed; + box-shadow: var(--shadow); } #instance { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; } + #instance a { - display: flex; - color: var(--white); - font-size: var(--main-size); + display: flex; + color: var(--white); + font-size: var(--main-size); } .icon-logo { - margin-right: var(--small-size); - fill: var(--white); + margin-right: var(--small-size); + fill: var(--white); } /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .container { - padding-top: calc(3 * var(--small-size) + var(--main-size)); - display: flex; - justify-content: center; + padding-top: calc(3 * var(--small-size) + var(--main-size)); + display: flex; } + /* THE FOCUSED (middle) DIV */ .content { - order: 2; - flex-grow: 5; - max-width: calc(100vw/2); + order: 2; + max-width: calc(100vw / 2); + margin-left: auto; + margin-right: auto; } /* EVERY SIDE PANEL DETAIL ELEMENT */ +.panel { + all: unset; +} + .panel[open] { - flex-grow: 1; - display: flex; - flex-direction: column; - padding: var(--small-size); - box-sizing: border-box; + width: calc((100vw / 4) - var(--small-size)); + display: flex; + flex-direction: column; + padding: var(--small-size); + box-sizing: border-box; +} + +/* +[data-foo]::before { + open: attr(data-foo) "close"; +} +*/ +.content { + animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); +} + +details[open] > div { + animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(-10px); + } + + 100% { + opacity: unset; + transform: none; + } } \ No newline at end of file diff --git a/public/assets/css/directory/actors.css b/public/assets/css/directory/actors.css index 354339a0d6..09ab42f46b 100644 --- a/public/assets/css/directory/actors.css +++ b/public/assets/css/directory/actors.css @@ -1,19 +1,20 @@ /*actors stream*/ -.actors{ +.actors { display: flex; flex-wrap: wrap; } .nav-content .timeline .actors > div { - margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); + margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); border-radius: var(--unit-size); width: 100%; } + .nav-content .timeline .actors > div:last-child { - margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); + margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); } -.actor{ +.actor { display: flex; flex-wrap: wrap; border: solid 2px var(--accent-low); @@ -33,13 +34,13 @@ justify-content: space-between; } -.actor-info{ +.actor-info { order: 3; display: flex; flex-wrap: wrap; } -.actor-bio{ +.actor-bio { order: 3; word-break: break-word; padding: var(--small-size); diff --git a/public/assets/css/directory/groups.css b/public/assets/css/directory/groups.css index 09ae5cb10c..bdc1fa6a50 100644 --- a/public/assets/css/directory/groups.css +++ b/public/assets/css/directory/groups.css @@ -1,5 +1,5 @@ /*groups stream*/ -.groups{ +.groups { display: flex; flex-wrap: wrap; } @@ -9,15 +9,16 @@ } .nav-content .timeline .groups > div { - margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); + margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); border-radius: var(--unit-size); width: 100%; } + .nav-content .timeline .groups > div:last-child { - margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); + margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); } -.group{ +.group { display: flex; flex-wrap: wrap; border: solid 2px var(--accent-low); @@ -37,13 +38,13 @@ justify-content: space-between; } -.group-info{ +.group-info { order: 3; display: flex; flex-wrap: wrap; } -.group-description{ +.group-description { order: 3; word-break: break-word; padding: var(--small-size); diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 5d18131da9..1361777a1e 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -11,23 +11,23 @@ stroke-width: 0; vertical-align: middle; } + .icon-avatar { width: var(--main-size); height: auto; } -#left-container > div { - opacity: 0; -} #left-container[open] > div { opacity: 100%; } + #left-container[open] { order: 1; border-right: solid 1px var(--bg2); } #left-panel { + position: fixed; display: flex; flex-direction: column; } \ No newline at end of file diff --git a/public/assets/css/network/simple_stream.css b/public/assets/css/network/simple_stream.css index 2a170deaad..285ce5800e 100644 --- a/public/assets/css/network/simple_stream.css +++ b/public/assets/css/network/simple_stream.css @@ -1,8 +1,8 @@ -.simple-stream .nav-content{ +.simple-stream .nav-content { border: none; box-shadow: none; } -.simple-stream .main-nav li{ +.simple-stream .main-nav li { width: auto; } \ No newline at end of file diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 7da7777022..7f9b159b24 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -1,13 +1,19 @@ /* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */ -:link,:visited { text-decoration:none } +:link, :visited { + text-decoration: none +} /* no list-markers by default, since lists are used more often for semantics */ -ul,ol { list-style:none } +ul, ol { + list-style: none +} /* avoid browser default inconsistent heading font-sizes */ /* and pre/code too */ -h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } +h1, h2, h3, h4, h5, h6, pre, code { + font-size: 1em; +} /* remove the inconsistent (among browsers) default ul,ol padding or margin */ /* the default spacing on headings does not match nor align with @@ -15,23 +21,48 @@ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } /* zero out the spacing around pre, form, body, html, p, blockquote as well */ /* form elements are oddly inconsistent, and not quite CSS emulatable. */ /* nonetheless strip their margin and padding as well */ -ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,textarea -{ margin:0; padding:0; border:none; } +ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea { + margin: 0; + padding: 0; + border: none; +} /* whoever thought blue linked image borders were a good idea? */ -a img,:link img,:visited img { border:none } +a img, :link img, :visited img { + border: none +} /* de-italicize address */ -address { font-style:normal } +address { + font-style: normal +} /* firefox focus outline */ -:focus {outline:none;} -::-moz-focus-inner {border:0;} +:focus { + outline: none; +} + +::-moz-focus-inner { + border: 0; +} /* details element arrow */ details > summary { list-style: none; } + details > summary::-webkit-details-marker { display: none; +} + +/* have IE ignore the detail elements altogether */ +@supports not (-ms-ime-align: auto) { + + details summary { + cursor: pointer; + } + + details summary > * { + display: inline; + } } \ No newline at end of file diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 9387a0f6d6..4be686b23d 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -15,15 +15,18 @@ #right-container > div { opacity: 0; } + #right-container[open] > div { opacity: 100%; } + #right-container[open] { order: 3; border-left: solid 1px var(--bg2); } #right-panel { + position: fixed; display: flex; flex-direction: column; } \ No newline at end of file diff --git a/public/assets/css/security/security.css b/public/assets/css/security/security.css index 64ac724c0e..35937d4bac 100644 --- a/public/assets/css/security/security.css +++ b/public/assets/css/security/security.css @@ -1,66 +1,81 @@ -form { - width: 50%; - margin-left: auto; - margin-right: auto; - - padding: var(--main-size); - background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), - url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); - background-blend-mode: multiply; - border-radius: var(--unit-size); -} - -fieldset { +.content { display: flex; - flex-direction: column; - - font-family: var(--display-font); - font-size: var(--main-size); + flex-wrap: wrap; + margin-top: calc(4 * var(--main-size)); + justify-content: center; + align-items: center; + margin-left: 1%; + margin-right: 1%; + margin-bottom: 1%; } -fieldset legend { - margin-bottom: var(--main-size); -} - -br { - margin-bottom: var(--unit-size); +form { + font-size: var(--medium-size); + background-color: var(--bg2); + padding: calc(2 * var(--unit-size)); + border-radius: var(--unit-size); + border: solid 2px var(--accent-low); } label { - font-family: var(--display-font); - font-size: var(--medium-size); -} - -input[type="text"]:hover, -input[type="password"]:hover, -input[type="email"]:hover, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus { - background: var(--white) !important; - color: var(--bg1) !important; - transition: all 0.4s ease; -} - -input[type="text"], -input[type="password"], -input[type="email"] { - all: unset; - background: var(--translucent); - padding: var(--unit-size) var(--small-size); - box-sizing: border-box; - border-radius: var(--unit-size); - font-size: var(--medium-size); + font-family: 'Montserrat', sans-serif; + font-weight: 700; width: 100%; } button { - font-family: var(--display-font); - font-size: var(--medium-size); - align-self: flex-end; - padding: var(--unit-size) var(--small-size); + margin-top: var(--unit-size); } -fieldset div:last-child { - text-align: end; -} \ No newline at end of file +input[type=text], +input[type=password], +input[type=email] { + margin-top: calc(var(--unit-size) * 0.5); + background-color: var(--bg1); + color: var(--fg); + border-style: none; + padding: calc(var(--unit-size) * 0.5); + border-radius: calc(var(--unit-size) * 0.5); + font-size: var(--unit-size); + margin-bottom: var(--unit-size); + width: calc(100% - var(--unit-size)); +} + +.active { + color: var(--fg) !important; + font-weight: 700; +} + +input { + filter: none; +} + +form input[type="checkbox"] { + position: unset !important; +} + +form button[type=submit] { + background: var(--bg1); + padding: 0.3em 1em; + color: var(--fg); + border-style: solid; + border-color: var(--accent); + border-radius: var(--unit-size); + border-width: 2px; + font-family: 'Montserrat', sans-serif; + font-weight: 700; +} + +form button[type=submit]:focus, +form button[type=submit]:hover { + border-radius: var(--unit-size); + box-shadow: 0 0 8px var(--accent); +} + +#login-notes { + margin: 0; +} + +#login-main { + border: 0; +} diff --git a/public/assets/fonts/inter/inter.css b/public/assets/fonts/inter/inter.css index f450010124..9718343664 100644 --- a/public/assets/fonts/inter/inter.css +++ b/public/assets/fonts/inter/inter.css @@ -1,154 +1,163 @@ @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("Inter-Thin.woff2?v=3.19") format("woff2"), - url("Inter-Thin.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"), - url("Inter-ThinItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url("Inter-Thin.woff2?v=3.19") format("woff2"), + url("Inter-Thin.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"), - url("Inter-ExtraLight.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), - url("Inter-ExtraLightItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"), + url("Inter-ThinItalic.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("Inter-Light.woff2?v=3.19") format("woff2"), - url("Inter-Light.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"), - url("Inter-LightItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"), + url("Inter-ExtraLight.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("Inter-Regular.woff2?v=3.19") format("woff2"), - url("Inter-Regular.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("Inter-Italic.woff2?v=3.19") format("woff2"), - url("Inter-Italic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), + url("Inter-ExtraLightItalic.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("Inter-Medium.woff2?v=3.19") format("woff2"), - url("Inter-Medium.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"), - url("Inter-MediumItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("Inter-Light.woff2?v=3.19") format("woff2"), + url("Inter-Light.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"), - url("Inter-SemiBold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-SemiBoldItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"), + url("Inter-LightItalic.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("Inter-Bold.woff2?v=3.19") format("woff2"), - url("Inter-Bold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-BoldItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("Inter-Regular.woff2?v=3.19") format("woff2"), + url("Inter-Regular.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"), - url("Inter-ExtraBold.woff?v=3.19") format("woff"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), - url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("Inter-Italic.woff2?v=3.19") format("woff2"), + url("Inter-Italic.woff?v=3.19") format("woff"); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("Inter-Black.woff2?v=3.19") format("woff2"), - url("Inter-Black.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("Inter-Medium.woff2?v=3.19") format("woff2"), + url("Inter-Medium.woff?v=3.19") format("woff"); } + @font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"), - url("Inter-BlackItalic.woff?v=3.19") format("woff"); + font-family: 'Inter'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"), + url("Inter-MediumItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"), + url("Inter-SemiBold.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-SemiBoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("Inter-Bold.woff2?v=3.19") format("woff2"), + url("Inter-Bold.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-BoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"), + url("Inter-ExtraBold.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url("Inter-Black.woff2?v=3.19") format("woff2"), + url("Inter-Black.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"), + url("Inter-BlackItalic.woff?v=3.19") format("woff"); } /* ------------------------------------------------------- @@ -161,20 +170,21 @@ Usage: } */ @font-face { - font-family: 'Inter var'; - font-weight: 100 900; - font-display: swap; - font-style: normal; - font-named-instance: 'Regular'; - src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); } + @font-face { - font-family: 'Inter var'; - font-weight: 100 900; - font-display: swap; - font-style: italic; - font-named-instance: 'Italic'; - src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); } @@ -192,9 +202,9 @@ explicitly, e.g. */ @font-face { - font-family: 'Inter var experimental'; - font-weight: 100 900; - font-display: swap; - font-style: oblique 0deg 10deg; - src: url("Inter.var.woff2?v=3.19") format("woff2"); + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url("Inter.var.woff2?v=3.19") format("woff2"); } diff --git a/public/assets/fonts/manrope/manrope.css b/public/assets/fonts/manrope/manrope.css index ea1de49de8..3a45583087 100644 --- a/public/assets/fonts/manrope/manrope.css +++ b/public/assets/fonts/manrope/manrope.css @@ -1,13 +1,13 @@ @font-face { font-family: 'Manrope'; - font-style: normal; + font-style: normal; src: url(Manrope-Regular.woff2), url(Manrope-Regular.woff); } @font-face { font-family: 'Manrope-ExtraBold'; - font-style: normal; + font-style: normal; src: url(Manrope-ExtraBold.woff2), url(Manrope-ExtraBold.woff2); } \ No newline at end of file diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index dfc267c8d1..36a052eb8c 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,4 +1,5 @@
+ {{ icon('menu', 'icon icon-left') | raw }} {% if app.user %}