Added new exporting template

components.js

@@ -2371,7 +2371,7 @@ smSelect.innerHTML = `
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: 700;
+    font-weight: 500;
 }
 .selection{
     border-radius: 0.3rem;

css/main.css

@@ -29,7 +29,6 @@ body * {
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
   --yellow: #f3a600;
-  --loan-color: rgb(255, 171, 93);
   scrollbar-width: thin;
 }
 
@@ -43,7 +42,6 @@ body[data-theme=dark] * {
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
   --yellow: #ffd13a;
-  --loan-color: rgb(255, 232, 170);
 }
 body[data-theme=dark] sm-popup::part(popup) {
   background-color: var(--foreground-color);
@@ -163,21 +161,6 @@ ul {
   list-style: none;
 }
 
-.flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.hide {
-  opacity: 0;
-  pointer-events: none;
-}
-
 .hide-completely {
   display: none !important;
 }
@@ -367,6 +350,8 @@ ul {
   width: 1.2rem;
   height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 .button__icon {
@@ -537,7 +522,14 @@ menu-option {
   grid-template-columns: 1fr auto auto;
   grid-column: 1/-1;
   background-color: var(--foreground-color);
+  z-index: 2;
+}
+
+#filter_panel {
   z-index: 1;
+  padding: 0.5rem 1.5rem;
+  grid-column: 1/-1;
+  background-color: var(--foreground-color);
 }
 
 .label {
@@ -938,7 +930,7 @@ menu-option {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding-top: 1.5rem;
+  padding: 1.5rem 0 1rem 0;
   background-color: rgba(var(--background-color), 1);
 }
 #preview_page h3 {
@@ -955,6 +947,10 @@ menu-option {
   font-family: inherit;
 }
 
+#preview__body {
+  padding: 1.5rem 0;
+}
+
 .preview-group:not(:last-of-type) {
   margin-bottom: 1.5rem;
 }
@@ -978,10 +974,6 @@ menu-option {
   width: 1rem;
 }
 
-.article__title {
-  margin-bottom: 2rem;
-}
-
 @media screen and (max-width: 40rem) {
   sm-button {
     --padding: 0.9rem 1.6rem;

css/main.scss

@@ -25,7 +25,6 @@ body {
     --danger-color: rgb(255, 75, 75);
     --green: #1cad59;
     --yellow: #f3a600;
-    --loan-color: rgb(255, 171, 93);
     scrollbar-width: thin;
   }
 
@@ -44,7 +43,6 @@ body[data-theme="dark"] {
     --danger-color: rgb(255, 106, 106);
     --green: #00e676;
     --yellow: #ffd13a;
-    --loan-color: rgb(255, 232, 170);
   }
   sm-popup::part(popup) {
     background-color: var(--foreground-color);
@@ -144,19 +142,6 @@ ul {
   list-style: none;
 }
 
-.flex {
-  display: flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.hide {
-  opacity: 0;
-  pointer-events: none;
-}
-
 .hide-completely {
   display: none !important;
 }
@@ -327,6 +312,7 @@ ul {
   width: 1.2rem;
   height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
 }
 
 .button__icon {
@@ -469,7 +455,14 @@ menu-option {
   grid-template-columns: 1fr auto auto;
   grid-column: 1/-1;
   background-color: var(--foreground-color);
+  z-index: 2;
+}
+
+#filter_panel {
   z-index: 1;
+  padding: 0.5rem 1.5rem;
+  grid-column: 1/-1;
+  background-color: var(--foreground-color);
 }
 
 .label {
@@ -812,7 +805,7 @@ menu-option {
     position: sticky;
     top: 0;
     z-index: 1;
-    padding-top: 1.5rem;
+    padding: 1.5rem 0 1rem 0;
     background-color: rgba(var(--background-color), 1);
   }
   h3 {
@@ -829,6 +822,9 @@ menu-option {
     }
   }
 }
+#preview__body {
+  padding: 1.5rem 0;
+}
 
 .preview-group {
   &:not(:last-of-type) {
@@ -852,10 +848,6 @@ menu-option {
   }
 }
 
-.article__title {
-  margin-bottom: 2rem;
-}
-
 @media screen and (max-width: 40rem) {
   sm-button {
     --padding: 0.9rem 1.6rem;

index.html

@@ -84,6 +84,14 @@
                     </svg>
                 </button>
                 <text-field id="current_article_title"></text-field>
+                <button class="button" onclick="toggleFilterPanel()">
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
+                    </svg>
+                    Filters
+                </button>
                 <sm-menu align-options="right">
                     <menu-option onclick="showPopup('create_article_popup')">
                         <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
@@ -142,6 +150,12 @@
                 </svg>
             </button>
         </header>
+        <section id="filter_panel" class="flex hide-completely">
+            <sm-select id="sort_content_list" label="Sort by:">
+                <sm-option value="time">Most recent</sm-option>
+                <sm-option value="score">Score</sm-option>
+            </sm-select>
+        </section>
         <div id="text_toolbar" class="hide-completely">
             <button id="strong_button" title="Bold (ctrl+b)" class="formatting-button" onclick="formatDoc('bold')">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -809,8 +823,9 @@
                 if (!pagesData.openedPages.includes(pageId)) {
                     pagesData.openedPages.push(pageId)
                 }
-                pagesData.params = params
             }
+            if (params)
+                pagesData.params = params
         }
         // class based lazy loading
         class LazyLoader {
@@ -1128,7 +1143,38 @@
                                 contentArea.innerHTML = ''
                                 currentArticle.sections[sectionID].uniqueEntries.push(entry.origin)
                                 currentArticle.uniqueEntries[entry.origin] = { iterations: [iterationData] }
-                                parentSection.firstElementChild.after(render.contentCard(entry.origin))
+                                // Insert new content card based on set filter
+                                const newCard = render.contentCard(entry.origin)
+                                if (getRef('sort_content_list').value === 'time') {
+                                    parentSection.firstElementChild.after(newCard)
+                                    newCard.animate(slideInRight, {
+                                        duration: 300,
+                                        fill: 'forwards',
+                                        easing: 'ease'
+                                    })
+                                    const width = newCard.getBoundingClientRect().width
+                                    const siblings = Array.from(newCard.parentNode.children)
+                                    const nextSiblings = siblings.slice(siblings.indexOf(newCard) + 1)
+                                    nextSiblings.forEach(elem => {
+                                        elem.animate([
+                                            {
+                                                transform: `translateX(-${width}px)`
+                                            },
+                                            {
+                                                transform: 'translateX(0)'
+                                            },
+                                        ], {
+                                            duration: 200,
+                                            fill: 'forwards',
+                                            easing: 'ease'
+                                        })
+                                            .onfinish = (e) => {
+                                                e.target.cancel()
+                                            }
+                                    })
+                                } else {
+                                    parentSection.append(newCard)
+                                }
                             } else {
                                 currentArticle.uniqueEntries[entry.origin].iterations.push(iterationData)
                             }
@@ -1412,12 +1458,12 @@
                 return link
             },
             contentCard(id, version = 0) {
+                const { data, contributors, score = 0 } = getIterationDetails(id)
                 const clone = getRef('content_card_template').content.cloneNode(true).firstElementChild;
                 clone.dataset.uid = id
                 if (!isSubAdmin) {
                     clone.querySelector('.content__area').setAttribute('contentEditable', true)
                 }
-                const { data, contributors } = getIterationDetails(id)
                 clone.querySelector('.content__area').innerHTML = DOMPurify.sanitize(data)
                 let noOfContributors = 0
                 let firstContributor
@@ -1432,7 +1478,7 @@
                 } else {
                     clone.querySelector('.content__author').textContent = `${noOfContributors} contributors`
                 }
-                // clone.querySelector('.content__score').textContent = score;
+                clone.querySelector('.content__score').textContent = score;
                 return clone
             },
             historyEntry(details, oldText) {
@@ -1482,7 +1528,9 @@
                 }
                 section.querySelector('.heading').setAttribute('value', title)
                 currentArticle.sections[sectionID].uniqueEntries.forEach(entry => {
-                    frag.append(render.contentCard(entry))
+                    const contentCard = render.contentCard(entry)
+                    if (contentCard)
+                        frag.append(contentCard)
                 })
                 section.querySelector('.article-section').append(frag)
                 return section
@@ -1512,7 +1560,7 @@
             currentArticle['uniqueEntries'] = {}
             for (const key in generalData) {
                 const { message: { section, data, origin, hash }, senderID } = generalData[key]
-                if (!currentArticle.uniqueEntries.hasOwnProperty(origin)) { // check if  gen data has origin that's already defined
+                if (!currentArticle.uniqueEntries.hasOwnProperty(origin)) { // check if general data has origin that's already defined
                     currentArticle.uniqueEntries[origin] = {
                         iterations: []
                     }
@@ -1522,7 +1570,8 @@
                     timestamp: generalData[key].time,
                     data,
                     editor: senderID,
-                    hash
+                    hash,
+                    score: floCrypto.randInt(0, 100) // to do: get score from mark feature
                 })
             }
             for (const sectionID in currentArticle.sections) {
@@ -1532,6 +1581,71 @@
                 currentArticle.uniqueEntries[entry]['iterations'].sort((a, b) => a.timestamp - b.timestamp)
             }
         }
+
+        function toggleFilterPanel() {
+            const animInOptions = {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+            const animOutOptions = {
+                duration: 100,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+
+            if (getRef('filter_panel').classList.contains('hide-completely')) {
+                getRef('filter_panel').classList.remove('hide-completely')
+                getRef('filter_panel').animate(slideInDown, animInOptions)
+                getRef('article_wrapper').animate([
+                    {
+                        transform: 'translateY(-3rem)'
+                    }, {
+                        transform: 'translateY(0)'
+                    }
+                ], animInOptions)
+            } else {
+                getRef('filter_panel').animate(slideOutUp, animOutOptions)
+                    .onfinish = () => {
+                        getRef('filter_panel').classList.add('hide-completely')
+                    }
+                getRef('article_wrapper').animate([
+                    {
+                        transform: 'translateY(0)'
+                    }, {
+                        transform: 'translateY(-3rem)'
+                    }
+                ], animOutOptions).onfinish = e => e.target.cancel()
+            }
+        }
+
+        function sortSectionEntries() {
+            const sortByScore = getRef('sort_content_list').value === 'score'
+            const originalObj = {}
+            for (const sectionID in currentArticle.sections) {
+                originalObj[sectionID] = [...currentArticle.sections[sectionID].uniqueEntries]
+                currentArticle.sections[sectionID].uniqueEntries.sort((a, b) => {
+                    const arrayA = currentArticle.uniqueEntries[a].iterations
+                    const arrayB = currentArticle.uniqueEntries[b].iterations
+                    return arrayB[arrayB.length - 1][sortByScore ? 'score' : 'timestamp'] - arrayA[arrayA.length - 1][sortByScore ? 'score' : 'timestamp']
+                })
+            }
+            for (const sectionID in currentArticle.sections) {
+                if (currentArticle.sections[sectionID].uniqueEntries.some((v, index) => v !== originalObj[sectionID][index])) {
+                    const allContentCards = {}
+                    const section = getRef('article_wrapper').querySelector(`.article-section[data-section-id="${sectionID}"]`)
+                    section.querySelectorAll('.content-card').forEach(card => {
+                        allContentCards[card.dataset.uid] = card.cloneNode(true)
+                    })
+                    const emptyCard = section.firstElementChild.cloneNode(true)
+                    section.innerHTML = ''
+                    const frag = document.createDocumentFragment()
+                    currentArticle.sections[sectionID].uniqueEntries.forEach((entry, index) => frag.append(allContentCards[entry]))
+                    section.append(emptyCard, frag)
+                }
+            }
+        }
+        getRef('sort_content_list').addEventListener('change', sortSectionEntries)
         function renderSectionList() {
             if (!isSubAdmin) return
             const frag = document.createDocumentFragment()
@@ -1660,7 +1774,8 @@
             return {
                 data: merged,
                 contributors,
-                hash: currentArticle.uniqueEntries[uid].iterations[limit].hash
+                hash: currentArticle.uniqueEntries[uid].iterations[limit].hash,
+                score: currentArticle.uniqueEntries[uid].iterations[limit].score
             }
         }
         const versionHistory = {

template/css/main.css

@@ -0,0 +1,443 @@
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: rgba(var(--text-color), 1);
+  background: var(--foreground-color);
+}
+
+body,
+body * {
+  --accent-color: rgb(0, 156, 78);
+  --text-color: 36, 36, 36;
+  --background-color: 248, 248, 248;
+  --foreground-color: rgb(255, 255, 255);
+  --danger-color: rgb(255, 75, 75);
+  --like-color: #e91e63;
+  scrollbar-width: thin;
+}
+
+body[data-theme=dark],
+body[data-theme=dark] * {
+  --accent-color: rgb(14, 230, 122);
+  --text-color: 230, 230, 230;
+  --text-color-light: 170, 170, 170;
+  --background-color: 10, 10, 10;
+  --foreground-color: rgb(24, 24, 24);
+  --danger-color: rgb(255, 106, 106);
+}
+
+body[data-theme=dark] sm-popup::part(popup) {
+  background-color: var(--foreground-color);
+}
+
+p {
+  font-size: 0.9rem;
+  max-width: 70ch;
+  color: rgba(var(--text-color), 0.8);
+}
+
+p * {
+  font-family: inherit;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.direction-column {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.grid {
+  display: grid;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.8);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+
+button,
+.button {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  cursor: pointer;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.button {
+  white-space: nowrap;
+  padding: 0.6rem 1rem;
+  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  color: rgba(var(--text-color), 0.8);
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.button--primary {
+  background-color: var(--accent-color);
+  color: rgba(var(--background-color), 1);
+}
+
+button:active,
+.button:active,
+sm-button:not([disabled]):active,
+.interact:active {
+  -webkit-transform: scale(0.9);
+          transform: scale(0.9);
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem 0 0.5rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-columns: auto 1fr auto;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+}
+
+#sign_in,
+#sign_up {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+#sign_in sm-form,
+#sign_up sm-form {
+  margin: 2rem 0;
+  --gap: 1rem;
+}
+#sign_in header,
+#sign_up header {
+  padding: 1.5rem 0;
+}
+
+#sign_up sm-copy {
+  font-size: 0.9rem;
+}
+#sign_up h5 {
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.card {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--text-color), 0.04);
+}
+
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+
+#main_header {
+  display: grid;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  padding: 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-columns: 1fr auto auto;
+  background-color: var(--foreground-color);
+  z-index: 1;
+}
+
+.logo {
+  display: grid;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+}
+
+.logo h4 {
+  text-transform: capitalize;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.main-logo {
+  height: 1.4rem;
+  width: 1.4rem;
+  fill: rgba(var(--text-color), 1);
+  stroke: none;
+}
+
+article {
+  position: relative;
+  padding-bottom: 3rem;
+  gap: 1rem;
+}
+article::after {
+  justify-self: center;
+  position: absolute;
+  bottom: 0;
+  content: "";
+  width: 4rem;
+  height: 0.3rem;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--text-color), 0.5);
+}
+article p {
+  font-family: "noto serif", serif;
+  line-height: 1.8;
+  font-size: 1rem;
+}
+
+.page-layout {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
+}
+
+.page-layout > * {
+  grid-column: 2/3;
+}
+
+.hero-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  margin-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
+
+img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 40vh;
+}
+
+time {
+  font-size: 0.8rem;
+}
+
+h1 {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+
+h3:not(:first-of-type) {
+  margin-top: 2rem;
+}
+
+.full-bleed {
+  grid-column: 1/-1;
+}
+
+.quote-template {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.2rem;
+  border: solid thin rgba(var(--text-color), 0.3);
+  -webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.3);
+          box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.3);
+  overflow: hidden;
+  justify-self: center;
+  padding-left: 1.3rem;
+}
+
+.quote-template figcaption {
+  margin-top: 0.5rem;
+  color: rgba(var(--text-color), 0.8);
+  font-size: 0.8rem;
+  margin-left: auto;
+}
+
+.upvote {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  position: relative;
+  padding: 0.8rem;
+  border-radius: 2rem;
+  background-color: var(--foreground-color);
+  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  border: solid rgba(var(--text-color), 0.2) thin;
+}
+.upvote > * {
+  pointer-events: none;
+}
+.upvote:active {
+  -webkit-transform: none;
+          transform: none;
+}
+.upvote:active .icon {
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+}
+.upvote.liked {
+  background-color: var(--like-color);
+  color: white;
+}
+.upvote.liked .icon {
+  fill: white;
+}
+
+.expanding-heart,
+.ring {
+  grid-area: 1/1;
+}
+
+.ring {
+  border: 0.1rem solid var(--like-color);
+  border-radius: 50%;
+  height: 0.5rem;
+  width: 0.5rem;
+  justify-self: center;
+}
+
+.upvote .icon {
+  grid-area: 1/1;
+  fill: var(--like-color);
+  height: 1.5rem;
+  width: 1.5rem;
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+  transition: transform 0.2s, -webkit-transform 0.2s;
+}
+
+.temp-count,
+#like_count {
+  grid-area: 1/2;
+}
+.temp-count:not(:empty),
+#like_count:not(:empty) {
+  margin-left: 0.4rem;
+}
+
+footer {
+  padding: 3rem 1.5rem;
+  justify-items: center;
+}
+
+@media screen and (min-width: 40rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+
+  .popup__header {
+    padding: 1rem 1.5rem 0 1rem;
+  }
+
+  .page-layout {
+    grid-template-columns: 1fr 60ch 1fr;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+}
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+}
+.hide-completely {
+  display: none;
+}

template/css/main.scss

@@ -0,0 +1,396 @@
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: rgba(var(--text-color), 1);
+  background: var(--foreground-color);
+}
+
+body,
+body * {
+  --accent-color: rgb(0, 156, 78);
+  --text-color: 36, 36, 36;
+  --background-color: 248, 248, 248;
+  --foreground-color: rgb(255, 255, 255);
+  --danger-color: rgb(255, 75, 75);
+  --like-color: #e91e63;
+  scrollbar-width: thin;
+}
+
+body[data-theme="dark"],
+body[data-theme="dark"] * {
+  --accent-color: rgb(14, 230, 122);
+  --text-color: 230, 230, 230;
+  --text-color-light: 170, 170, 170;
+  --background-color: 10, 10, 10;
+  --foreground-color: rgb(24, 24, 24);
+  --danger-color: rgb(255, 106, 106);
+}
+
+body[data-theme="dark"] sm-popup::part(popup) {
+  background-color: var(--foreground-color);
+}
+
+p {
+  font-size: 0.9rem;
+  max-width: 70ch;
+  color: rgba(var(--text-color), 0.8);
+}
+
+p * {
+  font-family: inherit;
+}
+
+.flex {
+  display: flex;
+}
+.direction-column {
+  flex-direction: column;
+}
+
+.grid {
+  display: grid;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
+}
+
+button,
+.button {
+  user-select: none;
+  position: relative;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  cursor: pointer;
+  transition: transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.button {
+  white-space: nowrap;
+  padding: 0.6rem 1rem;
+  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  color: rgba(var(--text-color), 0.8);
+  justify-content: center;
+  &--primary {
+    background-color: var(--accent-color);
+    color: rgba(var(--background-color), 1);
+  }
+}
+
+button:active,
+.button:active,
+sm-button:not([disabled]):active,
+.interact:active {
+  transform: scale(0.9);
+}
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem 0 0.5rem;
+  align-items: center;
+  grid-template-columns: auto 1fr auto;
+}
+.popup__header__close {
+  padding: 0.5rem;
+}
+
+#sign_in,
+#sign_up {
+  align-items: center;
+  sm-form {
+    margin: 2rem 0;
+    --gap: 1rem;
+  }
+  header {
+    padding: 1.5rem 0;
+  }
+}
+#sign_up {
+  sm-copy {
+    font-size: 0.9rem;
+  }
+  h5 {
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+  }
+}
+.card {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--text-color), 0.04);
+}
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+
+#main_header {
+  display: grid;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  padding: 1rem;
+  align-items: center;
+  grid-template-columns: 1fr auto auto;
+  background-color: var(--foreground-color);
+  z-index: 1;
+}
+
+.logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+}
+
+.logo h4 {
+  text-transform: capitalize;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.main-logo {
+  height: 1.4rem;
+  width: 1.4rem;
+  fill: rgba(var(--text-color), 1);
+  stroke: none;
+}
+
+article {
+  position: relative;
+  padding-bottom: 3rem;
+  gap: 1rem;
+  &::after {
+    justify-self: center;
+    position: absolute;
+    bottom: 0;
+    content: "";
+    width: 4rem;
+    height: 0.3rem;
+    border-radius: 0.5rem;
+    background-color: rgba(var(--text-color), 0.5);
+  }
+  p {
+    font-family: "noto serif", serif;
+    line-height: 1.8;
+    font-size: 1rem;
+  }
+}
+
+.page-layout {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
+}
+
+.page-layout > * {
+  grid-column: 2/3;
+}
+
+.hero-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  margin-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
+
+img {
+  object-fit: cover;
+  width: 100%;
+  height: 40vh;
+}
+
+time {
+  font-size: 0.8rem;
+}
+
+h1 {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+
+h3:not(:first-of-type) {
+  margin-top: 2rem;
+}
+
+.full-bleed {
+  grid-column: 1/-1;
+}
+
+.quote-template {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.2rem;
+  border: solid thin rgba(var(--text-color), 0.3);
+  box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.3);
+  overflow: hidden;
+  justify-self: center;
+  padding-left: 1.3rem;
+}
+
+.quote-template figcaption {
+  margin-top: 0.5rem;
+  color: rgba(var(--text-color), 0.8);
+  font-size: 0.8rem;
+  margin-left: auto;
+}
+
+.upvote {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  position: relative;
+  padding: 0.8rem;
+  border-radius: 2rem;
+  background-color: var(--foreground-color);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  border: solid rgba(var(--text-color), 0.2) thin;
+  & > * {
+    pointer-events: none;
+  }
+  &:active {
+    transform: none;
+    .icon {
+      transform: scale(0.5);
+    }
+  }
+  &.liked {
+    background-color: var(--like-color);
+    color: white;
+    .icon {
+      fill: white;
+    }
+  }
+}
+.expanding-heart,
+.ring {
+  grid-area: 1/1;
+}
+.ring {
+  border: 0.1rem solid var(--like-color);
+  border-radius: 50%;
+  height: 0.5rem;
+  width: 0.5rem;
+  justify-self: center;
+}
+.upvote .icon {
+  grid-area: 1/1;
+  fill: var(--like-color);
+  height: 1.5rem;
+  width: 1.5rem;
+  transition: transform 0.2s;
+}
+.temp-count,
+#like_count {
+  grid-area: 1/2;
+  &:not(:empty) {
+    margin-left: 0.4rem;
+  }
+}
+
+footer {
+  padding: 3rem 1.5rem;
+  justify-items: center;
+}
+
+@media screen and (min-width: 40rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+  .popup__header {
+    padding: 1rem 1.5rem 0 1rem;
+  }
+  .page-layout {
+    grid-template-columns: 1fr 60ch 1fr;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+}
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+
+    &:hover {
+      background: rgba(var(--text-color), 0.5);
+    }
+  }
+}
+
+// highest priority styles
+.hide-completely {
+  display: none;
+}