diff --git a/docs/designer/src/design_language.md b/docs/designer/src/design_language.md index c188b07849..508542b563 100644 --- a/docs/designer/src/design_language.md +++ b/docs/designer/src/design_language.md @@ -1,2 +1,21 @@ # Why a design language? +Humans have an innate understanding for common, predictable and repeatable concepts. Our brains are, in fact, hardwired +to take advantage of such phenomena, which is sometimes taken to great effects in optical illusions for example. +Patterns emerge when concepts and actions, interlinked, construct a predictable outcome. With a common design language, +we hope to achieve such predictability, and supply an innate understanding of user interaction. + +The goal isn't to have one and only design language, but to encourage new interfaces to take similar steps on their +design processes. + +## Predictability and user experience +A good book implies meaning, perhaps through environmental storytelling, or any other thought exercise that assumes +a conscious, and rational reader capable of processing information. Not just present it. +The same is true for a good UI, it shouldn't be explained, there should be an innate understanding. + +### User Interface Universal Language +Web technologies as a whole contain a set of constraints for organizing web pages. This implies that all web pages have +a common structural basis. + +Users accustomed to one social platform know which user interactions are acceptable in that platform and which aren't. +The key puzzle is how users come to know these restrictions of their Web UI. diff --git a/public/assets/css/base.css b/public/assets/css/base.css index b041610d7c..fe2e8f2b0e 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -16,19 +16,19 @@ /* colours and shadows */ --black: #040506; - --bg1: #383E51; - --bg2: #434A60; - --bg3: #5C6684; + --bg1: #1e222b; + --bg2: #35394c; + --bg3: #46465e; --translucent: #00000033; --translucent-light: #FFFFFF33; --white: #EEDFD4; - --accent-blue: #8E8DBE; - --accent-red: #FF6666; - --accent-green: #2EC4B6; + --accent-blue: #8E8DBEAA; + --accent-red: #FF6666AA; + --accent-green: #2EC4B6AA; - --shadow: 0px 0px 16px 0px #383E51; - --shadow-light: 0px 0px 16px 0px #8E8DBE; + --shadow: 0px 0px 32px 0px var(--bg1); + --shadow-light: 0px 0px 32px 0px var(--accent-blue); /* transitions and animations */ --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1); @@ -36,8 +36,19 @@ --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); } +.bg { + background-image: url(bg-over.png), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-size: cover; + border: solid 2px var(--bg2); +} + /* TYPOGRAPHY */ html { + background-image: url(bg-bellow.png), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-size: cover; + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -122,7 +133,7 @@ input[type=file]::file-selector-button { padding: .2em .4em; border-radius: var(--unit-size); - border: 2px solid var(--bg3); + border: 2px solid var(--bg2); background-color: var(--translucent); color: var(--white); @@ -133,7 +144,7 @@ input[type=file]::file-selector-button:hover, button:hover { border: 2px solid var(--white) !important; background-color: var(--white) !important; - color: var(--bg1) !important; + color: var(--bg2) !important; } button { @@ -159,7 +170,7 @@ hr { all: unset; display: block; height: 2px; - background-image: linear-gradient(to right, var(--bg1), transparent 90%); + background: var(--bg2); } /* DEFAULTS */ @@ -167,13 +178,6 @@ body, html { color: var(--white); font-family: var(--main-font); - - /* 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 { @@ -190,11 +194,9 @@ html { align-items: center; - background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), 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; - background-attachment: fixed; - box-shadow: var(--shadow); + border: unset !important; + background-attachment: fixed !important; + box-shadow: var(--shadow-light); } #instance { @@ -241,9 +243,6 @@ html { .h-entry, .note { - 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); } diff --git a/public/assets/css/bg-bellow.png b/public/assets/css/bg-bellow.png new file mode 100644 index 0000000000..dba977f70a Binary files /dev/null and b/public/assets/css/bg-bellow.png differ diff --git a/public/assets/css/bg-over.png b/public/assets/css/bg-over.png new file mode 100644 index 0000000000..c0fa7c390d Binary files /dev/null and b/public/assets/css/bg-over.png differ diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index f7b96d5e89..295facab34 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -23,10 +23,6 @@ .profile { margin-bottom: 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); padding: var(--unit-size); diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index e315a80c0f..5b1f85f870 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -15,10 +15,6 @@ display: flex; flex-direction: column; width: 100%; - - 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); } @@ -98,10 +94,12 @@ background-color: var(--translucent); max-width: 100%; + height: calc(6 * var(--main-size)); + + border: 2px solid var(--bg2); margin-top: var(--unit-size); padding: var(--unit-size); resize: vertical; - height: calc(6 * var(--main-size)); font-family: var(--main-font); font-size: var(--medium-size); @@ -127,7 +125,7 @@ border-radius: var(--unit-size); border: 2px solid var(--bg3); - background-color: var(--translucent); + background-color: var(--bg1); color: var(--white); transition: 0.4s; diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index 8697bd624f..05254fddc5 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -5,9 +5,7 @@ padding: var(--unit-size); box-sizing: border-box; - 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; + } .main-nav h1 { diff --git a/templates/base.html.twig b/templates/base.html.twig index 04bdc6fa71..7e55812fc9 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -29,7 +29,7 @@ {% block header %} -