Migrate assets to Astro imports

public/css/bootstrap.css

@@ -2282,7 +2282,7 @@ table th[class*="span"],
   *margin-right: .3em;
   line-height: 14px;
   vertical-align: text-top;
-  background-image: url("../img/glyphicons-halflings.png");
+  background-image: url("../img/vendor/bootstrap/glyphicons-halflings.png");
   background-position: 14px 14px;
   background-repeat: no-repeat;
 }
@@ -2306,7 +2306,7 @@ table th[class*="span"],
 .dropdown-submenu:focus > a > [class^="icon-"],
 .dropdown-submenu:hover > a > [class*=" icon-"],
 .dropdown-submenu:focus > a > [class*=" icon-"] {
-  background-image: url("../img/glyphicons-halflings-white.png");
+  background-image: url("../img/vendor/bootstrap/glyphicons-halflings-white.png");
 }
 
 .icon-glass {

public/css/styles.css

@@ -1,20 +1,46 @@
-/* Jumbotrons
--------------------------------------------------- */
+/* ==========================================================================
+   Jumbotron
+   ========================================================================== */
 
-/* Base class
-------------------------- */
 .jumbotron {
     position: relative;
     padding: 40px 0;
     color: #fff;
     text-align: center;
-    text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
+    text-shadow:
+        0 1px 3px rgba(0, 0, 0, .4),
+        0 0 30px rgba(0, 0, 0, .075);
     background: #000;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
-    /* IE6-9 fallback on horizontal gradient */
-    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
-    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
-    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
+    -webkit-box-shadow:
+        inset 0 3px 7px rgba(0, 0, 0, .2),
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
+    -moz-box-shadow:
+        inset 0 3px 7px rgba(0, 0, 0, .2),
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
+    box-shadow:
+        inset 0 3px 7px rgba(0, 0, 0, .2),
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
+}
+
+.jumbotron .container {
+    position: relative;
+    z-index: 2;
+}
+
+.jumbotron:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: url(/img/backgrounds/hero-banner.gif);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    opacity: .6;
 }
 
 .jumbotron h1 {
@@ -31,7 +57,6 @@
     margin-bottom: 30px;
 }
 
-/* Link styles (used on .masthead-links as well) */
 .jumbotron a {
     color: #fff;
     color: rgba(255, 255, 255, .5);
@@ -45,72 +70,10 @@
     text-shadow: 0 0 10px rgba(255, 255, 255, .25);
 }
 
-/* Download button */
-.masthead .btn {
-    padding: 19px 24px;
-    font-size: 24px;
-    font-weight: 200;
-    color: #fff;
-    /* redeclare to override the `.jumbotron a` */
-    border: 0;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -webkit-transition: none;
-    -moz-transition: none;
-    transition: none;
-}
+/* ==========================================================================
+   Masthead
+   ========================================================================== */
 
-.masthead .btn:hover {
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-}
-
-.masthead .btn:active {
-    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-}
-
-
-/* Pattern overlay
-------------------------- */
-.jumbotron .container {
-    position: relative;
-    z-index: 2;
-}
-
-.jumbotron:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-image: url(/img/banner.gif);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    opacity: .6;
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (min--moz-device-pixel-ratio: 2),
-only screen and (-o-min-device-pixel-ratio: 2/1) {
-
-    .jumbotron:after {
-        background-size: 150px 150px;
-    }
-
-}
-
-/* Masthead (docs home)
-------------------------- */
 .masthead {
     padding: 70px 0 80px;
     margin-bottom: 20px;
@@ -123,6 +86,58 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     letter-spacing: -2px;
 }
 
+.masthead p {
+    font-weight: 200;
+    line-height: 1.25;
+}
+
+.masthead .btn {
+    padding: 19px 24px;
+    font-size: 24px;
+    font-weight: 200;
+    color: #fff;
+    border: 0;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -moz-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+}
+
+.masthead .btn:hover {
+    -webkit-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -moz-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+}
+
+.masthead .btn:active {
+    -webkit-box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+    -moz-box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+    box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+}
+
 .masthead-logo {
     display: block;
     width: 430px;
@@ -138,11 +153,6 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     letter-spacing: -1px;
 }
 
