Glossary css

StampyAI · Feb 19, 2024 · f0068fe · f0068fe
1 parent caf7c52
commit f0068fe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
@@ -129,10 +129,10 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
       addPopup(
         e as HTMLSpanElement,
         `glossary-${entry.term}`,
-        `<div class="glossary-popup flex-container black">
-              <div class="contents">
+        `<div class="glossary-popup flex-container black col-6 small">
+              <div class="contents col-8">
                    <h3>${entry.term}</h3>
-                   <div class="padding-bottom-24">${entry.contents}</div>
+                   <div class="defintion">${entry.contents}</div>
                    ${link || ''}
               </div>
               ${image || ''}

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -73,24 +73,32 @@ article .link-popup {
   position: absolute;
   display: inline-block;
   font: var(--baseFont);
+  font-style: normal;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
   margin-left: 10px;
-  max-width: 35%;
   z-index: 2;
+  transform: translate(-20vw, 40px);
   transition:
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
 }
 
-article .link-popup::after {
-  content: '';
-  position: absolute;
-  top: 5px;
-  right: 100%;
+article .contents a.button {
+  font-weight: normal;
 }
-
 article .link-popup .glossary-popup > .contents {
+  height: 21.46vw;
   padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
 }
+article .defintion {
+  display: -webkit-box;
+  /* These are webkit specific things, so might not work in all browsers (firefox handles them fine) */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5; /* Number of lines you want to display */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 article .link-popup .glossary-popup > img {
   width: 100%;
   border-top-right-radius: 6px;

diff --git a/app/components/Button/button.css b/app/components/Button/button.css
@@ -31,7 +31,7 @@
 }
 
 .secondary {
-  color: var(--colors-cool-grey-600, #788492);
+  color: var(--colors-cool-grey-600, #788492) !important;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
 }