[TWIG][CSS] Overall CSS optimizations. Image gradients are now used, 64x64 px.

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.

public/assets/css/base.css

@@ -16,19 +16,19 @@
 
     /* colours and shadows */
     --black: #040506;
-    --bg1: #383E51;
+    --bg1: #1e222b;
-    --bg2: #434A60;
+    --bg2: #35394c;
-    --bg3: #5C6684;
+    --bg3: #46465e;
     --translucent: #00000033;
     --translucent-light: #FFFFFF33;
     --white: #EEDFD4;
 
-    --accent-blue: #8E8DBE;
+    --accent-blue: #8E8DBEAA;
-    --accent-red: #FF6666;
+    --accent-red: #FF6666AA;
-    --accent-green: #2EC4B6;
+    --accent-green: #2EC4B6AA;
 
-    --shadow: 0px 0px 16px 0px #383E51;
+    --shadow: 0px 0px 32px 0px var(--bg1);
-    --shadow-light: 0px 0px 16px 0px #8E8DBE;
+    --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)),
+    border: unset !important;
-    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    background-attachment: fixed !important;
-    background-blend-mode: multiply;
+    box-shadow: var(--shadow-light);
-    background-attachment: fixed;
-    box-shadow: var(--shadow);
 }
 
 #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);
 }
 

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);

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;
 

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 {

templates/base.html.twig

@@ -29,7 +29,7 @@
 </head>
 <body>
     {% block header %}
-        <div id='header'>
+        <div id='header' class="bg">
             <details class="panel" id="left-container">
                 <summary tabindex="1">
                     {{ icon('person', 'icon icon-left') | raw }}

templates/note/view.html.twig

@@ -1,4 +1,4 @@
-<div class="h-entry hentry note">
+<div class="h-entry hentry note bg">
     <div class="note-info">
         {% set nickname = note.getActorNickname() %}
 

templates/settings/base.html.twig

@@ -19,7 +19,7 @@
 {% block body %}
     <div class="content">
 
-        <nav class='main-nav'>
+        <nav class='main-nav bg'>
             <h1>Settings</h1>
             <ul>
                 <li>

templates/sidepanel/left/left.html.twig

@@ -2,7 +2,7 @@
     <nav class='profile-nav'>
 
         {% if app.user %}
-            <section class='profile'>
+            <section class='profile bg'>
                 <section id="profile-links">
                     <a id="user-avatar" href="{{ path('settings') }}">
                         <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">

templates/sidepanel/right/right.html.twig

@@ -2,7 +2,7 @@
 
     {% if post_form is defined %}
 
-        <section class="create-notice">
+        <section class="create-notice bg">
             {{ form_start(post_form) }}
             <legend class="section-title">Create a note</legend>