-.masthead p {
-    font-weight: 200;
-    line-height: 1.25;
-}
-
 .masthead-download {
     margin-top: 30px;
     text-align: center;
@@ -162,14 +172,15 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     color: rgba(255, 255, 255, .5);
 }
 
-
 .masthead-platforms {
     display: inline;
     color: #fff !important;
 }
 
-/* Home page
-------------------------- */
+/* ==========================================================================
+   Home Page
+   ========================================================================== */
+
 .home-section {
     padding: 30px 0;
 }
@@ -241,96 +252,12 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     margin-left: auto;
 }
 
-/* Tablet to desktop
-------------------------- */
-@media (min-width: 768px) and (max-width: 979px) {
-  .jumbotron {
-    margin-top: -20px; /* Offset bottom margin on .navbar */
-  }
-
-  .jumbotron .container {
-    width: initial !important;
-  }
-}
-
-/* Tablet
-------------------------- */
-@media (max-width: 767px) {
-  .jumbotron {
-    padding: 40px 20px;
-    margin-top:   -20px; /* Offset bottom margin on .navbar */
-    margin-right: -20px;
-    margin-left:  -20px;
-  }
-  .masthead h1 {
-    font-size: 90px;
-  }
-  .masthead-logo {
-    width: 360px;
-  }
-  .masthead-title {
-    font-size: 36px;
-    word-break: break-all;
-  }
-  .masthead p,
-  .masthead .btn {
-    font-size: 24px;
-  }
-  .archive-feature .thumbnail,
-  .gallery-section .thumbnail img {
-    max-height: none;
-  }
-}
-
-/* Landscape phones
-------------------------- */
-@media (max-width: 480px) {
-  /* Downsize the jumbotrons */
-  .jumbotron h1 {
-    font-size: 45px;
-  }
-  .masthead-logo {
-    width: 260px;
-  }
-  .masthead-title {
-    font-size: 28px;
-  }
-  .jumbotron p,
-  .jumbotron .btn {
-    font-size: 18px;
-  }
-  .jumbotron .btn {
-    display: block;
-    margin: 0 auto;
-  }
-
-  .archive-feature .thumbnail,
-  .gallery-section .thumbnail img {
-    max-height: none;
-  }
-}
-
-
-/* Footer */
-footer {
-    margin-bottom: 20px;
-}
-
-footer .links * {
-    margin-right: 3px;
-}
-
-footer .links {
-    margin-bottom: 5px;
-}
-
-footer .about * {
-    display: block;
-}
-
+/* ==========================================================================
+   Downloads Page
+   ========================================================================== */
 
 .download-card h3 {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .download-patch-notes {
@@ -340,3 +267,106 @@ footer .about * {
 .patch-note h3 {
     margin-top: 0;
 }
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+footer {
+    margin-bottom: 20px;
+}
+
+footer .links {
+    margin-bottom: 5px;
+}
+
+footer .links * {
+    margin-right: 3px;
+}
+
+footer .about * {
+    display: block;
+}
+
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1) {
+    .jumbotron:after {
+        background-size: 150px 150px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+    .jumbotron {
+        margin-top: -20px;
+    }
+
+    .jumbotron .container {
+        width: initial !important;
+    }
+}
+
+@media (max-width: 767px) {
+    .jumbotron {
+        padding: 40px 20px;
+        margin-top: -20px;
+        margin-right: -20px;
+        margin-left: -20px;
+    }
+
+    .masthead h1 {
+        font-size: 90px;
+    }
+
+    .masthead-logo {
+        width: 360px;
+    }
+
+    .masthead-title {
+        font-size: 36px;
+        word-break: break-all;
+    }
+
+    .masthead p,
+    .masthead .btn {
+        font-size: 24px;
+    }
+
+    .archive-feature .thumbnail,
+    .gallery-section .thumbnail img {
+        max-height: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .jumbotron h1 {
+        font-size: 45px;
+    }
+
+    .jumbotron p,
+    .jumbotron .btn {
+        font-size: 18px;
+    }
+
+    .jumbotron .btn {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .masthead-logo {
+        width: 260px;
+    }
+
+    .masthead-title {
+        font-size: 28px;
+    }
+
+    .archive-feature .thumbnail,
+    .gallery-section .thumbnail img {
+        max-height: none;
+    }
+}