home media query

biomejs · Dec 6, 2023 · d2f2d1c · d2f2d1c
1 parent 6d1180b
commit d2f2d1c
Show file tree

Hide file tree

Showing 7 changed files with 319 additions and 285 deletions.
diff --git a/website/src/components/Cardsinfo.astro b/website/src/components/Cardsinfo.astro
@@ -27,3 +27,7 @@ import { Card, CardGrid } from "@astrojs/starlight/components";
     class support for TypeScript and JSX.
   </Card>
 </CardGrid>
+
+<script>
+  import "../content/docs/srcipts/hover.ts";
+</script>
diff --git a/website/src/components/Community.astro b/website/src/components/Community.astro
@@ -20,6 +20,10 @@ import { Icon } from "@astrojs/starlight/components";
   </div>
 </div>
 
+<script>
+  import "../content/docs/srcipts/contributors.ts";
+</script>
+
 <style>
   .community > div > div > a {
     display: flex;
@@ -52,7 +56,7 @@ import { Icon } from "@astrojs/starlight/components";
     width: 500px;
     position: absolute;
     right: -160px !important;
-    top: 0px;
+    top: 10px;
   }
 
   .com-con {
@@ -74,13 +78,16 @@ import { Icon } from "@astrojs/starlight/components";
   }
   .discord:hover {
     background-color: rgb(114, 137, 218) !important;
+    color: var(--sl-community-link) !important;
   }
   .x:hover,
   .github:hover {
     background-color: black;
+    color: var(--sl-community-link) !important;
   }
   .mastodon:hover {
     background-color: #6364ff;
+    color: var(--sl-community-link) !important;
   }
 
   .comm-grid {
@@ -99,4 +106,10 @@ import { Icon } from "@astrojs/starlight/components";
     -webkit-mask-image: radial-gradient(circle at 100%, white, transparent 80%);
     mask-image: radial-gradient(circle at 100%, white, transparent 80%);
   }
-</style>
+
+  @media only screen and (max-width: 1000px) {
+    .connect {
+      display: none;
+    }
+  }
+</style>
diff --git a/website/src/components/Installation.astro b/website/src/components/Installation.astro
@@ -3,32 +3,38 @@ import vscode from "../assets/svg-new/vscode.svg";
 import PackageManagerCommand from "@src/components/PackageManagerCommand.astro";
 ---
 
-<div class="installation">
-  <div class="ins-left">
-    <div class="ins-head">Try Biome</div>
-    <div class="ins-des">
-      Install Biome using your preferred package manager or get it as a VS Code
-      extension.
+<div class="ins-body">
+  <div class="installation">
+    <div class="ins-left">
+      <div class="ins-head">Try Biome</div>
+      <div class="ins-des">
+        Install Biome using your preferred package manager or get it as a VS
+        Code extension.
+      </div>
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=biomejs.biome"
+        class="vscode-ext"
+      >
+        <img src={vscode.src} alt="vscode-ext" />
+         Get VS Code Extension
+      </a>
+      <PackageManagerCommand
+        npm="install --save-dev --save-exact @biomejs/biome"
+        pnpm="add --save-dev --save-exact @biomejs/biome"
+        yarn="add --dev --exact @biomejs/biome"
+        bun="add --dev --exact @biomejs/biome"
+      />
     </div>
-    <a
-      href="https://marketplace.visualstudio.com/items?itemName=biomejs.biome"
-      class="vscode-ext"
-    >
-      <img src={vscode.src} alt="vscode-ext" />
-       Get VS Code Extension
-    </a>
-    <PackageManagerCommand
-      npm="install --save-dev --save-exact @biomejs/biome"
-      pnpm="add --save-dev --save-exact @biomejs/biome"
-      yarn="add --dev --exact @biomejs/biome"
-      bun="add --dev --exact @biomejs/biome"
-    />
-  </div>
 
-  <div class="ext-img"></div>
+    <div class="ext-img"></div>
+  </div>
 </div>
 
 <style>
+  .ins-body {
+    display: flex;
+    justify-content: center;
+  }
   .installation {
     position: relative;
     border: 1px solid var(--sl-color-gray-5);
@@ -82,4 +88,13 @@ import PackageManagerCommand from "@src/components/PackageManagerCommand.astro";
     right: -115px;
     bottom: -29px;
   }
-</style>
+
+  @media only screen and (max-width: 1080px) {
+    .installation {
+      overflow: scroll;
+    }
+    .ext-img {
+      display: none;
+    }
+  }
+</style>