[CSS] Overall typography resizing to provide proper text hierarchy. Radio buttons polish, notes author box is now smaller. Better organization of CSS rules according to their filename and thus, their aim.

This commit is contained in:
Eliseu Amaro 2021-08-10 21:05:47 +01:00 committed by Hugo Sales
parent 1962a004aa
commit e15044fe36
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
8 changed files with 197 additions and 326 deletions

View File

@ -31,13 +31,7 @@
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
}
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);
transition: var(--cubic-transition);
}
/* DEFAULTS */
/* BACKGROUND IMG GRADIENT */
.bg {
background-color: var(--bg3);
background-image: url(../images/bg.png);
@ -46,6 +40,7 @@
background-size: 100% 100%;
}
/* HEADER AND SIDEPANELS */
#header {
z-index: 1;
@ -63,6 +58,8 @@
box-shadow: var(--shadow);
}
/* content should be rendered after the header, not bellow */
#header + * {
margin-top: 3rem;
}
@ -72,10 +69,9 @@
align-items: center;
}
.active {
border-radius: var(--unit-size);
background: var(--white);
color: var(--bg1) !important;
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);
transition: var(--cubic-transition);
}
@ -84,6 +80,40 @@
fill: var(--white);
}
.panel aside {
font-size: var(--medium-size);
display: block;
position: absolute;
top: 100%;
width: 20%;
animation: var(--fade-in);
padding: var(--unit-size);
}
.panel aside .footer {
display: inline-block;
position: fixed;
max-width: 20%;
bottom: var(--unit-size);
left: var(--unit-size);
font-size: var(--small-size);
}
.icon {
fill: var(--white);
}
/* CURRENT PAGE LINK */
.active {
border-radius: var(--unit-size);
background: var(--white);
color: var(--bg1) !important;
transition: var(--cubic-transition);
}
/* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container {
display: flex;
@ -152,7 +182,7 @@
background-color: var(--translucent);
font-size: var(--main-size);
padding: var(--unit-size);
padding: 4px;
}
.note-info .avatar {
@ -164,7 +194,6 @@
padding: var(--small-size);
}
.note-content p {
font-size: var(--medium-size);
padding-left: var(--small-size);
padding-right: var(--small-size);
}
@ -193,58 +222,31 @@
height: auto;
}
/* SIDE PANELS */
/* BUTTONS AND INPUT */
.panel {
font-size: var(--main-size);
}
.panel aside {
animation: var(--fade-in);
padding: var(--unit-size);
box-sizing: border-box;
width: 20%;
display: block;
position: absolute;
top: 100%;
}
.panel aside .footer {
max-width: 20%;
display: inline-block;
position: fixed;
bottom: var(--unit-size);
left: var(--unit-size);
font-size: var(--small-size);
}
.icon {
fill: var(--white);
vertical-align: middle;
}
.icon-left,
.icon-right {
display: none;
}
/* MEDIA RESIZE */
@media (max-width: 1200px) {
@media (min-width: 1200px) {
/* no need to make the panels disappear at this size */
.icon-left,
.icon-right {
display: flex;
display: none;
}
}
@media (max-width: 1200px) {
/* content should occupy the entire width at this size */
.content {
margin: unset;
max-width: 100%;
}
/* we need to control panel's view at this size */
.icon-left,
.icon-right {
display: flex;
}
/* by default they are hidden */
.panel aside {
display: none;
}
@ -285,6 +287,73 @@
}
}
/* BUTTONS AND INPUT SHENANIGANS */
button,
input:not([type=text]) {
font-size: var(--small-size) !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important;
border: solid 2px var(--bg2) !important;
}
textarea:hover,
textarea:focus {
border-color: var(--bg3) !important;
}
/* TODO: hover and focus feedback, checkbox */
input[type=radio]:hover,
input[type=radio]:focus {
border-color: var(--bg3) !important;
}
input[type=radio] {
border: solid 0.25em var(--bg2) !important;
background-color: var(--bg1) !important;
}
input[type=radio]:checked {
background-color: var(--white) !important;
}
button:hover,
button:focus,
input:hover,
input:focus {
border-color: var(--bg3) !important;
color: var(--white) !important;
}
button:hover,
input:is([type=reset], [type=button], [type=submit]):hover {
color: var(--white) !important;
}
:focus-visible::-moz-focus-inner {
border-color: var(--bg3) !important;
}
:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
color: var(--white) !important;
}
/* file selector */
input[type=file] {
background: linear-gradient(180deg, var(--bg2), transparent) !important;
}
input[type=file]:focus,
input[type=file]:hover {
background: linear-gradient(180deg, var(--bg2), var(--bg3) 200%) !important;
}
/* button part of file selector */
::file-selector-button {
color: var(--white) !important;
}
/* ANIMATIONS */
@keyframes fadeIn {
0% {

View File

@ -62,7 +62,6 @@
#user-tags {
font-family: var(--main-font);
font-size: var(--medium-size);
padding-left: var(--unit-size);
}
@ -91,8 +90,3 @@
flex-direction: column;
}
.sec-nav {
font-size: var(--medium-size);
display: flex;
flex-direction: column;
}

