MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[Glitch] Add table of contents to about page

Browse Source 
Port SCSS changes from d930eb88b6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
master
Eugen Rochko 5 years ago committed by Thibaut Girka
parent dd2a303a9b
commit dbb8d9308b
3 changed files with 183 additions and 100 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 138
      app/javascript/flavours/glitch/styles/about.scss
  2. 62
      app/javascript/flavours/glitch/styles/containers.scss
  3. 83
      app/javascript/flavours/glitch/styles/widgets.scss

138
app/javascript/flavours/glitch/styles/about.scss
Unescape View File

@ -17,109 +17,102 @@ $small-breakpoint: 960px;
.rich-formatting { .rich-formatting {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
font-size: 16px; line-height: 1.7;
line-height: 30px; word-wrap: break-word;
color: $darker-text-color; color: $darker-text-color;
padding-right: 10px;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
text-decoration: underline; text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
} }
p, p,
li { li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color; color: $darker-text-color;
}
a { p {
color: $highlight-text-color; margin-top: 0;
text-decoration: underline; margin-bottom: .85em;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
strong, strong {
em {
font-weight: 700; font-weight: 700;
color: lighten($darker-text-color, 10%); color: $secondary-text-color;
} }
h1 { em {
font-family: $font-display, sans-serif; font-style: italic;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color; color: $secondary-text-color;
}
small { code {
font-family: $font-sans-serif, sans-serif; font-size: 0.85em;
display: block; background: darken($ui-base-color, 8%);
font-size: 18px; border-radius: 4px;
font-weight: 400; padding: 0.2em 0.3em;
color: lighten($darker-text-color, 10%);
}
} }
h2 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-display, sans-serif; font-family: $font-display, sans-serif;
font-size: 22px; margin-top: 1.275em;
line-height: 26px; margin-bottom: .85em;
font-weight: 500; font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color; color: $secondary-text-color;
} }
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 { h3 {
font-family: $font-display, sans-serif; font-size: 1.5em;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
} }
h4 { h4 {
font-family: $font-display, sans-serif; font-size: 1.25em;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
} }
h5 { h5,
font-family: $font-display, sans-serif; h6 {
font-size: 14px; font-size: 1em;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
} }
h6 { ul {
font-family: $font-display, sans-serif; list-style: disc;
font-size: 12px; }
line-height: 24px;
font-weight: 500; ol {
margin-bottom: 20px; list-style: decimal;
color: $secondary-text-color;
} }
ul, ul,
ol { ol {
margin-left: 20px; margin: 0;
padding: 0;
padding-left: 2em;
margin-bottom: 0.85em;
&[type='a'] { &[type='a'] {
list-style-type: lower-alpha; list-style-type: lower-alpha;
@ -130,31 +123,22 @@ $small-breakpoint: 960px;
} }
} }
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ol,
li > ul {
margin-top: 6px;
}
hr { hr {
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6); border-bottom: 1px solid lighten($ui-base-color, 4%);
margin: 20px 0; margin: 1.7em 0;
&.spacer { &.spacer {
height: 1px; height: 1px;
border: 0; border: 0;
} }
} }
& > :first-child {
margin-top: 0;
}
} }
.information-board { .information-board {
@ -418,7 +402,7 @@ $small-breakpoint: 960px;
} }
&__call-to-action { &__call-to-action {
background: darken($ui-base-color, 4%); background: $ui-base-color;
border-radius: 4px; border-radius: 4px;
padding: 25px 40px; padding: 25px 40px;
overflow: hidden; overflow: hidden;

62
app/javascript/flavours/glitch/styles/containers.scss
Unescape View File

@ -143,6 +143,63 @@
grid-row: 3; grid-row: 3;
} }
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
grid-template-columns: minmax(0, 100%);
.column-0 {
grid-column: 1;
}
.column-1 {
grid-column: 1;
grid-row: 3;
}
.column-2 {
grid-column: 1;
grid-row: 2;
}
.column-3 {
grid-column: 1;
grid-row: 4;
}
}
}
.grid-4 {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
grid-column: 1 / 5;
grid-row: 1;
}
.column-1 {
grid-column: 1 / 4;
grid-row: 2;
}
.column-2 {
grid-column: 4;
grid-row: 2;
}
.column-3 {
grid-column: 2 / 5;
grid-row: 3;
}
.column-4 {
grid-column: 1;
grid-row: 3;
}
.landing-page__call-to-action { .landing-page__call-to-action {
min-height: 100%; min-height: 100%;
} }
@ -191,6 +248,11 @@
} }
.column-3 { .column-3 {
grid-column: 1;
grid-row: 5;
}
.column-4 {
grid-column: 1; grid-column: 1;
grid-row: 4; grid-row: 4;
} }

83
app/javascript/flavours/glitch/styles/widgets.scss
Unescape View File

@ -128,41 +128,43 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
min-height: 100%;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget { .contact-widget {
min-height: 100%;
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
padding: 0;
strong { h4 {
font-weight: 500; padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
} }
p { .account {
margin-bottom: 10px; border-bottom: 0;
padding: 10px 0;
&:last-child { padding-top: 5px;
margin-bottom: 0;
}
} }
&__mail { & > a {
margin-top: 10px; display: inline-block;
padding: 10px;
padding-top: 0;
color: $darker-text-color;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a { &:hover,
color: $primary-text-color; &:focus,
text-decoration: none; &:active {
text-decoration: underline;
} }
} }
} }
@ -557,3 +559,38 @@ $fluid-breakpoint: $maximum-width + 20px;
} }
} }
} }
.table-of-contents {
background: darken($ui-base-color, 4%);
min-height: 100%;
font-size: 14px;
border-radius: 4px;
li a {
display: block;
font-weight: 500;
padding: 15px;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: $primary-text-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
li:last-child a {
border-bottom: 0;
}
li ul {
padding-left: 20px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
}
}

Write Preview
Loading…
Cancel
Save