UX: Slightly adjust onebox alignment (#11326)

* fixed header/favicon's vertical alignment
* slightly increased header margin
* made the onebox padding symmetrical
* increased the right margin on small image elements
* removed extraneous pre bottom margin
This commit is contained in:
Jarek Radosz 2020-11-23 22:16:50 +01:00 committed by GitHub
parent defbae4007
commit de2d323ccf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -49,7 +49,7 @@ a.loading-onebox {
max-width: 25%; max-width: 25%;
height: auto; height: auto;
float: left; float: left;
margin-right: 10px; margin-right: 1em;
} }
h3, h3,
h4 { h4 {
@ -96,12 +96,15 @@ a.loading-onebox {
aside.onebox { aside.onebox {
border: 5px solid var(--primary-low); border: 5px solid var(--primary-low);
margin-bottom: 1em; margin-bottom: 1em;
padding: 12px 25px 12px 12px; padding: 1em;
font-size: $font-0; font-size: $font-0;
background: var(--secondary); background: var(--secondary);
header { header {
margin-bottom: 8px; align-items: center;
display: flex;
margin-bottom: 1em;
a[href] { a[href] {
color: var(--primary-med-or-secondary-med); color: var(--primary-med-or-secondary-med);
text-decoration: none; text-decoration: none;
@ -148,7 +151,7 @@ aside.onebox {
height: auto; height: auto;
width: auto; width: auto;
float: left; float: left;
margin-right: 10px; margin-right: 1em;
&.onebox-full-image { &.onebox-full-image {
max-height: none; max-height: none;
max-width: none; max-width: none;
@ -173,7 +176,7 @@ aside.onebox {
width: calc(128px * var(--magic-ratio)); width: calc(128px * var(--magic-ratio));
max-width: 20%; max-width: 20%;
float: left; float: left;
margin-right: 10px; margin-right: 1em;
height: auto; height: auto;
img { img {
@ -331,6 +334,10 @@ blockquote {
} }
} }
pre.onebox {
margin-bottom: 0;
}
// -- Onebox Github Code Blob -- // -- Onebox Github Code Blob --
pre.onebox code ol.lines li:before { pre.onebox code ol.lines li:before {
position: absolute; position: absolute;
@ -658,7 +665,7 @@ aside.onebox.stackexchange .onebox-body {
.site-icon { .site-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 3px; margin-right: 0.5em;
} }
} }
} }