shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final screens

Browse Source
This commit is contained in:
Jordan Vidrine
2025-02-27 15:47:00 -06:00
parent 2f2d1b8607
commit 249d30980b
4 changed files with 166 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/common.scss
+1
View File
@@ -10,3 +10,4 @@
@import "hiddenstuff";
@import "topics";
@import "misc";
@import "box-view";
scss/box-view.scss
+122
View File
@@ -0,0 +1,122 @@
.experimental-screen {
@media screen and (max-width: 425px) {
display: none;
}
@media screen and (min-width: 1600px) {
display: none;
}
width: 100%;
display: block;
margin: 0;
padding: 0;
position: relative;
container: content-width / inline-size;
li {
list-style: none;
margin: 0;
padding: 0;
}
&__top-left,
&__top-right,
&__bottom-left,
&__bottom-right {
position: fixed;
width: var(--d-border-radius-large);
height: var(--d-border-radius-large);
background-color: var(--secondary);
z-index: 999;
-webkit-mask: radial-gradient(
circle at var(--d-border-radius-large) var(--d-border-radius-large),
transparent var(--d-border-radius-large),
transparent var(--d-border-radius-large),
black var(--d-border-radius-large)
);
}
&__top-left {
top: var(--header-offset);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
}
}
&__top-right {
top: var(--header-offset);
transform: rotate(90deg);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
}
}
}
&__bottom-left {
transform: rotate(-90deg);
bottom: var(--d-border-radius-large);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-right {
transform: rotate(180deg);
bottom: var(--d-border-radius-large);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
}
&__bottom-bar {
position: fixed;
width: 100%;
z-index: 999;
background-color: var(--secondary);
bottom: 0;
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
height: calc(var(--d-border-radius-large) * 2);
}
height: var(--d-border-radius-large);
@container content-width (width > 1px) {
width: 100cqw;
}
}
}
@media screen and (min-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
var(--d-border-radius-large)
);
}
}
@media screen and (max-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
calc(var(--d-border-radius-large) * 2)
);
}
}
@media screen and (max-width: 400px) {
.with-topic-progress {
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
}
}
scss/main.scss
+6 -120
View File
@@ -10,6 +10,12 @@ body.has-sidebar-page #main-outlet-wrapper {
gap: 0 var(--main-grid-gap);
}
@media screen and (max-width: 488px) {
#main-outlet-wrapper {
gap: 0;
}
}
.powered-by-discourse {
display: none;
}
@@ -61,126 +67,6 @@ body:not(.has-full-page-chat) {
}
}
.experimental-screen {
@media screen and (max-width: 425px) {
display: none;
}
width: 100%;
display: block;
margin: 0;
padding: 0;
position: relative;
container: content-width / inline-size;
li {
list-style: none;
margin: 0;
padding: 0;
}
&__top-left,
&__top-right,
&__bottom-left,
&__bottom-right {
position: fixed;
width: var(--d-border-radius-large);
height: var(--d-border-radius-large);
background-color: var(--secondary);
z-index: 999;
-webkit-mask: radial-gradient(
circle at var(--d-border-radius-large) var(--d-border-radius-large),
transparent var(--d-border-radius-large),
transparent var(--d-border-radius-large),
black var(--d-border-radius-large)
);
}
&__top-left {
top: var(--header-offset);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
}
}
&__top-right {
top: var(--header-offset);
transform: rotate(90deg);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
}
}
}
&__bottom-left {
transform: rotate(-90deg);
bottom: var(--d-border-radius-large);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-right {
transform: rotate(180deg);
bottom: var(--d-border-radius-large);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
}
&__bottom-bar {
position: fixed;
width: 100%;
z-index: 999;
background-color: var(--secondary);
bottom: 0;
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
height: calc(var(--d-border-radius-large) * 2);
}
height: var(--d-border-radius-large);
@container content-width (width > 1px) {
width: 100cqw;
}
}
}
@media screen and (min-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
var(--d-border-radius-large)
);
}
}
@media screen and (max-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
calc(var(--d-border-radius-large) * 2)
);
}
}
@media screen and (max-width: 400px) {
.with-topic-progress {
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
}
}
.boxed.white {
background-color: #fff;
}
scss/search-banner.scss
+37 -1
View File
@@ -1,13 +1,18 @@
.custom-search-banner-wrap {
display: grid;
grid-template-rows: 0.33fr 0.33fr 0.33fr;
grid-template-columns: 0.5fr 0.5fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 0.5em;
border-bottom: 1px solid var(--primary-300);
padding: 2.5em 0 2.5em;
margin-bottom: 2.5em;
--search-color: #595bca;
@media screen and (max-width: 700px) {
padding: 1em 1em 0 1em;
margin-bottom: 0.5em;
border-bottom: none;
}
h1 {
grid-column: 1/2;
grid-row: 1/-1;
@@ -17,12 +22,43 @@
margin: 0;
font-weight: 400;
color: #350c73;
@media screen and (max-width: 1028px) {
font-size: var(--font-up-4);
grid-column: 1/-1;
grid-row: 1;
text-align: center;
margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
text-align: left;
grid-column: 1/2;
grid-row: 1/-1;
font-size: var(--font-up-3);
}
@media screen and (max-width: 600px) {
grid-column: 1/-1;
grid-row: 1;
text-align: center;
margin-bottom: 0.5em;
}
}
.search-menu {
grid-column: 2/3;
grid-row: 1/-1;
width: 100%;
align-self: center;
@media screen and (max-width: 1028px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
@media screen and (max-width: 768px) {
grid-column: 2/-1;
grid-row: 1/-1;
}
@media screen and (max-width: 600px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
}
p {
display: none;