From 6cae3302aaa22c7edae378b3a3a4d44df1d31ab8 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 30 Mar 2024 23:18:37 +0100 Subject: [PATCH] remove `index.less`, refactor unused styles from landing page --- src/components/index-page/hero.tsx | 2 +- src/components/index-page/index.tsx | 2 +- .../predictable-results/index.module.css | 12 ++ .../index.tsx} | 15 +- .../index-page/single-request/index.tsx | 79 ++++---- src/index.less | 168 ------------------ src/pages/_app.tsx | 1 - 7 files changed, 59 insertions(+), 220 deletions(-) create mode 100644 src/components/index-page/predictable-results/index.module.css rename src/components/index-page/{predictable-results.tsx => predictable-results/index.tsx} (88%) delete mode 100644 src/index.less diff --git a/src/components/index-page/hero.tsx b/src/components/index-page/hero.tsx index 0319247ac6..502c341d00 100644 --- a/src/components/index-page/hero.tsx +++ b/src/components/index-page/hero.tsx @@ -5,7 +5,7 @@ import { clsx } from "clsx" export function Hero() { return ( -
+
+

A query language for your API

diff --git a/src/components/index-page/predictable-results/index.module.css b/src/components/index-page/predictable-results/index.module.css new file mode 100644 index 0000000000..44911bbcae --- /dev/null +++ b/src/components/index-page/predictable-results/index.module.css @@ -0,0 +1,12 @@ +.cursor { + animation: cursor-blink 0.5s infinite linear both alternate; + + @keyframes cursor-blink { + 0%, 30% { + opacity: 0; + } + 70%, 100% { + opacity: 1; + } + } +} diff --git a/src/components/index-page/predictable-results.tsx b/src/components/index-page/predictable-results/index.tsx similarity index 88% rename from src/components/index-page/predictable-results.tsx rename to src/components/index-page/predictable-results/index.tsx index 8cc8e60f9f..53a53f7981 100644 --- a/src/components/index-page/predictable-results.tsx +++ b/src/components/index-page/predictable-results/index.tsx @@ -1,6 +1,8 @@ import { useEffect, useRef } from "react" -import { PredictableResult } from "../code-blocks" +import { PredictableResult } from "../../code-blocks" import { Pre } from "nextra/components" +import { clsx } from "clsx" +import classes from "./index.module.css" export function PredictableResults() { const ref = useRef(null) @@ -85,7 +87,7 @@ export function PredictableResults() { 
@@ -93,11 +95,16 @@ export function PredictableResults() {
             {"\n  hero {"}
             {"\n    name"}
             {"\n    height\n    mass".split("").map((char, i) => (
-              
+              
                 {char === "\n" ? 
 : char}
               
             ))}
-            
+            
             {"\n  }"}
             {"\n}"}
diff --git a/src/components/index-page/single-request/index.tsx b/src/components/index-page/single-request/index.tsx index 9eb833fc26..d7d7408ee2 100644 --- a/src/components/index-page/single-request/index.tsx +++ b/src/components/index-page/single-request/index.tsx @@ -1,5 +1,4 @@ import { QueryHeroFriends, ResponseHeroFriends } from "../../code-blocks" -import { clsx } from "clsx" import classes from "./index.module.css" import phoneImage from "public/img/phone.svg" import serverImage from "public/img/server.svg" @@ -7,52 +6,42 @@ import NextImage from "next-image-export-optimizer" export function SingleRequest() { return ( -
-
-
-

- Get many resources
- in a single request -

- {/*Illustration: a query 2 or 3 levels deep]*/} -

- GraphQL queries access not just the properties of one resource but - also smoothly follow references between them. While typical REST - APIs require loading from multiple URLs, GraphQL APIs get all the - data your app needs in a single request. Apps using GraphQL can be - quick even on slow mobile network connections. -

+
+

+ Get many resources
+ in a single request +

+ {/*Illustration: a query 2 or 3 levels deep]*/} +

+ GraphQL queries access not just the properties of one resource but + also smoothly follow references between them. While typical REST APIs + require loading from multiple URLs, GraphQL APIs get all the data your + app needs in a single request. Apps using GraphQL can be quick even on + slow mobile network connections. +

+
+
+ + +
+
-
- - -
- -
-
- -
+
+
-
-
+
+
) } diff --git a/src/index.less b/src/index.less deleted file mode 100644 index febb2a9458..0000000000 --- a/src/index.less +++ /dev/null @@ -1,168 +0,0 @@ -@import "variables.less"; - -// Index page uses a fixed header with an overlay -div.index { - // GraphQLConf 2023 - Remove on Oct 1, 2023 - a.conf-banner { - @apply rounded-none; - background-color: #562556; - background: url("/img/conf/graphql-conf-bg.png") repeat center center; - background-size: cover; - color: #fff; - text-align: center; - max-width: none; - - - color: white; - display: flex; - align-items: center; - justify-content: center; - padding: 30px; - gap: 30px; - margin: 0 auto; - - @media (max-width: 900px) { - flex-direction: column; - gap: 10px; - } - - &:hover { - text-decoration: none; - } - - & > div { - display: flex; - flex-direction: column; - - & > * { - margin: 6px 0; - } - } - - img { - height: 80px; - } - - .button { - .headline-font(@size: 17px, @color: white); - border: solid 1px fadeout(white, 60%); - border-radius: 6px; - color: white; - line-height: 1.0; - transition: background 0.1s ease-out, color 0.1s ease-out; - padding: 0.6em 1.6em; - margin: 0 0.8em; - display: inline-block; - text-decoration: none; - - &:hover, &:focus, &:active { - color: @text-color; - background: white; - text-decoration: none; - } - } - } - // End GraphQLConf 2023 - - header { - display: none; - @media screen and (min-width: 1020px) { - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - } - } - - .hero { - @media screen and (min-width: 1020px) { - min-height: 450px; - max-height: 900px; - min-height: 65vh; - margin-top: -50px; - padding-top: 50px; - z-index: 11; - } - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background: url("/img/graph-wash.png"), #171e26 repeat center center; - } - - section h1, - section h2 { - margin-top: 0; - } - - section.lead { - .body-font(22px); - text-align: center; - max-width: 760px; - padding-top: 6em; - } - - .grayWash { -// background: #e6e8ec; - position: relative; - } - - .darkWash { - background: #2a3746; - box-shadow: - inset 0 30px 30px -30px rgba(0,0,0,0.35), - inset 0 -20px 30px -30px rgba(0,0,0,0.35); - overflow: hidden; - position: relative; - } - - .faux-graphiql { - .cursor { - width: 7px; - height: 15px; - @apply bg-primary/50; - display: inline-block; - margin: -1px 1px -3px; - animation: cursor-blink 0.5s infinite linear both alternate; - - @keyframes cursor-blink { - 0%, 30% { - opacity: 0; - } - 70%, 100% { - opacity: 1; - } - } - } - - .ch { - display: none; - } - } - - section.point4 { - color: white; - flex-direction: column; - padding-bottom: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - h2 { - color: white; - } - - em { - font-family: Palatino, Georgia, serif; - } - - .prose2 { - display: flex; - flex-direction: column; - flex: 1; - justify-content: center; - margin: 0 auto; - max-width: 575px; - text-align: center; - } - } -} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b442d87133..e76f2a8888 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,7 +4,6 @@ import { useRouter } from "next/router" import { useEffect } from "react" import "@/globals.css" import "@/codemirror.less" -import "@/index.less" const robotoFlex = Roboto_Flex({ subsets: ["latin"],