feat: website refresh (#215)

tari-project · Mar 5, 2024 · 234473b · 234473b
1 parent c8bc0ef
commit 234473b
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 103 deletions.
diff --git a/_includes/download_launchpad.html b/_includes/download_launchpad.html
@@ -105,7 +105,7 @@ <h2 class="dl-title">{{ os.title }}</h2>
 
             <div class="past-versions-container">
                 <div class="past-versions-header">
-                    <h2>Past Versions</h2>
+                    <h2>Other Versions</h2>
                     {% if os.downloadBtnID %}
                     <div class="past">
                         <p class="select-network">Filter by Network: </p>                        
@@ -124,6 +124,9 @@ <h2>Past Versions</h2>
                         <div class="bin-header">
                             <div class="header-text">Last modified</div>
                         </div>
+                        <div class="bin-header">
+                            <div class="header-text">Size</div>
+                        </div>
                     </div>
                     <div id="{{ os.binaryDivID }}" class="bin-content">
                     </div>

diff --git a/_includes/download_suite.html b/_includes/download_suite.html
@@ -106,7 +106,7 @@ <h2 class="dl-title">{{ os.title }}</h2>
 
             <div class="past-versions-container">
                 <div class="past-versions-header">
-                    <h2>Past Versions</h2>
+                    <h2>Other Versions</h2>
                     {% if os.downloadBtnID %}
                     <div class="past">
                         <p class="select-network">Filter by Network: </p>                        
@@ -125,6 +125,9 @@ <h2>Past Versions</h2>
                         <div class="bin-header">
                             <div class="header-text">Last modified</div>
                         </div>
+                        <div class="bin-header">
+                            <div class="header-text">Size</div>
+                        </div>
                     </div>
                     <div id="{{ os.binaryDivID }}" class="bin-content">
                     </div>

diff --git a/_includes/social-links.html b/_includes/social-links.html
@@ -3,8 +3,8 @@
    <a href="https://discord.gg/q3Sfzb8S2V" target="_blank">
     <div class="graphic-box-small">
       <div class="graphic-box-small-content">
-        <div class="col-3 align-self-center"><img src="{{ site.baseurl }}/assets/img/discord.svg" alt="" /></div>
-        <div class="col-9">
+        <div class="col-2 align-self-center"><img src="{{ site.baseurl }}/assets/img/discord.svg" alt="" /></div>
+        <div class="col-10">
           <h4>Discord</h4>
           <p>The primary Tari community hangout</p>
         </div>
@@ -18,10 +18,10 @@ <h4>Discord</h4>
 <a href="/subscribe/">
     <div class="graphic-box-small">
       <div class="graphic-box-small-content">
-        <div class="col-3 align-self-center">
+        <div class="col-2 align-self-center">
           <img src="{{ site.baseurl }}/assets/img/substack.jpg" alt="" />
         </div>
-        <div class="col-9">
+        <div class="col-10">
           <h4>Substack</h4>
           <p>A curated weekly newsletter of protocol updates</p>
         </div>
@@ -34,10 +34,10 @@ <h4>Substack</h4>
     <a href="https://t.me/tariproject" target="_blank">
       <div class="graphic-box-small">
         <div class="graphic-box-small-content">
-          <div class="col-3 align-self-center">
+          <div class="col-2 align-self-center">
             <img src="{{ site.baseurl }}/assets/img/telegram.jpg" alt="" />
           </div>
-          <div class="col-9">
+          <div class="col-10">
             <h4>Telegram</h4>
             <p>A slightly noisier place to discuss Tari</p>
           </div>
@@ -50,10 +50,10 @@ <h4>Telegram</h4>
   <a href="https://libera.chat/" target="_blank">
     <div class="graphic-box-small">
       <div class="graphic-box-small-content">
-        <div class="col-3 align-self-center">
+        <div class="col-2 align-self-center">
           <img src="{{ site.baseurl }}/assets/img/irc.jpg" alt="" />
         </div>  
-        <div class="col-9">
+        <div class="col-10">
           <h4>IRC #tari</h4>
           <p>Mirror of the Tari #dev discord channel</p>
         </div>
@@ -68,10 +68,10 @@ <h4>IRC #tari</h4>
   <a href="https://twitter.com/tari" target="_blank">
     <div class="graphic-box-small">
       <div class="graphic-box-small-content">
-        <div class="col-3 align-self-center">
+        <div class="col-2 align-self-center">
           <img src="{{ site.baseurl }}/assets/img/twitter.jpg" alt="" />
         </div>
-        <div class="col-9">
+        <div class="col-10">
           <h4>Twitter</h4>
           <p>Announcements and fun</p>
         </div>
@@ -84,11 +84,11 @@ <h4>Twitter</h4>
   <a href="https://www.reddit.com/r/tari" target="_blank">
     <div class="graphic-box-small">
       <div class="graphic-box-small-content">
-        <div class="col-3 align-self-center">
+        <div class="col-2 align-self-center">
           <img src="{{ site.baseurl }}/assets/img/reddit.jpg" alt="" />
         </div>
 
-        <div class="col-9">
+        <div class="col-10">
           <h4>Reddit</h4>
           <p>Conversations regarding privacy, cryptography, the Tari protocol, traditions, philosophy, and anything else that is of interest to the community</p>
         </div>

diff --git a/_includes/spoiler.html b/_includes/spoiler.html
@@ -3,7 +3,7 @@
             aria-expanded="false" aria-controls="collapseExample">
         Toggle hint
     </button>
-    <div class="collapse" style="max-width: calc(80 * var(--root-size));" id="spoiler-{{ include.id }}">
+    <div class="collapse" style="max-width: var(--max-content-width);" id="spoiler-{{ include.id }}">
         <div class="card card-body">{{ include.content | markdownify }}</div>
     </div>
 

diff --git a/_layouts/lesson.html b/_layouts/lesson.html
@@ -5,7 +5,7 @@
 
 <section class="main blog-post">
   {% include newsletter-subscribe.html %}
-  <div class="post content" style="max-width: calc(80 * var(--root-size));">
+  <div class="post content" style="max-width: var(--max-content-width);">
     <div
       class="post-img"
       style="background-image:url({% if page.thumbnail %}{{ site.baseurl }}/assets/lessons/img/{{ page.thumbnail }}{% else %}{{ site.baseurl }}/assets/lessons/img/placeholder-thumbnail.jpg{% endif %})"

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -5,9 +5,9 @@
 
 <section class="main blog-post">
   {% include newsletter-subscribe.html %}
-  <div class="post content" style="max-width: calc(80 * var(--root-size));">
+  <div class="post content" style="max-width: var(--max-content-width);">
 
-    <div class="post-img" style="background-image:url({% if page.thumbnail %}{{ site.baseurl }}/{{ page.thumbnail }}{% else %}{{ site.baseurl }}/assets/img/posts/placeholder-thumbnail.jpg{% endif %})">
+    <div class="post-img" style="background-image: url({% if page.thumbnail %}{{ site.baseurl }}/{{ page.thumbnail }}{% else %}{{ site.baseurl }}/assets/img/posts/placeholder-thumbnail.jpg{% endif %})">
       <img src="{{ site.baseurl }}/assets/img/posts/placeholder-spacer.gif" />
     </div>
 
@@ -17,13 +17,13 @@
         <!-- {% if page.author %}<strong class="post-author">{{ page.author }}</strong>{% endif %} -->
         <p class="meta">{{ page.date | date: '%B %d, %Y' }}</p>
       </div>
-      <h1 class="pb-5">{{ page.title }}</h1>
+      <h1 class="pb-3">{{ page.title }}</h1>
       <div class="addthis_inline_share_toolbox"></div>
 
     </div>
     <section id="post">
       <div class="block">
-        {% if page.subtitle %}<div class="lead"><h2>{{ page.subtitle }}</h2></div>{% endif %}
+        {% if page.subtitle %}<h2 class="subtitle" style="font-family: Avenir-Light, 'Avenir-Light' !important;">{{ page.subtitle }}</h2>{% endif %}
         {{ content }}
       </div>
     </section>

diff --git a/_layouts/update.html b/_layouts/update.html
@@ -5,24 +5,22 @@
 
 <section class="main blog-post">
   {% include newsletter-subscribe.html %}
-  <div class="post content" style="max-width: calc(80 * var(--root-size));">
+  <div class="post content" style="max-width: var(--max-content-width);">
     <div class="post-img" style="background-image:url({% if page.thumbnail %}{{ site.baseurl }}/assets/updates/img/{{ page.thumbnail }}{% else %}{{ site.baseurl }}/assets/updates/img/placeholder-thumbnail.jpg{% endif %})">
       <div><h1 class="update-page-title">{{ page.date | date: '%B %d, %Y' }}</h1></div>
       <img src="{{ site.baseurl }}/assets/img/posts/placeholder-spacer.gif" />
     </div>
 
     <div class="post-head">
-      <div>
+      <div style="margin-bottom: 40px;">
         <p class="meta">
           By {{ page.author }}
         </p>
-        <h1 style="margin-bottom: calc(5 * var(--root-size));">{{ page.title }}</h1>
+        <h1>{{ page.title }}</h1>
         {% if page.subtitle %}
-        <div class="lead">
-          <h2 style="margin-bottom: calc(2 * var(--root-size)); margin-top: 0px;">
+          <h2 class="subtitle" style="margin-top: 10px; font-family: Avenir-Light, 'Avenir-Light' !important;">
             {{ page.subtitle }}
           </h2>
-        </div>
         {% endif %}
         <!-- {% if page.author %}<strong class="post-author">{{ page.author }}</strong>{% endif %} -->
       </div>

diff --git a/assets/css/downloads.css b/assets/css/downloads.css
@@ -9,7 +9,7 @@
   background: #ffffff;
   box-shadow: 0 10px 15px 0 rgba(236, 236, 236, 0.5);
   border-radius: 10px;
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
   display: flex;
   flex-direction: row;
   margin-bottom: 20px;
@@ -27,12 +27,12 @@
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
   margin: 45px 0 45px 0;
   flex-wrap: wrap;
 }
 .tab-button {
-  font-family: Avenir-Heavy;
+  font-family: Avenir-Black;
   font-size: 18px;
   color: #bcbcbb;
   display: flex;
@@ -110,7 +110,7 @@
 
 .source,
 .tutorial-video {
-  font-family: Avenir-Heavy;
+  font-family: Avenir-Black;
   font-size: 16px;
   color: #9330ff;
   letter-spacing: 0;
@@ -119,7 +119,7 @@
 }
 
 .binaries-container {
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
 }
 
 .binaries-container > .bin-headers {
@@ -130,15 +130,33 @@
   width: 100%;
   padding: 30px 15px;
   border-bottom: 1px solid #ececec;
+  gap: 5px;
 }
 div.bin-header {
   display: flex;
   width: 33%;
 }
 
+.binaries-container > .bin-headers > div,
+.bin-row > div {
+  flex-grow: 1;
+}
+
+.binaries-container > .bin-headers > div:nth-child(2),
+.bin-row > div:nth-child(2) {
+  flex: 0 0 20%;
+  justify-content: center;
+}
+
+.binaries-container > .bin-headers > div:nth-child(3),
+.bin-row > div:nth-child(3) {
+  flex: 0 0 10%;
+  justify-content: center;
+}
+
 .header-text {
-  font-family: Avenir-Heavy;
-  font-size: 24px;
+  font-family: Avenir-Heavy, 'Avenir-Heavy', 'Myriad Pro', Arial, Verdana;
+  font-size: 18px;
   color: #000000;
   letter-spacing: 0;
   line-height: 35px;
@@ -151,6 +169,7 @@ div.bin-header {
   width: 100%;
   padding: 15px 15px;
   background: #f7f7f7;
+  gap: 5px;
 }
 
 .bin-row.alt-colour {
@@ -173,6 +192,7 @@ div.bin-row-item.bin-left {
 div.bin-row-item.bin-right {
   color: #626262;
   width: 33%;
+  justify-content: center;
 }
 
 div#support.download-content > .dl-card div.dl-info-holder {
@@ -184,7 +204,7 @@ div#support.download-content > .dl-card div.dl-info-holder {
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
 }
 
 .dl-current {
@@ -310,7 +330,7 @@ div#support.download-content > .dl-card div.dl-info-holder {
   }
 
   .header-text {
-    font-size: 18px;
+    font-size: 16px;
     line-height: 14px;
   }
   div.bin-row-item.bin-right,

diff --git a/assets/css/githubIssues.css b/assets/css/githubIssues.css
@@ -1,7 +1,7 @@
 /*Styling for GitHub Issues*/
 
 .tab-container {
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
   height: auto;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.085);
   background-color: #fff;
@@ -45,9 +45,8 @@
 }
 
 .tab-header .tab-title {
-  font-family: Avenir-Black, "Avenir-Black", "Myriad Pro", Arial, Verdana !important;
+  font-family: Avenir-Black, 'Avenir-Black', 'Myriad Pro', Arial, Verdana !important;
   font-size: 18px;
-  font-weight: bold;
   line-height: 20px;
   color: #b6b6b6;
 }
@@ -143,7 +142,7 @@
   text-decoration: none;
   font-size: 18px;
   line-height: 20px;
-  font-family: Avenir-Black, "Avenir-Black", "Myriad Pro", Arial, Verdana !important;
+  font-family: Avenir-Black, 'Avenir-Black', 'Myriad Pro', Arial, Verdana !important;
 }
 
 .issue-list .issue-container .issue-info div.issue-tagline {
@@ -168,7 +167,7 @@
 
 .issue-label {
   border-radius: 3px;
-  font-family: Avenir-Heavy, "Avenir-Heavy", "Myriad Pro", Arial, Verdana !important;
+  font-family: Avenir-Black, 'Avenir-Black', 'Myriad Pro', Arial, Verdana !important;
   font-size: 12px;
   color: #fff;
   letter-spacing: 0;
@@ -217,7 +216,7 @@ a.view-issue-link:hover {
   cursor: pointer;
 }
 .tab-nav-item {
-  font-family: Avenir-Roman, "Avenir-Roman", "Myriad Pro", Arial, Verdana !important;
+  font-family: Avenir-Roman, 'Avenir-Roman', 'Myriad Pro', Arial, Verdana !important;
   font-size: 18px;
   color: #000000;
   margin-right: 20px;
@@ -226,7 +225,7 @@ a.view-issue-link:hover {
 }
 
 .tab-nav-item.active {
-  font-family: Avenir-Heavy, "Avenir-Heavy", "Myriad Pro", Arial, Verdana, serif !important;
+  font-family: Avenir-Black, 'Avenir-Black', 'Myriad Pro', Arial, Verdana, serif !important;
   border-bottom: 2px solid #9330ff;
 }
 
@@ -241,7 +240,7 @@ a.view-issue-link:hover {
 }
 
 .no-issues {
-  font-family: Avenir-Roman, "Avenir-Roman", "Myriad Pro", Arial, Verdana !important;
+  font-family: Avenir-Roman, 'Avenir-Roman', 'Myriad Pro', Arial, Verdana !important;
   font-size: 18px;
   color: #000;
   letter-spacing: 0;
@@ -254,7 +253,7 @@ a.view-issue-link:hover {
 .view-all-text {
   font-size: 15px;
   color: #9330ff;
-  font-family: Avenir-Roman, "Avenir-Roman", "Myriad Pro", Arial, Verdana, serif !important;
+  font-family: Avenir-Roman, 'Avenir-Roman', 'Myriad Pro', Arial, Verdana, serif !important;
   line-height: 12px;
 }
 
@@ -283,7 +282,6 @@ a.view-issue-link:hover {
 }
 
 @media only screen and (max-width: 700px) {
-
   .tab-header .tab-title-holder img.tab-header-img {
     width: 25px;
   }

diff --git a/assets/css/rustpen.css b/assets/css/rustpen.css
@@ -30,7 +30,7 @@ div > .result {
 
 .playpen,
 .tutorials .card {
-  max-width: calc(80 * var(--root-size));
+  max-width: var(--max-content-width);
 }
 
 .playpen .result {