UX: update and consolodate published page styles (#18792)

This commit is contained in:
Kris 2022-11-01 14:31:39 -04:00 committed by GitHub
parent 10ea279bc9
commit a356e2fe30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 35 deletions

View File

@ -1,11 +1,18 @@
@import "common";
.published-page-content-wrapper {
box-sizing: border-box;
margin: 2em auto;
max-width: 800px;
padding: 0.5em 10px 2em; // 10px matches .wrap
max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
width: 100%;
}
.published-page-header {
box-sizing: border-box;
width: 100%;
top: 0;
z-index: z("header");
@ -14,10 +21,15 @@
position: sticky;
top: 0;
.published-page-header-wrapper {
width: 925px;
box-sizing: border-box;
max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
width: 100%;
display: flex;
margin: 0em auto;
padding: 0.5em 0;
padding: 0.5em 10px; // 10px matches .wrap padding
align-items: center;
.published-page-logo {
height: 45px;
@ -26,9 +38,12 @@
}
.published-page-title {
color: var(--header_primary);
font-size: 2em;
font-size: var(--font-up-5);
margin: 0;
max-height: 1.25em;
line-height: var(--line-height-medium);
@include breakpoint(mobile-extra-large) {
font-size: var(--font-up-3);
}
}
}
}
@ -62,5 +77,8 @@
.published-page-content-body {
font-size: 1.25em;
padding-bottom: 2em;
img {
max-width: 100%;
height: auto;
}
}

View File

@ -1 +0,0 @@
@import "publish";

View File

@ -1 +0,0 @@
@import "publish_desktop";

View File

@ -1,20 +0,0 @@
@import "publish";
.published-page-header {
.published-page-header-wrapper {
width: auto;
.published-page-title {
font-size: var(--font-up-3);
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.published-page-content-wrapper {
margin: 2em auto;
padding: 0 10px;
}

View File

@ -1 +0,0 @@
@import "publish_mobile";

View File

@ -1,11 +1,5 @@
<%= discourse_stylesheet_link_tag 'publish', theme_id: nil %>
<%- if rtl? %>
<%= discourse_stylesheet_link_tag(mobile_view? ? :publish_mobile_rtl : :publish_mobile_rtl) %>
<%- else %>
<%= discourse_stylesheet_link_tag(mobile_view? ? :publish_mobile : :publish_desktop) %>
<%- end %>
<%- Discourse.find_plugin_css_assets(include_official: allow_plugins?, include_unofficial: allow_third_party_plugins?, mobile_view: mobile_view?, desktop_view: !mobile_view?, request: request).each do |file| %>
<%= discourse_stylesheet_link_tag(file) %>
<%- end %>