[CSS] Mesh gradient works as intended with no banding.

docs/designer/src/design_language.md

@@ -17,5 +17,11 @@ The same is true for a good UI, it shouldn't be explained, there should be an in
 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. 
+Users accustomed to surfing the Web know which user interactions are acceptable and which aren't. 
 The key puzzle is how users come to know these restrictions of their Web UI.
+
+### Canons of page construction
+The aforementioned comparison between books and Web pages isn't just a coincidence, given the resemblance between the
+two mediums. From their presentation to fundamental theory, it's only natural to apply core book design ideas to the Web.
+
+ 

public/assets/css/base.css

@@ -15,20 +15,14 @@
     --small-size: 1rem;
 
     /* colours and shadows */
-    --black: #040506;
-    --bg1: #1e222b;
-    --bg2: #35394c;
-    --bg3: #46465e;
-    --translucent: #00000033;
-    --translucent-light: #FFFFFF33;
-    --white: #EEDFD4;
+    --bg1: #242434;
+    --bg2: #46465E;
+    --bg3: #8081BA;
 
-    --accent-blue: #8E8DBEAA;
-    --accent-red: #FF6666AA;
-    --accent-green: #2EC4B6AA;
+    --translucent: #1A1A2666;
+    --white: #E9EAF2;
 
-    --shadow: 0px 0px 32px 0px var(--bg1);
-    --shadow-light: 0px 0px 32px 0px var(--accent-blue);
+    --shadow: 0px 0px 32px 0px #00000066;
 
     /* transitions and animations */
     --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
@@ -36,24 +30,7 @@
     --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
-.bg {
-    background-color: var(--bg1);
-    background-image: url(bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    border: solid 2px var(--bg2);
-}
-
 /* TYPOGRAPHY */
-html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-body {
-    background-image: url(bg.png);
-    background-size: cover;
-}
-
 h1 {
     font-family: var(--display-font);
     font-size: var(--main-size);
@@ -173,12 +150,24 @@ hr {
     all: unset;
     display: block;
     height: 2px;
-    background: var(--bg2);
+    background: var(--translucent);
 }
 
 /* DEFAULTS */
+.bg {
+    background-color: var(--bg3);
+    background-image: url(../images/bg.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    min-height: 100%;
+}
+
 body,
 html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
     color: var(--white);
     font-family: var(--main-font);
 }
@@ -189,17 +178,15 @@ html {
     justify-content: space-between;
     position: fixed;
     top: 0;
+    background-color: var(--bg1);
 
     padding: var(--unit-size);
     box-sizing: border-box;
     width: 100vw;
     max-width: 100%;
-
     align-items: center;
 
-    border: unset !important;
-    background-attachment: fixed !important;
-    box-shadow: var(--shadow-light);
+    box-shadow: var(--shadow);
 }
 
 #instance {
@@ -247,6 +234,8 @@ html {
 
 .h-entry,
 .note {
+    background-color: var(--translucent);
+    border: solid 2px var(--bg2);
     border-radius: var(--unit-size);
 }
 
@@ -370,8 +359,13 @@ figcaption a:link {
         box-sizing: border-box;
         width: 100%;
         height: 100vh;
-        background: url("bg.png") !important;
-        background-size: cover !important;
+
+        background-color: var(--bg3);
+        background-image: url(../images/bg.png);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        min-height: 100%;
 
         display: block !important;
     }

public/assets/css/left/left.css

@@ -1,6 +1,5 @@
 #left-panel {
     left: 0;
-
 }
 
 .icon-left {
@@ -22,7 +21,9 @@
 }
 
 .profile {
+    background-color: var(--translucent);
     margin-bottom: var(--main-size);
+    border: solid 2px var(--bg2);
     border-radius: var(--unit-size);
 
     padding: var(--unit-size);
@@ -58,7 +59,7 @@
 #user-avatar:hover img,
 #user-avatar:focus img {
     border-radius: 50% !important;
-    box-shadow: var(--shadow-light) !important;
+    box-shadow: var(--shadow) !important;
 }
 
 #user-info {

public/assets/css/noise.svg

@@ -0,0 +1,15 @@
+<svg
+        xmlns='http://www.w3.org/2000/svg'
+        xmlns:xlink='http://www.w3.org/1999/xlink'
+        width='100%' height='100%'>
+
+    <filter id='n' x='0' y='0'>
+        <feTurbulence
+                type='fractalNoise'
+                baseFrequency='0.85'
+                stitchTiles='stitch'/>
+    </filter>
+
+    <rect width='100%' height='100%' fill='#fff'/>
+    <rect width='100%' height='100%' filter="url(#n)" opacity='0.22'/>
+</svg>

public/assets/css/right/right.css

@@ -15,7 +15,10 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+
+    background-color: var(--translucent);
     border-radius: var(--unit-size);
+    border: solid 2px var(--bg2);
 }
 
 .create-notice textarea {
@@ -53,7 +56,7 @@
     all: unset;
     display: inline;
     height: 2px;
-    background-image: linear-gradient(to left, var(--translucent-light), transparent 90%);
+    background-image: linear-gradient(to left, var(--translucent), transparent 90%);
     margin-bottom: var(--unit-size);
 }
 
@@ -137,9 +140,9 @@
     padding: .2em .4em;
 
     border-radius: var(--unit-size);
-    border: 2px solid var(--bg3);
+    border: 2px solid var(--bg2);
 
-    background-color: var(--bg1);
+    background-color: var(--translucent);
     color: var(--white);
     transition: 0.4s;
 

public/assets/css/security/security.css

@@ -4,9 +4,6 @@ form {
     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);
 }
 

public/assets/css/settings/settings.css

@@ -4,8 +4,7 @@
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
-
-
+    border: solid 2px var(--bg2);
 }
 
 .main-nav h1 {
@@ -16,7 +15,7 @@
     all: unset;
     display: block;
     height: 2px;
-    background-image: linear-gradient(to right, var(--translucent-light), transparent 90%);
+    background-image: linear-gradient(to right, var(--bg2), transparent 90%);
     margin-top: var(--unit-size);
     margin-bottom: var(--unit-size);
 }
@@ -49,7 +48,7 @@
     all: unset;
     display: flex;
     width: 2px;
-    background-image: linear-gradient(to bottom, var(--accent-blue), transparent 90%);
+    background-image: linear-gradient(to bottom, var(--bg3), transparent 90%);
     margin-right: var(--unit-size);
 }
 

templates/base.html.twig

@@ -27,9 +27,9 @@
         {% endfor %}
     {% endfor %}
 </head>
-<body>
+<body class="bg">
     {% block header %}
-        <div id='header' class="bg">
+        <div id='header'>
             <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 bg">
+<div class="h-entry hentry note">
     <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 bg'>
+        <nav class='main-nav fg'>
             <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 bg'>
+            <section class='profile'>
                 <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 bg">
+        <section class="create-notice">
             {{ form_start(post_form) }}
             <legend class="section-title">
                 <h1>Create a note</h1>