update cards and font-sizes

DigitalPasts · Oct 7, 2023 · 5a92211 · 5a92211
1 parent a41637a
commit 5a92211
Show file tree

Hide file tree

Showing 25 changed files with 156 additions and 128 deletions.
diff --git a/_site/assets/CSS/search-and-tags.css b/_site/assets/CSS/search-and-tags.css
@@ -38,28 +38,28 @@ span.doi {
 }
 .author-card .authors-container {
     padding: 5px 0px;
-    font-size: 1.7vw;
+    font-size: 20px;
 }
 .author-card .affiliations {
     padding: 5px 0px;
 }
 .author-card .affiliations p {
     padding: 0px;
-    font-size: 1.3vw;
+    font-size: 16px;
 }
 .author-card .dates {
     padding: 5px 0px;
 }
 .author-card .dates p {
     padding: 0;
-    font-size: 1.3vw;
+    font-size: 16px;
 }
 .author-card .peer-review {
     padding: 5px 0px;
 }
 .author-card .card-summary {
     padding: 5px 0px;
-    font-size: 1.3vw;
+    font-size: 16px;
 }
 .author-card .card-summary p {
     padding: 0px;
@@ -68,7 +68,7 @@ span.doi {
     padding-bottom: 0px;
 }
 .author-card .deprecated p {
-    font-size: 1.7vw;
+    font-size: 20px;
 }
 
 .cards h3 {
@@ -90,14 +90,14 @@ span.doi {
     transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
     width: 100%;
     color: black;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
 }
 .cards .card .visible:hover {
     background-color: #ece7e6;
     border-color: #968e8c;
 }
 .cards .card .visible .card-image {
-    max-width: 25%;
     margin-right: 15px;
     margin-top: 5px;
 }
@@ -119,7 +119,7 @@ span.doi {
     font-size: 2vw;
 }
 .cards .card .visible a .card-body .card-meta {
-    font-size: 1.3vw;
+    font-size: 16px;
     margin-bottom: 10px;
 }
 .cards .card .visible a .card-body .card-meta i {
@@ -129,7 +129,7 @@ span.doi {
     margin-left: 1.2rem;
 }
 .cards .card .visible a .card-body .card-summary {
-    font-size: 1.3vw;
+    font-size: 16px;
     line-height: 1.5;
 }
 .cards .card .visible a .card-body .card-summary p {
@@ -186,28 +186,29 @@ div#no-results {
     padding: 2.5%;
     margin: 3% 0%;
     background-color: #e3ad5b;
-    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
     width: 100%;
     color: black;
-    display: flex;
 }
 .search-area #results-container .card:hover {
     background-color: #ece7e6;
-    color: #968e8c;
     border-color: #968e8c;
 }
-.search-area #results-container .card .card-image {
-    max-width: 25%;
+.search-area #results-container .card .card-body {
+    display: grid !important;
+    grid-template-columns: 1fr 5fr;
+}
+.search-area #results-container .card .card-body .card-image {
     margin-right: 15px;
     margin-top: 5px;
 }
-.search-area #results-container .card .card-image img {
+.search-area #results-container .card .card-body .card-image img {
     padding: 0px;
     object-fit: contain;
     border-radius: 10px;
     transition: none;
 }
-.search-area #results-container .card .card-image img:hover {
+.search-area #results-container .card .card-body .card-image img:hover {
     max-width: 100% !important;
 }
 .search-area #results-container .card a {
@@ -227,7 +228,7 @@ div#no-results {
     font-size: 2vw;
 }
 .search-area #results-container .card a .card-body .card-meta {
-    font-size: 1.3vw;
+    font-size: 16px;
     margin-bottom: 10px;
 }
 .search-area #results-container .card a .card-body .card-meta i {
@@ -237,7 +238,7 @@ div#no-results {
     margin-left: 1.2rem;
 }
 .search-area #results-container .card a .card-body .card-summary {
-    font-size: 1.3vw;
+    font-size: 16px;
     line-height: 1.5;
 }
 .search-area #results-container .card a .card-body .card-summary p {
@@ -258,7 +259,7 @@ input#search-input {
 input#search-input::placeholder {
     color: #52053E;
     font-family: "Taviraj", serif;
