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

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

This commit is contained in:
Eliseu Amaro 2021-08-04 21:12:59 +01:00 committed by Hugo Sales
parent 0c612bddbe
commit d0b2cccb63
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
15 changed files with 70 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

BIN
public/assets/css/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

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

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

15
public/assets/css/noise.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 446 B

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

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

3
public/assets/css/security/security.css
View File

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

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

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

BIN
public/assets/images/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
public/assets/images/search.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

4
templates/base.html.twig
View File

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

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

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

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

@ -19,7 +19,7 @@
{% block body %}
<div class="content">
<nav class='main-nav bg'>
<nav class='main-nav fg'>
<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 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">

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

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