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

[CSS] Now properly following Van de Graaf / Tschichold Page Construction Canon.

This commit is contained in:
Eliseu Amaro 2021-09-20 16:06:57 +01:00
parent 543853c374
commit 0ef151edac
3 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -197,9 +197,12 @@ hr {
.container { .container {
position: relative; position: relative;
top: 3rem; top: 3rem;
margin-left: 25%;
margin-right: 25%;
width: 53vw;
margin-left: auto;
margin-right: auto;
justify-content: center;
padding: var(--unit-size) var(--unit-size) 0 var(--unit-size); padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
} }
@ -768,13 +771,12 @@ input[type=file] {
/* PROFILE */ /* PROFILE */
.profile { .profile {
display: flex; display: flex;
font-family: var(--main-font); flex-wrap: wrap;
font-family: var(--main-font);
background-color: var(--translucent); background-color: var(--translucent);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
} }
.profile > * { .profile > * {
@ -783,6 +785,7 @@ input[type=file] {
.profile-info { .profile-info {
display: flex; display: flex;
flex-wrap: wrap;
flex-direction: column; flex-direction: column;
} }
.profile-info-nickname { .profile-info-nickname {
@ -795,11 +798,14 @@ input[type=file] {
margin-right: 5px; margin-right: 5px;
} }
.profile-info-stats { .profile-info-stats {
margin-top: var(--unit-size); margin-top: var(--unit-size);.content {
max-width: 100%;
}
} }
.profile-avatar { .profile-avatar {
max-width: 4rem; max-width: 4rem;
min-width: 3rem;
width: 100%; width: 100%;
height: auto; height: auto;
margin-right: 5px; margin-right: 5px;
@ -830,11 +836,26 @@ input[type=file] {
@media only screen @media only screen
and (min-width: 1200px) { and (min-width: 1800px) {
.content {
padding: var(--unit-size) var(--main-size) 0 var(--main-size);
}
.panel .panel-content { .panel .panel-content {
width: 25rem; width: 12vw;
max-width: 20%; }
a[id|="anchor"]:target + .accessibility-target {
animation-name: highlight;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
}
}
@media only screen
and (min-width : 1200px) and (max-width : 1800px) {
.panel .panel-content {
width: 22vw;
} }
a[id|="anchor"]:target + .accessibility-target { a[id|="anchor"]:target + .accessibility-target {
@ -848,12 +869,7 @@ and (min-width: 1200px) {
and (max-width: 1200px) { and (max-width: 1200px) {
/* content should occupy the entire width at this size */ /* content should occupy the entire width at this size */
.container { .container {
margin-left: unset; width: 100%;
margin-right: unset;
}
.content {
max-width: 100%;
} }
#panel-left-toggle:not(:checked) ~ .panel-content, #panel-left-toggle:not(:checked) ~ .panel-content,

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

@ -53,16 +53,23 @@
} }
@media only screen @media only screen
and (min-width : 1200px) { and (min-width : 1800px) {
#panel-left-icon { #panel-left-icon {
display: none; display: none;
} }
.panel-left > * {
margin-left: 12vw;
}
} }
@media only screen @media only screen
and (min-width: 2200px) { and (min-width : 1200px) and (max-width : 1800px) {
#panel-left-icon {
display: none;
}
.panel-left > * { .panel-left > * {
margin-left: 10rem; margin-left: 0;
} }
} }

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

@ -21,11 +21,17 @@ and (min-width: 1200px) {
#panel-right-icon { #panel-right-icon {
display: none; display: none;
} }
.panel-right > * {
margin-right: 12vw;
}
} }
@media only screen @media only screen
and (min-width: 2200px) { and (min-width : 1200px) and (max-width : 1800px) {
#panel-right-icon {
display: none;
}
.panel-right > * { .panel-right > * {
margin-right: 10rem; margin-right: unset;
} }
} }