mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-07-07 06:12:22 +00:00
more solid styling choices
This commit is contained in:
Jordan Vidrine
parent
5427b90a93
commit
412a126e22
@ -1,16 +1,22 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { concat } from "@ember/helper";
|
||||
import { get } from "@ember/object";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import dIcon from "discourse-common/helpers/d-icon";
|
||||
|
||||
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
|
||||
export default class BestPosts extends Component {
|
||||
rank(idx) {
|
||||
return idx + 1;
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page -best-posts">
|
||||
<h2 class="rewind-report-title">Your 3 best posts</h2>
|
||||
<div class="rewind-report-container">
|
||||
{{#each @report.data as |post|}}
|
||||
<div class="rewind-card">
|
||||
{{#each @report.data as |post idx|}}
|
||||
<div class={{concat "rewind-card" " rank-" (this.rank idx)}}>
|
||||
<span class="best-posts -rank"></span>
|
||||
<span class="best-posts -rank"></span>
|
||||
<div class="best-posts__post">{{htmlSafe (get post "5")}}</div>
|
||||
<div class="best-posts__metadata">
|
||||
<span class="best-posts__likes">
|
||||
|
||||
@ -1,25 +1,12 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { concat } from "@ember/helper";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import emoji from "discourse/helpers/emoji";
|
||||
|
||||
export default class BestTopics extends Component {
|
||||
rank(idx) {
|
||||
return idx + 1;
|
||||
}
|
||||
|
||||
emojiName(rank) {
|
||||
if (rank + 1 === 1) {
|
||||
return "1st_place_medal";
|
||||
} else if (rank + 1 === 2) {
|
||||
return "2nd_place_medal";
|
||||
} else if (rank + 1 === 3) {
|
||||
return "3rd_place_medal";
|
||||
} else {
|
||||
return "medal";
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page -best-topics">
|
||||
<h2 class="rewind-report-title">Your 3 best topics</h2>
|
||||
@ -30,9 +17,9 @@ export default class BestTopics extends Component {
|
||||
href={{concat "/t/-/" topic.topic_id}}
|
||||
class={{concat "best-topics__topic" " rank-" (this.rank idx)}}
|
||||
>
|
||||
<span class="best-topics__rank">{{emoji
|
||||
(this.emojiName idx)
|
||||
}}</span><h2>{{topic.title}}</h2>
|
||||
<span class="best-topics -rank"></span>
|
||||
<span class="best-topics -rank"></span>
|
||||
<h2>{{topic.title}}</h2>
|
||||
<span class="best-topics__excerpt">{{htmlSafe
|
||||
topic.excerpt
|
||||
}}</span>
|
||||
|
||||
@ -1,12 +1,21 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { service } from "@ember/service";
|
||||
import dIcon from "discourse-common/helpers/d-icon";
|
||||
|
||||
export default class Rewind extends Component {
|
||||
@service siteSettings;
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page">
|
||||
<h1>{{this.siteSettings.title}} 2024 rewind</h1>
|
||||
<div class="rewind__introduction">
|
||||
<img
|
||||
class="rewind-logo-light"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
|
||||
/>
|
||||
<img
|
||||
class="rewind-logo-dark"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
||||
@ -16,10 +16,6 @@ export default class Reactions extends Component {
|
||||
).reduce((acc, count) => acc + count, 0);
|
||||
}
|
||||
|
||||
get randomModifier() {
|
||||
return Math.random();
|
||||
}
|
||||
|
||||
@action
|
||||
computePercentage(count) {
|
||||
return `${((count / this.totalPostUsedReactions) * 100).toFixed(2)}%`;
|
||||
@ -39,17 +35,11 @@ export default class Reactions extends Component {
|
||||
<h2 class="rewind-report-title">Most received reactions in topics</h2>
|
||||
<div class="rewind-report-container">
|
||||
{{#each-in this.receivedReactions as |emojiName count|}}
|
||||
<div
|
||||
class="rewind-card scale"
|
||||
style="--rand: {{this.randomModifier}}"
|
||||
>
|
||||
<div class="rewind-card scale">
|
||||
<span class="rewind-card__emoji">{{replaceEmoji
|
||||
(concat ":" emojiName ":")
|
||||
}}</span>
|
||||
<span class="rewind-card__title">{{this.cleanEmoji
|
||||
emojiName
|
||||
}}</span>
|
||||
<span class="rewind-card__data">{{count}} times</span>
|
||||
<span class="rewind-card__data">{{count}}</span>
|
||||
</div>
|
||||
{{/each-in}}
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,8 @@ export default class ReadingTime extends Component {
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page -reading-time">
|
||||
<div class="rewind-report-container">
|
||||
<h2 class="rewind-report-title">Reading Time</h2>
|
||||
<div class="rewind-card">
|
||||
<p class="reading-time__text">You spent
|
||||
<code>{{this.readTimeString}}</code>
|
||||
reading on our site! That's the time it would take to read through
|
||||
|
||||
@ -4,6 +4,7 @@ import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import emoji from "discourse/helpers/emoji";
|
||||
import discourseLater from "discourse-common/lib/later";
|
||||
|
||||
const MYSTERY_EMOJIS = [
|
||||
"mag", // 🔍
|
||||
@ -54,9 +55,19 @@ export default class WordCard extends Component {
|
||||
this.cardContainer.classList.toggle("flipped");
|
||||
}
|
||||
|
||||
@action
|
||||
handleLeave() {
|
||||
const cardContainer = this.cardContainer;
|
||||
cardContainer.classList.toggle("mouseleave");
|
||||
discourseLater(() => {
|
||||
cardContainer.classList.remove("mouseleave");
|
||||
}, 100);
|
||||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
{{on "click" (fn this.handleClick)}}
|
||||
{{on "mouseleave" (fn this.handleLeave)}}
|
||||
class="rewind-card__wrapper"
|
||||
style={{concat this.randomStyle "; " this.mysteryData.color ";"}}
|
||||
{{didInsert this.registerCardContainer}}
|
||||
|
||||
@ -8,15 +8,17 @@ export default class WordCards extends Component {
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page -word-cloud">
|
||||
<h2 class="rewind-report-title">Word Usage</h2>
|
||||
<div class="rewind-report-container">
|
||||
{{#each this.topWords as |entry index|}}
|
||||
<WordCard
|
||||
@word={{entry.word}}
|
||||
@count={{entry.score}}
|
||||
@index={{index}}
|
||||
/>
|
||||
{{/each}}
|
||||
<h2 class="rewind-report-title">Word Usage</h2>
|
||||
<div class="cards-container">
|
||||
{{#each this.topWords as |entry index|}}
|
||||
<WordCard
|
||||
@word={{entry.word}}
|
||||
@count={{entry.score}}
|
||||
@index={{index}}
|
||||
/>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -85,8 +85,8 @@ export default class Rewind extends Component {
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="rewind">
|
||||
<Introduction />
|
||||
<div class="background-1 parallax-bg"></div>
|
||||
{{! <canvas class="background-2 parallax-bg"></canvas> }}
|
||||
{{#if this.loadingRewind}}
|
||||
<div class="rewind-loader">
|
||||
<div class="spinner small"></div>
|
||||
@ -98,15 +98,11 @@ export default class Rewind extends Component {
|
||||
@icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
|
||||
@action={{this.toggleFullScreen}}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="rewind__scroll-wrapper"
|
||||
{{didInsert this.registerScrollWrapper}}
|
||||
{{on "scroll" this.handleScroll}}
|
||||
>
|
||||
<div class="rewind-report">
|
||||
<Introduction />
|
||||
</div>
|
||||
|
||||
{{#each this.rewind as |report|}}
|
||||
<div class={{concatClass "rewind-report" report.identifier}}>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
.rewind-report-page.-activity-calendar {
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
}
|
||||
.rewind-calendar {
|
||||
border-collapse: unset;
|
||||
border-spacing: 3px;
|
||||
@ -16,7 +19,7 @@
|
||||
.rewind-calendar-cell {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--rewind-border-radius);
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
||||
&.-empty {
|
||||
background: var(--primary-low);
|
||||
|
||||
@ -7,6 +7,48 @@
|
||||
max-width: 700px;
|
||||
text-align: left;
|
||||
align-items: unset;
|
||||
position: relative;
|
||||
@include rewind-border;
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
}
|
||||
&.rank-2 {
|
||||
--background: #d6d6d6;
|
||||
--border-color: #c4c4c4;
|
||||
}
|
||||
&.rank-3 {
|
||||
--background: #dca570;
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
}
|
||||
.best-posts.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -28px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
border-right: 28px solid var(--border-color);
|
||||
border-top: 28px solid transparent;
|
||||
&:nth-child(2) {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -28px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 28px solid var(--border-color);
|
||||
border-right: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.best-posts__post {
|
||||
font-weight: normal;
|
||||
@ -26,7 +68,7 @@
|
||||
.best-posts__replies {
|
||||
border: 1px solid var(--primary-200);
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--rewind-border-radius);
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
max-width: 700px;
|
||||
@include rewind-border;
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
@ -34,23 +35,34 @@
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-300);
|
||||
}
|
||||
.best-topics__rank {
|
||||
.best-topics.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: -19px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
top: 8px;
|
||||
left: -28px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-300);
|
||||
}
|
||||
.best-topics__rank img.emoji {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
border-right: 28px solid var(--border-color);
|
||||
border-top: 28px solid transparent;
|
||||
&:nth-child(2) {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -28px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 28px solid var(--border-color);
|
||||
border-right: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.best-topics__excerpt {
|
||||
font-size: var(--font-down-2);
|
||||
|
||||
@ -9,13 +9,12 @@ body {
|
||||
|
||||
.rewind-report-container {
|
||||
perspective: 1000px;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -24,6 +23,8 @@ body {
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
&__title {
|
||||
font-family: var(--heading-font) !important;
|
||||
font-weight: 600;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: var(--heading-font);
|
||||
font-family: roboto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@ -19,3 +19,8 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
h2.rewind-report-title {
|
||||
font-size: var(--font-down-2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -1,32 +1,48 @@
|
||||
.-post-received-reactions {
|
||||
.rewind-report-container {
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.rewind-card {
|
||||
width: 177px;
|
||||
height: 190px;
|
||||
background: var(--secondary);
|
||||
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
height: min-content;
|
||||
@include rewind-border;
|
||||
.emoji {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card__emoji {
|
||||
font-size: 12px;
|
||||
}
|
||||
.scale:nth-child(1) {
|
||||
scale: 0.6;
|
||||
padding: 0.25em;
|
||||
.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.scale:nth-child(2) {
|
||||
scale: 0.7;
|
||||
margin-left: -70px;
|
||||
padding: 0.35em;
|
||||
.emoji {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.scale:nth-child(3) {
|
||||
scale: 0.8;
|
||||
margin-left: -50px;
|
||||
padding: 0.5em;
|
||||
.emoji {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.scale:nth-child(4) {
|
||||
scale: 0.9;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.scale:nth-child(5) {
|
||||
scale: 1;
|
||||
margin-left: -10px;
|
||||
padding: 0.75em;
|
||||
.emoji {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
.-post-used-reactions {
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
}
|
||||
.rewind-reactions-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -29,7 +32,7 @@
|
||||
background: var(--tertiary-600);
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
||||
height: 25px;
|
||||
border-radius: 2px;
|
||||
border-radius: calc(var(--rewind-border-radius) * 0.75);
|
||||
}
|
||||
|
||||
.rewind-total-reactions {
|
||||
|
||||
@ -81,16 +81,13 @@
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reading-time .rewind-report-container {
|
||||
max-width: 600px;
|
||||
.reading-time .rewind-card {
|
||||
gap: 1em;
|
||||
padding: 1.5em;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--d-green), 1);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: rgba(var(--d-green-dark), 1);
|
||||
}
|
||||
background-color: var(--secondary);
|
||||
--book-color: rgba(var(--primary-rgb), 0.4);
|
||||
border-radius: 2px;
|
||||
@include rewind-border;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
.rewind-report-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--font-up-2);
|
||||
width: 100%;
|
||||
gap: 1em;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
width: calc(100vw - (100vw - 100%) + 2px);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(var(--secondary-rgb), 0.5);
|
||||
backdrop-filter: blur(4.9px);
|
||||
-webkit-backdrop-filter: blur(4.9px);
|
||||
}
|
||||
@ -33,12 +33,12 @@
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: calc(var(--d-border-radius) / 2);
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
container-type: size;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 960px;
|
||||
// max-width: 960px;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
@ -54,17 +54,6 @@
|
||||
height: 1000%;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
// .background-2 {
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 1000%;
|
||||
// background: url(/plugins/discourse-rewind/images/bg-2.png);
|
||||
// background-size: contain;
|
||||
// transform: translateY(0px);
|
||||
// opacity: 0.85;
|
||||
// }
|
||||
|
||||
.rewind__scroll-wrapper {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@ -76,11 +65,40 @@
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.rewind__introduction {
|
||||
padding: 1em 0 1em 1em;
|
||||
background-color: var(--secondary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
box-shadow: 1px 0px 0px 1px var(--primary);
|
||||
img {
|
||||
height: 50px;
|
||||
margin-bottom: 5px;
|
||||
&.rewind-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&.rewind-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
&.rewind-logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0 0.5em 0 0;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind__exit-fullscreen-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.rewind__prev-btn {
|
||||
|
||||
@ -9,4 +9,15 @@
|
||||
--d-green-dark: 17, 138, 68;
|
||||
--d-orange-dark: 188, 105, 65;
|
||||
--d-red-dark: 183, 64, 70;
|
||||
|
||||
--rewind-border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin rewind-border() {
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,21 @@
|
||||
.rewind-report-page.-word-cloud .rewind-report-container {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cards-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rewind-card__wrapper {
|
||||
width: 150px;
|
||||
height: 175px;
|
||||
perspective: 1000px;
|
||||
will-change: transform;
|
||||
transform-style: preserve-3d;
|
||||
border-radius: 0.25vw;
|
||||
border-radius: var(--rewind-border-radius);
|
||||
cursor: pointer;
|
||||
animation-name: ambientMovement;
|
||||
animation-duration: 4000ms;
|
||||
@ -18,7 +29,7 @@
|
||||
border: none;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--primary-200);
|
||||
box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 0.75);
|
||||
box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
|
||||
}
|
||||
}
|
||||
.rewind-card__inner {
|
||||
@ -27,17 +38,25 @@
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform;
|
||||
transition-duration: 0.5s;
|
||||
transition: transform, box-shadow;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
|
||||
}
|
||||
&.mouseleave {
|
||||
animation: flip-shrink 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s
|
||||
forwards;
|
||||
z-index: 999;
|
||||
}
|
||||
&.flipped .rewind-card__inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
&:hover {
|
||||
animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
|
||||
animation: flip-zoom 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
|
||||
z-index: 999;
|
||||
}
|
||||
&:hover .rewind-card__inner {
|
||||
box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
.rewind-card.-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
@ -104,6 +123,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flip-shrink {
|
||||
0% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ambientMovement {
|
||||
0% {
|
||||
--ambientAmount: 0.1;
|
||||
|
||||
BIN
public/images/Discourse-rewind-logo-dark.png
Normal file
BIN
public/images/Discourse-rewind-logo-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/images/Discourse-rewind-logo.png
Normal file
BIN
public/images/Discourse-rewind-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
x
Reference in New Issue
Block a user