diff --git a/assets/javascripts/discourse/components/reports/best-topics.gjs b/assets/javascripts/discourse/components/reports/best-topics.gjs
index 662801f..546ef24 100644
--- a/assets/javascripts/discourse/components/reports/best-topics.gjs
+++ b/assets/javascripts/discourse/components/reports/best-topics.gjs
@@ -19,7 +19,7 @@ export default class BestTopics extends Component {
>
- {{topic.title}}
+
{{htmlSafe
topic.excerpt
}}
diff --git a/assets/javascripts/discourse/components/reports/word-card.gjs b/assets/javascripts/discourse/components/reports/word-card.gjs
index 22452ca..4113364 100644
--- a/assets/javascripts/discourse/components/reports/word-card.gjs
+++ b/assets/javascripts/discourse/components/reports/word-card.gjs
@@ -86,7 +86,7 @@ export default class WordCard extends Component {
{{@word}}
- used {{@count}} times
+ {{@count}}x
diff --git a/assets/stylesheets/common/activity-calendar.scss b/assets/stylesheets/common/activity-calendar.scss
index 35c88aa..53141da 100644
--- a/assets/stylesheets/common/activity-calendar.scss
+++ b/assets/stylesheets/common/activity-calendar.scss
@@ -1,5 +1,5 @@
.rewind-report-page.-activity-calendar {
- margin-bottom: 1em;
+ margin-bottom: 5em;
.rewind-card {
@include rewind-border;
}
@@ -20,7 +20,7 @@
.rewind-calendar-cell {
height: 10px;
width: 10px;
- border-radius: var(--rewind-border-radius);
+ border-radius: calc(var(--rewind-border-radius) / 2);
border: 1px solid rgba(var(--primary-rgb), 0.2);
&.-empty {
background: var(--primary-low);
diff --git a/assets/stylesheets/common/best-posts.scss b/assets/stylesheets/common/best-posts.scss
index b974ac9..a906d3d 100644
--- a/assets/stylesheets/common/best-posts.scss
+++ b/assets/stylesheets/common/best-posts.scss
@@ -51,10 +51,47 @@
}
}
.best-posts__post {
+ @media screen and (max-width: 425px) {
+ max-height: 300px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ p {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
+ }
+ .best-posts__post p {
+ font-family: var(--pixel-text) !important;
font-weight: normal;
- font-size: 16px;
+ font-size: var(--font-down-);
width: 100%;
text-align: left;
+ color: var(--primary-800);
+ @media screen and (max-width: 425px) {
+ font-size: var(--font-down-2);
+ }
+ }
+ .best-posts__post h1,
+ .best-posts__post h2 {
+ font-family: var(--jersey-heading);
+ font-size: 32px;
+ line-height: 22px;
+ }
+ .best-post__post h5 {
+ font-family: var(--jersey-heading);
+ }
+ .best-posts__post table {
+ font-family: var(--pixel-text) !important;
+ font-weight: normal;
+ font-size: var(--font-down-1);
+ }
+ .best-posts__metadata a {
+ font-family: var(--pixel-text);
+ text-transform: uppercase;
+ color: var(--primary);
}
.best-posts__metadata {
font-weight: normal;
@@ -66,6 +103,7 @@
}
.best-posts__likes,
.best-posts__replies {
+ font-family: var(--pixel-text);
border: 1px solid var(--primary-200);
padding: 3px 8px;
border-radius: var(--rewind-border-radius);
diff --git a/assets/stylesheets/common/best-topics.scss b/assets/stylesheets/common/best-topics.scss
index a554fbf..16b35e2 100644
--- a/assets/stylesheets/common/best-topics.scss
+++ b/assets/stylesheets/common/best-topics.scss
@@ -14,14 +14,23 @@
border: none;
padding: 0;
}
+ .best-topics__header {
+ font-family: var(--jersey-heading);
+ margin: 0;
+ font-size: var(--font-up-3);
+ line-height: var(--font-0);
+ }
.best-topics__topic {
- padding: 1em;
+ padding: 0.5em;
position: relative;
color: var(--primary);
display: flex;
flex-direction: column;
text-align: left;
max-width: 700px;
+ @media screen and (max-width: 425px) {
+ max-width: 90%;
+ }
@include rewind-border;
&.rank-1 {
--background: #ffe46a;
@@ -66,10 +75,16 @@
}
}
.best-topics__excerpt {
- font-size: var(--font-down-2);
+ font-family: var(--pixel-text);
+ font-size: var(--font-down-1);
font-weight: 400;
color: var(--primary-800);
text-align: left;
+ @media screen and (max-width: 425px) {
+ max-width: 100%;
+ overflow: hidden;
+ font-size: var(--font-down-2);
+ }
&:empty {
display: none;
}
diff --git a/assets/stylesheets/common/bff.scss b/assets/stylesheets/common/bff.scss
index 4684aa4..1f726c1 100644
--- a/assets/stylesheets/common/bff.scss
+++ b/assets/stylesheets/common/bff.scss
@@ -68,6 +68,7 @@
margin-top: auto;
height: min-content;
font-size: var(--font-down-1);
+ font-family: Pixelify Sans;
@media screen and (width <= 425px) {
font-size: var(--font-down-3);
}
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 5f60f9a..fd4ac51 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -26,13 +26,14 @@ body {
width: 100%;
max-width: 700px;
&__title {
- font-family: var(--heading-font) !important;
+ font-family: var(--jersey-heading) !important;
font-weight: 600;
+ font-size: var(--font-up-3);
-webkit-font-smoothing: antialiased;
}
&__data {
font-weight: normal;
- font-size: 14px;
+ font-size: 16px;
-webkit-font-smoothing: antialiased;
}
}
diff --git a/assets/stylesheets/common/fonts.scss b/assets/stylesheets/common/fonts.scss
index f99d98c..05b5649 100644
--- a/assets/stylesheets/common/fonts.scss
+++ b/assets/stylesheets/common/fonts.scss
@@ -1,26 +1,33 @@
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Jersey+20&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");
+@import url("https://use.typekit.net/ony6yef.css");
.rewind {
--heading-font: "Rubik", Helvetica, Arial, sans-serif;
--regular-font: "Open Sans", Helvetica, Arial, sans-serif;
+ --jersey-heading: "Jersey 20", Helvetica, Arial, sans-serif;
+ --pixel-text: "receipt-narrow", sans-serif;
h1,
h2,
h3,
h4,
h5 {
- font-family: roboto;
+ font-family: var(--jersey-heading);
-webkit-font-smoothing: antialiased;
}
p,
- span {
- font-family: var(--regular-font);
+ span,
+ table,
+ td,
+ tr {
+ font-family: var(--pixel-text);
-webkit-font-smoothing: antialiased;
}
}
h2.rewind-report-title {
- font-size: var(--font-down-2);
text-transform: uppercase;
}
diff --git a/assets/stylesheets/common/post-received-reactions.scss b/assets/stylesheets/common/post-received-reactions.scss
index d1c7695..bc5d9ed 100644
--- a/assets/stylesheets/common/post-received-reactions.scss
+++ b/assets/stylesheets/common/post-received-reactions.scss
@@ -1,7 +1,11 @@
.-post-received-reactions {
.rewind-report-container {
align-items: center;
+ justify-content: space-between;
gap: 0.5em;
+ @media screen and (width <= 425px) {
+ gap: 0.125em;
+ }
}
.rewind-card {
background: var(--secondary);
@@ -45,4 +49,49 @@
height: 26px;
}
}
+ @media screen and (width <= 625px) {
+ .scale {
+ width: min-content;
+ }
+ .scale:nth-child(1) {
+ padding: 0.15em;
+ }
+ .scale:nth-child(2) {
+ padding: 0.25em;
+ }
+ .scale:nth-child(3) {
+ padding: 0.35em;
+ }
+ .scale:nth-child(4) {
+ padding: 0.45em;
+ }
+ .scale:nth-child(5) {
+ padding: 0.65em;
+ }
+ }
+ @media screen and (width <= 425px) {
+ .scale {
+ width: min-content;
+ }
+ .scale:nth-child(1) {
+ padding: 0.15em;
+ display: none;
+ }
+ .scale:nth-child(2) {
+ padding: 0.2em;
+ margin-top: 10px;
+ }
+ .scale:nth-child(3) {
+ padding: 0.2em;
+ margin-top: 20px;
+ }
+ .scale:nth-child(4) {
+ padding: 0.2em;
+ }
+ .scale:nth-child(5) {
+ padding: 0.2em;
+
+ margin-top: 20px;
+ }
+ }
}
diff --git a/assets/stylesheets/common/post-used-reactions.scss b/assets/stylesheets/common/post-used-reactions.scss
index f29a011..ff117ce 100644
--- a/assets/stylesheets/common/post-used-reactions.scss
+++ b/assets/stylesheets/common/post-used-reactions.scss
@@ -23,7 +23,7 @@
.percentage {
font-weight: normal;
- font-family: monospace;
+ font-display: var(--pixel-text);
font-size: 16px;
}
diff --git a/assets/stylesheets/common/reading-time.scss b/assets/stylesheets/common/reading-time.scss
index 900fbc9..f182e1c 100644
--- a/assets/stylesheets/common/reading-time.scss
+++ b/assets/stylesheets/common/reading-time.scss
@@ -17,6 +17,10 @@
transform: rotateY(-20deg);
}
+p.reading-time__text {
+ font-family: var(--pixel-text);
+}
+
.reading-time code {
background-color: rgba(var(--primary-rgb), 0.15);
}
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index caaa4a7..1d250c2 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -34,7 +34,7 @@
width: 100vw;
height: 100vh;
max-height: 100%;
- max-width: 100%;
+ max-width: 960px;
background-color: var(--secondary);
border: 1px solid var(--primary);
border-radius: var(--rewind-border-radius);
diff --git a/assets/stylesheets/common/word-card.scss b/assets/stylesheets/common/word-card.scss
index 029db9c..c2459b4 100644
--- a/assets/stylesheets/common/word-card.scss
+++ b/assets/stylesheets/common/word-card.scss
@@ -7,11 +7,53 @@
.cards-container {
display: flex;
+ @media (max-width: 525px) {
+ display: grid;
+ grid-template:
+ ". . . . w w . . . . " auto
+ ". . . . w w . . . . " auto
+ ". . a a w w z z . . " auto
+ ". . a a w w z z . . " auto
+ ". . a a . . z z . . " auto
+ ". . a a . . z z . . " auto
+ ". . . d d c c . . . " auto
+ ". . . d d c c . . . " auto
+ ". . . d d c c . . . " auto
+ ". . . d d c c . . . " auto
+ / auto auto auto auto auto auto auto auto;
+ // grid-gap: 0.5em;
+ .rewind-card__wrapper:nth-child(1) {
+ grid-area: w;
+ }
+ .rewind-card__wrapper:nth-child(2) {
+ grid-area: a;
+ }
+ .rewind-card__wrapper:nth-child(3) {
+ grid-area: z;
+ }
+ .rewind-card__wrapper:nth-child(4) {
+ grid-area: d;
+ }
+ .rewind-card__wrapper:nth-child(5) {
+ grid-area: c;
+ }
+ }
}
.rewind-card__wrapper {
width: 150px;
height: 175px;
+ @media screen and (width <= 625px) {
+ width: 115px;
+ }
+ @media screen and (width <= 425px) {
+ width: 100px;
+ height: 125px;
+ }
+ @media screen and (width <= 350px) {
+ width: 80px;
+ height: 125px;
+ }
perspective: 1000px;
will-change: transform;
transform-style: preserve-3d;
@@ -56,6 +98,9 @@
}
&:hover .rewind-card__inner {
box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+ @media (prefers-color-scheme: dark) {
+ box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
+ }
}
.rewind-card.-back {
transform: rotateY(180deg);
@@ -92,6 +137,10 @@
img {
width: 20px;
height: 20px;
+ @media screen and (width <= 425px) {
+ height: 15px;
+ width: 15px;
+ }
}
}
.rewind-card__image.cr {
@@ -99,6 +148,10 @@
img {
width: 50px;
height: 50px;
+ @media screen and (width <= 425px) {
+ height: 30px;
+ width: 30px;
+ }
}
}
.rewind-card__image.br {
@@ -107,6 +160,10 @@
width: 20px;
height: 20px;
transform: rotate(180deg);
+ @media screen and (width <= 425px) {
+ height: 15px;
+ width: 15px;
+ }
}
}
}