-    font-size: 1.7vw;
+    font-size: 20px;
     text-align: center;
     opacity: 0.75;
 }
@@ -270,7 +271,7 @@ input#search-input:hover:focus {
 }
 input#search-input:focus, input#search-input:not(:placeholder-shown) {
     font-family: "Taviraj", serif;
-    font-size: 1.7vw;
+    font-size: 20px;
     border: 2px solid #67074e;
     border-radius: 10px;
     width: 100%;
@@ -325,12 +326,16 @@ input#search-input:focus::placeholder {
         font-size: 3vw;
     }
 
-    .card-body {
+    .search-area #results-container .card .card-body, .card-body {
         margin: 0;
+        display: flex !important;
         flex-direction: column;
         align-items: center;
     }
-    .card-body .card-meta {
+    .search-area #results-container .card .card-body .card-content, .card-body .card-content {
+        padding: 10px;
+    }
+    .search-area #results-container .card .card-body .card-meta, .card-body .card-meta {
         font-size: 3vw;
     }
 

diff --git a/_site/assets/CSS/search-and-tags.scss b/_site/assets/CSS/search-and-tags.scss
@@ -20,10 +20,10 @@ $card-border-radius: 10px;
 $card-hover-color: #bebebe;
 $font-main: 'Taviraj', serif;
 
-$font-size: 1.5vw;
-$font-size-smaller: 1.3vw; 
-$font-size-smallest: 1.1vw;
-$font-size-bigger: 1.7vw;
+$font-size: 18px; // 1.5vw;
+$font-size-smaller: 16px; // 1.3vw; 
+$font-size-smallest: 14px; // 1.1vw;
+$font-size-bigger: 20px; // 1.7vw;
 
 // styling
 
