GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/designer/src/design_language.md
View File

@ -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.

51
public/assets/css/base.css
View File

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

BIN
public/assets/css/bg-bellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

BIN
public/assets/css/bg-over.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

4
public/assets/css/left/left.css
View File

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

10
public/assets/css/right/right.css
View File

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

4
public/assets/css/settings/settings.css
View File

@ -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 {

2
templates/base.html.twig
View File

@ -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 }}

2
templates/note/view.html.twig
View File

@ -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() %}

2
templates/settings/base.html.twig
View File

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

2
templates/sidepanel/left/left.html.twig
View File

@ -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">

2
templates/sidepanel/right/right.html.twig
View File

@ -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>