Standardize font sizes on works page (#8931)

Co-authored-by: Drini Cami <[email protected]>

openlibrary/templates/type/edition/view.html

@@ -237,7 +237,7 @@
         $else:
           $ overview_desc = work.description
         <div class="book-description read-more">
-            <div class="read-more__content" style="max-height:58px">
+            <div class="read-more__content" style="max-height:81px">
                 $:sanitize(format(overview_desc))
             </div>
             $:macros.ReadMore()
@@ -464,7 +464,7 @@ <h4>$_("First Sentence")</h4>
             $if work.description and work.description != overview_desc:
               <h4>$_("Work Description")</h4>
               <div class="work-description read-more">
-                <div class="read-more__content" style="max-height:58px">
+                <div class="read-more__content" style="max-height:81px">
                   $:sanitize(format(work.description))
                 </div>
                 $:macros.ReadMore()

static/css/base/headings.less

@@ -22,7 +22,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.375em;
+  font-size: @font-size-title-large;
   &.author {
     color: @brown;
     font-size: 1.125em;
@@ -68,7 +68,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.0em;
+  font-size: @font-size-label-medium;
   &.Question {
     font-family: @georgia_serif-1;
     font-size: 1.2em;

static/css/components/carousel.less

@@ -8,7 +8,7 @@
 
 // Badly named. Should be renamed "carousel-heading" or similar.
 .home-h2 {
-  font-size: 1.2em;
+  font-size: @font-size-title-medium;
   font-weight: normal;
   color: @link-blue;
   margin-bottom: .5em;

static/css/components/edit-toolbar.less

@@ -19,7 +19,7 @@ div#editInfo {
   white-space: normal;
   text-align: right;
   > div {
-    font-size: 11px;
+    font-size: @font-size-label-small;
     font-weight: normal;
     color: @brown !important;
     font-family: @lucida_sans_serif-1;

static/css/components/editions.less

@@ -28,7 +28,7 @@ table#editions,
 
   th {
     font-family: @news_gothic_sans_serif-2;
-    font-size: 11px;
+    font-size: @font-size-label-small;
     font-weight: 600;
     text-transform: uppercase;
     line-height: normal;
@@ -56,14 +56,14 @@ table#editions,
   }
 
   div.title {
-    font-size: 1.0em;
+    font-size: @font-size-title-small;
     padding: 10px 0;
     min-width: 1%;
     overflow-wrap: break-word;
   }
 
   div.links {
-    font-size: 12px;
+    font-size: @font-size-label-medium;
     color: @dark-grey;
     line-height: 1.5em;
   }

static/css/components/link-box.less

@@ -15,7 +15,7 @@
     display: inline;
   }
   > div {
-    font-size: .75em;
+    font-size: @font-size-headline-small;
   }
 }
 

static/css/components/readerStats.less

@@ -5,7 +5,7 @@
 
 .readers-stats {
   color: @grey;
-  font-size: .9em;
+  font-size: @font-size-label-large;
   margin-bottom: 20px;
   li {
     list-style-type: none;
@@ -16,7 +16,6 @@
       content: "·";
       margin: 0 4px;
     }
-
   }
   .dot {
     list-style-type: none;

static/css/components/work-title-and-author.less

@@ -15,7 +15,7 @@
       font-family: @georgia_serif-1;
       margin: 10px 0 0;
       color: @dark-grey;
-      font-size: 2em;
+      font-size: @font-size-headline-large;
       overflow-wrap: break-word;
     }
   }
@@ -29,7 +29,7 @@
       font-style: italic;
     }
     &.edition-byline {
-      font-size: 1em;
+      font-size: @font-size-title-medium;
       font-weight: normal;
       color: @dark-grey;
       margin: 10px 0 20px;
@@ -46,7 +46,7 @@
 
   .first-published-date {
     color: @grey;
-    font-size: .8em;
+    font-size: @font-size-label-medium;
   }
 }
 
@@ -127,7 +127,6 @@
       li.avg-ratings,
       li.readers-stats__review-count {
         font-size: .85em;
-
       }
 
       // On mobile only, the rating count text has parentheses around it

static/css/components/work.less

@@ -40,7 +40,7 @@ div.editionAbout {
 
   p {
     margin: 1em 0;
-    font-size: 13px;
+    font-size: @font-size-body-medium;
   }
   p.book-description {
     margin: 0;
@@ -91,7 +91,7 @@ textarea[name="edition--notes"] + h3 + .wmd-preview,
 .edition-notes,
 textarea[name="work--description"] + h3 + .wmd-preview,
 .book-description {
-  font-size: .8rem;
+  font-size: @font-size-label-medium;
   margin-top: 5px;
   margin-bottom: 20px;
 
@@ -131,11 +131,11 @@ textarea[name="work--description"] + h3 + .wmd-preview,
 }
 
 .section, .section h6 {
-  font-size: .8em;
+  font-size: @font-size-label-medium;
 }
 
 h3.edition-header {
-  font-size: 14px;
+  font-size: @font-size-label-large;
   margin: 0;
 }
 
@@ -174,7 +174,7 @@ a.section-anchor {
 }
 
 .meta dt, .meta dd {
-  font-size: 12px;
+  font-size: @font-size-label-medium;
 }
 
 .book-subtitle{
@@ -255,14 +255,14 @@ div.editionTools {
     margin: 0 4px;
     border: 1px solid @lighter-grey;
     border-radius: 5px;
-    font-size: .8em;
+    font-size: @font-size-body-medium;
     word-break: break-word;
     text-align: center;
     min-width: 100px;
 
     div {
       margin-bottom: 4px;
-      font-size: .9em;
+      font-size: @font-size-label-medium;
       color: @grey;
       word-wrap: break-word;
     }

static/css/less/font-families.less

@@ -20,3 +20,22 @@
 @verdana: verdana, sans-serif;
 @ichonochive: "Iconochive-Regular", sans-serif;
 @bahnschrift: Bahnschrift, sans-serif;
+
+@font-size-display-large: 57px;
+@font-size-display-medium: 45px;
+@font-size-display-small: 36px;
+
+@font-size-headline-large: 32px;
+@font-size-headline-medium: 28px;
+@font-size-headline-small: 24px;
+
+@font-size-title-large: 22px;
+@font-size-title-medium: 16px;
+@font-size-title-small: 14px;
+
+@font-size-label-large: 14px;
+@font-size-label-medium: 12px;
+@font-size-label-small: 11px;
+
+@font-size-body-large: 16px;
+@font-size-body-medium: 14px;