Visual updates

_config.yml

@@ -1,14 +1,14 @@
 title: Machine Learning Ops
-subtitle: Use GitHub to facilitate automation, collaboration and reproducibility in your machine learning workflows.
+subtitle: A collection of resources on how to facilitate Machine Learning Ops with GitHub.
 email: ""
-description: A collection of resources on how to facilitate Machine Learning Ops with GitHub.
-logo: "/assets/images/Data-driven-recommendations.png"
+description: Learn how to use GitHub to facilitate automation, collaboration and reproducibility in your machine learning workflows.
+logo: "/assets/images/Data-driven-recommendations.svg"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://mlops-github.com" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: github
-github_username:  github
+github_username: github
 excerpt_separator: <!--more-->
-environment: 'dev'
+environment: "dev"
 
 plugins:
   - jekyll-feed

_sass/custom.scss

@@ -111,6 +111,9 @@ li {
   gap: 2em;
   align-items: start;
   .text_box {
+    h2 {
+      font-weight: 400;
+    }
     p {
       font-size: 16px;
       line-height: 1.5;
@@ -276,8 +279,7 @@ li {
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
 }
-.active
-.rot180 {
+.active .rot180 {
   transform: rotate(0) translateY(7px);
   -webkit-transform: rotate(0) translateY(7px);
   -moz-transform: rotate(0) translateY(7px);
@@ -346,7 +348,7 @@ li {
           .active {
             font-weight: 700;
             * {
-            color: $sidebar-color;
+              color: $sidebar-color;
             }
           }
         }
@@ -395,9 +397,9 @@ li {
 .tag_filter {
   background: transparent;
   color: $text-color;
-  border: 1px solid $sidebar-color;
-  padding: 8px 15px 8px 18px;
-  margin: 5px;
+  border: 1px solid $brand-color;
+  padding: 4px 12px;
+  margin: 4px;
   outline: 0;
   border-radius: 15px;
   -webkit-border-radius: 15px;
@@ -407,15 +409,16 @@ li {
 }
 .tags {
   display: flex;
-  justify-content: center;
+  justify-content: left;
   flex-wrap: wrap;
   .active {
     background-color: $bg-color-doc;
-    background-image: url("/assets/images/checkmark-outline.svg");
+    background-image: url("/assets/images/check.svg");
     background-position: 3px;
     background-size: auto 50%;
     background-repeat: no-repeat;
     color: $brand-color;
+    padding-left: 16px;
   }
 }
 

examples.html

@@ -1,38 +1,40 @@
 ---
-layout : default
-title  : Related Projects & Examples
-description : "Repository templates, examples, and related projects that demonstrate how various GitHub Features can be used for data science and ML Ops."
-image  : "/assets/images/Collection.png"
+layout: default
+title: Related Projects & Examples
+description: "Repository templates, examples, and related projects that demonstrate how various GitHub Features can be used for data science and ML Ops."
+image: "/assets/images/Collection.svg"
 ---
+
 <section class="intro blog_intro">
   <div class="image_box">
-    <img src="{{page.image}}" alt="repository templates">
+    <img src="{{page.image}}" alt="repository templates" />
   </div>
   <div class="text_box">
     <h1>{{page.title}}</h1>
     <p>{{page.description}}</p>
 
     <!-- tags filter -->
     <div class="tags">
-      {% assign tags =  site.data.repository_templates | map: 'tags' | uniq %}
+      {% assign tags = site.data.repository_templates | map: 'tags' | uniq %}
       <button class="tag_filter active" data-tag="all">All</button>
-      {%- assign s = tags | size | minus: 2 -%}
-      {%- for i in (0..s) -%}
-        <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">{{tags[i]}}</button>
+      {%- assign s = tags | size | minus: 2 -%} {%- for i in (0..s) -%}
+      <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">
+        {{tags[i]}}
+      </button>
       {%- endfor -%}
     </div>
 
     <!-- Posts list -->
     <div class="posts_list">
-      {%- for item in site.data.repository_templates -%}
-      {% assign t = item.tags | join: "%%" | replace: " ", "_"| replace: "%%", " " %}
+      {%- for item in site.data.repository_templates -%} {% assign t = item.tags
+      | join: "%%" | replace: " ", "_"| replace: "%%", " " %}
       <div class="blog content_item {{t}}">
         <a href="{{item.link}}">
           <h2>{{item.title}}</h2>
-        </a>  
+        </a>
         <p>{{item.info}}</p>
       </div>
       {%- endfor -%}
     </div>
   </div>
-</section>
+</section>

index.html

@@ -1,20 +1,19 @@
 ---
 layout: default
 description: A collection of resources on how to facilitate Machine Learning Ops with GitHub.
-image: "/assets/images/Data-driven-recommendations.png"
+image: "/assets/images/Data-driven-recommendations.svg"
 ---
+
 {%- include intro.html -%}
 <div class="content_grid">
   {%- for item in site.data.navigation -%}
   <div class="blog content_item">
     <a href="{{item.link}}">
-    <!-- <img class="card_bg" src="{{item.card_bg}}" alt="card bg"> -->
-    <img class="card_icon" src="{{item.icon}}" alt="icon">
-    <h2>{{item.title}}</h2>
-    <p>{{item.info}}</p>
+      <!-- <img class="card_bg" src="{{item.card_bg}}" alt="card bg"> -->
+      <img class="card_icon" src="{{item.icon}}" alt="icon" />
+      <h2>{{item.title}}</h2>
+      <p>{{item.info}}</p>
     </a>
   </div>
   {%- endfor -%}
 </div>
-
-

talks.html

@@ -1,42 +1,50 @@
 ---
-layout      : default
-title       : "Talks"
-description : "Recorded demos and tutorials on GitHub Actions and MLOps."
-image       : "/assets/images/Enterprise-Observability.png"
+layout: default
+title: "Talks"
+description: "Recorded demos and tutorials on GitHub Actions and MLOps."
+image: "/assets/images/Enterprise-Observability.svg"
 ---
+
 <section class="intro blog_intro">
   <div class="image_box">
-    <img src="{{page.image}}" alt="demos">
+    <img src="{{page.image}}" alt="demos" />
   </div>
   <div class="text_box">
     <h1>{{page.title}}</h1>
     <p>{{page.description}}</p>
 
     <!-- tags filter -->
     <div class="tags">
-      {% assign tags =  site.data.demos | map: 'tags' | uniq %}
+      {% assign tags = site.data.demos | map: 'tags' | uniq %}
       <button class="tag_filter active" data-tag="all">All</button>
-      {%- assign s = tags | size | minus: 2 -%}
-      {%- for i in (0..s) -%}
-      <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">{{tags[i]}}</button>
+      {%- assign s = tags | size | minus: 2 -%} {%- for i in (0..s) -%}
+      <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">
+        {{tags[i]}}
+      </button>
       {%- endfor -%}
     </div>
 
     <div class="posts_list">
-      {%- for item in site.data.demos -%}
-      {% assign t = item.tags | join: "%%" | replace: " ", "_"| replace: "%%", " " %}
+      {%- for item in site.data.demos -%} {% assign t = item.tags | join: "%%" |
+      replace: " ", "_"| replace: "%%", " " %}
       <div class="blog content_item {{t}}">
         <a href="{{item.link}}">
           <h2>{{item.title}}</h2>
         </a>
         <h3>{{item.subtitle}}</h3>
         <p>{{item.info}}</p>
-        <iframe class="y_video" width="600" height="400" src="https://www.youtube.com/embed/{{item.video_id}}"
-          frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen>
+        <iframe
+          class="y_video"
+          width="600"
+          height="400"
+          src="https://www.youtube.com/embed/{{item.video_id}}"
+          frameborder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        >
         </iframe>
       </div>
       {%- endfor -%}
     </div>
   </div>
-</section>
+</section>

team.html

@@ -4,11 +4,12 @@
 description: "There is a growing team that maintains and builds the assets you find on this site.
 Keep an eye on the <a href='https://github.com/about/careers'>GitHub Careers page</a> if you are interested in working
 with us."
-image : "/assets/images/GitHub-for-teams.png"
+image : "/assets/images/GitHub-for-teams.svg"
 ---
+
 <section class="intro team_intro">
   <div class="image_box">
-    <img src="{{page.image}}" alt="team">
+    <img src="{{page.image}}" alt="team" />
   </div>
   <div class="text_box">
     <h1>{{page.title}}</h1>
@@ -20,7 +21,11 @@ <h1>{{page.title}}</h1>
   {% for author in site.team %}
   <div class="team_item">
     <a class="author_img_box" href="https://github.com/{{author.nick}}">
-      <img class="author_image" src="{{author.image}}" alt="{{ author.title }}">
+      <img
+        class="author_image"
+        src="{{author.image}}"
+        alt="{{ author.title }}"
+      />
       <p class="author_nick">
         @{{author.nick}}
       </p>
@@ -31,4 +36,4 @@ <h2>{{ author.title }}</h2>
     </div>
   </div>
   {% endfor %}
-</div>
+</div>