homepage: refactor monitor

Co-authored-by: Marie Claire LeBlanc Flanagan <[email protected]>

Author: jvns

assets/js/application.js

@@ -60,28 +60,15 @@ var DownloadBox = {
     $('#gui-os-filter').addClass('visible');
     var os = window.session.browser.os; // Mac, Win, Linux
     if(os == "Mac") {
-      $(".monitor").addClass("mac");
-      $("#download-link").text("Download for Mac").attr("href", `${baseURLPrefix}install/mac`);
-      $("#gui-link").removeClass('mac').addClass('gui');
-      $("#gui-link").text("Mac GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=mac`);
+      $("#download-link").text("Install for Mac").attr("href", `${baseURLPrefix}install/mac`);
       $("#gui-os-filter").attr('data-os', 'mac');
       $("#gui-os-filter").text("Only show GUIs for my OS (Mac)")
     } else if (os == "Windows") {
-      $(".monitor").addClass("windows");
-      $("#download-link").text("Download for Windows").attr("href", `${baseURLPrefix}install/windows`);
-      $("#gui-link").removeClass('mac').addClass('gui');
-      $("#gui-link").text("Windows GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=windows`);
-      $("#alt-link").removeClass("windows").addClass("mac");
-      $("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}install/mac`);
+      $("#download-link").text("Install for Windows").attr("href", `${baseURLPrefix}install/windows`);
       $("#gui-os-filter").attr('data-os', 'windows');
       $("#gui-os-filter").text("Only show GUIs for my OS (Windows)")
     } else if (os == "Linux") {
-      $(".monitor").addClass("linux");
-      $("#download-link").text("Download for Linux").attr("href", `${baseURLPrefix}install/linux`);
-      $("#gui-link").removeClass('mac').addClass('gui');
-      $("#gui-link").text("Linux GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=linux`);
-      $("#alt-link").removeClass("windows").addClass("mac");
-      $("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}install/mac`);
+      $("#download-link").text("Install for Linux").attr("href", `${baseURLPrefix}install/linux`);
       $("#gui-os-filter").attr('data-os', 'linux');
       $("#gui-os-filter").text("Only show GUIs for my OS (Linux)")
     } else {

assets/sass/dark-mode.scss

@@ -108,14 +108,6 @@
                 @include box-shadow(none);
             }
 
-            div.monitor {
-                filter: brightness(.85);
-            }
-
-            .monitor a {
-                color: #dbd7d7;
-            }
-
             hr.sidebar {
                 filter: brightness(0.5);
             }

assets/sass/front-page.scss

@@ -18,7 +18,7 @@
 
   ul {
     @extend .unstyled !optional;
-    padding-top: 24px;
+    padding-top: 6px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -99,106 +99,91 @@
   }
 }
 
-$monitor-width: 313px;
-$monitor-height: 271px;
-
 #front-downloads {
   float: right;
-  width: 313px;
+  width: 295px;
   position: relative;
 
-  .monitor {
-    position: absolute;
-    top: 0;
-    right: -12px;
-  }
-
-  table {
-    position: absolute;
-    top: $monitor-height;
-    left: 24px;
+  .downloads-box {
+    padding: 20px;
+    background: var(--versions-footer-bg-color);
+    outline: 1px solid #f0c8bb;
 
-    td {
-      padding: 8px 20px 6px 0;
-      min-width: 145px;
+    :root[data-theme="dark"] & {
+      outline-color: var(--orange);
     }
-
-    a {
-      font-weight: bold;
+    border-radius: 4px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      width: 80px;
+      height: 80px;
+      background: url('#{$baseurl}images/logos/downloads/Git-Icon-1788C.png') no-repeat;
+      background-size: contain;
+      opacity: 0.55;
     }
   }
-}
 
-.monitor {
-  @include background-image-2x($baseurl + "images/monitor-default", $monitor-width, $monitor-height);
-  width: $monitor-width - 40;
-  height: $monitor-height - 45;
-  padding-top: 45px;
-  padding-left: 40px;
-  color: var(--main-bg);
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+  .release-info {
+    margin-bottom: 18px;
+    padding: 0 0 18px 100px;
+    border-bottom: 1px solid var(--base-border-color);
 
-  h4 {
-    font-weight: normal;
-    color: var(--main-bg);
-    font-size: 16px;
-  }
+    h4 {
+      font-weight: normal;
+      font-size: 16px;
+    }
 
-  span.version {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 28px;
-    font-weight: bold;
-  }
+    .version {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 28px;
+      font-weight: bold;
+    }
 
-  a {
-    color: #eee;
-    font-size: 12px;
-    text-decoration: underline;
-  }
+    a {
+      font-size: 12px;
+      text-decoration: underline;
+    }
 
-  span.release-date {
-    font-size: 12px;
+    time {
+      font-size: 12px;
+    }
   }
 
   a.button {
-    @include border-radius(2px);
-    @include box-shadow(0 1px 0 #148a92);
-    display: block;
-    width: 224px;
-    padding: 5px 0;
-    margin-top: 10px;
-    font-size: 16px;
-    color: var(--main-bg);
-    text-align: center;
-    background-image: linear-gradient(#1c868c, #186368);
-    border-top: solid 1px #085e64;
-    border-right: solid 1px #1f6367;
-    border-bottom: solid 1px #134143;
-    border-left: solid 1px #1f6367;
-    transition-duration: 0.3s;
-    transition-property: background-image;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 16px;
     text-decoration: none;
+    border-radius: 6px;
+    font-weight: bold;
+    transition: all 0.2s;
 
     &:hover {
-      background-image: linear-gradient(#1a7e84, #165b60);
+      transform: translateY(-1px);
     }
   }
 
-  &.mac {
-    @include background-image-2x($baseurl + "images/monitor-mac", $monitor-width, $monitor-height);
-    width: $monitor-width - 40;
-    height: $monitor-height - 36;
-    padding-top: 36px;
-    padding-left: 40px;
-  }
-
-  &.windows {
-    @include background-image-2x($baseurl + "images/monitor-windows", $monitor-width, $monitor-height);
+  #download-link {
+    background: var(--orange);
+    margin-bottom: 10px;
+    color: white;
   }
 
-  &.linux {
-    @include background-image-2x($baseurl + "images/monitor-linux", $monitor-width, $monitor-height);
+  .github-link {
+    background: transparent;
+    color: var(--font-color);
+    border: 1px solid var(--base-border-color);
+    font-weight: normal;
+    font-size: 13px;
+    padding: 10px 16px;
   }
 }
 
@@ -258,80 +243,41 @@ $monitor-height: 271px;
   }
 }
 
-a.icon {
-  display: inline-block;
-  height: 30px;
-  padding-left: 30px;
-  line-height: 36px;
-
-  &.gui {
-    @include background-image-2x($baseurl + "images/icons/gui", 18px, 24px, 6px 3px);
-  }
-
-  &.older-releases {
-    @include background-image-2x($baseurl + "images/icons/box", 22px, 20px, 0 6px);
-  }
-
-  &.windows {
-    @include background-image-2x($baseurl + "images/icons/windows", 24px, 21px, 0 6px);
-  }
-
-  &.mac {
-    @include background-image-2x($baseurl + "images/icons/apple", 17px, 21px, 5px 4px);
-  }
-
-  &.linux {
-    @include background-image-2x($baseurl + "images/icons/linux", 17px, 21px, 6px 6px);
-  }
-
-  &.source {
-    @include background-image-2x($baseurl + "images/icons/source-code", 25px, 20px, 0 6px);
-  }
-}
-
-
-
 // Breakpoint ----------------
 @media (max-width: $default) {
   #front-content {
     display: flex;
+
     #front-navigation {
       width: 50%;
+
       #front-nav {
         ul {
           padding: 0 1rem 0 0;
+
           li {
             margin-bottom: 1rem !important;
             margin-right: 0 !important;
           }
         }
       }
+
       #front-book {
         width: unset;
       }
     }
+
     #front-downloads {
-      width: 50%;
-      .monitor {
-        @include center-transformX;
-      }
-      table{
-        @include center-transformX;
-        tbody, tr {
-          display: flex;
-          flex-direction: column;
-        }
-        td {
-          margin-bottom: 1rem;
-          a { padding-left: 2.3rem; }
-        }
-      }
+      width: calc(50% - 20px);
+      padding-left: 20px;
     }
   }
+
   #companies-projects {
     ul {
       // TODO
     }
+
     li {
       // TODO
     }
@@ -340,30 +286,41 @@ a.icon {
 
 // Mobile
 @media (max-width: $mobile-m) {
-  #front-content{
+  #front-content {
     flex-direction: column-reverse;
-    #front-navigation, #front-downloads {
+
+    #front-navigation,
+    #front-downloads {
       width: 100%;
       border-right: none;
     }
+
+    #front-downloads {
+      padding-left: 0;
+    }
+
     #front-navigation {
-      #front-nav  {
+      #front-nav {
         ul {
           padding: 0 1rem;
         }
       }
+
       #front-book {
         @include flex-center;
         align-items: center;
       }
     }
+
     #front-downloads {
       border-bottom: 1px solid var(--base-border-color);
       margin-bottom: 2rem;
       padding-bottom: 1rem;
-      .monitor, table {
+
+      table {
         position: relative;
       }
+
       table {
         top: 0;
       }