diff --git a/cypress/e2e/notebooks.cy.ts b/cypress/e2e/notebooks.cy.ts index 483723f6a4d35..853f0aba6819c 100644 --- a/cypress/e2e/notebooks.cy.ts +++ b/cypress/e2e/notebooks.cy.ts @@ -41,7 +41,7 @@ describe('Notebooks', () => { cy.get('.ph-recording.NotebookNode').should('exist') }) - it.skip('Insertion suggestions can be dismissed', () => { + it('Insertion suggestions can be dismissed', () => { cy.visit(urls.notebook('h11RoiwV')) cy.get('.SessionRecordingPlayer').click() cy.get('.ProseMirror').type('{enter}') diff --git a/posthog/year_in_posthog/2023.html b/posthog/year_in_posthog/2023.html index 336152e20ccd3..e44db048dfd64 100644 --- a/posthog/year_in_posthog/2023.html +++ b/posthog/year_in_posthog/2023.html @@ -95,7 +95,7 @@ display: flex; flex-direction: column; font-weight: 400; - font-size: 5vw; + font-size: 32px; line-height: 1.25; align-items: center; } @@ -113,6 +113,7 @@ background-repeat: no-repeat; background-position: 50% 0; background-size: cover; + pointer-events: none; } h1 { @@ -142,7 +143,7 @@ @media only screen and (min-width: 650px) { body { - font-size: 2.5vw; + font-size: 1.5rem; } } @@ -204,8 +205,8 @@ color: {{ highlight_color }}; } - {% for b in badges %} - .highlight.{{ b }} { + {% for _, b in badges.items %} + .highlight.{{ b.badge }} { color: {{ b.highlight_color }}; } {% endfor %} @@ -214,6 +215,12 @@ color: #969696; } + .text-sm { + font-weight: 300; + font-size: 1rem; + line-height: 1rem; + } + .text-xl { font-weight: 600; font-size: 1.5rem; @@ -228,10 +235,15 @@ .text-3xl { font-weight: 600; - font-size: 3rem; + font-size: 2rem; line-height: 1; } + .my-4 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + .my-8 { margin-top: 1rem; margin-bottom: 1rem; @@ -258,24 +270,14 @@ padding-bottom: 1rem; } - .pt-4 { - padding-top: 1rem; + .pt-2 { + padding-top: 0.5rem; } .pl-8 { padding-left: 2rem; } - .badge { - width: 326px; - height: 326px; - } - - .badge.mini { - width: 163px; - height: 163px; - } - .stats { display: flex; flex-direction: row; @@ -287,7 +289,6 @@ display: flex; flex-direction: column; flex-basis: 100%; - font-size: 1.5rem; } @@ -300,30 +301,30 @@ .achievements { display: grid; - grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(18%, 1fr)); gap: 10px; /* Adjust the gap between grid items as needed */ width: 100%; } - @media screen and (max-width: 930px) { - .achievements { - grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Change to 3 column with smaller images */ - } + .badge { + width: 326px; + height: 326px; + } - .badge.mini { - width: 100px; - height: 100px; - } + .badge.mini { + width: 100px; + height: 100px; } - @media screen and (max-width: 600px) { + @media screen and (max-width: 980px) { .achievements { - grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* Change to 2 columns */ + grid-template-columns: repeat(auto-fill, minmax(23%, 1fr)); } + } - .badge.mini { - width: 160px; - height: 160px; + @media screen and (max-width: 790px) { + .achievements { + grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } } @@ -346,7 +347,6 @@ display: flex; flex-direction: column; align-items: center; - font-size: 1.5rem; } .sharing { @@ -404,6 +404,44 @@ } } + [data-tooltip] { + cursor: help; + } + + [role="tooltip"] { + opacity: 0; + position: absolute; + width: auto; + max-width: 20%; + height: auto; + min-height: 25px; + line-height: 25px; + font-size: 1rem; + background-color: rgba(0, 0, 0, 0.7); + color: #ffffff; + border-radius: 5px; + margin-top: 10px; + padding: 10px 15px; + transform: translateX(-50%); + } + + [role="tooltip"].active { + opacity: 1; + transition: opacity 0.1s; + } + + [role="tooltip"]::before { + content: ""; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid rgba(0, 0, 0, 0.7); + position: absolute; + margin-top: -20px; + transform: translateX(-50%); + left: 50%; + } @@ -442,8 +480,8 @@