View File

@ -1,91 +0,0 @@
.poll .poll-question {
font-weight: 700;
}
.poll #pollresponse_Options {
display: flex;
flex-direction: column;
}
#pollresponse > * > label {
vertical-align: top;
display: none;
}
.poll .form-single,
.create-poll-notice .form-single {
height: 100%;
width: 100%;
border-radius: var(--small-size);
}
.poll .result {
display: flex;
padding-top: var(--unit-size);
}
.poll .result-vote {
font-weight: 650;
padding-left: var(--unit-size);
}
.create-poll-notice {
padding: var(--unit-size);
width: 100%;
}
#post_poll_visibility {
font-size: var(--medium-size);
color: var(--fg);
}
#post_poll_visibility > * {
padding-right: var(--unit-size);
}
#post_poll > * {
padding: calc(var(--unit-size) * 0.2);
}
/* FORMS ------------------------------*/
.poll label {
display: inline-block;
font-family: 'Montserrat', sans-serif;
width: 100%;
padding: 0.5em 0.1em;
}
.poll input[type=text],
.create-poll-notice input[type=text] {
margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size));
background-color: var(--bg2);
box-shadow: var(--shadow);
border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
box-sizing: border-box;
}
.poll button[type=submit],
.create-poll-notice button[type=submit] {
background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: var(--fg);
border-style: solid;
border-color: var(--accent);
border-radius: var(--unit-size);
border-width: 2px;
font-family: 'Montserrat', sans-serif;
font-size: var(--small-size);
font-weight: 700;
margin-top: 1em;
}

View File

