Merge pull request #43 from Hyper-Unearthing/lint/add-stylelint-and-configure-zed

lint: add stytleint and configure zed

Author: billybonks

.gitignore

@@ -3,3 +3,4 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+node_modules/

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

.zed/settings.json

@@ -0,0 +1,14 @@
+{
+  "languages": {
+    "CSS": {
+      "tab_size": 2,
+      "formatter": {
+        "external": {
+          "command": "npx",
+          "arguments": ["prettier", "--stdin-filepath", "{buffer_path}"]
+        }
+      },
+      "format_on_save": "on"
+    }
+  }
+}

assets/components/default-layout.css

@@ -12,9 +12,10 @@
   gap: 37px;
 }
 
-@media (max-width: 980px) {
+@media (width <= 980px) {
   .navigation {
     --navigation-horizontal-padding: 16px;
+
     gap: 16px;
   }
 }

assets/components/full-width-layout.css

@@ -1,6 +1,7 @@
 .full-width-layout {
   display: flex;
   align-items: var(--full-page-section-content-aligment, center);
+  text-align: center;
   background-color: var(--section-background-color);
   padding: var(--full-page-section-padding);
   flex-direction: column;
@@ -13,14 +14,25 @@
   max-width: var(--section-content-max-width, 1130px);
 }
 
-.old-way .full-width-layout__content p {
-  max-width: var(--old-way-copy-max-width, 60%);
+.old-way {
+  background: -webkit-linear-gradient(#090622, #171336);
+  padding-bottom: 0;
+}
+
+.text-gradient {
+  background: -webkit-linear-gradient(0deg, #feba01, #f22089);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .new-way h2 {
   margin-bottom: var(--new-way-heading-margin, 48px);
 }
 
+.new-way {
+  background-color: #171336;
+}
+
 .new-way img {
   margin-bottom: var(--old-way-image-margin, 64px);
   width: 100%;
@@ -31,7 +43,7 @@
 }
 
 .old-way img {
-  margin-top: var(--old-way-image-margin, 64px);
+  margin-top: var(--old-way-image-margin, 30px);
   width: 100%;
 }
 

assets/components/marketing-hero.css

@@ -1,4 +1,4 @@
-@media (max-width: 980px) {
+@media (width <= 980px) {
   :root {
     --hero-content-align: left;
     --integration-icon-size: 50px;
@@ -19,7 +19,9 @@
 
 .hero {
   display: flex;
+
   --section-background-color: var(--royal-900);
+
   padding: var(
     --hero-padding,
     100px var(--hero-gutter) 100px var(--hero-gutter)

assets/components/posts.css

@@ -29,12 +29,13 @@
 .post h4,
 .post h5,
 .post h6 {
-    font-family: "Outfit", sans-serif;
+    font-family: Outfit, sans-serif;
 }
 
 .post strong {
     font-weight: 600;
 }
+
 .post p,
 .post ul,
 .post ol {
@@ -61,8 +62,9 @@
 .post h3 {
     font-size: var(--h2-font-size);
     text-transform: none;
-    margin: 50px 0 15px 0;
+    margin: 50px 0 15px;
 }
+
 .post .highlight,
 .post blockquote {
     background-color: #1e2e5b;

assets/main.css

@@ -6,14 +6,14 @@
   --button-secondary-background: #0a0524;
   --cta-button-font-size: 1.25rem;
   --cta-button-padding: 16px 24px;
+
   /* new variables  */
   --hero-gutter: 220px;
   --full-page-content-gutter: 140px;
   --full-page-content-vertical-spacing: 100px;
   --full-page-section-padding: var(--full-page-content-vertical-spacing)
     var(--full-page-content-gutter) var(--full-page-content-vertical-spacing)
     var(--full-page-content-gutter);
-
   --h2-font: var(--bold-font-weight) 14px var(--font-family);
   --p-font: var(--light-font-weight) 20px / var(--body-line-height)
     var(--font-family);
@@ -69,7 +69,7 @@ p {
   color: var(--footer-font-color);
 }
 
-@media (max-width: 980px) {
+@media (width <= 980px) {
   :root {
     --hero-gutter: 32px;
     --full-page-content-gutter: 32px;