From 68097b312038c63d4bee44393ab27968a94584c1 Mon Sep 17 00:00:00 2001 From: Jordan Vidrine Date: Mon, 13 Jan 2025 20:00:12 -0600 Subject: [PATCH] increase trigger for media query --- .../stylesheets/common/activity-calendar.scss | 6 +- assets/stylesheets/common/best-posts.scss | 4 +- assets/stylesheets/common/best-topics.scss | 2 +- assets/stylesheets/common/card.scss | 85 +------------------ assets/stylesheets/common/fbff.scss | 6 +- .../common/post-received-reactions.scss | 4 +- assets/stylesheets/common/reading-time.scss | 12 +-- assets/stylesheets/common/top-words.scss | 8 +- 8 files changed, 22 insertions(+), 105 deletions(-) diff --git a/assets/stylesheets/common/activity-calendar.scss b/assets/stylesheets/common/activity-calendar.scss index 6cec55d..8e33f7d 100644 --- a/assets/stylesheets/common/activity-calendar.scss +++ b/assets/stylesheets/common/activity-calendar.scss @@ -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; } diff --git a/assets/stylesheets/common/best-posts.scss b/assets/stylesheets/common/best-posts.scss index b0cf3bd..8a3debf 100644 --- a/assets/stylesheets/common/best-posts.scss +++ b/assets/stylesheets/common/best-posts.scss @@ -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); } } diff --git a/assets/stylesheets/common/best-topics.scss b/assets/stylesheets/common/best-topics.scss index 30ff5de..f959337 100644 --- a/assets/stylesheets/common/best-topics.scss +++ b/assets/stylesheets/common/best-topics.scss @@ -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); diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss index 13fd8af..76deae0 100644 --- a/assets/stylesheets/common/card.scss +++ b/assets/stylesheets/common/card.scss @@ -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) - ); -} diff --git a/assets/stylesheets/common/fbff.scss b/assets/stylesheets/common/fbff.scss index 1f726c1..3b059fa 100644 --- a/assets/stylesheets/common/fbff.scss +++ b/assets/stylesheets/common/fbff.scss @@ -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); } } diff --git a/assets/stylesheets/common/post-received-reactions.scss b/assets/stylesheets/common/post-received-reactions.scss index b9aecf1..4b3680a 100644 --- a/assets/stylesheets/common/post-received-reactions.scss +++ b/assets/stylesheets/common/post-received-reactions.scss @@ -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; } diff --git a/assets/stylesheets/common/reading-time.scss b/assets/stylesheets/common/reading-time.scss index f182e1c..77fa9cf 100644 --- a/assets/stylesheets/common/reading-time.scss +++ b/assets/stylesheets/common/reading-time.scss @@ -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; diff --git a/assets/stylesheets/common/top-words.scss b/assets/stylesheets/common/top-words.scss index a75939c..802f0fc 100644 --- a/assets/stylesheets/common/top-words.scss +++ b/assets/stylesheets/common/top-words.scss @@ -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; }