@ -71,7 +71,8 @@ details > summary::-webkit-details-marker {
}
* {
box-sizing: border-box;
vertical-align: middle !important;
box-sizing: border-box !important;
}
/* TYPOGRAPHY AND GENERAL SELECTORS */
@ -84,6 +85,7 @@ html {
background-attachment: fixed;
color: var(--white);
font-family: var(--main-font);
font-size: var(--small-size);
}
h1 {
@ -106,8 +108,8 @@ h2 {
h3 {
font-family: var(--display-font);
font-size: var(--medium-size);
font-weight: 600;
font-size: var(--small-size);
font-weight: 700;
line-height: 1.00;
letter-spacing: -0.20px;
word-spacing: 1.00px;
@ -116,7 +118,7 @@ h3 {
p {
font-family: var(--main-font);
font-size: var(--medium-size);
font-size: var(--small-size);
font-weight: 400;
letter-spacing: -0.30px;
word-spacing: -0.10px;
@ -124,6 +126,14 @@ p {
text-transform: none;
}
textarea {
font-family: var(--main-font);
font-weight: 400;
letter-spacing: -0.30px;
word-spacing: -0.10px;
text-transform: none;
}
ul {
text-decoration: none;
margin: 0;
@ -197,83 +207,35 @@ input:not([type=text]) {
cursor: pointer;
font-size: var(--medium-size);
background-image: linear-gradient(180deg, var(--bg2), transparent);
color: var(--white);
border: solid 2px var(--bg2);
border-radius: var(--unit-size);
padding: 6px 12px;
}
textarea:hover,
textarea:focus {
border: solid 2px var(--bg3) !important;
}
*|*::-moz-button-content {
all: unset;
}
/* TODO: hover and focus feedback, checkbox */
input[type=radio]:hover,
input[type=radio]:focus {
border: solid 5px var(--bg3) !important;
}
input[type=radio] {
all: unset;
display: inline-block;
width: var(--unit-size);
height: var(--unit-size);
border: solid 5px var(--bg2);
width: 1em;
height: 1em;
border-radius: 50%;
margin: 3px 3px 0px 5px;
background-color: var(--bg1);
}
input[type=radio]:checked {
background-color: var(--white);
}
button:hover,
button:focus,
input:hover,
input:focus {
border: solid 2px var(--bg3);
color: var(--white);
}
button:hover,
input:is([type=reset], [type=button], [type=submit]):hover {
color: var(--white);
}
:focus-visible::-moz-focus-inner {
border-color: var(--bg3) !important;
}
:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
color: var(--white);
}
/* file selector */
input[type=file] {
all: unset;
display: block;
max-width: 100%;
background: linear-gradient(135deg, var(--bg2), transparent);
display: block !important;
width: 100%;
font-family: var(--main-font);
font-size: var(--medium-size);
border-radius: var(--unit-size);
}
input[type=file]:focus,
input[type=file]:hover {
background: linear-gradient(135deg, var(--bg2), var(--bg3) 200%);
}
input + label {
all: unset;
@ -286,8 +248,7 @@ input + label {
cursor: pointer;
background-color: unset;
color: var(--white);
border: unset;
margin: 5px;
margin: 3px;
}

View File

@ -2,7 +2,7 @@
right: 0;
}
.create-notice {
.section-widget {
display: flex;
flex-direction: column;
width: 100%;
@ -10,84 +10,52 @@
background-color: var(--translucent);
border-radius: var(--unit-size);
border: solid 2px var(--bg2);
}
.create-notice textarea {
width: 100%;
font-family: var(--main-font);
font-weight: 400;
color: var(--white);
}
.section-title {
display: flex;
flex-direction: column;
font-family: var(--display-font);
font-weight: 900;
font-size: var(--main-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
padding: 2px var(--unit-size);
background-color: var(--translucent);
font-family: var(--display-font);
}
.section-title-hamburger {
display: flex;
justify-content: space-between;
}
.section-title-hamburger svg {
align-self: center;
fill: var(--white);
}
.section-title-plus {
fill: var(--white);
width: var(--main-size);
height: auto;
}
.section-title-plus summary {
display: block;
position: absolute;
top: var(--unit-size);
right: var(--unit-size);
.section-form {
padding: var(--unit-size);
}
.section-content {
margin: var(--unit-size);
}
.section-content hr {
all: unset;
display: inline;
height: 2px;
background-image: linear-gradient(to left, var(--translucent), transparent 90%);
.form-options {
display: block !important;
margin-bottom: var(--unit-size);
}
.target,
.scope {
border-radius: var(--unit-size);
}
.target label:first-child,
.scope label:first-child {
font-family: var(--display-font);
}
#tabs {
display: flex;
flex-direction: column;
font-family: var(--display-font);
}
.notice-options {
width: 100%;
}
#post_content {
.form-input {
border-radius: var(--unit-size);
background-color: var(--translucent);
color: var(--white);
width: 100%;
max-width: 100%;
height: calc(6 * var(--main-size));
border: 2px solid var(--bg2);
border: 2px solid transparent;
margin-top: var(--unit-size);
margin-bottom: var(--unit-size);
padding: var(--unit-size);
resize: vertical;
font-family: var(--main-font);
font-size: var(--medium-size);
color: var(--white);
}
.attachments {
margin-bottom: var(--unit-size);
}

View File

@ -1,7 +1,6 @@
.main-nav {
background-color: var(--translucent);
margin-bottom: var(--unit-size);
font-size: var(--main-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
@ -30,13 +29,11 @@
}
.main-nav ul li {
font-size: var(--medium-size);
border-radius: var(--unit-size);
}
.form {
display: flex;
font-size: var(--main-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
@ -57,7 +54,6 @@
.form #save {
display: flex;
flex-direction: column;
font-size: var(--medium-size);
padding: var(--unit-size);
box-sizing: border-box;
}
@ -77,7 +73,6 @@
position: relative;
color: var(--white);
font-size: var(--medium-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;

View File

@ -23,7 +23,7 @@
<li>
<details class="section-title-settings">
<summary>
<h1>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Personal Information, Avatar and Profile</em>
</summary>
@ -34,8 +34,8 @@
<li>
<details class="section-title-settings">
<summary>
<h1>Personal
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<h3>Personal
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
</summary>
@ -53,7 +53,7 @@
<li>
<details class="section-title-settings">
<summary>
<h1>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>{{ tab['desc'] }}</em>
</summary>
@ -79,7 +79,7 @@
<li>
<details class="section-title-settings">
<summary>
<h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<h2>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Email, Password and Language</em>
</summary>
@ -96,7 +96,7 @@
<li>
<details class="section-title-settings">
<summary>
<h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<h2>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
</summary>

View File

@ -1,78 +1,53 @@
<aside id='right-panel'>
{% if post_form is defined %}
<section class="create-notice">
<section class="section-widget">
<legend class="section-title">
<h1>Create a note</h1>
<details class="section-title-plus">
<summary>
{{ icon('plus-circle', 'icon icon-plus') | raw }}
<details>
<summary class="section-title-hamburger">
Create a note {{ icon('plus-circle', 'icon icon-plus') | raw }}
</summary>
<div id="note-types">
{% for tab in tabs %}
<a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</div>
{% for tab in tabs %}
<a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</details>
</legend>
<div class="section-content">
<div class="section-form">
{{ form_start(post_form) }}
<span class="target">
<div class="target-top">
{{ form_label(post_form.to) }}
</div>
<div class="target-bot">
{{ form_widget(post_form.to) }}
</div>
</span>
<hr>
<span class="scope">
<div class="visibility">
{{ form_row(post_form.visibility) }}
</div>
<span class="form-target">
{{ form_label(post_form.to) }}
{{ form_widget(post_form.to) }}
</span>
<hr>
{{ form_row(post_form.visibility, {'attr': {'class': 'form-scope'}}) }}
<span id="input">
<div class="input-wrapper">
<div class="content-input">
{{ form_row(post_form.content) }}
</div>
</div>
{{ form_row(post_form.content, {'attr': {'class': 'form-input'}}) }}
<div class="notice-options">
<div class="attachments">
<label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
{{ form_widget(post_form.attachments) }}
</label>
</div>
</div>
</span>
<label for="{{ post_form.attachments.vars.id }}" class="form-options">
{{ form_widget(post_form.attachments) }}
</label>
{{ form_row(post_form.post) }}
{{ form_row(post_form.post, {'attr': {'class': 'form-send'}}) }}
{{ form_end(post_form) }}
</div>
</section>
{% endif %}
{% set current_path = app.request.get('_route') %}
{% if right_panel_vars is defined %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
{{ block | raw }}
<section class="section-widget">
{{ block | raw }}
</section>
{% endfor %}
{% else %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
{{ block | raw }}
<section class="section-widget">
{{ block | raw }}
</section>
{% endfor %}
{% endif %}
</aside>