diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift index f361adf..5752621 100644 --- a/Sources/DesignSite/DesignTheme.swift +++ b/Sources/DesignSite/DesignTheme.swift @@ -1,6 +1,6 @@ +import Foundation import Plot import Publish -import Foundation import VaporDesign extension Theme where Site == DesignSite { @@ -11,9 +11,8 @@ extension Theme where Site == DesignSite { private struct VaporThemeHTMLFactory: HTMLFactory { typealias Site = DesignSite - - func makeIndexHTML(for index: Index, - context: PublishingContext) throws -> HTML { + + func makeIndexHTML(for index: Index, context: PublishingContext) throws -> HTML { let isDemo = true let currentSite: CurrentSite = .blog let blogPostData = BlogPostExtraData(length: "15 mins read", author: .init(name: "Tim Condon", imageURL: "/images/author-image-placeholder.png"), publishedDate: "3rd January 2023") @@ -28,13 +27,12 @@ private struct VaporThemeHTMLFactory: HTMLFactory { buildComponentDemo(blogPostData: blogPostData, anotherBlogPostData: anotherBlogPostData, oneMoreBlogPostData: oneMoreBlogPostData, item: item, site: context.site, isDemo: isDemo) SiteFooter(isLocal: true, isDemo: isDemo, currentSite: currentSite) } - + let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: index, context: context, body: body) } - func makeSectionHTML(for section: Section, - context: PublishingContext) throws -> HTML { + func makeSectionHTML(for section: Section, context: PublishingContext) throws -> HTML { if section.title == "Mainpagedemo" { let body: Node = .body { let isDemo = true @@ -43,7 +41,7 @@ private struct VaporThemeHTMLFactory: HTMLFactory { buildMainSiteDemo() SiteFooter(isLocal: true, isDemo: isDemo, currentSite: currentSite) } - + let bodyWithClass = body.class("main-site-main-page") let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: section, context: context, body: bodyWithClass.convertToNode()) @@ -53,86 +51,109 @@ private struct VaporThemeHTMLFactory: HTMLFactory { } } - func makeItemHTML(for item: Item, - context: PublishingContext) throws -> HTML { + func makeItemHTML(for item: Item, context: PublishingContext) throws -> HTML { let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: item, context: context, body: .body()) } - func makePageHTML(for page: Page, - context: PublishingContext) throws -> HTML { + func makePageHTML(for page: Page, context: PublishingContext) throws -> HTML { let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: page, context: context, body: .body()) } - func makeTagListHTML(for page: TagListPage, - context: PublishingContext) throws -> HTML? { + func makeTagListHTML(for page: TagListPage, context: PublishingContext) throws -> HTML? { let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: page, context: context, body: .body()) } - func makeTagDetailsHTML(for page: TagDetailsPage, - context: PublishingContext) throws -> HTML? { + func makeTagDetailsHTML(for page: TagDetailsPage, context: PublishingContext) throws -> HTML? { let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true) return builder.buildHTML(for: page, context: context, body: .body()) } - - func buildComponentDemo(blogPostData: BlogPostExtraData, anotherBlogPostData: BlogPostExtraData, oneMoreBlogPostData: BlogPostExtraData, item: Item, site: Site, isDemo: Bool) -> Component { + + func buildComponentDemo( + blogPostData: BlogPostExtraData, + anotherBlogPostData: BlogPostExtraData, + oneMoreBlogPostData: BlogPostExtraData, + item: Item, + site: Site, + isDemo: Bool + ) -> Component { Div { H1("Component Guide") - + H2("Typography") - + H1("Header 1") H2("Header 2") H3("Header 3") H4("Header 4") H5("Header 5") H6("Header 6") - + H2("Pagination") Pagination(activePage: 1, numberOfPages: 15, pageURL: { pageNumber in - return "/\(pageNumber)" + "/\(pageNumber)" }, isDemo: isDemo) - + H2("HR") - + Node.hr() - + H2("Blog Post Cards") - + Div { Div { - let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "Swift", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML))) + let item2 = Item( + path: "/demo", + sectionID: .posts, + metadata: .init(), + tags: ["Vapor", "Swift", "Framework"], + content: Content( + title: "This is a longer post", + description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", + body: .init(html: demoPostHTML) + ) + ) BlogCard(blogPostData: blogPostData, item: item2, site: site, isDemo: true) }.class("col") Div { - let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "What we're working on", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML))) + let item2 = Item( + path: "/demo", + sectionID: .posts, + metadata: .init(), + tags: ["Vapor", "What we're working on", "Framework"], + content: Content( + title: "This is a longer post", + description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", + body: .init(html: demoPostHTML) + ) + ) BlogCard(blogPostData: anotherBlogPostData, item: item2, site: site, isDemo: true) }.class("col") Div { BlogCard(blogPostData: oneMoreBlogPostData, item: item, site: site, isDemo: true) }.class("col") }.class("row row-cols-1 row-cols-lg-2 g-4") - + H2("Blog Site Title") - + H1("Articles, tools & resources for Vapor devs").class("vapor-blog-page-heading") - + H2("Blog Tag List") - + H4("This is a list on desktop and a drop down menu on mobile") - + Div { Div { let tags: [Tag] = [Tag("Vapor"), Tag("Swift"), Tag("DevOps"), Tag("API"), Tag("Announcements")] - let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2)} + let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2) } return ComponentGroup(BlogTagList(tags: tagsWithPostCount, site: site, selectedTag: nil, totalPosts: 72, isDemo: true)) }.class("col-lg-3") Div().class("col") }.class("row") - + }.class("container") } @@ -164,25 +185,21 @@ private struct VaporThemeHTMLFactory: HTMLFactory { let html = """ import Vapor - let app = try Application(.detect()) - defer { app.shutdown() } + let app = try await Application.make(.detect()) app.get("hello") { req in return "Hello, world!" } - try app.run() - - - - - - - - - - - + try await app.execute() + + + + + + + + """ let code = Node.code(.text(html)).class("language-swift") Node.pre(.component(code)) @@ -198,13 +215,13 @@ private struct VaporThemeHTMLFactory: HTMLFactory { CompanyCard(name: "Allegro", url: "https://allegro.pl", logo: "icon-allegro") }.class("d-flex flex-row flex-wrap align-items-center justify-content-center used-by-companies-items") }.class("used-by-companies") - + Div { H2("Build server side with the tooling you already understand").class("main-site-section-header") Paragraph { Text("No need to learn a language from scratch (or assemble a different team) just for your backend. Vapor is built on Apple’s SwiftNIO so you’ll get to use the language you already know and love.") }.class("caption") - + Div { let vapor = PackageCard(title: "Vapor", description: "Build efficient APIs in a language you love. Create routes, send and receive JSON and build HTTP servers.", icon: "server-04", url: "https://docs.vapor.codes/") let fluent = PackageCard(title: "Fluent", description: "Create models and interact with your database in native, safe Swift code without needing to write any SQL", icon: "database-03", url: "https://docs.vapor.codes/fluent/overview/") @@ -215,42 +232,43 @@ private struct VaporThemeHTMLFactory: HTMLFactory { }) }.class("main-site-packages-grid row row-cols-1 row-cols-lg-2 gx-5") }.class("main-site-packages-list") - + Div { Div { Div { FeatureContainer( - title: "High-performant APIs and servers", - description: "Built with a non-blocking, event-driven architecture, Vapor allows you to build high-performant, scalable APIs and HTTP servers. Using Swift's Concurrency model, you can write clear, maintainable code that's efficient and easy to read.", - url: "https://docs.vapor.codes/", + title: "High-performant APIs and servers", + description: "Built with a non-blocking, event-driven architecture, Vapor allows you to build high-performant, scalable APIs and HTTP servers. Using Swift's Concurrency model, you can write clear, maintainable code that's efficient and easy to read.", + url: "https://docs.vapor.codes/", icon: "icon-dataflow-03" ) }.class("col order-2 order-lg-1 g-lg-0").id("performance") Div { Div { let html = """ - func search (req: Request) async throws -> [Todo] { - let searchTerm = - try req.query.get(String.self, at: "term") + app.get("todos", ":id") { req async throws -> Todo in + let id: UUID = try req.parameters.require("id") - let results = try await - Todo.query(on: req.db) - .filter(\\.$title == searchTerm).all + guard + let todo = try await Todo.find(id, on: req.db) + else { + throw Abort(.notFound) + } - return results + return todo } """ let code = Node.code(.text(html)).class("language-swift") Node.pre(.component(code)) - }.class("code-example") + }.class("code-example code-example-right") Div {}.class("code-outline-right") }.class("col order-1 order-lg-2 g-lg-0 position-relative") }.class("row row-cols-1 row-cols-lg-2 align-items-center") Div { Div { FeatureContainer( - title: "Ship with confidence, even on Fridays", - description: "With Vapor's expressive, protocol oriented design, you'll have peace of mind when shipping your code. With our strong type-safety focus, many errors and problems are caught early on by the compiler.", + title: "Ship with confidence, even on Fridays", + description: "With Vapor's expressive, protocol oriented design, you'll have peace of mind when shipping your code. With our strong type-safety focus, many errors and problems are caught early on by the compiler.", url: "https://docs.vapor.codes/", icon: "icon-brackets-check" ) @@ -258,20 +276,19 @@ private struct VaporThemeHTMLFactory: HTMLFactory { Div { Div { let html = """ - func search (req: Request) async throws -> [Todo] { - let searchTerm = - try req.query.get(String.self, at: "term") + func search(req: Request) async throws -> [Todo] { + let name: String = try req.query.get(at: "name") - let results = try await - Todo.query(on: req.db) - .filter(\\.$number == searchTerm).all() + let results = try await Todo.query(on: req.db) + .filter(\\.$number == name) + .all() return results } """ let code = Node.code(.text(html)).class("language-swift") Node.pre(.component(code)) - }.class("code-example errored") + }.class("code-example errored code-example-left") Div {}.class("code-outline-left") Div { Div { @@ -279,7 +296,7 @@ private struct VaporThemeHTMLFactory: HTMLFactory { }.class("code-error-sidebar") Span( """ - Binary operator '==' cannot be applied to operands of type 'KeyPath>* and 'String' """ ).class("code-error-message") @@ -319,11 +336,36 @@ private struct VaporThemeHTMLFactory: HTMLFactory { }.class("btn btn-primary").class("d-none d-lg-block") }.class("showcase-header") Div { - ShowcaseCard(name: "Sambot", url: "", image: "/images/sambot-card.png", description: "Sambot helps all members of a Mobile App Dev Team to be more productive, reactive and efficient while using Bitrise CI services") - ShowcaseCard(name: "Underway NYC", url: "", image: "/images/underway-nyc-card.png", description: "Quickly locate yourself on the official MTA map of NYC and get real-time train arrivals at that subway stop") - ShowcaseCard(name: "SwiftFiddle", url: "", image: "/images/swiftfiddle-card.png", description: "SwiftFiddle is an online playground for creating, sharing and embedding Swift fiddles") - ShowcaseCard(name: "Transeo", url: "", image: "/images/transeo-card.png", description: "Transeo is an educational readiness platform that helps students determine what they want to do after high school") - ShowcaseCard(name: "Sambot", url: "", image: "/images/sambot-card.png", description: "Sambot helps all members of a Mobile App Dev Team to be more productive, reactive and efficient while using Bitrise CI services") + ShowcaseCard( + name: "Sambot", + url: "", + image: "/images/sambot-card.png", + description: "Sambot helps all members of a Mobile App Dev Team to be more productive, reactive and efficient while using Bitrise CI services" + ) + ShowcaseCard( + name: "Underway NYC", + url: "", + image: "/images/underway-nyc-card.png", + description: "Quickly locate yourself on the official MTA map of NYC and get real-time train arrivals at that subway stop" + ) + ShowcaseCard( + name: "SwiftFiddle", + url: "", + image: "/images/swiftfiddle-card.png", + description: "SwiftFiddle is an online playground for creating, sharing and embedding Swift fiddles" + ) + ShowcaseCard( + name: "Transeo", + url: "", + image: "/images/transeo-card.png", + description: "Transeo is an educational readiness platform that helps students determine what they want to do after high school" + ) + ShowcaseCard( + name: "Sambot", + url: "", + image: "/images/sambot-card.png", + description: "Sambot helps all members of a Mobile App Dev Team to be more productive, reactive and efficient while using Bitrise CI services" + ) }.class("showcase-cards scrolling-wrapper").id("showcase-scrolling-wrapper") Div { Button { @@ -405,9 +447,24 @@ private struct VaporThemeHTMLFactory: HTMLFactory { }.class("btn btn-secondary") }.id("sponsors-header") Div { - SponsorCard(name: "Broken Hands", url: "https://www.brokenhands.io/", logo: "/images/brokenhands.png", description: "Providing Vapor training and consulting for clients around the world.") - SponsorCard(name: "omrd", url: "https://omrd.com", logo: "/images/omrd.png", description: "omrd provides consultation services for dental elated scans.") - SponsorCard(name: "Transeo", url: "https://gotranseo.com", logo: "/images/transeo.png", description: "Transeo is an educational technology company that builds tracking tools for student planning and data analysis.") + SponsorCard( + name: "Broken Hands", + url: "https://www.brokenhands.io/", + logo: "/images/brokenhands.png", + description: "Providing Vapor training and consulting for clients around the world." + ) + SponsorCard( + name: "omrd", + url: "https://omrd.com", + logo: "/images/omrd.png", + description: "omrd provides consultation services for dental elated scans." + ) + SponsorCard( + name: "Transeo", + url: "https://gotranseo.com", + logo: "/images/transeo.png", + description: "Transeo is an educational technology company that builds tracking tools for student planning and data analysis." + ) }.class("sponsors-list") }.class("row").id("sponsors") }.class("container") @@ -472,7 +529,7 @@ struct CreateTodoTitleIndex: AsyncMigration {

And finally a list:

- +
  1. Lectus id duis vitae porttitor enim gravida morbi.
    2. diff --git a/src/scss/vapor/main-site.scss b/src/scss/vapor/main-site.scss index 158ea94..7a034a7 100644 --- a/src/scss/vapor/main-site.scss +++ b/src/scss/vapor/main-site.scss @@ -37,23 +37,33 @@ body { } .main-code-demo { + @include media-breakpoint-up(md) { + .hljs { + font-size: large; + } + } + margin-top: 64px; max-width: 900px; - mask-image: -webkit-gradient(linear, left top, left bottom, - color-stop(0.00, rgba(0, 0, 0, 1)), - color-stop(0.35, rgba(0, 0, 0, 1)), - color-stop(0.50, rgba(0, 0, 0, 0.5)), - color-stop(0.65, rgba(0, 0, 0, 0)), - color-stop(1.00, rgba(0, 0, 0, 0))); - -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, - color-stop(0.00, rgba(0, 0, 0, 1)), - color-stop(0.35, rgba(0, 0, 0, 1)), - color-stop(0.50, rgba(0, 0, 0, 0.5)), - color-stop(0.65, rgba(0, 0, 0, 0)), - color-stop(1.00, rgba(0, 0, 0, 0))); + mask-image: -webkit-gradient(linear, + left top, + left bottom, + color-stop(0, rgb(0, 0, 0)), + color-stop(0.4, rgb(0, 0, 0)), + color-stop(0.6, rgba(0, 0, 0, 0.5)), + color-stop(0.7, rgba(0, 0, 0, 0)), + color-stop(1, rgba(0, 0, 0, 0))); + -webkit-mask-image: -webkit-gradient(linear, + left top, + left bottom, + color-stop(0, rgb(0, 0, 0)), + color-stop(0.4, rgb(0, 0, 0)), + color-stop(0.6, rgba(0, 0, 0, 0.5)), + color-stop(0.7, rgba(0, 0, 0, 0)), + color-stop(1, rgba(0, 0, 0, 0))); @include media-breakpoint-down(md) { - margin-bottom: -40%; + margin-bottom: -20%; } } @@ -71,7 +81,6 @@ body { .main-page-callout-buttons { margin-top: 48px; - } #vapor-hero-logo { @@ -257,10 +266,6 @@ h2 { } } - .col.order-2 { - margin-top: 64px; - } - pre, code { white-space: pre-wrap; @@ -273,7 +278,10 @@ h2 { } .blurry-background { - background: linear-gradient(230.51deg, #23acf040 27.41%, #df3efb40 67%, #70198040 80.12%); + background: linear-gradient(230.51deg, + #23acf040 27.41%, + #df3efb40 67%, + #70198040 80.12%); filter: blur(100px); } @@ -281,6 +289,12 @@ h2 { color: $pink-300; } + .col.order-2 { + @include media-breakpoint-down(md) { + margin-top: 64px; + } + } + .code-outline-right { z-index: -1; width: 85%; @@ -291,8 +305,15 @@ h2 { border: 1px solid transparent; position: absolute; opacity: 0.8; - background: linear-gradient(white, white) padding-box, - linear-gradient(90deg, rgba(148, 168, 178, 0.03) 0%, #F6F7F7 4.21%, rgba(148, 168, 178, 0.888453) 7.98%, #94A8B2 37.5%, rgba(148, 168, 178, 0.117173) 90.41%, rgba(148, 168, 178, 0) 100%) border-box; + background: + linear-gradient(white, white) padding-box, + linear-gradient(90deg, + rgba(148, 168, 178, 0.03) 0%, + #f6f7f7 4.21%, + rgba(148, 168, 178, 0.888453) 7.98%, + #94a8b2 37.5%, + rgba(148, 168, 178, 0.117173) 90.41%, + rgba(148, 168, 178, 0) 100%) border-box; @include media-breakpoint-down(lg) { height: 120%; @@ -311,8 +332,15 @@ h2 { position: absolute; opacity: 0.8; transform: matrix(-1, 0, 0, 1, 0, 0); - background: linear-gradient(white, white) padding-box, - linear-gradient(90deg, rgba(148, 168, 178, 0.01) 0%, #F6F7F7 4.21%, rgba(148, 168, 178, 0.888453) 9.96%, #94A8B2 60.32%, rgba(148, 168, 178, 0.117173) 90.41%, rgba(148, 168, 178, 0.03) 100%) border-box; + background: + linear-gradient(white, white) padding-box, + linear-gradient(90deg, + rgba(148, 168, 178, 0.01) 0%, + #f6f7f7 4.21%, + rgba(148, 168, 178, 0.888453) 9.96%, + #94a8b2 60.32%, + rgba(148, 168, 178, 0.117173) 90.41%, + rgba(148, 168, 178, 0.03) 100%) border-box; @include media-breakpoint-down(lg) { height: 120%; @@ -322,15 +350,15 @@ h2 { .code-error { position: absolute; - background: rgba(179, 35, 95, 0.21); - border: 1px solid rgba(221, 214, 254, 0.1); + background: $code-error-background; + border: 1px solid $code-error-border; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; height: fit-content; width: 48%; display: flex; - bottom: -20%; + bottom: -15%; text-align: left; justify-content: center; right: 15%; @@ -345,7 +373,7 @@ h2 { } .code-error-sidebar { - background: code-error-sidebar-background-red; + background-color: $code-error-background; border-top-left-radius: 24px; border-bottom-left-radius: 24px; text-align: center; @@ -361,11 +389,11 @@ h2 { .code-error-message { color: $grey-700; - font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; + font-family: "SF Mono", SFMono-Regular, ui-monospace, + "DejaVu Sans Mono", Menlo, Consolas, monospace; font-weight: 200; font-size: 16px; line-height: 24px; - /* or 150% */ padding: 3%; width: 85%; @@ -392,20 +420,23 @@ h2 { @include media-breakpoint-down(lg) { margin-top: 60px; } + } + .code-example.code-example-right { @include media-breakpoint-up(lg) { margin-left: 48px; - margin-right: 48px; } } - .errored table { - tr:nth-child(7) { - background: rgba(128, 25, 68, 0.3); + .code-example.code-example-left { + @include media-breakpoint-up(lg) { + margin-right: 64px; } + } - tr:nth-child(8) { - background: rgba(128, 25, 68, 0.3); + .errored table { + tr:nth-child(5) { + background: $code-error-background; } } @@ -430,7 +461,7 @@ h2 { } .code-example-explainer-title { - color: #DF3FEB; + color: $code-explainer-title; } @include media-breakpoint-up(lg) { @@ -513,7 +544,7 @@ h2 { } h3 { - font-family: 'Genera Grotesk'; + font-family: "Genera Grotesk"; font-style: normal; font-weight: 500; font-size: 48px; @@ -522,7 +553,7 @@ h2 { margin: 0; /* or 50px */ letter-spacing: -0.02em; - font-feature-settings: 'salt' on; + font-feature-settings: "salt" on; @include media-breakpoint-down(md) { font-size: 30px; @@ -602,12 +633,12 @@ h2 { background: $grey-100; border: 1px solid rgba($pink-300, 0.1); border-radius: 12px; - font-family: 'Genera Grotesk'; + font-family: "Genera Grotesk"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 150%; - font-feature-settings: 'salt' on; + font-feature-settings: "salt" on; color: $pink-300; } @@ -671,7 +702,9 @@ h2 { z-index: -1; overflow-x: hidden; left: 0; - background: url("../../images/api-docs-background-gradient.svg") no-repeat right, $grey-100; + background: + url("../../images/api-docs-background-gradient.svg") no-repeat right, + $grey-100; max-height: 550px; min-height: 400px; @@ -842,7 +875,7 @@ h2 { width: 60%; margin: 0; letter-spacing: -0.02em; - font-feature-settings: 'salt' on; + font-feature-settings: "salt" on; @include media-breakpoint-down(md) { font-size: 30px; diff --git a/src/scss/vapor/syntax.scss b/src/scss/vapor/syntax.scss index 8e1e9ce..5f2123a 100644 --- a/src/scss/vapor/syntax.scss +++ b/src/scss/vapor/syntax.scss @@ -14,10 +14,11 @@ /* Note: backdrop-filter has minimal browser support */ border-radius: 24px; color: #8194F7; + white-space: pre-wrap; tr:first-child td { padding-top: 48px; - + @include media-breakpoint-down(lg) { padding-top: 24px; } @@ -25,7 +26,7 @@ tr:last-child td { padding-bottom: 48px; - + @include media-breakpoint-down(lg) { padding-bottom: 24px; } @@ -149,7 +150,7 @@ border-collapse: collapse; .hljs-ln-n:before { - content:attr(data-line-number); + content: attr(data-line-number); } } @@ -256,4 +257,4 @@ .hljs-ln-numbers { border-right: 1px solid rgba(221, 214, 254, 0.1); } -} \ No newline at end of file +} diff --git a/src/scss/vapor/vapor.scss b/src/scss/vapor/vapor.scss index a7912f2..12c38c2 100644 --- a/src/scss/vapor/vapor.scss +++ b/src/scss/vapor/vapor.scss @@ -3,94 +3,100 @@ // Create the Vapor color map $custom-colors: ( "blue-500": #135b80, - "blue-400": #1E92CC, + "blue-400": #1e92cc, "blue-300": #40c4ff, "blue-200": #a6e3ff, "blue-100": #e8f6fd, "pink-500": #701980, - "pink-400": #B11FCC, - "pink-300": #DF3EFB, - "pink-200": #EA7EFC, - "pink-100": #F9ECFB, + "pink-400": #b11fcc, + "pink-300": #df3efb, + "pink-200": #ea7efc, + "pink-100": #f9ecfb, "grey-900": #141416, "grey-800": #373953, "grey-700": #666880, - "grey-600": #8385A3, - "grey-500": #9FA1BF, - "grey-400": #C1C2D6, - "grey-300": #DFE0EB, - "grey-200": #F0F0F7, - "grey-100": #FAFAFD, + "grey-600": #8385a3, + "grey-500": #9fa1bf, + "grey-400": #c1c2d6, + "grey-300": #dfe0eb, + "grey-200": #f0f0f7, + "grey-100": #fafafd, ); // Merge the maps $theme-colors: map-merge($theme-colors, $custom-colors); $blue-500: #135b80; -$blue-400: #1E92CC; +$blue-400: #1e92cc; $blue-300: #40c4ff; $blue-200: #a6e3ff; $blue-100: #e8f6fd; $pink-500: #701980; -$pink-400: #B11FCC; -$pink-300: #DF3EFB; -$pink-200: #EA7EFC; -$pink-100: #F9ECFB; +$pink-400: #b11fcc; +$pink-300: #df3efb; +$pink-200: #ea7efc; +$pink-100: #f9ecfb; $grey-900: #141416; $grey-800: #373953; $grey-700: #666880; -$grey-600: #8385A3; -$grey-500: #9FA1BF; -$grey-400: #C1C2D6; -$grey-300: #DFE0EB; -$grey-200: #F0F0F7; -$grey-100: #FAFAFD; -$off-black: #1C1C1F; -$off-light-grey: #EAECF0; +$grey-600: #8385a3; +$grey-500: #9fa1bf; +$grey-400: #c1c2d6; +$grey-300: #dfe0eb; +$grey-200: #f0f0f7; +$grey-100: #fafafd; +$off-black: #1c1c1f; +$off-light-grey: #eaecf0; $off-black-2: #101828; $code-error-sidebar-background-red: #b2235f1a; +$code-explainer-title: #df3feb; +$code-error-background: rgba(179, 35, 95, 0.21); +$code-error-border: rgba(221, 214, 254, 0.1); // Define the fonts: -$font-family-sans-serif: "Genera Grotesk", "Inter", system-ui, helvetica, sans-serif; -$font-family-monospace: "Roboto Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace; +$font-family-sans-serif: "Genera Grotesk", "Inter", system-ui, helvetica, + sans-serif; +$font-family-monospace: "Roboto Mono", ui-monospace, Menlo, Monaco, + "Cascadia Mono", "Segoe UI Mono", "Oxygen Mono", "Ubuntu Monospace", + "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace; // Vapor Fonts @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-Regular.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-Regular.woff2") format("woff2"); } @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-Italic.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-Medium.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-MediumItalic.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-Bold.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Genera Grotesk"; - src: url('../../fonts/GeneraGrotesk-BoldItalic.woff2') format("woff2"); + src: url("../../fonts/GeneraGrotesk-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } @@ -103,7 +109,7 @@ $link-hover-decoration: underline; $card-height: 100%; body { - font-feature-settings: 'salt' on; + font-feature-settings: "salt" on; } #vapor-logo { @@ -152,7 +158,6 @@ body { display: inline-flex; } - a:hover { color: white; text-decoration: none;