Merge pull request #2173 from Sefaria/feature/sc-27826/styling

Feature/sc 27826/styling
Sefaria · Jan 7, 2025 · 6d4b655 · 6d4b655
2 parents 4a1ecf5 + 054d1a2
commit 6d4b655
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 56 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -8492,7 +8492,7 @@ a.sheetAuthorName {
   --english-font: var(--english-sans-serif-font-family);
   --hebrew-font: var(--hebrew-sans-serif-font-family);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 18.75px;
   display: inline;
   margin-block-end: 10px;
@@ -8510,7 +8510,8 @@ a.sheetAuthorName:hover {
   font-weight: 500;
   line-height: 18.75px;
   color: var(--dark-grey);
-  margin-block-end: 15px;
+  margin-block-end: 25px;
+  text-align: initial;
 }
 .sheetMetaDataBox .title {
   --english-font: var(--english-sans-serif-font-family);
@@ -8520,6 +8521,7 @@ a.sheetAuthorName:hover {
   line-height: 35.16px;
   margin-block-end: 15px;
   flex: 1 0 95%;
+  text-align: initial;
 }
 .interface-hebrew .sheetMetaDataBox .title:empty:before {
   content: "ללא שם";
@@ -10016,6 +10018,19 @@ span.purim-emoji img{
   box-sizing: border-box;
   position: relative;
 }
+.sheetContent .collectionsWidgetDone .button, .sheetContentSidebar .largeFollowButton {
+  background-color: var(--midrash-green);
+}
+.sheetContentSidebar .largeFollowButton {
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  min-height: 31px;
+  height: 31px;
+}
+
 .sheetContent {
   width: 100%;
   box-sizing: border-box;
@@ -10027,7 +10042,6 @@ span.purim-emoji img{
   max-width: 760px;
   position: relative;
   padding: 0 30px;
-  counter-reset: css-counter 0;
 }
 .sheetContent .ref {
   cursor: pointer;
@@ -10261,7 +10275,7 @@ span.purim-emoji img{
   padding-block-start: 10px;
   padding-block-end: 10px;
 }
-.SheetComment .addToSheetButton, .SheetOutsideText .addToSheetButton {
+.SheetMedia .addToSheetButton, .SheetComment .addToSheetButton, .SheetOutsideText .addToSheetButton {
   margin-block-start: -10px;
   margin-block-end: 30px;
 }
@@ -10852,45 +10866,13 @@ section.SheetOutsideBiText .en {
 section.SheetSource,
 section.SheetOutsideBiText {
   border-inline-start: 4px solid;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
+  border-inline-end: 1px solid #DDDDDD;
+  border-block-start: 1px solid #DDDDDD;
+  border-block-end: 1px solid #DDDDDD;
+  border-radius: 4px;
   margin-bottom: 30px;
 }
 
-.SheetOutsideBiText, .SheetSource {
-    counter-increment: css-counter 1;
-}
-
-.SheetOutsideBiText:before,
-.SheetSource:before {
-  position: absolute;
-  color:  var(--medium-grey);
-  font-size: 12px;
-}
-
-.english .SheetOutsideBiText:before,
-.english .SheetSource:before {
-  content: counter(css-counter);
-  left: -34px;
-  font-family: var(--english-sans-serif-font-family);
-}
-
-.bilingual .SheetOutsideBiText:before,
-.bilingual .SheetSource:before {
-  content: counter(css-counter);
-  right: -34px;
-  font-family: var(--english-sans-serif-font-family);
-
-}
-
-
-.hebrew .SheetOutsideBiText:before,
-.hebrew .SheetSource:before {
-  content: counter(css-counter, hebrew);
-  right: -34px;
-  font-family: var(--hebrew-sans-serif-font-family);
-}
-
-
 .readerPanel.hebrew section.SheetSource .sheetItem > .he,
 .readerPanel.english section.SheetSource .sheetItem > .en,
 .readerPanel.hebrew section.SheetOutsideBiText .sheetItem > .he,
@@ -10909,6 +10891,10 @@ section.SheetOutsideBiText {
 .interface-english section.SheetOutsideBiText .sheetItem > .en {
   padding: 15px 20px 15px 16px;
 }
+.interface-english section.SheetSource .sheetItem > .en {
+  border-block-start: 1px solid #DDDDDD;
+  border-block-end: 1px solid #DDDDDD;
+}
 .interface-hebrew section.SheetSource .sheetItem > .he,
 .interface-hebrew section.SheetSource .sheetItem > .en,
 .interface-hebrew section.SheetOutsideBiText .sheetItem > .he,
@@ -10923,6 +10909,9 @@ section.SheetSource .SheetOutsideBiText {
 .sheetContent section.SheetOutsideBiText .sheetItem.segment .sourceContentText {
   margin: 0;
 }
+.sheetContent section.SheetSource .sheetItem.segment {
+  margin-block-end: 0;
+}
 .sheetItem .SheetSource,
 .sheetItem .SheetOutsideBiText {
   border-inline-start: 4px solid;
@@ -13840,7 +13829,7 @@ span.ref-link-color-3 {color: blue}
   --english-font: var(--english-sans-serif-font-family);
   --hebrew-font: var(--hebrew-sans-serif-font-family);
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 18px;
   color: #666666;
   margin-inline-start: 10px;
@@ -13886,6 +13875,7 @@ span.ref-link-color-3 {color: blue}
   content: "";
   transform: scale(0.75);
 } */
+
 .sheetsInPanel .dropdownLinks a.dropdownLinks-button::after {
   display: inline-block;
   height: 10px;

diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -26,7 +26,6 @@ import { ReaderApp } from './ReaderApp';
 import {ToolsButton} from "./ConnectionsPanel";
 import {DropdownMenuItemWithIcon} from "./common/DropdownMenu";
 
-
 /**
  * Component meant to simply denote a language specific string to go inside an InterfaceText element
  * ```
@@ -2892,23 +2891,13 @@ const TitleVariants = function({titles, update, options}) {
                   />
          </div>
 }
-const SheetMetaDataBox = ({title, summary, authorUrl, authorStatement, authorImage, sheetOptions, editable}) => {
+const SheetMetaDataBox = ({title, summary, sheetOptions, editable}) => {
   return <div className="sheetMetaDataBox">
     <div className="sidebarLayout">
       <SheetMetaDataBoxSegment text={title} className="title" editable={editable}/>
       {sheetOptions}
     </div>
     {summary && <SheetMetaDataBoxSegment text={summary} className="summary" editable={editable}/>}
-    <div className="user">
-      <ProfilePic
-          url={authorImage}
-          len={30}
-          name={authorStatement}
-      />
-      <a href={authorUrl} className="sheetAuthorName">
-        <InterfaceText>{authorStatement}</InterfaceText>
-      </a>
-    </div>
   </div>
 }
 

diff --git a/static/js/sheets/SheetContentSegments.jsx b/static/js/sheets/SheetContentSegments.jsx
@@ -21,7 +21,7 @@ class SheetSource extends Component {
     );
 
     return (
-      <section className={sectionClasses} style={{"borderColor": Sefaria.palette.refColor(this.props.source.ref)}}>
+      <section className={sectionClasses} style={{"borderInlineStart": `4px solid ${Sefaria.palette.refColor(this.props.source.ref)}`}}>
         <div className={containerClasses}
           onClick={this.props.sheetSourceClick}
           data-node={this.props.source.node}

diff --git a/templates/base.html b/templates/base.html
@@ -71,7 +71,7 @@
     <script>
         WebFont.load({
           google: {
-            families: ['Crimson Text:400,700'],
+            families: ['Crimson Text:100,200,300,400,500,600,700,800,900'],
             text: 'ăǎġḥḤḫḳḲŏŠšṭżūẓŻāīēḗęîїìi̧ ̆̄'
           },
           typekit: {
@@ -80,7 +80,7 @@
         });
         WebFont.load({
           google: {
-            families: ['Roboto:300,400,700', 'Heebo:300,400,700:hebrew'] // The dotted h causes Heebo not to load.
+            families: ['Roboto:100,200,300,400,500,600,700,800,900', 'Heebo:100,200,300,400,500,600,700,800,900:hebrew'] // The dotted h causes Heebo not to load.
           }
         });
         WebFont.load({