[TWIG][CSS] Overall CSS optimizations. Image gradients are now used, 64x64 px.
This commit is contained in:
parent
c8a8e94d48
commit
625c056f30
|
@ -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.
|
||||
|
|
|
@ -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
BIN
public/assets/css/bg-bellow.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 298 KiB |
BIN
public/assets/css/bg-over.png
Normal file
BIN
public/assets/css/bg-over.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.5 KiB |
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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() %}
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
{% block body %}
|
||||
<div class="content">
|
||||
|
||||
<nav class='main-nav'>
|
||||
<nav class='main-nav bg'>
|
||||
<h1>Settings</h1>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
@ -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,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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user