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

This commit is contained in:
Eliseu Amaro 2021-08-03 15:49:22 +01:00 committed by Hugo Sales
parent c8a8e94d48
commit 625c056f30
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
12 changed files with 54 additions and 44 deletions

View File

@ -1,2 +1,21 @@
# Why a design language? # 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.

View File

@ -16,19 +16,19 @@
/* colours and shadows */ /* colours and shadows */
--black: #040506; --black: #040506;
--bg1: #383E51; --bg1: #1e222b;
--bg2: #434A60; --bg2: #35394c;
--bg3: #5C6684; --bg3: #46465e;
--translucent: #00000033; --translucent: #00000033;
--translucent-light: #FFFFFF33; --translucent-light: #FFFFFF33;
--white: #EEDFD4; --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 */ /* transitions and animations */
--cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1); --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); --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 */ /* TYPOGRAPHY */
html { 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; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@ -122,7 +133,7 @@ input[type=file]::file-selector-button {
padding: .2em .4em; padding: .2em .4em;
border-radius: var(--unit-size); border-radius: var(--unit-size);
border: 2px solid var(--bg3); border: 2px solid var(--bg2);
background-color: var(--translucent); background-color: var(--translucent);
color: var(--white); color: var(--white);
@ -133,7 +144,7 @@ input[type=file]::file-selector-button:hover,
button:hover { button:hover {
border: 2px solid var(--white) !important; border: 2px solid var(--white) !important;
background-color: var(--white) !important; background-color: var(--white) !important;
color: var(--bg1) !important; color: var(--bg2) !important;
} }
button { button {
@ -159,7 +170,7 @@ hr {
all: unset; all: unset;
display: block; display: block;
height: 2px; height: 2px;
background-image: linear-gradient(to right, var(--bg1), transparent 90%); background: var(--bg2);
} }
/* DEFAULTS */ /* DEFAULTS */
@ -167,13 +178,6 @@ body,
html { html {
color: var(--white); color: var(--white);
font-family: var(--main-font); 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 { #header {
@ -190,11 +194,9 @@ html {
align-items: center; 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 { #instance {
@ -241,9 +243,6 @@ html {
.h-entry, .h-entry,
.note { .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); border-radius: var(--unit-size);
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -23,10 +23,6 @@
.profile { .profile {
margin-bottom: var(--main-size); 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); border-radius: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);

View File

@ -15,10 +15,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; 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); border-radius: var(--unit-size);
} }
@ -98,10 +94,12 @@
background-color: var(--translucent); background-color: var(--translucent);
max-width: 100%; max-width: 100%;
height: calc(6 * var(--main-size));
border: 2px solid var(--bg2);
margin-top: var(--unit-size); margin-top: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
resize: vertical; resize: vertical;
height: calc(6 * var(--main-size));
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--medium-size); font-size: var(--medium-size);
@ -127,7 +125,7 @@
border-radius: var(--unit-size); border-radius: var(--unit-size);
border: 2px solid var(--bg3); border: 2px solid var(--bg3);
background-color: var(--translucent); background-color: var(--bg1);
color: var(--white); color: var(--white);
transition: 0.4s; transition: 0.4s;

View File

@ -5,9 +5,7 @@
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; 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 { .main-nav h1 {

View File

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

View File

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

View File

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

View File

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

View File

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