Make articles responsive
This commit is contained in:
parent
8eee541ccc
commit
4e44ba0b45
Binary file not shown.
|
@ -4599,7 +4599,7 @@ code, .code {
|
|||
.pa1 {
|
||||
padding: 0.25rem; }
|
||||
|
||||
.pa2, .tab, header .root-item > a, header .submenu > a {
|
||||
.pa2, .tab, figure, header .root-item > a, header .submenu > a {
|
||||
padding: 0.5rem; }
|
||||
|
||||
.pa3, header #login-popup {
|
||||
|
@ -4721,7 +4721,7 @@ code, .code {
|
|||
.optionbar .options button,
|
||||
.optionbar .options .button,
|
||||
.optionbar .options input[type=button],
|
||||
.optionbar .options input[type=submit], .post-content th, .post-content td,
|
||||
.optionbar .options input[type=submit], .post-content th, .post-content td, figure figcaption,
|
||||
button.button-small,
|
||||
.button.button-small,
|
||||
input.button-small[type=button],
|
||||
|
@ -4929,7 +4929,7 @@ input[type=submit]:not(.button-small), .notice {
|
|||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem; }
|
||||
|
||||
.mv2, .post-content table {
|
||||
.mv2, .post-content table, figure {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem; }
|
||||
|
||||
|
@ -4953,7 +4953,7 @@ input[type=submit]:not(.button-small), .notice {
|
|||
margin-top: 16rem;
|
||||
margin-bottom: 16rem; }
|
||||
|
||||
.mh0 {
|
||||
.mh0, figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
|
@ -4992,7 +4992,7 @@ input[type=submit]:not(.button-small), .notice {
|
|||
padding: 0.25rem; }
|
||||
.pa2-ns {
|
||||
padding: 0.5rem; }
|
||||
.pa3-ns {
|
||||
.pa3-ns, figure {
|
||||
padding: 1rem; }
|
||||
.pa4-ns {
|
||||
padding: 2rem; }
|
||||
|
@ -5076,7 +5076,7 @@ input[type=submit]:not(.button-small), .notice {
|
|||
.optionbar .options button,
|
||||
.optionbar .options .button,
|
||||
.optionbar .options input[type=button],
|
||||
.optionbar .options input[type=submit] {
|
||||
.optionbar .options input[type=submit], figure figcaption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem; }
|
||||
.pv3-ns {
|
||||
|
@ -5207,7 +5207,7 @@ input[type=submit]:not(.button-small), .notice {
|
|||
.mv2-ns {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem; }
|
||||
.mv3-ns {
|
||||
.mv3-ns, figure {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem; }
|
||||
.mv4-ns {
|
||||
|
@ -8029,10 +8029,7 @@ pre {
|
|||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 1rem 0; }
|
||||
figure figcaption {
|
||||
padding: 0.5rem 0; }
|
||||
padding-bottom: 0; }
|
||||
|
||||
.toolbar {
|
||||
background-color: #fff;
|
||||
|
|
|
@ -175,13 +175,12 @@ pre {
|
|||
}
|
||||
|
||||
figure {
|
||||
@extend .bg--dim, .br3;
|
||||
@extend .mh0, .mv2, .mv3-ns, .pa2, .pa3-ns, .bg--dim, .br3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: $spacing-medium 0;
|
||||
padding: $spacing-medium $spacing-medium 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
figcaption {
|
||||
padding: $spacing-small 0;
|
||||
@extend .pv1, .pv2-ns;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="ph2 ph0-ns">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if and .User .User.IsEduAuthor }}
|
||||
<div class="mb3">
|
||||
|
@ -51,10 +52,10 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
<div class="flex">
|
||||
<div class="edu-article flex-grow-1 post-content">
|
||||
<div class="edu-article flex-grow-1 post-content mw-100 overflow-hidden">
|
||||
{{ .Article.Content }}
|
||||
</div>
|
||||
<div class="sidebar ml3 flex-shrink-0 w-30">
|
||||
<div class="sidebar ml3 flex-shrink-0 w-30 dn db-ns">
|
||||
<div class="toc-container flex flex-column">
|
||||
{{ range .TOC }}
|
||||
<a href="#{{ .ID }}" class="db ph2 pv1 br2 toc toc-{{ .Level }}">{{ .Text }}</a>
|
||||
|
@ -112,4 +113,5 @@
|
|||
});
|
||||
toggleNotes();
|
||||
</script>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
Loading…
Reference in New Issue