7da54001fe
One user suggested that the loading indicator should not be written ALL CAPS, at first it was thought this change is very minor, but then a few other people asked agreed on the same thing - variant without caps looks better. It may be related that it is harder to read or just looks too "catchy". Moreover, I asked @rf@mastodonsocial.ru community what they think of that and 82% of 22 people agreed on this change. This commit removes all usage of text-transform: uppercase, where the font size specified, it changes the value by one pixel larger, so we still keeping the "designed" size of the labels but without using CAPS.
136 lines
2.3 KiB
SCSS
136 lines
2.3 KiB
SCSS
.public-layout {
|
|
.footer {
|
|
text-align: left;
|
|
padding-top: 20px;
|
|
padding-bottom: 60px;
|
|
font-size: 12px;
|
|
color: lighten($ui-base-color, 34%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
|
|
|
|
.column-0 {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.column-1 {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.column-2 {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
text-align: center;
|
|
|
|
h4 a {
|
|
color: lighten($ui-base-color, 34%);
|
|
}
|
|
}
|
|
|
|
.column-3 {
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.column-4 {
|
|
grid-column: 5;
|
|
grid-row: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 690px) {
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
|
|
.column-0,
|
|
.column-1 {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.column-1 {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.column-2 {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.column-3,
|
|
.column-4 {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.column-4 {
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.column-1 {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
.column-0,
|
|
.column-1,
|
|
.column-3,
|
|
.column-4 {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: $darker-text-color;
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
ul a {
|
|
text-decoration: none;
|
|
color: lighten($ui-base-color, 34%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.brand {
|
|
svg {
|
|
display: block;
|
|
height: 36px;
|
|
width: auto;
|
|
margin: 0 auto;
|
|
fill: lighten($ui-base-color, 34%);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
svg {
|
|
fill: lighten($ui-base-color, 38%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|