feat: create styling improvements

Author: jorenbroekema

.changeset/rich-boxes-shake.md

@@ -0,0 +1,5 @@
+---
+'@d4kmor/launch': minor
+---
+
+Styling improvements. Added outside paddings to make it look nicer on smaller viewports. Made footer and header widths consistent with content width. Changed header bar to be white which looks cleaner. Changed the sidebar nav styles to be cleaner. Made the call to action buttons cleaner looking. Made the spacing around the mobile menu button consistent. Changed the reasons section to use CSS grid to make it look more consistent on different viewports by specifying grid gaps, instead of doing it with margins.

docs/_assets/head.html

@@ -1,5 +1,9 @@
 <link
-  href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
   rel="stylesheet"
 />
 <meta name="twitter:creator" content="@modern_web_dev" />

docs/_assets/logo-color.svg

@@ -6,16 +6,16 @@ body[layout='home'] .markdown-body .call-to-action:nth-of-type(2) {
 
 @media screen and (min-width: 1024px) {
   body[layout='home'].has-background .page-background {
-    top: -140px;
+    top: -165px;
     right: -463px;
     transform: rotate(45deg);
   }
 }
 
 rocket-navigation {
-  font-family: 'Quicksand', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 header {
-  font-family: 'Quicksand', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }

docs/_assets/style.css

@@ -2,68 +2,7 @@
 title: Rocket
 layout: home.njk
 slogan: The modern web setup for static sites with a sprinkle of JavaScript.
-callToActionItems:
-  [
-    {
-      text:
-        'Start learning <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-        viewBox="0 0 512 512" xml:space="preserve">
-        <path d="M280.069,0C175.516,0,90.294,84.355,88.886,188.58L40.731,327.056h48.137v103.184h93.414V512h219.545h0.001V338.607
-        c20.245-16.76,37.064-37.758,48.903-61.125c13.628-26.901,20.538-55.929,20.538-86.282C471.269,85.773,385.497,0,280.069,0z
-        M377.403,319.171l-5.992,4.565v157.847H212.7v-81.759h-93.414V296.639H83.512l35.774-102.87V191.2
-        c0-88.655,72.127-160.782,160.783-160.782S440.851,102.545,440.852,191.2C440.852,241.806,417.726,288.45,377.403,319.171z"/>
-        <path d="M282.774,50.72c-26.336-0.489-52.14,6.356-74.649,19.824c-23.038,13.785-36.726,38.082-36.616,64.994
-        c0.111,27.064,14.093,51.396,37.405,65.087l97.618,57.337c11.956,7.022,25.162,10.541,38.398,10.541
-        c12.589,0,25.205-3.186,36.782-9.57c23.44-12.924,37.94-36.526,38.79-63.137c0.036-1.162,0.06-2.327,0.069-3.494v-0.008
-        C421.15,115.679,359.335,52.171,282.774,50.72z M390.098,194.825c-0.504,15.773-9.13,29.781-23.076,37.47
-        c-14.252,7.859-31.107,7.649-45.086-0.563l-97.618-57.336c-13.955-8.196-22.327-22.769-22.393-38.983
-        c-0.066-16.06,8.09-30.553,21.817-38.767c17.018-10.183,36.458-15.534,56.355-15.534c0.7,0,1.4,0.007,2.1,0.019
-        c59.982,1.137,108.411,50.9,107.956,110.931C390.145,192.986,390.127,193.908,390.098,194.825z"/>
-        </svg>',
-      href: '/learn/',
-    },
-    { text: 'Browser Docs
-        <?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 502 502" style="enable-background:new 0 0 502 502;" xml:space="preserve">
-        <path d="M492,87.984h-33.036v-3.389c0-2.753-1.135-5.384-3.137-7.272c-2.004-1.891-4.707-2.866-7.442-2.711L251,86.054
-        L53.615,74.612c-2.75-0.155-5.441,0.82-7.442,2.711c-2.002,1.889-3.137,4.52-3.137,7.272v3.389H10c-5.522,0-10,4.478-10,10
-        v319.42c0,5.522,4.478,10,10,10h482c5.522,0,10-4.478,10-10V97.984C502,92.462,497.522,87.984,492,87.984z M261,105.509
-        l177.964-10.316v274.521L261,380.03V105.509z M63.036,95.192L241,105.509V380.03L63.036,369.713V95.192z M482,407.404H20v-299.42
-        h23.036V379.15c0,5.298,4.132,9.677,9.421,9.983l197.964,11.477c0.193,0.011,0.384,0.016,0.575,0.016c0.001,0,0.002,0,0.003,0
-        H251h0.001c0.001,0,0.002,0,0.003,0c0.192,0,0.384-0.006,0.575-0.016l197.964-11.477c5.289-0.307,9.421-4.686,9.421-9.983
-        V107.984H482V407.404z"/>
-        <path d="M214.281,130.08l-69.813-4.047c-5.516-0.327-10.242,3.892-10.563,9.404c-0.319,5.514,3.892,10.243,9.404,10.563
-        l69.813,4.047c0.197,0.012,0.394,0.017,0.588,0.017c5.258,0,9.666-4.104,9.975-9.421
-        C224.005,135.129,219.794,130.399,214.281,130.08z"/>
-        <path d="M92.623,143.061l17.215,0.998c0.197,0.012,0.394,0.017,0.588,0.017c5.258,0,9.666-4.104,9.975-9.421
-        c0.319-5.514-3.891-10.243-9.404-10.562l-17.215-0.998c-5.541-0.32-10.242,3.892-10.563,9.404
-        C82.899,138.012,87.109,142.742,92.623,143.061z"/>
-        <path d="M214.281,175.984l-120.5-6.985c-5.541-0.319-10.242,3.892-10.563,9.404c-0.319,5.514,3.891,10.243,9.404,10.563
-        l120.5,6.985c0.197,0.012,0.394,0.017,0.588,0.017c5.258,0,9.666-4.104,9.975-9.421
-        C224.005,181.033,219.795,176.303,214.281,175.984z"/>
-        <path d="M214.281,222.845l-120.5-6.985c-5.541-0.317-10.242,3.892-10.563,9.404c-0.319,5.514,3.891,10.243,9.404,10.563
-        l120.5,6.985c0.197,0.012,0.394,0.017,0.588,0.017c5.258,0,9.666-4.104,9.975-9.421
-        C224.005,227.894,219.795,223.165,214.281,222.845z"/>
-        <path d="M214.281,268.751l-120.5-6.985c-5.541-0.317-10.242,3.892-10.563,9.404c-0.319,5.514,3.891,10.243,9.404,10.563
-        l120.5,6.985c0.197,0.012,0.394,0.017,0.588,0.017c5.258,0,9.666-4.104,9.975-9.421
-        C224.005,273.8,219.795,269.07,214.281,268.751z"/>
-        <path d="M410.131,261.765l-74.595,4.324c-5.514,0.319-9.724,5.049-9.404,10.563c0.309,5.316,4.716,9.421,9.975,9.421
-        c0.194,0,0.391-0.005,0.588-0.017l74.595-4.324c5.514-0.319,9.724-5.049,9.404-10.563
-        C420.373,265.657,415.685,261.442,410.131,261.765z"/>
-        <path d="M305.889,267.808l-16.258,0.942c-5.513,0.319-9.724,5.049-9.404,10.563c0.309,5.316,4.716,9.421,9.975,9.421
-        c0.194,0,0.391-0.005,0.588-0.017l16.258-0.942c5.513-0.319,9.724-5.049,9.404-10.563
-        C316.131,271.7,311.417,267.485,305.889,267.808z"/>
-        <path d="M410.131,215.86l-120.5,6.985c-5.514,0.319-9.724,5.049-9.404,10.563c0.309,5.316,4.716,9.421,9.975,9.421
-        c0.194,0,0.391-0.005,0.588-0.017l120.5-6.985c5.514-0.319,9.724-5.049,9.404-10.563
-        C420.373,219.752,415.685,215.543,410.131,215.86z"/>
-        <path d="M410.131,168.999l-120.5,6.985c-5.514,0.319-9.724,5.049-9.404,10.563c0.309,5.316,4.716,9.421,9.975,9.421
-        c0.194,0,0.391-0.005,0.588-0.017l120.5-6.985c5.514-0.319,9.724-5.049,9.404-10.563
-        C420.373,172.89,415.685,168.671,410.131,168.999z"/>
-        <path d="M410.131,123.094l-120.5,6.985c-5.514,0.319-9.724,5.049-9.404,10.563c0.309,5.316,4.716,9.421,9.975,9.421
-        c0.194,0,0.391-0.005,0.588-0.017l120.5-6.985c5.514-0.319,9.724-5.049,9.404-10.563
-        C420.373,126.986,415.685,122.771,410.131,123.094z"/>
-        </svg>
-        ', href: '/docs/' },
-  ]
+callToActionItems: [{ text: 'Learn', href: '/learn/' }, { text: 'Browse Docs', href: '/docs/' }]
 reasonHeader: Why Rocket?
 reasons:
   [