update mobile style, add more base pages

EwanLyon · Aug 9, 2023 · eadf0c6 · eadf0c6
1 parent cafa882
commit eadf0c6
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 42 deletions.
diff --git a/docs/resources/index.md b/docs/resources/index.md
@@ -1,4 +1,14 @@
 # Splits
 
-<!-- The <> around the link allows spaces -->
-[Split Example Link](<./Speedrun Docs Example - Livesplit Split Asset Example.lss>)
+## Any%
+<!-- The < > around the link allows spaces -->
+[Any% Splits Example Link](<./Speedrun Docs Example - Livesplit Split Asset Example.lss>)
+
+| Splits       |
+| ------------ |
+| Level 1      |
+| Level 2      |
+| Level 3      |
+| Level 4      |
+| Level 5      |
+| Level 6      |
diff --git a/docs/resources/mods.md b/docs/resources/mods.md
@@ -0,0 +1,13 @@
+# Mods
+
+## Autosplitter Mod
+
+- [Link to mod](/)
+
+Mod enables LiveSplit to see loading screens and automatically split
+
+## Cutscene Remover
+
+- [Link to mod](/)
+
+Mod removes cutscenes and saves 15 minutes.
diff --git a/docs/resources/saves.md b/docs/resources/saves.md
@@ -0,0 +1,3 @@
+# Saves
+
+- [Skip Opening Cutscene](/)
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -68,11 +68,11 @@ const config = {
             label: 'Resources',
           },
           // {to: '/blog', label: 'Blog', position: 'left'},
-          {
-            href: 'https://github.com/facebook/docusaurus',
-            label: 'GitHub',
-            position: 'right',
-          },
+          // {
+          //   href: 'https://github.com/facebook/docusaurus',
+          //   label: 'GitHub',
+          //   position: 'right',
+          // },
         ],
       },
       prism: {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,50 +6,68 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #b37209;
-  --ifm-color-primary-dark: #a16708;
-  --ifm-color-primary-darker: #986108;
-  --ifm-color-primary-darkest: #7d5006;
-  --ifm-color-primary-light: #c57d0a;
-  --ifm-color-primary-lighter: #ce830a;
-  --ifm-color-primary-lightest: #e9940c;
-  --ifm-background-color: #e5e5e5;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-
-  --speeddocs-primary: #000000;
-  --speeddocs-secondary: #a5b4fc;
-  --speeddocs-accent: #FCA311;
-  --speeddocs-text: #FFFFFF;
-  --logo-filter: ;
+	--ifm-color-primary: #b37209;
+	--ifm-color-primary-dark: #a16708;
+	--ifm-color-primary-darker: #986108;
+	--ifm-color-primary-darkest: #7d5006;
+	--ifm-color-primary-light: #c57d0a;
+	--ifm-color-primary-lighter: #ce830a;
+	--ifm-color-primary-lightest: #e9940c;
+	--ifm-background-color: #e5e5e5;
+	--ifm-code-font-size: 95%;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
+	--speeddocs-primary: #000000;
+	--speeddocs-secondary: #a5b4fc;
+	--speeddocs-accent: #fca311;
+	--speeddocs-text: #ffffff;
+	--logo-filter: ;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #fca311;
-  --ifm-color-primary-dark: #fc9e04;
-  --ifm-color-primary-darker: #ef9603;
-  --ifm-color-primary-darkest: #d58503;
-  --ifm-color-primary-light: #fcad2c;
-  --ifm-color-primary-lighter: #fdb239;
-  --ifm-color-primary-lightest: #fdc261;
-  --ifm-background-color: #000000;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-
-  --speeddocs-primary: #030c20;
-  --speeddocs-secondary: #14213D;
-  --speeddocs-accent: #FCA311;
-  --logo-filter: invert(1);
-
-  --ifm-navbar-background-color: var(--speeddocs-secondary);
-  --ifm-background-color: var(--speeddocs-primary) !important;
+	--ifm-color-primary: #fca311;
+	--ifm-color-primary-dark: #fc9e04;
+	--ifm-color-primary-darker: #ef9603;
+	--ifm-color-primary-darkest: #d58503;
+	--ifm-color-primary-light: #fcad2c;
+	--ifm-color-primary-lighter: #fdb239;
+	--ifm-color-primary-lightest: #fdc261;
+	--ifm-background-color: #000000;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  --ifm-table-border-color: #ffffff;
+  --ifm-table-border-width: 0px;
+
+	--speeddocs-primary: #030c20;
+	--speeddocs-secondary: #14213d;
+	--speeddocs-accent: #fca311;
+	--logo-filter: invert(1);
+
+	--ifm-navbar-background-color: var(--speeddocs-secondary);
+	--ifm-background-color: var(--speeddocs-primary) !important;
 }
 
 .navbar__logo img {
-  filter: var(--logo-filter);
+	filter: var(--logo-filter);
 }
 
 .navbar {
-  border-bottom: 1px solid var(--speeddocs-accent);
+	border-bottom: thin solid var(--speeddocs-accent);
+}
+
+table {
+  display: table;
+  width: fit-content;
+  border-spacing: 0;
+  border-collapse: separate;
+  border-radius: 16px;
+  border: thin solid var(--ifm-table-border-color);
+  overflow: hidden;
+
+  min-width: 150px;
+}
+
+thead {
+  background-color: var(--speeddocs-secondary) !important;
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -33,6 +33,7 @@ main {
   align-items: center;
   justify-content: center;
   width: 100%;
+  padding: 2rem 0.5rem;
 }
 
 .header {
@@ -53,6 +54,8 @@ main {
   margin-bottom: 3rem;
   font-size: 3rem;
   color: var(--ifm-heading-color);
+  text-align: center;
+  text-wrap: balance;
 }
 
 .cards {
@@ -84,6 +87,8 @@ main {
 
 .card:hover {
   text-decoration: none;
+  background-color: var(--speeddocs-secondary) #000;
+  transform: translate(0, 16px);
 }
 
 @keyframes cardFadeIn {
@@ -96,3 +101,40 @@ main {
     opacity: 1;
   }
 }
+
+@media only screen and (max-width: 1440px) {
+  .cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .card {
+    height: 100%;
+  }
+
+  .card p {
+    margin-bottom: 0;
+  }
+}
+
+/* @media only screen and (max-width: 1048px) {
+  .title {
+    font-size: 4.85vw;
+  }
+} */
+
+@media only screen and (max-width: 768px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .card {
+    width: 100%;
+  }
+}