@@ -140,7 +140,8 @@ span.doi {
     transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
     width: 100%;
     color: black;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
 
     &:hover {
       background-color: $secondary-color-light;
@@ -149,7 +150,6 @@ span.doi {
 
     .card-image {
 
-      max-width: 25%;
       margin-right: 15px;
       margin-top: 5px;
 
@@ -304,31 +304,33 @@ div#no-results {
     padding: 2.5%;
     margin: 3% 0%;
     background-color: $secondary-contrast-color;
-    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
     width: 100%;
     color: black;
-    display: flex;
 
     &:hover {
       background-color: $secondary-color-light;
-      color: $secondary-color-dark;
       border-color: $secondary-color-dark;
     }
 
-    .card-image {
+    .card-body {
+      display: grid !important;
+      grid-template-columns: 1fr 5fr;
 
-      max-width: 25%;
-      margin-right: 15px;
-      margin-top: 5px;
+      .card-image {
 
-      img {
-        padding: 0px;
-        object-fit: contain;
-        border-radius: $card-border-radius;
-        transition: none;
-
-        &:hover {
-          max-width: 100% !important;
+        margin-right: 15px;
+        margin-top: 5px;
+
+        img {
+          padding: 0px;
+          object-fit: contain;
+          border-radius: $card-border-radius;
+          transition: none;
+
+          &:hover {
+            max-width: 100% !important;
+          }
         }
       }
     }
@@ -470,11 +472,16 @@ input#search-input {
     font-size: 3vw;
   }
 
-  .card-body {
+  .search-area #results-container .card .card-body, .card-body {
     margin: 0;
+    display: flex !important;
     flex-direction: column;
     align-items: center;
 
+    .card-content {
+      padding: 10px;
+    }
+
     .card-meta {
       font-size: 3vw;
     }

diff --git a/_site/assets/CSS/style_0.2.css b/_site/assets/CSS/style_0.2.css
@@ -171,12 +171,12 @@ section code.language-plaintext.highlighter-rouge {
     padding: 3px 5px;
     border-radius: 4px;
     background-color: rgba(254, 218, 117, 0.3);
-    font-size: 1.1vw;
+    font-size: 14px;
 }
 section p {
     padding: 15px 0;
     text-align: justify;
-    font-size: 1.5vw;
+    font-size: 18px;
 }
 section p a, section p i {
     padding: none !important;
@@ -199,10 +199,10 @@ section p a.footnote, section p a.reversefootnote {
 section ul, section ol {
     padding: 15px;
     text-align: justify;
-    font-size: 1.5vw;
+    font-size: 18px;
 }
 section ul li, section ol li {
-    font-size: 1.5vw;
+    font-size: 18px;
     text-align: justify;
     padding: 0 5px;
 }
@@ -220,13 +220,13 @@ section ul {
     margin: 0 7.5px;
 }
 section .fig {
-    font-size: 1.3vw;
+    font-size: 16px;
     padding: 5px 25px 15px 25px;
     line-height: 1.4;
     font-style: italic;
 }
 section .fig a {
-    font-size: 1.3vw;
+    font-size: 16px;
 }
 section img {
     max-width: 100%;

diff --git a/_site/assets/CSS/style_0.2.scss b/_site/assets/CSS/style_0.2.scss
@@ -27,9 +27,9 @@ $danger-prompt-icon-color: #df3c30;
 
 $font-main: 'Taviraj', serif;
 $font-code: 'Source Code Pro', monospace;
-$font-size: 1.5vw;
-$font-size-smaller: 1.3vw; 
-$font-size-smallest: 1.1vw;
+$font-size: 18px; // 1.5vw;
+$font-size-smaller: 16px; // 1.3vw; 
+$font-size-smallest: 14px; // 1.1vw;
 $icon-size: 25px;
 $icon-padding: 1px;
 

diff --git a/_site/assets/CSS/toc-style.css b/_site/assets/CSS/toc-style.css
@@ -8,7 +8,7 @@ section .toc {
     transition: top 0.3s ease-in-out;
 }
 section .toc h2 {
-    font-size: 1.3vw;
+    font-size: 16px;
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 0;
@@ -20,7 +20,7 @@ section .toc ul {
 section .toc ul li {
     list-style: none;
     text-align: left;
-    font-size: 1.1vw;
+    font-size: 14px;
     padding: 5px 0 0 10px;
 }
 section .toc a, section .toc p a {

diff --git a/_site/assets/CSS/toc-style.scss b/_site/assets/CSS/toc-style.scss
@@ -11,9 +11,9 @@ $secondary-contrast-color: #e3ad5b;
 $secondary-contrast-color-dark: #9a6b23;
 $light-color: #FEFBF1;
 
-$font-size: 1.5vw;
-$font-size-smaller: 1.3vw; 
-$font-size-smallest: 1.1vw;
+$font-size: 18px; // 1.5vw;
+$font-size-smaller: 16px; // 1.3vw; 
+$font-size-smallest: 14px; // 1.1vw;
 
 section {
   margin: 15px 0;

diff --git a/_site/index.html b/_site/index.html
@@ -112,7 +112,7 @@ <h3>Contact us</h3>
     <p>Hosted on
       <a href="https://github.com/DigitalPasts/openDANES" target="_blank">Github Pages</a>
     </p>
-    <p>Last updated on October 06, 2023</p>
+    <p>Last updated on October 07, 2023</p>
   </div>
 
 </footer>

diff --git a/_site/nav/DANES-resources.html b/_site/nav/DANES-resources.html
@@ -177,7 +177,7 @@ <h3>Contact us</h3>
     <p>Hosted on
       <a href="https://github.com/DigitalPasts/openDANES" target="_blank">Github Pages</a>
     </p>
-    <p>Last updated on October 06, 2023</p>
+    <p>Last updated on October 07, 2023</p>
   </div>
 
 </footer>

diff --git a/_site/nav/about.html b/_site/nav/about.html
@@ -138,7 +138,7 @@ <h3>Contact us</h3>
     <p>Hosted on
       <a href="https://github.com/DigitalPasts/openDANES" target="_blank">Github Pages</a>
     </p>
-    <p>Last updated on October 06, 2023</p>
+    <p>Last updated on October 07, 2023</p>
   </div>
 
 </footer>

diff --git a/_site/nav/posters.html b/_site/nav/posters.html
@@ -214,7 +214,7 @@ <h3>Contact us</h3>
     <p>Hosted on
       <a href="https://github.com/DigitalPasts/openDANES" target="_blank">Github Pages</a>
     </p>
-    <p>Last updated on October 06, 2023</p>
+    <p>Last updated on October 07, 2023</p>
   </div>
 
 </footer>