discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-07 14:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

increase trigger for media query

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-13 20:00:12 -06:00
parent 0d25800241
commit 68097b3120
8 changed files with 22 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/stylesheets/common/activity-calendar.scss
View File

@ -2,14 +2,14 @@
margin-bottom: 5em;
.rewind-card {
@include rewind-border;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
padding: 0.5em;
}
}
.rewind-calendar {
border-collapse: unset;
border-spacing: 3px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
border-spacing: 1px;
}
tr {
@ -26,7 +26,7 @@
.rewind-calendar-cell {
height: 10px;
width: 10px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
height: 5px;
width: 5px;
}

4
assets/stylesheets/common/best-posts.scss
View File

@ -51,7 +51,7 @@
}
}
.best-posts__post {
@media screen and (max-width: 425px) {
@media screen and (max-width: 475px) {
max-height: 300px;
text-overflow: ellipsis;
overflow: hidden;
@ -70,7 +70,7 @@
width: 100%;
text-align: left;
color: var(--primary-800);
@media screen and (max-width: 425px) {
@media screen and (max-width: 475px) {
font-size: var(--font-down-2);
}
}

2
assets/stylesheets/common/best-topics.scss
View File

@ -77,7 +77,7 @@
font-weight: 400;
color: var(--primary-800);
text-align: left;
@media screen and (max-width: 425px) {
@media screen and (max-width: 475px) {
max-width: 100%;
overflow: hidden;
font-size: var(--font-down-2);

85
assets/stylesheets/common/card.scss
View File

@ -30,7 +30,7 @@
@media screen and (max-width: 525px) {
font-size: var(--font-up-2);
}
@media screen and (max-width: 425px) {
@media screen and (max-width: 475px) {
font-size: var(--font-up-0);
}
}
@ -40,86 +40,3 @@
-webkit-font-smoothing: antialiased;
}
}
.pixel-corners,
.pixel-corners--wrapper {
clip-path: polygon(
0px calc(100% - 20px),
4px calc(100% - 20px),
4px calc(100% - 12px),
8px calc(100% - 12px),
8px calc(100% - 8px),
12px calc(100% - 8px),
12px calc(100% - 4px),
20px calc(100% - 4px),
20px 100%,
calc(100% - 20px) 100%,
calc(100% - 20px) calc(100% - 4px),
calc(100% - 12px) calc(100% - 4px),
calc(100% - 12px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 12px),
calc(100% - 4px) calc(100% - 12px),
calc(100% - 4px) calc(100% - 20px),
100% calc(100% - 20px),
100% 20px,
calc(100% - 4px) 20px,
calc(100% - 4px) 12px,
calc(100% - 8px) 12px,
calc(100% - 8px) 8px,
calc(100% - 12px) 8px,
calc(100% - 12px) 4px,
calc(100% - 20px) 4px,
calc(100% - 20px) 0px,
20px 0px,
20px 4px,
12px 4px,
12px 8px,
8px 8px,
8px 12px,
4px 12px,
4px 20px,
0px 20px
);
position: relative;
}
.pixel-corners {
border: 4px solid transparent;
}
.pixel-corners--wrapper {
width: fit-content;
height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
display: block;
clip-path: polygon(
4px 20px,
8px 20px,
8px 12px,
12px 12px,
12px 8px,
20px 8px,
20px 4px,
calc(100% - 20px) 4px,
calc(100% - 20px) 8px,
calc(100% - 12px) 8px,
calc(100% - 12px) 12px,
calc(100% - 8px) 12px,
calc(100% - 8px) 20px,
calc(100% - 4px) 20px,
calc(100% - 4px) calc(100% - 20px),
calc(100% - 8px) calc(100% - 20px),
calc(100% - 8px) calc(100% - 12px),
calc(100% - 12px) calc(100% - 12px),
calc(100% - 12px) calc(100% - 8px),
calc(100% - 20px) calc(100% - 8px),
calc(100% - 20px) calc(100% - 4px),
20px calc(100% - 4px),
20px calc(100% - 8px),
12px calc(100% - 8px),
12px calc(100% - 12px),
8px calc(100% - 12px),
8px calc(100% - 20px),
4px calc(100% - 20px)
);
}

6
assets/stylesheets/common/fbff.scss
View File

@ -13,7 +13,7 @@
@media screen and (width <= 768px) {
--border-size: 4px;
}
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
--border-size: 3px;
}
.fbff-gif-container {
@ -51,7 +51,7 @@
width: 50px;
height: 50px;
}
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
width: 25px;
height: 25px;
}
@ -69,7 +69,7 @@
height: min-content;
font-size: var(--font-down-1);
font-family: Pixelify Sans;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
font-size: var(--font-down-3);
}
}

4
assets/stylesheets/common/post-received-reactions.scss
View File

@ -3,7 +3,7 @@
align-items: center;
justify-content: space-between;
gap: 0.5em;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
gap: 0.125em;
}
}
@ -87,7 +87,7 @@
padding: 0.65em;
}
}
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
.scale {
width: min-content;
}

12
assets/stylesheets/common/reading-time.scss
View File

@ -8,7 +8,7 @@
.book {
width: 150px;
height: 200px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
width: 100px;
height: 133px;
}
@ -31,7 +31,7 @@ p.reading-time__text {
left: 0;
width: 150px;
height: 200px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
width: 100px;
height: 133px;
}
@ -49,7 +49,7 @@ p.reading-time__text {
top: 4px;
width: 33px;
height: 192px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
left: -43px;
width: 22px;
height: 125px;
@ -91,7 +91,7 @@ p.reading-time__text {
transform: translateZ(-17.5px);
background-color: var(--book-color);
border-radius: 0 5px 5px 0;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
width: 100px;
height: 133px;
}
@ -100,7 +100,7 @@ p.reading-time__text {
.reading-time__text {
font-weight: normal;
width: 50%;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
font-size: var(--font-down-2);
}
}
@ -108,7 +108,7 @@ p.reading-time__text {
.reading-time .rewind-card {
gap: 1em;
padding: 1.5em;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
padding: 0.75em;
}
flex-direction: row;

8
assets/stylesheets/common/top-words.scss
View File

@ -45,7 +45,7 @@
@media screen and (width <= 625px) {
width: 115px;
}
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
width: 100px;
height: 125px;
}
@ -145,7 +145,7 @@
img {
width: 20px;
height: 20px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
height: 15px;
width: 15px;
}
@ -156,7 +156,7 @@
img {
width: 50px;
height: 50px;
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
height: 30px;
width: 30px;
}
@ -168,7 +168,7 @@
width: 20px;
height: 20px;
transform: rotate(180deg);
@media screen and (width <= 425px) {
@media screen and (width <= 475px) {
height: 15px;
width: 15px;
}