diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..82325066 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +downloads.html diff --git a/_docs/index.html b/_docs/index.html index edf72849..e380cdbf 100644 --- a/_docs/index.html +++ b/_docs/index.html @@ -6,55 +6,55 @@ toc_rank: 1001 permalink: /docs/ docs-wide: true -description: > - All of WireMock’s features are accessible via its REST (JSON) interface and its Java API. - Additionally, stubs can be configured via JSON files. Read the full doc here. +description: > + All of WireMock’s features are accessible via its REST (JSON) interface and its Java API. + Additionally, stubs can be configured via JSON files. Read the full doc here. ---

- WireMock is a popular open-source tool for API mock testing, with over 5 million downloads per month. - It can help you to create stable test and development environments, - isolate yourself from flakey 3rd parties - and simulate APIs that don't exist yet. + WireMock is a popular open-source tool for API mock testing, with over 5 + million downloads per month. It can help you to create stable test and + development environments, isolate yourself from flakey 3rd parties and + simulate APIs that don't exist yet.

- - wiremock unit tests - Use API Mocking in your unit tests - - - wiremock fault and latency - Fault and latency injection - - - wiremock record playback - Record / Playback - - + + wiremock unit tests + Use API Mocking in your unit tests + + + wiremock fault and latency + Fault and latency injection + + + wiremock record playback + Record / Playback + + - - WireMock API Templates - Use pre-defined Mock API templates - - - Extending WireMock - Extending WireMock - - + + WireMock API Templates + Use pre-defined Mock API templates + + + Extending WireMock + Extending WireMock + +

By protocol

- WireMock can serve all HTTP-based protocols and REST API. - Through built-in features and extensions, - it provides additional capabilities for widely used protocols. + WireMock can serve all HTTP-based protocols and REST API. Through built-in + features and extensions, it provides additional capabilities for widely used + protocols.

- - - Webhooks and Callbacks - - - - HTTPs - - - - gRPC - - - - GraphQL - + + + Webhooks and Callbacks + + + + HTTPs + + + + gRPC + + + + GraphQL +

By technology

- There are also solutions and guides for particular technologies and frameworks, - provided by the WireMock community and external contributors. + There are also solutions and guides for particular technologies and + frameworks, provided by the WireMock community and external contributors.

- - - Java and JVM - - - - Python - - - - Spring Boot - - - - Node.js - - - - Android - - - - .NET - - - - Golang - - - - Rust - - - - Groovy - - - - Kotlin - - - - Kubernetes - - - - Testcontainers - - - - Quarkus - - - - C/C++ - + + + Java and JVM + + + + Python + + + + Spring Boot + + + + Node.js + + + + Android + + + + .NET + + + + Golang + + + + Rust + + + + Groovy + + + + Kotlin + + + + Kubernetes + + + + Testcontainers + + + + Quarkus + + + + C/C++ +
- - diff --git a/_includes/downloads.html b/_includes/downloads.html index 8bd955f7..9c62ac79 100644 --- a/_includes/downloads.html +++ b/_includes/downloads.html @@ -4,7 +4,6 @@ .codeTabDescription { margin: 0px; padding: 0px; - font-family: "Ubuntu"; font-style: normal; font-weight: normal; font-size: 16px; @@ -12,7 +11,7 @@ } .code-tabs-main-example { - padding: 30px; + padding: 12px; } .code-tabs-main-example .highlight { diff --git a/_includes/masthead.html b/_includes/masthead.html index a320b4a6..e49257ec 100644 --- a/_includes/masthead.html +++ b/_includes/masthead.html @@ -1,253 +1,109 @@ - - - -
-
+
-
-
- -
- - + {% endif %} + + + {% endfor %} + + + +
+ + Go to WM Cloud + + Free forever. No credit card needed +
+ + +
+
+ +
+ {% else %} + {{ menuItem.title }} + {% endif %} + + {% endfor %} +
- -
* Free forever. No credit card needed
diff --git a/_layouts/docs.html b/_layouts/docs.html index 914017ef..b533a4d8 100644 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -46,6 +46,14 @@ transition: 0.3s; } + .codeblock { + margin-bottom: 2rem; + } + + .codeblock [class^="language-"] { + margin-bottom: 0; + } + .codeblock-option-selector { float: left; } @@ -64,7 +72,7 @@ .tabcontent { display: none; - padding: 6px 12px; + padding: 12px; border: 1px solid #ccc; border-top: none; } diff --git a/_sass/_base.scss b/_sass/_base.scss index 90e6982a..1b859867 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -2,6 +2,20 @@ BASE ELEMENTS ========================================================================== */ +@font-face { + font-family: "DMSans"; + src: url("/assets/fonts/DMSans-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "DMSans"; + src: url("/assets/fonts/DMSans-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + body { margin: 0; padding: 0; @@ -15,8 +29,13 @@ body { } } -h1, h2, h3, h4, h5, h6 { - margin: 2em 0 0.5em; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 $p-m 0; line-height: 1.2; font-family: $header-font-family; font-weight: bold; @@ -47,12 +66,13 @@ h6 { font-size: $type-size-6; } -small, .small { +small, +.small { font-size: $type-size-6; } p { - margin-bottom: 1.3em; + margin: 0 0 $p-m; } u, @@ -70,7 +90,15 @@ del a { /* reduce orphans and widows when printing */ -p, pre, blockquote, ul, ol, dl, figure, table, fieldset { +p, +pre, +blockquote, +ul, +ol, +dl, +figure, +table, +fieldset { orphans: 3; widows: 3; } @@ -105,24 +133,38 @@ blockquote { /* links */ -a { - &:focus { - @extend %tab-focus; - } - - &:hover, - &:active { - outline: 0; - } -} +// a { +// color: #0f0f0f; +// text-decoration: none; +// +// &:focus { +// @extend %tab-focus; +// } +// +// &:hover, +// &:active { +// outline: 0; +// } +// +// &:hover { +// color: #3f3f3f; +// } +// } /* code */ -tt, code, kbd, samp, pre { +tt, +code, +kbd, +samp, +pre { font-family: $monospace; + text-wrap: balance; + overflow-wrap: anywhere; } pre { + padding: $p-l; overflow-x: auto; // add scrollbars to wide code blocks } @@ -139,7 +181,8 @@ td > code { border-radius: $border-radius; box-shadow: $box-shadow; - &:before, &:after { + &:before, + &:after { letter-spacing: -0.2em; content: "\00a0"; // non-breaking space } @@ -243,14 +286,12 @@ figcaption { } } - /* Fix IE9 SVG bug */ svg:not(:root) { overflow: hidden; } - /* Navigation lists ========================================================================== */ @@ -298,6 +339,27 @@ nav { Global animation transition ========================================================================== */ -b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser { +b, +i, +strong, +em, +blockquote, +p, +q, +span, +figure, +img, +h1, +h2, +header, +input, +a, +tr, +td, +form button, +input[type="submit"], +.btn, +.highlight, +.archive__item-teaser { transition: $global-transition; -} \ No newline at end of file +} diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss index 90b288a7..c0118d09 100644 --- a/_sass/_buttons.scss +++ b/_sass/_buttons.scss @@ -8,12 +8,12 @@ .btn { /* default button */ - display: inline-block; + display: block; margin-bottom: 0.25em; - padding: 0.5em 1em; + padding: $p-m $p-l; color: #fff !important; font-family: $sans-serif; - font-size: $type-size-6; + font-size: var(--font-size, $type-size-6); font-weight: bold; text-align: center; text-decoration: none; @@ -23,7 +23,12 @@ cursor: pointer; &:hover { - background-color: mix(white, #000, 20%); + transform: scale(1.05); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24); + } + + @include breakpoint($medium) { + display: inline-block; } .icon { @@ -48,14 +53,9 @@ /* for dark backgrounds */ &--inverse { - color: $gray !important; + color: $text-color !important; border: 1px solid $light-gray !important; // override background-color: #fff; - - &:hover { - color: #fff !important; - border-color: $gray; - } } /* light outline */ @@ -118,11 +118,8 @@ /* social buttons */ - $social: - (facebook, $facebook-color), - (twitter, $twitter-color), - (google-plus, $google-plus-color), - (linkedin, $linkedin-color); + $social: (facebook, $facebook-color), (twitter, $twitter-color), + (google-plus, $google-plus-color), (linkedin, $linkedin-color); @each $socialnetwork, $color in $social { &--#{$socialnetwork} { diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 00000000..aca87434 --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,34 @@ +.codeTabDescription { + margin: 0px; + padding: 0px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: #000; +} + +.code-tabs-main-example .highlight { + background: #f0f5ff; + border: 1px solid #d2dff9; + box-sizing: border-box; + border-radius: 0; +} + +.code-tabs-main-example pre { + text-align: left; +} + +.codeSnippet { + display: none; + width: 100%; + position: relative; + + @include breakpoint($medium) { + padding: $p-l; + } + + &.activeCodeSnippet { + display: block; + } +} diff --git a/_sass/_footer.scss b/_sass/_footer.scss index 9aa55587..ea568bac 100644 --- a/_sass/_footer.scss +++ b/_sass/_footer.scss @@ -4,75 +4,75 @@ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap"); @font-face { - font-family: SF_Pro; - src: url(../fonts/SF_Pro.ttf); + font-family: SF_Pro; + src: url(../fonts/SF_Pro.ttf); } .page__footer { - @include full(); - @include clearfix; + @include full(); + @include clearfix; - color: $dark-milk; - animation: intro 0.3s both; - animation-delay: 0.45s; - background-color: $general-background; + color: $dark-milk; + animation: intro 0.3s both; + animation-delay: 0.45s; + background-color: #f8f7f9; - footer { - @include container; - @include clearfix; - margin-top: 2em; - padding: 0 1em 2em; + footer { + @include container; + @include clearfix; + margin-top: 2em; + padding: 0 1em 2em; - @include breakpoint($x-large) { - max-width: $x-large; - } + @include breakpoint($x-large) { + max-width: $x-large; } + } - a { - color: inherit; - text-decoration: none; + a { + color: inherit; + text-decoration: none; - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; } + } - .fa { - color: mix(#fff, $gray, 25%); - } + .fa { + color: mix(#fff, $gray, 25%); + } } .page__footer-copyright { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; - .short-logo { - width: 114px; - height: 39px; - } + .short-logo { + width: 114px; + height: 39px; + } - .footer-copyright-description { - margin-top: 0.8rem; - font-size: 14px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - } + .footer-copyright-description { + margin-top: 0.8rem; + font-size: 14px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + } - .footer-social-links { - display: flex; - align-items: center; - list-style: none; - margin: 1.2rem 0 0 0; - padding: 0; + .footer-social-links { + display: flex; + align-items: center; + list-style: none; + margin: 1.2rem 0 0 0; + padding: 0; - li { - margin: 0 0 0 15px !important; + li { + margin: 0 0 0 15px !important; - &:first-child { - margin-left: 0 !important; - } - } + &:first-child { + margin-left: 0 !important; + } } + } } diff --git a/_sass/_homepage.scss b/_sass/_homepage.scss index 48c74b43..5e35a3e6 100644 --- a/_sass/_homepage.scss +++ b/_sass/_homepage.scss @@ -1,1371 +1,1210 @@ html { - scroll-behavior: smooth; + scroll-behavior: smooth; } .home-header-wrapper { - background: linear-gradient(#fff 100%, rgba(210, 223, 249, 0)); + background: linear-gradient(#fff 100%, rgba(210, 223, 249, 0)); + position: relative; + margin-left: auto; + margin-right: auto; - @media (min-width: 2000px) { - width: 1280px; - } - position: relative; - margin-left: auto; - margin-right: auto; + .home-header-container { + display: flex; + flex-direction: column; + margin-top: 2.5rem; + padding: 0; + } + @include breakpoint($medium) { .home-header-container { - display: flex; - flex-direction: row; - margin-top: 2.5rem; - padding: 0; - - @media (max-width: 1023px) { - flex-direction: column; - } + gap: $p-3xl; + flex-direction: row; } -} - -.wiremockIMGwidth { - width: 200px; + .home-header-hero-text { + flex: 0 1 50%; + } + } } #openSourceCard:hover { - border: 1px solid #18253d; + border: 1px solid #18253d; } #wiremockCloudCard:hover { - border: 1px solid #f59121; + border: 1px solid #f59121; } .container { + max-width: 100vw; + padding: 0 $p-l; + + @include breakpoint($medium) { + padding: 0; max-width: 1280px; margin-left: auto; margin-right: auto; - padding: 0 1em; + } } .btn-card-info { - cursor: pointer; - height: fit-content; - background: #18253d; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 16px; - color: #fff; - padding: 5px 10px; - width: fit-content; - text-decoration: none !important; + cursor: pointer; + height: fit-content; + background: #18253d; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: #fff; + padding: 5px 10px; + width: fit-content; + text-decoration: none !important; } .btn-card-info:hover { - cursor: pointer; - text-decoration: none !important; + cursor: pointer; + text-decoration: none !important; } .btnDownload { - background: #f59121; - text-decoration: none; - font-weight: 700; -} -.btnGetStarted { - background: #0fb2ef; + background: #f59121; + text-decoration: none; + font-weight: 700; } .btnLearnMore { - margin-left: 20px; - color: #0fb2ef; - background: #f0f5ff; - border: 1px solid rgba(15, 178, 239, 0.5); + margin-left: 20px; + color: #0fb2ef; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); } .dot { - margin-top: 4px; - height: 12px; - width: 12px; - margin-left: 3px; - background-color: #bbb; - border-width: 1px; - border-radius: 50%; - display: inline-block; + margin-top: 4px; + height: 12px; + width: 12px; + margin-left: 3px; + background-color: #bbb; + border-width: 1px; + border-radius: 50%; + display: inline-block; } .fake-osx-chrome { - width: 100%; - box-shadow: 3px 3px 7px 0px; - border-radius: 8px; + width: 100%; + box-shadow: 3px 3px 7px 0px; + border-radius: 8px; } .fake-osx-chrome-title-bar { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - padding: 10px; - padding-left: 15px; - background-color: #223746; - - &::after { - content: ""; - display: table; - clear: both; - } + border-top-left-radius: 8px; + border-top-right-radius: 8px; + padding: 10px; + padding-left: 15px; + background-color: #223746; + + &::after { + content: ""; + display: table; + clear: both; + } } .btn-primary { - cursor: pointer; - width: fit-content; - padding: 8px 20px; - background: #0fb2ef; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 20px; - color: #fff; - border: none; - margin-top: 5px; - text-decoration: none; - - &--mocklab { - background: $mocklab-dark-green; - } + cursor: pointer; + width: fit-content; + padding: 8px 20px; + background: #0fb2ef; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 20px; + color: #fff; + border: none; + margin-top: 5px; + text-decoration: none; + + &--mocklab { + background: $mocklab-dark-green; + } } .btn-secondary { - cursor: pointer; - background: #F0F5FF; - border: 1px solid rgba(15, 178, 239, 0.5); - border-radius: 4px; - padding: 7px 20px; - color: #0FB2EF; - font-family: 'Ubuntu'; - font-style: normal; - font-weight: 500; - font-size: 20px; - text-decoration: none; - margin-top: 5px; - align-items: center; - - &--mocklab { - color: $mocklab-dark-green; - background: $mocklab-light-green; - border-color: $mocklab-dark-green; - } + cursor: pointer; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); + border-radius: 4px; + padding: 7px 20px; + color: #0fb2ef; + font-style: normal; + font-weight: 500; + font-size: 20px; + text-decoration: none; + margin-top: 5px; + align-items: center; + + &--mocklab { + color: $mocklab-dark-green; + background: $mocklab-light-green; + border-color: $mocklab-dark-green; + } } .summary-header-stats { - display: flex; - align-items: center; - margin-left: 20px; - - >a { - padding-left: 10px; - } + display: flex; + align-items: center; + gap: $p-m; + margin-bottom: $p-m; } - + .whats-hot { - border-color: #0FB2EF; - border-width: 5px; - border-style: groove; - background-color: #F7FAFF; - - >h2 { - padding: 10px; - margin: 0; - } - - >p { - padding: 0px; - margin-bottom: 0; - } + padding: $p-l; + border-radius: 10px; + background-color: $lighter-blue; } .home-header-hero-text { - width: 50%; - @media (max-width: 1023px) { - width: 100%; - } - - padding: 40px; - padding-bottom: 10px; - padding-top: 10px; - - h1 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - font-size: 28px; - color: #18253d; - text-align: left; - word-break: break-word; - - @media (min-width: 920px) { - font-size: 60px; - } - } - - p { - text-align: left; - font-family: "Ubuntu"; - font-size: 20px; - font-style: normal; - font-weight: 400; - color: #18253d; - margin-top: 1rem; - } + margin-bottom: $p-l; } .home-header-hero-image { - width: 50%; - @media (max-width: 1023px) { - width: 100%; - } - border-radius: 5px; - padding: 40px; - - figure.highlight { - border: none; - border-radius: 0; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - // background-color: #f8fafe; - background-color: #223746; - box-shadow: none; - margin-top: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 1.5rem; - padding-right: 1.5rem; - - &::before { - content: ""; - background-color: transparent; - } + width: 50%; + @media (max-width: 1023px) { + width: 100%; + } + border-radius: 5px; + padding: 40px; - code.language-json { - .p,.w,.nl { - color: #dededd; - } - } - } + figure.highlight { + border: none; + border-radius: 0; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + // background-color: #f8fafe; + background-color: #223746; + box-shadow: none; + margin-top: 0; + padding-top: 0; + padding-bottom: 0; + padding-left: 1.5rem; + padding-right: 1.5rem; + + &::before { + content: ""; + background-color: transparent; + } + + code.language-json { + .p, + .w, + .nl { + color: #dededd; + } + } + } } .home-header-footer { - display: flex; - justify-content: center; - padding: 2.5rem 0; + display: flex; + justify-content: center; + padding: 2.5rem 0; - .wiremock-card-info { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - width: 267px; - height: 244px; - background-color: #fff; - border: 1px solid #d2dff9; - border-radius: 8px; - padding: 20px; - margin-left: 30px; - filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); - - .wiremock-card-info-header { - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } + .wiremock-card-info { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 267px; + height: 244px; + background-color: #fff; + border: 1px solid #d2dff9; + border-radius: 8px; + padding: 20px; + margin-left: 30px; + filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); + + .wiremock-card-info-header { + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .link-card-info { + display: flex; + a { + text-decoration: none; + margin-left: 5px; + margin-right: 5px; + cursor: pointer; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 600; + font-size: 16px; + color: #18253d; + border-bottom: 1px solid #18253d; + padding-bottom: 1px; - .link-card-info { - display: flex; - a { - text-decoration: none; - margin-left: 5px; - margin-right: 5px; - cursor: pointer; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 600; - font-size: 16px; - color: #18253d; - border-bottom: 1px solid #18253d; - padding-bottom: 1px; - - &:hover { - text-decoration: none; - } - } + &:hover { + text-decoration: none; } + } + } - h2 { - font-size: 36px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - color: #000000; - padding-top: 10px !important; - } + h2 { + font-size: 36px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + color: #000000; + padding-top: 10px !important; + } - p { - text-align: center; - min-height: 74px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 12px; - color: $dark-milk; - } + p { + text-align: center; + min-height: 74px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $dark-milk; + } - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; + } - &:last-of-type { - a { - color: #f59121; - } - } + &:last-of-type { + a { + color: #f59121; + } } + } } .wiremock-cloud-callout-bullets { + padding-left: 0; + + li { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 18px; + color: #0c0b1a; + margin: 0; padding-left: 0; - - li { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 18px; - color: #0c0b1a; - margin: 0; - padding-left: 0; - list-style-type: none; - padding: 5px 0 5px 0; - } + list-style-type: none; + padding: 5px 0 5px 0; + } } .logos-title { - padding-top: 70px; - font-family: 'Ubuntu'; - color: #18253d; - font-size: 24px; - margin: auto; - width: 200px; - font-weight: 300; + padding-top: 70px; + font-family: "Ubuntu"; + color: #18253d; + font-size: 24px; + margin: auto; + width: 200px; + font-weight: 300; } .clients-wrapper { - margin-top: 15px; - margin-bottom: 50px; + margin-top: 15px; + margin-bottom: 50px; + display: flex; + justify-content: center; + + .client-wrapper { display: flex; + height: 60px; + align-items: center; justify-content: center; + margin-left: 30px; - .client-wrapper { - display: flex; - height: 60px; - align-items: center; - justify-content: center; - margin-left: 30px; - - img { - height: 70%; - } + img { + height: 70%; + } - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; } + } } .code-tabs-wrapper { - margin-bottom: 70px; - background-color: $general-background; - border-radius: 50px; - width: 100%; - padding: 0; + margin-bottom: 70px; + background-color: $general-background; + border-radius: 50px; + width: 100%; + padding: 0; - .code-tabs-row { - display: flex; + .code-tabs-row { + display: flex; + } + .code-tabs-sidebar-wrapper { + display: none; + + @include breakpoint($medium) { + display: block; } - .code-tabs-sidebar-wrapper { - border-right: 1px solid #d2dff9; + } + .code-tabs-sidebar { + margin: 45px 45px; + width: 170px; + } + + .code-tabs-example-card { + display: flex; + align-items: center; + padding: 0 10px; + width: 60px; + height: 60px; + background-color: #fff; + filter: drop-shadow(0px 30px 40px #d2dff9); + border-radius: 100px; + margin-top: 20px; + + &:nth-child(even) { + margin-left: auto; } - .code-tabs-sidebar { - margin: 45px 45px; - width: 170px; + &:first-child { + margin-top: 0; } + } - .code-tabs-example-card { + .code-tabs-main { + border-radius: 10px; + width: 100%; + background-color: #f8fafe; + + .code-tabs-main-wrapper { + margin: $p-l; + + ul { + margin: 0 0 $p-l 0; + padding: 0; display: flex; - align-items: center; - padding: 0 10px; - width: 60px; - height: 60px; - background-color: #fff; - filter: drop-shadow(0px 30px 40px #d2dff9); - border-radius: 100px; - margin-top: 20px; - &:nth-child(even) { - margin-left: auto; - } - &:first-child { - margin-top: 0; + @include breakpoint($medium) { + margin: 0; } - } - .code-tabs-main { - border-top-right-radius: 50px; - width: 1018px; - background-color: #f8fafe; + li { + display: inline; + position: relative; + cursor: pointer; + padding: 14px 20px; + margin: 0; + color: #18253d; - .code-tabs-main-wrapper { - margin: 45px 45px; - @media (max-width: 800px) { - margin: 15px; - } + @include breakpoint($medium) { + margin-left: 20px; + } - ul { - padding: 0 0 10px 0; - margin: 0; - list-style: none; - - li { - display: inline; - position: relative; - cursor: pointer; - padding: 14px 20px; - margin: 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 16px; - color: #18253d; - margin-left: 20px; - // z-index: -1; - - &:first-child { - margin-left: 0; - } - - &.active-tab-example { - // z-index: 1; - // position: absolute; - font-weight: bold; - background-color: #fff; - border: 1px solid #d2dff9; - border-bottom: 1px solid #fff; - border-radius: 8px 8px 0px 0px; - } - } - } + &:first-child { + margin-left: 0; + } - .code-tabs-main-example { - border: 1px solid #d2dff9; - border-radius: 0px 7px 7px 7px; - background-color: #fff; - min-height: 420px; + &.active-tab-example { + position: relative; + font-weight: bold; + background-color: #fff; + border: 1px solid #d2dff9; + border-radius: 8px; + + @include breakpoint($medium) { + border: 1px solid #d2dff9; + border-bottom: 1px solid #fff; + border-radius: 8px 8px 0px 0px; + + &:after { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + right: 0; + height: 1px; + background: #fff; + } } + } } - } + } - .code-tabs-footer { - display: flex; - align-items: center; - justify-content: center; - background: #d2dff9; - border-bottom-right-radius: 50px; - border-bottom-left-radius: 50px; - height: 100px; - - .ctIMGWrapper { - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 50%; - padding: 5px; - } + .code-tabs-main-example { + border: 1px solid #d2dff9; + border-radius: 7px; + background-color: #fff; + min-height: 420px; - .ctDownloadBTN { - display: flex; - align-items: center; - background: #18253d; - border-radius: 4px; - padding: 5px 10px; - text-decoration: none; - - span { - margin-left: 10px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - font-size: 16px; - color: #fff; - } - } - .ct-github-info-wrapper { - display: flex; - margin: 0 40px; + @include breakpoint($medium) { + border-radius: 0px 7px 7px 7px; } + } + } + } - .github-card-info-wrapper { - display: flex; - align-items: center; - margin-left: 20px; + .code-tabs-footer { + display: flex; + align-items: center; + justify-content: center; + background: #d2dff9; + border-bottom-right-radius: 50px; + border-bottom-left-radius: 50px; + height: 100px; + + .ctIMGWrapper { + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border-radius: 50%; + padding: 5px; + } + + .ctDownloadBTN { + display: flex; + align-items: center; + background: #18253d; + border-radius: 4px; + padding: 5px 10px; + text-decoration: none; + + span { + margin-left: 10px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + font-size: 16px; + color: #fff; + } + } + .ct-github-info-wrapper { + display: flex; + margin: 0 40px; + } - &:first-child { - margin-left: 0; - } - } + .github-card-info-wrapper { + display: flex; + align-items: center; + margin-left: 20px; - .github-card-info { - display: flex; - align-items: center; - border-radius: 6px 0px 0px 6px; - padding: 0 10px; + &:first-child { + margin-left: 0; + } + } - img { - padding-right: 5px; - height: 30px; - } + .github-card-info { + display: flex; + align-items: center; + border-radius: 6px 0px 0px 6px; + padding: 0 10px; - span { - font-family: SF_Pro; - font-style: normal; - font-weight: 600; - font-size: 12px; - padding: 5px 0; - } - } - .github-card-info-right { - border-left: 1px solid rgba(27, 31, 35, 0.15); - background-color: #fff; - border-radius: 0px 6px 6px 0px; - padding: 0 10px; - display: flex; - - span { - font-family: SF_Pro; - font-style: normal; - font-weight: 600; - font-size: 12px; - padding: 5px 0; - } - } + img { + padding-right: 5px; + height: 30px; + } + + span { + font-family: SF_Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + padding: 5px 0; + } + } + .github-card-info-right { + border-left: 1px solid rgba(27, 31, 35, 0.15); + background-color: #fff; + border-radius: 0px 6px 6px 0px; + padding: 0 10px; + display: flex; + + span { + font-family: SF_Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + padding: 5px 0; + } } + } } .wiremock-cloud__buttons { - display: flex; - flex-direction: column; - gap: 5px; - margin-top: 10px; - - @media (min-width: 768px) { - flex-direction: row; - } + display: flex; + flex-direction: column; + gap: $p-m; + margin-top: $p-xl; + + @media (min-width: 768px) { + flex-direction: row; + } } .wiremock-cloud-wrapper, .wiremock-cloud-robot-wrapper { - margin-top: 50px; - display: flex; - justify-content: space-evenly; - - background: #E4F0F7; - border-radius: 50px; - margin-bottom: 4rem; + margin-top: 50px; + display: flex; + align-items: center; + background: $lighter-blue; + border-radius: 10px; + margin-bottom: 4rem; + padding: 0; + gap: $p-m; + + .wiremock-cloud-img-wrapper { + flex: 0 0 50%; + } + + .mocklab-callout-bullets { + list-style: none; + margin: 0; padding: 0; - .wiremock-cloud-img-wrapper { - width: 536px; - padding: 65px 0; - } - - .wiremock-cloud-img { - width: 100%; - } - - - .wiremock-cloud-vLine { - border-left: 1px solid #d2dff9; + li { + padding-left: $p-l; + background: url("/assets/svg/bullet.svg") no-repeat left center; } + } - .wiremock-cloud-details { - width: 536px; - padding: 65px 0; - display: flex; - flex-direction: column; - justify-content: space-between; - - h2 { - margin: 0; - padding: 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - font-size: 50px; - color: #18253d; - } + .wiremock-cloud-img { + width: 100%; + padding: $p-l; + } - p { - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 16px; - color: #18253d; - } + .wiremock-cloud-vLine { + border-left: 1px solid #d2dff9; + } - .p-margin-wiremock-cloud{ - margin-top: 20px; - } + .wiremock-cloud-details { + flex: 0 0 50%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: $p-l; - .p-width-wiremock-cloud { - width: 65%; - &:last-of-type { - margin-bottom: 0; - } - } - .wiremock-cloud-links-wrapper { - display: flex; - margin-top: 30px; - } + .logo { + display: block; + width: 40%; + margin-bottom: $p-m; } - .enterprise { - color: #3db2ef; + .heading { + margin-bottom: $p-l; } - .wiremock-cloud-robot { - background: linear-gradient(201.62deg, #ffffff -3.51%, #d2dff9 86.83%); - width: 50%; - border-top-left-radius: 50px; - border-bottom-left-radius: 50px; + .p-margin-wiremock-cloud { + margin-top: 20px; } - .details-custom { - justify-content: unset; - padding-bottom: 30px; - h1 { - margin: 15px 0; - } + .p-width-wiremock-cloud { + width: 65%; + &:last-of-type { + margin-bottom: 0; + } } - - .robot-subtitle { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 20px; - color: #000000; - margin-top: 0; + .wiremock-cloud-links-wrapper { + display: flex; + margin-top: 30px; } + } - .enterpirse-feature { - display: flex; - align-items: center; - margin-bottom: 16px; - - .enterprise-bullet { - width: 4px; - height: 7px; - background: #e9ebf8; - border: 0.5px solid #0c0b1a; - border-radius: 20px; - } + .enterprise { + color: #3db2ef; + } - h4 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 16px; - color: #0c0b1a; - margin: 0; - padding-left: 10px; - } - } - .btn-schedule-call { - cursor: pointer; - width: fit-content; - padding: 5px 20px; - background: #0fb2ef; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 16px; - color: #fff; - margin-top: 24px; - } -} + .wiremock-cloud-robot { + background: linear-gradient(201.62deg, #ffffff -3.51%, #d2dff9 86.83%); + width: 50%; + border-top-left-radius: 50px; + border-bottom-left-radius: 50px; + } -.wiremock-cloud-robot-wrapper { - justify-content: unset; -} + .robot-subtitle { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 20px; + color: #000000; + margin-top: 0; + } -.key-features-wrapper { - background: rgba(240, 245, 255, 0.5); - padding: 70px 0; - .keyFeaturesTXT { - margin: 0; - text-align: center; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - color: #18253d; - font-size: 28px; - border-bottom: none; + .enterpirse-feature { + display: flex; + align-items: center; + margin-bottom: 16px; - @media (min-width: 768px) { - font-size: 50px; - } + .enterprise-bullet { + width: 4px; + height: 7px; + background: #e9ebf8; + border: 0.5px solid #0c0b1a; + border-radius: 20px; } - .keyFeaturesInfo { - text-align: center; - padding: 20px 20px 30px 20px; - max-width: 1150px; - margin: 0 auto; + + h4 { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 16px; + color: #0c0b1a; + margin: 0; + padding-left: 10px; } - .key-features-grid { - display: grid; - grid-template-columns: auto auto auto; - justify-items: center; - row-gap: 90px; + } + .btn-schedule-call { + cursor: pointer; + width: fit-content; + padding: 5px 20px; + background: #0fb2ef; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #fff; + margin-top: 24px; + } +} + +.wiremock-cloud-robot-wrapper { + justify-content: unset; +} + +.key-features-wrapper { + padding: $p-2xl; + color: $light-gray; + background: #0b4f6c; + + .keyFeaturesTXT { + margin-bottom: $p-l; + font-size: $type-size-1; + + @media (min-width: 768px) { + font-size: 50px; } - .padding-grid-top { - padding-top: 50px !important; + } + + .keyFeaturesInfo { + margin-bottom: $p-xl; + text-align: center; + } + + .padding-grid-top { + padding-top: 50px !important; + } + + .key-features-card { + text-align: center; + margin-bottom: $p-l; + font-weight: 500; + + .key-features__icon { + margin-bottom: $p-l; + display: inline-block; + padding: $p-m; + border-radius: 100%; + background: linear-gradient(140deg, #ffffff, #ffffff33, #ffffff00); + + img { + filter: brightness(0) invert(1); + } } - .key-features-card { - display: flex; - flex-direction: column; - align-items: center; - width: 288px; - height: 158px; - background-color: #fff; - border: 1px solid #d2dff9; - border-radius: 8px; - padding: 20px; - filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); - - img { - width: 40px; - height: 40px; - margin-bottom: 20px; - } - p { - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 15px; - margin: 0; - padding: 0; - color: #000; - text-align: center; - } + p { + margin: 0 $p-l; } - .key-features-btn-full { - display: flex; - justify-content: center; - padding-top: 20px; - padding-bottom: 40px; + } + + @include breakpoint($medium) { + text-align: center; + + .key-features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + gap: $p-l; + margin: 0 $p-xl; } -} -.downloads-wrapper { - background: white; - padding: 70px 0; - padding-bottom: 20px; + .key-features-card { + text-align: left; + width: 100%; + + p { + margin: 0; + } + } + } } -.faq-wrapper { - background: rgba(240, 245, 255, 0.5); - padding: 70px 0; - padding-bottom: 20px; +.downloads-wrapper { + margin-top: $p-3xl; + margin-bottom: $p-3xl; } .apis-wrapper { - padding: 70px 0; + padding: 70px 0; + display: flex; + justify-content: center; + flex-direction: column; + .apisTxt { + margin: 0; + padding: 0; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + text-align: center; + color: #18253d; + font-size: 2rem; + border-bottom: none; + } + .apisDescription { + margin-top: 5px; + font-family: "Ubuntu"; + font-style: normal; + text-align: center; + color: #18253d; + padding-bottom: 50px; + } + .apis-card-wrapper { + display: grid; + grid-template-columns: auto auto auto auto auto; + justify-items: center; + } + .apis-card { display: flex; - justify-content: center; flex-direction: column; - .apisTxt { - margin: 0; - padding: 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - text-align: center; - color: #18253d; - font-size: 2rem; - border-bottom: none; - } - .apisDescription { - margin-top: 5px; - font-family: "Ubuntu"; - font-style: normal; - text-align: center; - color: #18253d; - padding-bottom: 50px; - } - .apis-card-wrapper { - display: grid; - grid-template-columns: auto auto auto auto auto; - justify-items: center; + align-items: center; + justify-content: center; + padding-top: 20px; + background-color: #fff; + width: 220px; + height: 226px; + border: 1px solid #d2dff9; + box-sizing: border-box; + border-radius: 8px; + filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); + + .apis-card-img-wrapper { + width: 60px; + height: 60px; + img { + width: 57px; + height: 54px; + } } - .apis-card { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding-top: 20px; - background-color: #fff; - width: 220px; - height: 226px; - border: 1px solid #d2dff9; - box-sizing: border-box; - border-radius: 8px; - filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); - - .apis-card-img-wrapper { - width: 60px; - height: 60px; - img { - width: 57px; - height: 54px; - } - } - h4 { - margin: 0; - padding: 10px 10px; - text-align: center; - color: #000; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 16px; - } - p { - text-align: center; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 12px; - color: #000; - } + h4 { + margin: 0; + padding: 10px 10px; + text-align: center; + color: #000; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 16px; } + p { + text-align: center; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: #000; + } + } } .signup-modal-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 900; - background-color: rgba(7, 0, 71, 0.5); - + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 900; + background-color: rgba(7, 0, 71, 0.5); } .signup-modal-overlay.activeModalForm { - display: block; + display: block; } .signup-modal.activeModalForm { - display: flex; + display: flex; } .signup-modal { - position: relative; - display: none; - position: fixed; - background-color: #fff; - z-index: 1000; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - border-radius: 4px; - - .close-modal-icon { - cursor: pointer; - width: 20px; - height: 20px; - position: absolute; - right: 10px; - top: 10px; - border-radius: 50px; - background: #E9EBF8; - border: 1px solid #BCCEFD; + position: relative; + display: none; + position: fixed; + background-color: #fff; + z-index: 1000; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 4px; + + .close-modal-icon { + cursor: pointer; + width: 20px; + height: 20px; + position: absolute; + right: 10px; + top: 10px; + border-radius: 50px; + background: #e9ebf8; + border: 1px solid #bccefd; - display: flex; - align-items: center; - justify-content: center; - } + display: flex; + align-items: center; + justify-content: center; + } - @media (max-width: 1140px) { - width: 1020px; - } - @media (max-width: 1023px) { - justify-content: center; - width: 80%; - height: 90%; - padding: 30px; - overflow: hidden; - } - @media (min-height: 760px) { - height: 720px; - } + @media (max-width: 1140px) { + width: 1020px; + } + @media (max-width: 1023px) { + justify-content: center; + width: 80%; + height: 90%; + padding: 30px; + overflow: hidden; + } + @media (min-height: 760px) { + height: 720px; + } } .signup-modal-robot { - width: 718px; - height: 720px; - background: url(../../images/signupModalRobot.png) no-repeat, - linear-gradient(140deg, #ffffff 11.99%, #d2dff9 84.46%); - background-position: bottom right; - padding-left: 50px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - - h2 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 26px; - color: #7d93bd; - } - h4 { - margin: 10px 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 40px; - color: #18253d; - } - span { - color: #3db2ef; - } - - p { - font-family: 'Ubuntu'; - font-style: normal; - font-weight: 400; - font-size: 17px; - color: #494677; - } - - .box-description-modal, - .box-description-modal-second { - margin-top: 120px; - width: 337px; - height: 129px; - background: linear-gradient( - 95.55deg, - #ffffff 2.1%, - rgba(255, 255, 255, 0) 100% - ); - border-radius: 16px; - padding: 1px 20px; - } + width: 718px; + height: 720px; + background: + url(../../images/signupModalRobot.png) no-repeat, + linear-gradient(140deg, #ffffff 11.99%, #d2dff9 84.46%); + background-position: bottom right; + padding-left: 50px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + + h2 { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 26px; + color: #7d93bd; + } + h4 { + margin: 10px 0; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 40px; + color: #18253d; + } + span { + color: #3db2ef; + } - .box-description-modal-second { - margin-top: 40px; - } - @media (max-width: 1023px) { - display: none; - } + p { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 17px; + color: #494677; + } + + .box-description-modal, + .box-description-modal-second { + margin-top: 120px; + width: 337px; + height: 129px; + background: linear-gradient( + 95.55deg, + #ffffff 2.1%, + rgba(255, 255, 255, 0) 100% + ); + border-radius: 16px; + padding: 1px 20px; + } + + .box-description-modal-second { + margin-top: 40px; + } + @media (max-width: 1023px) { + display: none; + } } .signup-modal-form { + padding: 30px; - padding: 30px; + h2 { + margin-top: 35px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 36px; + color: #18253d; + } + h4 { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 12px; + color: #8f9bb2; + } + .input-form { + width: 250px; + border-radius: 5px; + } + hr { + margin-top: 30px; + margin-bottom: 30px; + border: 1px solid rgba(233, 235, 248, 0.4); + width: 62%; + } + .btn-submit-modal-form { + background: #0fb2ef; + border-radius: 6px; + border: none; + color: #fff; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 16px; + width: 62%; + padding: 10px 0; + } + .modal-terms-wrapper { + display: flex; + margin-bottom: 30px; + + .terms-accept { + background: #f7f9fc; + border: 1px solid #205cf5; + box-sizing: border-box; + border-radius: 4px; + } + .terms-wrapper { + margin-left: 15px; + } + .terms-txt { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 12px !important; + margin: 0 !important; + padding: 0 !important; + } + } + @media (max-width: 1023px) { + width: auto; + height: unset; + overflow: scroll; h2 { - margin-top: 35px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 36px; - color: #18253d; - } - h4 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 12px; - color: #8f9bb2; - } - .input-form { - width: 250px; - border-radius: 5px; - } - hr { - margin-top: 30px; - margin-bottom: 30px; - border: 1px solid rgba(233, 235, 248, 0.4); - width: 62%; - } - .btn-submit-modal-form { - background: #0fb2ef; - border-radius: 6px; - border: none; - color: #fff; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 16px; - width: 62%; - padding: 10px 0; - } - - .modal-terms-wrapper { - display: flex; - margin-bottom: 30px; - - .terms-accept { - background: #f7f9fc; - border: 1px solid #205cf5; - box-sizing: border-box; - border-radius: 4px; - } - .terms-wrapper { - margin-left: 15px; - } - .terms-txt { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 12px !important; - margin: 0 !important; - padding: 0 !important; - } - } - @media (max-width: 1023px) { - width: auto; - height: unset; - overflow: scroll; - h2 { - margin-top:20px; - font-size: 28px; - } + margin-top: 20px; + font-size: 28px; } + } } @media (max-width: 1280px) { - // .home-header-wrapper, - .container { - width: 1024px; - } - .apis-wrapper { - .apis-card { - width: 180px; - padding-left: 10px; - padding-right: 10px; - } - } - .code-tabs-wrapper { - .code-tabs-main { - .code-tabs-main-wrapper { - ul { - li { - padding: 14px 10px; - } - } - } - } + .apis-wrapper { + .apis-card { + width: 180px; + padding-left: 10px; + padding-right: 10px; } + } - .wiremock-cloud-wrapper { - .wiremock-cloud-img-wrapper, - .wiremock-cloud-details { - width: 436px; - } - } - .wiremock-cloud-robot { - width: 58% !important; - } - .wiremock-cloud-img { - height: 100%; - } + .wiremock-cloud-robot { + width: 58% !important; + } + .wiremock-cloud-img { + height: 100%; + } - .code-tabs-main-wrapper { - ul { - flex-wrap: wrap; - display: flex; - margin-bottom: -11px !important; - } + .code-tabs-main-wrapper { + ul { + flex-wrap: wrap; + display: flex; + margin-bottom: $p-l; } - + } } @media (max-width: 1023px) { - // .home-header-wrapper, - .container { - width: 90%; - } - - .home-header-footer { - flex-direction: column; - align-items: center; + .home-header-footer { + flex-direction: column; + align-items: center; - .wiremock-card-info { - margin: 30px 0 0 0; - &:first-child { - margin-top: 0; - } - } + .wiremock-card-info { + margin: 30px 0 0 0; + &:first-child { + margin-top: 0; + } } + } - .clients-wrapper { - display: grid; - grid-template-columns: auto auto auto; - justify-content: unset; - - .client-wrapper { - margin-left: 0; - } - } + .clients-wrapper { + display: grid; + grid-template-columns: auto auto auto; + justify-content: unset; - .code-tabs-row { - .code-tabs-sidebar-wrapper { - display: none; - } - } - .code-tabs-wrapper { - .code-tabs-main { - border-top-left-radius: 50px; - } + .client-wrapper { + margin-left: 0; } + } - .wiremock-cloud-wrapper { - flex-direction: column; - align-items: center; + .wiremock-cloud-wrapper { + flex-direction: column; + align-items: center; - .wiremock-cloud-vLine { - display: none; - } + .wiremock-cloud-vLine { + display: none; + } - .wiremock-cloud-details { - padding-top: 0; - align-items: center; - display: flex; - flex-direction: column; - text-align: center; + .wiremock-cloud-details { + padding-top: 0; + display: flex; + flex-direction: column; - .wiremock-cloud-links-wrapper { - margin-top: 0; - } - } - } - .key-features-wrapper { - .key-features-grid { - grid-template-columns: auto; - } + .wiremock-cloud-links-wrapper { + margin-top: 0; + } } + } - .apis-wrapper { - .apis-card-wrapper { - grid-template-columns: auto; - .apis-card { - margin-top: 40px; - &:first-child { - margin-top: 0; - } - } - } - } - .p-width-studio { - &:last-of-type { - margin-bottom: 20px !important; + .apis-wrapper { + .apis-card-wrapper { + grid-template-columns: auto; + .apis-card { + margin-top: 40px; + &:first-child { + margin-top: 0; } + } } - .home-header-rightHeaderHP, - .home-header-leftHeaderHP { - display: none; + } + .p-width-studio { + &:last-of-type { + margin-bottom: 20px !important; } + } + .home-header-rightHeaderHP, + .home-header-leftHeaderHP { + display: none; + } - .wiremock-cloud-robot-wrapper { - justify-content: center; - - .wiremock-cloud-vLine, - .wiremock-cloud-robot { - display: none !important; - } - - .details-custom { - margin-left: 0 !important; - justify-content: center; - width: auto; - display: flex; - align-items: center; - padding-left: 10px; - padding-right: 10px; - - h1, - h3 { - text-align: center; - } - } - } -} - -@media (max-width: 965px) { - .code-tabs-wrapper { - .code-tabs-footer { - height: unset; - flex-direction: column; - padding: 20px; + .wiremock-cloud-robot-wrapper { + justify-content: center; - .ctIMGWrapper, - .ct-github-info-wrapper { - margin-bottom: 20px; - } - } - } - .code-tabs-main { - .code-tabs-main-wrapper { - ul { - display: flex; - flex-wrap: wrap; - margin-bottom: 5px !important; - - li { - margin-left: 0 !important; - &.active-tab-example { - border-radius: 8px !important; - border-bottom: 1px solid #d2dff9 !important; - } - } - } - } + .wiremock-cloud-vLine, + .wiremock-cloud-robot { + display: none !important; } + } } @media (max-width: 560px) { - .clients-wrapper { - grid-template-columns: auto; - } - .wiremock-cloud-wrapper { - .wiremock-cloud-img-wrapper { - max-width: 100%; - width: unset; - padding-left: 10px; - padding-right: 10px; - img { - width: 100%; - } - } + .clients-wrapper { + grid-template-columns: auto; + } + .wiremock-cloud-wrapper { + .wiremock-cloud-img-wrapper { + max-width: 100%; + width: unset; + img { + width: 100%; + } } + } - .ct-github-info-wrapper { - flex-direction: column; - align-items: center; + .ct-github-info-wrapper { + flex-direction: column; + align-items: center; - .github-card-info-wrapper { - margin-left: 0 !important; - margin-top: 20px !important; + .github-card-info-wrapper { + margin-left: 0 !important; + margin-top: 20px !important; - &:first-child { - margin-top: 0 !important; - } - } - } - .wiremock-cloud-details { - width: auto !important; - } - .key-features-grid { - margin: 0; - padding: 0; - width: 100%; + &:first-child { + margin-top: 0 !important; + } } + } } .home-hero { - &__title { - margin-top: 40px; - margin-bottom: 30px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - font-size: 28px; - color: #18253d; - text-align: center; + &__title { + margin: 36px 0; + font-style: normal; + font-weight: bold; + font-size: 28px; + color: #18253d; + text-align: center; - @media (min-width: 920px) { - font-size: 60px; - margin-bottom: 60px; - } + @include breakpoint($medium) { + margin: 70px 0; + font-size: 66px; } + } - &__boxes { - @media (min-width: 920px) { - padding: 40px 0; - display: flex; - } + &__boxes { + @media (min-width: 920px) { + padding: $p-xl 0; + display: flex; + gap: $p-3xl; } + } - &__box { - display: grid; - flex-direction: column; - flex: 1 0 50%; - padding: 20px 20px; - margin-bottom: 20px; - grid-template-rows: min-content 1fr min-content; - - - &--alt { - background: #E4F0F7; - border-radius: 15px; - } - - p { - font-family: "Ubuntu"; - font-size: 20px; - font-style: normal; - font-weight: 400; - color: #18253d; - margin-top: 1rem; - } - - @media (min-width: 920px) { - padding: 40px; - margin-bottom: 0; - padding: 20px; + &__icon { + padding: $p-s; + margin-bottom: $p-l; + display: block; + border-radius: 100px; + background: linear-gradient( + 135deg, + #fff 0%, + rgba(255, 255, 255, 0.2) 47.4%, + rgba(255, 255, 255, 0) 100% + ); + } + + &__box { + display: grid; + flex: 0 1 50%; + flex-direction: column; + padding: 20px 20px; + margin-bottom: $p-l; + grid-template-rows: min-content 1fr min-content; + background-color: $light-gray; + border-radius: 10px; - p { - font-size: 16px; - } - } + &--alt { + background: $blue; + border-radius: 10px; + color: $light-gray; } - &__heading { - margin: 0 0 10px; - font-size: 24px; - color: #18253d; - - @media (min-width: 920px) { - margin-bottom: 20px; - font-size: 50px; - } + @media (min-width: 920px) { + padding: $p-xl; + margin-bottom: 0; } -} + } -.hr { - margin-top: 40px; - margin-bottom: 40px; - max-width: 90%; + &__heading { + margin: 0 0 $p-m; + font-size: $type-size-3; @media (min-width: 920px) { - margin-top: 60px; - margin-bottom: 60px; - } - - @media (min-width: 2000px) { - width: 1280px; + font-size: $type-size-2; + margin-bottom: $p-l; } - - position: relative; - margin-left: auto; - margin-right: auto; -} \ No newline at end of file + } +} diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss index 6b06406e..c9e49555 100644 --- a/_sass/_masthead.scss +++ b/_sass/_masthead.scss @@ -3,176 +3,390 @@ ========================================================================== */ .masthead { - background-color: #fff; - position: relative; - animation: intro 0.3s both; - animation-delay: 0.15s; - z-index: 20; - border-bottom: 1px solid $head-border-bottom; - - &__inner-wrap { - @include container; - @include clearfix; - padding-left: 40px; - padding-right: 0em; - font-family: $sans-serif-narrow; - - @include breakpoint($x-large) { - max-width: $x-large; - } - - nav { - z-index: 10; - } - - a { - text-decoration: none; - } - } + background-color: #fff; + position: relative; + animation: intro 0.3s both; + animation-delay: 0.15s; + z-index: 20; + max-width: 1280px; + margin: 0 auto; + display: grid; + padding: $p-m 0; + grid-template-columns: 254px 1fr auto; + font-size: 16px; + line-height: 24px; + align-items: center; + font-family: "DMSans"; + + @include breakpoint($medium) { + padding: $p-xl 0; + } } -.masthead__menu { +.masthead__nav { + display: grid; + + ul { display: flex; - align-items: center; - justify-content: flex-start; - @media (max-width: 1023px) { - justify-content: space-between; - } + gap: 24px; + justify-self: center; + } - ul { - margin-left: auto; - margin-right: 8em; - padding: 0; - clear: both; - list-style-type: none; - } + .divSubNav a { + display: block; + } } -.masthead__menu-item { +.masthead__logo { + margin-left: 12px; +} + +.masthead__cta { + text-align: center; + display: none; + + @include breakpoint($large) { + display: block; + } + + &-note { display: block; + font-size: 12px; + color: black; + font-weight: 500; + } +} + +.masthead__menu { + display: flex; + align-items: center; + justify-content: flex-start; + @media (max-width: 1023px) { + justify-content: space-between; + } + + ul { + margin-left: auto; + margin-right: 8em; + padding: 0; + clear: both; list-style-type: none; - white-space: nowrap; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 14px; - padding-left: 20px; - - &--lg { - font-family: "McLaren", "Segoe UI", "Helvetica Neue", "Lucida Grande", - Arial, sans-serif; - font-size: $type-size-4; - padding-right: 2em; - font-weight: 700; - } + } +} + +.masthead__menu-item { + display: inline-block; + list-style-type: none; + white-space: nowrap; + padding-left: 20px; + + &--lg { + padding-right: 2em; + } } .social-links { - display: flex; - align-items: center; + display: flex; + align-items: center; - li { - margin: 0 0 0 20px; - &:first-child { - margin-left: 0; - } + li { + margin: 0 0 0 20px; + &:first-child { + margin-left: 0; } - .separator-line-nav { - margin: 0 20px; - } - + } + .separator-line-nav { + margin: 0 20px; + } } .schedule-demo-nav, .schedule-demo-mobile-nav { - cursor: pointer; - background: #F0F5FF; - border: 1px solid rgba(15, 178, 239, 0.5); - border-radius: 4px; - padding: 3px 10px; - color: #0FB2EF; - font-family: 'Ubuntu'; - font-style: normal; - font-weight: 700; - font-size: 16px; + cursor: pointer; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); + border-radius: 4px; + padding: 3px 10px; + color: #0fb2ef; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 16px; } schedule-demo-nav-mobile { - margin-bottom: 10px; + margin-bottom: 10px; } .hamburgerMenuIcon { - display: none; + justify-self: flex-end; + margin-right: 12px; + padding: 0; + background: none; + border: none; + display: none; + + img { + width: 100%; + } } .mobile-menu-wrapper { - display: none; + display: none; + + a:not(.btn) { + display: block; + padding: $p-m 0; + font-size: $type-size-4; + color: $text-color; + text-decoration: none; + } } .overlay-menu { - display: none; + display: none; } @media (max-width: 1023px) { - #site-nav, - .social-links { - display: none; - } + #site-nav, + .social-links { + display: none; + } + + .hamburgerMenuIcon { + display: block; + width: 24px; + height: 24px; + align-self: flex-start; + } - .hamburgerMenuIcon { - display: block; - width: 16px; - height: 12px; + .closeMenuIcon { + position: absolute; + right: 16px; + top: 16px; + width: 18px; + } + + .mobile-menu-wrapper { + display: block; + background-color: #fff; + position: fixed; + right: -50vw; + top: 0; + height: 100%; + width: 50vw; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + z-index: 100; + -webkit-transition: right 0.2s linear; + -moz-transition: right 0.2s linear; + -o-transition: right 0.2s linear; + transition: right 0.2s linear; + padding: 38px 24px; + + &__cta { + display: block; + margin-bottom: 4px; + padding: 14px 24px; + margin-left: auto; + background: #2d69f6; + color: white; + border-radius: 4px; + background-color: #2d69f6; + text-decoration: none; + text-align: center; + + &:hover { + color: #fafafa; + } } - .closeMenuIcon { - position: absolute; - right: 30px; - top: 20px; + ul { + margin: 0; + padding: 0; + list-style: none; } - .mobile-menu-wrapper { - display: block; - background-color: #fff; - position: fixed; - right: -250px; - top: 0; - height: 100%; - width: 250px; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - z-index: 100; - -webkit-transition: right 0.2s linear; - -moz-transition: right 0.2s linear; - -o-transition: right 0.2s linear; - transition: right 0.2s linear; - padding: 30px; - &.active-menu { - display: block; - right: 0; - } + &.active-menu { + display: block; + right: 0; + width: 80vw; } - .overlay-menu { - &.active-overlay { - display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 50; - background-color: rgba(7, 0, 71, 0.5); - } + } + .overlay-menu { + &.active-overlay { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 50; + background-color: rgba(7, 0, 71, 0.5); + } + } + .mobile-social-links { + display: flex; + justify-content: flex-end; + + li { + margin-left: 10px; + &:first-child { + margin-left: 0; + } } - .mobile-social-links { - display: flex; - justify-content: flex-end; - - li { - margin-left: 10px; - &:first-child { - margin-left: 0; - } - } + } +} + +.navlink { + position: relative !important; + padding-bottom: 0; + cursor: pointer; + + &:hover { + & > a { + color: $link-color; } + } + + a { + padding: 0 !important; + margin: 0 0 5px 0; + width: fit-content !important; + height: 32px; + font-weight: 500; + color: $text-color; + } +} + +.navlink-image { + width: 20px; + filter: invert(47%); + vertical-align: middle; +} + +.divSubNav { + position: relative; + cursor: default; + display: none; + position: absolute; + content: ""; + left: 0; + top: 0; + width: fit-content; + padding-top: 32px; +} + +.divSubNav__inner { + position: relative; + padding: 10px 15px; + background: #ffffff; + box-shadow: 0px -5px 20px rgba(210, 223, 249, 0.5); + border-radius: 4px; + + &:before { + position: absolute; + content: ""; + left: 15px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 7px solid #fff; + top: -7px; + } +} + +.divSubNav a { + padding: 0 !important; + margin: 0 0 5px 0; + width: fit-content !important; + + &:hover { + color: $link-color; + } +} + +.divSubNav a:last-child { + margin-bottom: 0; +} + +.divSubNav a::before { + background: none !important; +} + +.navlink:hover > .divSubNav { + display: block; +} + +.navHover::before { + background: unset !important; +} + +.navlink::before { + background: unset !important; +} + +.navlink a::before { + background: unset !important; +} + +.wiremock-cloud-logo-navbar-item { + padding-left: 20px; + padding-top: 0; +} + +.wiremock-cloud-logo-navbar-item div span { + text-align: right; +} + +.wiremock-cloud-logo-navbar { + margin: 0; + background: unset !important; +} + +.wiremock-cloud-logo-navbar div { + border-color: #0fb2ef; + background-color: #e4f0f7; + border-style: solid; + border-radius: 8px; + border-width: 4px; + align-items: center; + justify-content: center; + margin: 0; + height: 45px; + position: relative; +} + +.wiremock-cloud-logo-navbar div img { + vertical-align: middle; + width: 100%; + background-color: #e4f0f7; + height: 36px; + padding: 4px; + padding-left: 12px; + padding-right: 12px; +} + +.wiremock-cloud-logo-navbar div div { + font-size: x-small; + font-weight: bold; + position: absolute; + bottom: 2px; + left: 4px; + border-style: none; + height: fit-content; +} + +.wiremock-cloud-logo-note { + margin-left: auto; + margin-right: 4em; + float: right; + font-size: small; +} + +@media (max-width: 1023px) { + .wiremock-cloud-logo-note { + display: none; + } } diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss index 9302401f..67967e41 100644 --- a/_sass/_mixins.scss +++ b/_sass/_mixins.scss @@ -2,6 +2,8 @@ MIXINS ========================================================================== */ +@use "sass:math"; + %tab-focus { // Default outline: thin dotted $warning-color; @@ -15,7 +17,7 @@ ========================================================================== */ @function em($target, $context: $doc-font-size) { - @return ($target / $context) * 1em; + @return math.div($target, $context) * 1em; } diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss index 667f26aa..6323562c 100644 --- a/_sass/_navigation.scss +++ b/_sass/_navigation.scss @@ -7,53 +7,53 @@ ========================================================================== */ .breadcrumbs { - @include container; - @include clearfix; - margin-top: 0; - margin-bottom: 0; - padding-right: 2em; - font-family: $sans-serif; - animation: intro 0.3s both; - animation-delay: 0.3s; + @include container; + @include clearfix; + margin-top: 0; + margin-bottom: 0; + padding-right: 2em; + font-family: $sans-serif; + animation: intro 0.3s both; + animation-delay: 0.3s; + + @include breakpoint($large) { + padding-right: 1em; + } + + @include breakpoint($x-large) { + max-width: $x-large; + } + + ol { + padding: 0; + list-style: none; + font-size: $type-size-6; @include breakpoint($large) { - padding-right: 1em; + @include span(10 of 12 last); + float: left; + padding-left: 0; } @include breakpoint($x-large) { - max-width: $x-large; - } - - ol { - padding: 0; - list-style: none; - font-size: $type-size-6; - - @include breakpoint($large) { - @include span(10 of 12 last); - float: left; - padding-left: 0; - } - - @include breakpoint($x-large) { - @include prefix(0.5 of 12); - float: left; - padding-left: 0; - } + @include prefix(0.5 of 12); + float: left; + padding-left: 0; } + } - li { - display: inline; - } + li { + display: inline; + } - li a { - display: inline; - color: inherit; - } + li a { + display: inline; + color: inherit; + } - .current { - font-weight: bold; - } + .current { + font-weight: bold; + } } /* @@ -61,114 +61,114 @@ ========================================================================== */ .pagination { - @include full(); - @include clearfix(); - margin-top: 1em; - padding-top: 1em; - - ul { - margin: 0; - padding: 0; - list-style-type: none; - font-family: $sans-serif; - } + @include full(); + @include clearfix(); + margin-top: 1em; + padding-top: 1em; - li { - display: block; - float: left; - margin-left: -1px; + ul { + margin: 0; + padding: 0; + list-style-type: none; + font-family: $sans-serif; + } - a { - margin-bottom: 0.25em; - padding: 0.5em 1em; - font-family: $sans-serif; - font-size: 14px; - font-weight: bold; - line-height: 1.5; - text-align: center; - text-decoration: none; - color: mix(#fff, $gray, 25%); - border: 1px solid $light-gray; - border-radius: 0; - - &:hover { - color: $link-color-hover; - } - - &.current { - color: #fff; - background: $primary-color; - } - - &.disabled { - color: $light-gray; - pointer-events: none; - cursor: not-allowed; - } - } + li { + display: block; + float: left; + margin-left: -1px; - &:first-child { - margin-left: 0; + a { + margin-bottom: 0.25em; + padding: 0.5em 1em; + font-family: $sans-serif; + font-size: 14px; + font-weight: bold; + line-height: 1.5; + text-align: center; + text-decoration: none; + color: mix(#fff, $gray, 25%); + border: 1px solid $light-gray; + border-radius: 0; + + &:hover { + color: $link-color-hover; + } + + &.current { + color: #fff; + background: $primary-color; + } - a { - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - } - } + &.disabled { + color: $light-gray; + pointer-events: none; + cursor: not-allowed; + } + } - &:last-child { - a { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - } - } + &:first-child { + margin-left: 0; + + a { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } } - /* next/previous buttons */ - &--pager { - display: block; - padding: 1em 2em; - float: left; - width: 50%; - font-family: $sans-serif; - font-size: $type-size-5; - font-weight: bold; - text-align: center; - text-decoration: none; - color: mix(#fff, $gray, 25%); - border: 1px solid $light-gray; - border-radius: $border-radius; - - &:hover { - color: $link-color-hover; - } + &:last-child { + a { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + } + } - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + /* next/previous buttons */ + &--pager { + display: block; + padding: 1em 2em; + float: left; + width: 50%; + font-family: $sans-serif; + font-size: $type-size-5; + font-weight: bold; + text-align: center; + text-decoration: none; + color: mix(#fff, $gray, 25%); + border: 1px solid $light-gray; + border-radius: $border-radius; - &:last-child { - margin-left: -1px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + &:hover { + color: $link-color-hover; + } - &.disabled { - color: $light-gray; - pointer-events: none; - cursor: not-allowed; - } + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + + &.disabled { + color: $light-gray; + pointer-events: none; + cursor: not-allowed; + } + } } .page__content + .pagination, .page__meta + .pagination, .page__share + .pagination, .page__comments + .pagination { - margin-top: 2em; - padding-top: 2em; - border-top: 1px solid $border-color; + margin-top: 2em; + padding-top: 2em; + border-top: 1px solid $border-color; } /* @@ -176,149 +176,148 @@ ========================================================================== */ .greedy-nav { - position: relative; - min-width: 250px; - margin-left: auto; - margin-right: 0; - text-align: center; - align-items: center; - display: flex; - justify-items: center; - margin-top: 0.8%; - a { - display: block; - margin: 0; - padding: 0 0; - color: $head-nav-links; - text-decoration: none; - - &:hover { - color: $masthead-link-color-hover; - } - } + position: relative; + min-width: 250px; + margin-left: auto; + margin-right: 0; + text-align: center; + align-items: center; + display: flex; + justify-items: center; + margin-top: 0.8%; + a { + display: block; + margin: 0; + padding: 0 0; + color: $head-nav-links; + text-decoration: none; - button { - position: absolute; - height: 100%; - right: 0; - padding: 0 0.5rem; - border: 0; - outline: none; - background-color: $primary-color; - color: #fff; - cursor: pointer; + &:hover { + color: $masthead-link-color-hover; } + } + + button { + position: absolute; + height: 100%; + right: 0; + padding: 0 0.5rem; + border: 0; + outline: none; + background-color: $primary-color; + color: #fff; + cursor: pointer; + } + + .visible-links { + margin-left: auto; + margin-right: 2em; + display: table; - .visible-links { - margin-left: auto; - margin-right: 2em; - display: table; - - li { - display: table-cell; - vertical-align: top; - padding-top: 10px; - - &:first-child { - font-weight: bold; - - a { - margin-left: 0; - } - } - - &:last-child { - a { - margin-right: 0; - } - } - } + li { + display: table-cell; + vertical-align: top; + padding-top: 10px; + + &:first-child { + font-weight: bold; - li:last-child { - float: right; - padding-top: 1px; - padding-bottom: 2px; - + a { + margin-left: 0; } + } + &:last-child { a { - position: relative; - - &:before { - content: ""; - position: absolute; - left: 0; - bottom: 0; - height: 4px; - background: mix(#fff, $primary-color, 50%); - width: 100%; - transition: $global-transition; - transform: scaleX(0); // hide - } - - &:hover:before { - transform: scaleX(1); // reveal - } + margin-right: 0; } + } + } + + li:last-child { + float: right; + padding-top: 1px; + padding-bottom: 2px; } - .hidden-links { + a { + position: relative; + + &:before { + content: ""; position: absolute; - top: 100%; - right: 0; - margin-top: 15px; - padding: 5px; - border: 1px solid $border-color; - border-radius: $border-radius; - background: #fff; - box-shadow: 0 0 10px rgba(#000, 0.25); + left: 0; + bottom: 0; + height: 4px; + background: mix(#fff, $primary-color, 50%); + width: 100%; + transition: $global-transition; + transform: scaleX(0); // hide + } + + &:hover:before { + transform: scaleX(1); // reveal + } + } + } + + .hidden-links { + position: absolute; + top: 100%; + right: 0; + margin-top: 15px; + padding: 5px; + border: 1px solid $border-color; + border-radius: $border-radius; + background: #fff; + box-shadow: 0 0 10px rgba(#000, 0.25); - a { - margin: 0; - padding: 10px 20px; - font-size: $type-size-5; - - &:hover { - color: $masthead-link-color-hover; - background: mix(#fff, $primary-color, 75%); - } - } + a { + margin: 0; + padding: 10px 20px; + font-size: $type-size-5; + + &:hover { + color: $masthead-link-color-hover; + background: mix(#fff, $primary-color, 75%); + } + } - &:before { - content: ""; - position: absolute; - top: -11px; - right: 10px; - width: 0; - border-style: solid; - border-width: 0 10px 10px; - border-color: $border-color transparent; - display: block; - z-index: 0; - } + &:before { + content: ""; + position: absolute; + top: -11px; + right: 10px; + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: $border-color transparent; + display: block; + z-index: 0; + } - &:after { - content: ""; - position: absolute; - top: -10px; - right: 10px; - width: 0; - border-style: solid; - border-width: 0 10px 10px; - border-color: #fff transparent; - display: block; - z-index: 1; - } + &:after { + content: ""; + position: absolute; + top: -10px; + right: 10px; + width: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: #fff transparent; + display: block; + z-index: 1; + } - li { - display: block; - border-bottom: 1px solid $border-color; + li { + display: block; + border-bottom: 1px solid $border-color; - &:last-child { - border-bottom: none; - } - } + &:last-child { + border-bottom: none; + } } + } } /* @@ -326,60 +325,60 @@ ========================================================================== */ .nav__list { - padding-top: 10px; - font-size: 1.25rem; + padding-top: 10px; + font-size: 1.25rem; - ul { - margin-bottom: 1em; - } + ul { + margin-bottom: 1em; + } - a { - display: block; - padding: 0.125em 0; - // color: $info-color; + a { + display: block; + padding: 0.125em 0; + // color: $info-color; - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; } + } - .active { - margin-left: -0.5em; - padding-left: 0.5em; - padding-right: 0.5em; - color: #fff; - font-weight: bold; - background: $primary-color; - border-radius: $border-radius; + .active { + margin-left: -0.5em; + padding-left: 0.5em; + padding-right: 0.5em; + color: #fff; + font-weight: bold; + background: $primary-color; + border-radius: $border-radius; - &:hover { - color: #fff; - } + &:hover { + color: #fff; } + } } .nav__list-item--selected { - font-weight: bold; - color: $light-blue; + font-weight: bold; + color: $light-blue; } .nav__title { - margin: 0; - padding: 0.5rem 1rem; - font-family: $sans-serif-narrow; - font-size: $type-size-5; - font-weight: bold; + margin: 0; + padding: 0.5rem 1rem; + font-family: $sans-serif-narrow; + font-size: $type-size-5; + font-weight: bold; } .nav__sub-title { - display: block; - margin: 0.5rem 0; - padding: 0.5rem 0; - font-family: $sans-serif-narrow; - font-size: $type-size-6; - font-weight: bold; - text-transform: uppercase; - border-bottom: 1px solid $border-color; + display: block; + margin: 0.5rem 0; + padding: 0.5rem 0; + font-family: $sans-serif-narrow; + font-size: $type-size-6; + font-weight: bold; + text-transform: uppercase; + border-bottom: 1px solid $border-color; } /* @@ -387,63 +386,63 @@ ========================================================================== */ .toc { - font-family: $sans-serif-narrow; - color: $gray; - text-transform: uppercase; - letter-spacing: 1px; - background-color: #fff; - border: 1px solid $border-color; - border-radius: $border-radius; - box-shadow: $box-shadow; - - .nav__title { - color: #fff; - font-size: $type-size-6; - background: $primary-color; - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; - } + font-family: $sans-serif-narrow; + color: $gray; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #fff; + border: 1px solid $border-color; + border-radius: $border-radius; + box-shadow: $box-shadow; + + .nav__title { + color: #fff; + font-size: $type-size-6; + background: $primary-color; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } } .toc__menu { - margin: 0; - padding: 0; - width: 100%; - list-style: none; - font-size: 0.8rem; + margin: 0; + padding: 0; + width: 100%; + list-style: none; + font-size: 0.8rem; - a { - display: block; - padding: 0.5rem 1rem; - color: $gray; - font-size: $type-size-7; - font-weight: bold; - line-height: 1.5; - border-bottom: 1px solid $border-color; + a { + display: block; + padding: 0.5rem 1rem; + color: $gray; + font-size: $type-size-7; + font-weight: bold; + line-height: 1.5; + border-bottom: 1px solid $border-color; - &:hover { - color: #000; - background: $lighter-gray; - } + &:hover { + color: #000; + background: $lighter-gray; } + } - > li:last-child { - a { - border-bottom: none; - } + > li:last-child { + a { + border-bottom: none; } + } - li ul > li a { - padding-left: 2rem; - font-weight: normal; - } + li ul > li a { + padding-left: 2rem; + font-weight: normal; + } - // hide sub sub links on small screens - li > ul li { - display: none; + // hide sub sub links on small screens + li > ul li { + display: none; - @include breakpoint($medium) { - display: block; - } + @include breakpoint($medium) { + display: block; } + } } diff --git a/_sass/_notify.scss b/_sass/_notify.scss new file mode 100644 index 00000000..8996b074 --- /dev/null +++ b/_sass/_notify.scss @@ -0,0 +1,18 @@ +.notifyjs-corner { + position: absolute !important; + top: 0; + margin: 0 !important; + right: 0; + + .notifyjs-wrapper, + .notifyjs-container { + margin: 0 !important; + } + + .notifyjs-wiremock_notification_with_link-info { + border: none !important; + border-radius: 0 !important; + background-image: none !important; + text-align: center; + } +} diff --git a/_sass/_page.scss b/_sass/_page.scss index 84b87541..ffd9d8e3 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -3,211 +3,210 @@ ========================================================================== */ #main { - @include container; - @include clearfix; - margin-top: 2em; - padding-left: 1em; - padding-right: 1em; - animation: intro 0.3s both; - animation-delay: 0.35s; - - @include breakpoint($x-large) { - max-width: $x-large; - } - - @include breakpoint($x2-large) { - max-width: $x2-large; - } + @include container; + @include clearfix; + margin-top: 2em; + padding-left: 1em; + padding-right: 1em; + animation: intro 0.3s both; + animation-delay: 0.35s; + + @include breakpoint($x-large) { + max-width: $x-large; + } + + @include breakpoint($x2-large) { + max-width: $x2-large; + } } .custom-doc-wrapper { - height: 100vh; + height: 100vh; } .page { - @include breakpoint($large) { - @include span(10 of 12 last); - @include prefix(0.5 of 12); - @include suffix(2 of 12); - } + @include breakpoint($large) { + @include span(10 of 12 last); + @include prefix(0.5 of 12); + @include suffix(2 of 12); + } - .page__inner-wrap { - @include full(); + .page__inner-wrap { + @include full(); - .page__content, - .page__meta, - .page__share { - @include full(); - } + .page__content, + .page__meta, + .page__share { + @include full(); } + } } .page-wide { - @extend .page; - @include suffix(0 of 12); + @extend .page; + @include suffix(0 of 12); } .page__title { - margin-top: 0; - line-height: 1; - color: $light-blue; + margin-top: 0; + line-height: 1; - & + .page__meta { - margin-top: -0.5em; - } + & + .page__meta { + margin-top: -0.5em; + } } .page__lead { - font-family: $global-font-family; - font-size: $type-size-4; + font-family: $global-font-family; + font-size: $type-size-4; } .page__content { - h2 { - padding-bottom: 0.5em; - border-bottom: 1px solid $border-color; + h2 { + padding-bottom: 0.5em; + border-bottom: 1px solid $border-color; + } + + p, + li, + dl { + font-size: 1em; + } + + /* paragraph indents */ + p { + margin: 0 0 $indent-var; + + // sibling indentation + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); + } } + } - p, - li, - dl { - font-size: 1em; - } + a { + text-decoration: none; - /* paragraph indents */ - p { - margin: 0 0 $indent-var; - - // sibling indentation - @if $paragraph-indent == true { - & + p { - text-indent: $indent-var; - margin-top: -($indent-var); - } - } + &:hover { + text-decoration: underline; } + } - a { - text-decoration: none; - - &:hover { - text-decoration: underline; - - img { - box-shadow: 0 0 10px rgba(#000, 0.25); - } - } - } + dt { + margin-top: 1em; + font-family: $sans-serif; + font-weight: bold; + } - dt { - margin-top: 1em; - font-family: $sans-serif; - font-weight: bold; - } + dd { + margin-left: 1em; + font-family: $sans-serif; + font-size: $type-size-6; + } - dd { - margin-left: 1em; - font-family: $sans-serif; - font-size: $type-size-6; - } + .small { + font-size: $type-size-6; + } - .small { - font-size: $type-size-6; - } + /* blockquote citations */ + blockquote + .small { + margin-top: -1.5em; + padding-left: 1.25rem; + } - /* blockquote citations */ - blockquote + .small { - margin-top: -1.5em; - padding-left: 1.25rem; - } + [class^="language-"] { + margin-bottom: $p-l; + } } .page__hero { + position: relative; + margin-bottom: 2em; + @include clearfix; + animation: intro 0.3s both; + animation-delay: 0.25s; + + &--overlay { position: relative; margin-bottom: 2em; + padding: 3em 0; @include clearfix; + background-size: cover; + background-repeat: no-repeat; + background-position: center; animation: intro 0.3s both; animation-delay: 0.25s; - &--overlay { - position: relative; - margin-bottom: 2em; - padding: 3em 0; - @include clearfix; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - animation: intro 0.3s both; - animation-delay: 0.25s; - - a { - color: #fff; - } - - .wrapper { - padding-left: 1em; - padding-right: 1em; - - @include breakpoint($x-large) { - max-width: $x-large; - } - - @include breakpoint($x2-large) { - max-width: $x2-large; - } - } - - .page__title, - .page__meta, - .page__lead, - .btn { - color: $very-light-blue; - text-shadow: 1px 1px 4px rgba(#000, 0.5); - } - - .page__lead { - max-width: $large; - } - - .page__title { - font-size: $type-size-2; - - @include breakpoint($small) { - font-size: $type-size-1; - } - } + a { + color: #fff; + } + + .wrapper { + padding-left: 1em; + padding-right: 1em; + + @include breakpoint($x-large) { + max-width: $x-large; + } + + @include breakpoint($x2-large) { + max-width: $x2-large; + } + } + + .page__title, + .page__meta, + .page__lead, + .btn { + color: $very-light-blue; + text-shadow: 1px 1px 4px rgba(#000, 0.5); } + + .page__lead { + max-width: $large; + } + + .page__title { + font-size: $type-size-2; + + @include breakpoint($small) { + font-size: $type-size-1; + } + } + } } .page__hero-image { - width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; } .page__hero-caption { - position: absolute; - bottom: 0; - right: 0; - margin: 0 auto; - padding: 2px 5px; - color: #fff; - font-family: $caption-font-family; - font-size: $type-size-7; - background: #000; - text-align: right; - z-index: 5; - opacity: 0.5; - border-radius: $border-radius 0 $border-radius 0; - - @include breakpoint($large) { - padding: 5px 10px; - } + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 $border-radius 0; + + @include breakpoint($large) { + padding: 5px 10px; + } - a { - color: #fff; - text-decoration: none; - } + a { + color: #fff; + text-decoration: none; + } } /* @@ -215,28 +214,28 @@ ========================================================================== */ .page__share { - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - - @include breakpoint(max-width $small) { - .btn span { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(max-width $small) { + .btn span { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + } } .page__share-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; } /* @@ -244,26 +243,29 @@ ========================================================================== */ .page__meta { - margin-top: 2em; - color: mix(#fff, $gray, 25%); - font-family: $sans-serif; - font-size: $type-size-6; - - p { - margin: 0; - } - - a { - color: inherit; - } - margin-bottom: 10px; + margin-top: 2em; + margin-bottom: $p-l; + color: mix(#fff, $gray, 25%); + font-family: $sans-serif; + font-size: $type-size-6; + + p { + margin: 0; + } + + a { + color: inherit; + } } .page__meta-title { - font-size: small; - text-transform: uppercase; + font-size: small; + text-transform: uppercase; + padding-bottom: 20px; + + &:not(:first-child) { padding-left: 20px; - padding-bottom: 20px; + } } /* @@ -271,28 +273,28 @@ ========================================================================== */ .page__taxonomy { - .sep { - display: none; - } + .sep { + display: none; + } - strong { - margin-right: 10px; - } + strong { + margin-right: 10px; + } } .page__taxonomy-item { - display: inline-block; - margin-right: 5px; - margin-bottom: 8px; - padding: 5px 10px; + display: inline-block; + margin-right: 5px; + margin-bottom: 8px; + padding: 5px 10px; + text-decoration: none; + border: 1px solid $light-gray; + border-radius: $border-radius; + + &:hover { text-decoration: none; - border: 1px solid $light-gray; - border-radius: $border-radius; - - &:hover { - text-decoration: none; - color: $link-color-hover; - } + color: $link-color-hover; + } } /* @@ -300,16 +302,16 @@ ========================================================================== */ .page__comments { - @include full(); + @include full(); } .page__comments-title { - margin-top: 2rem; - margin-bottom: 10px; - padding-top: 2rem; - font-size: $type-size-6; - border-top: 1px solid $border-color; - text-transform: uppercase; + margin-top: 2rem; + margin-bottom: 10px; + padding-top: 2rem; + font-size: $type-size-6; + border-top: 1px solid $border-color; + text-transform: uppercase; } /* @@ -317,31 +319,31 @@ ========================================================================== */ .page__related { - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - @include clearfix(); - float: left; - - @include breakpoint($large) { - @include pre(2.5 of 12); - } - - a { - color: inherit; - text-decoration: none; - } + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + @include clearfix(); + float: left; + + @include breakpoint($large) { + @include pre(2.5 of 12); + } + + a { + color: inherit; + text-decoration: none; + } } .page__related-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; } .boxed-image { - border: solid 1px $lighter-gray; - padding: 0.5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; + border: solid 1px $lighter-gray; + padding: 0.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index 04fd5537..dc097252 100644 --- a/_sass/_syntax.scss +++ b/_sass/_syntax.scss @@ -2,10 +2,10 @@ Syntax highlighting ========================================================================== */ -div.highlighter-rouge, figure.highlight { +div.highlighter-rouge, +figure.highlight { position: relative; margin-bottom: 1em; - padding: 1em; border: 1px solid $border-color; border-radius: $border-radius; background-color: $code-background-color; @@ -33,9 +33,12 @@ div.highlighter-rouge, figure.highlight { } } -.highlight table td { padding: 5px; } -.highlight table pre { margin: 0; } - +.highlight table td { + padding: 5px; +} +.highlight table pre { + margin: 0; +} /* Solarized Light @@ -53,71 +56,209 @@ div.highlighter-rouge, figure.highlight { green #859900 operators, other keywords ========================================================================== */ -.highlight .c { color: #93a1a1 } /* Comment */ -.highlight .err { color: #586e75 } /* Error */ -.highlight .g { color: #586e75 } /* Generic */ -.highlight .k { color: #859900 } /* Keyword */ -.highlight .l { color: #586e75 } /* Literal */ -.highlight .n { color: #586e75 } /* Name */ -.highlight .o { color: #859900 } /* Operator */ -.highlight .x { color: #cb4b16 } /* Other */ -.highlight .p { color: #586e75 } /* Punctuation */ -.highlight .cm { color: #93a1a1 } /* Comment.Multiline */ -.highlight .cp { color: #859900 } /* Comment.Preproc */ -.highlight .c1 { color: #93a1a1 } /* Comment.Single */ -.highlight .cs { color: #859900 } /* Comment.Special */ -.highlight .gd { color: #2aa198 } /* Generic.Deleted */ -.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #dc322f } /* Generic.Error */ -.highlight .gh { color: #cb4b16 } /* Generic.Heading */ -.highlight .gi { color: #859900 } /* Generic.Inserted */ -.highlight .go { color: #586e75 } /* Generic.Output */ -.highlight .gp { color: #586e75 } /* Generic.Prompt */ -.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #cb4b16 } /* Generic.Subheading */ -.highlight .gt { color: #586e75 } /* Generic.Traceback */ -.highlight .kc { color: #cb4b16 } /* Keyword.Constant */ -.highlight .kd { color: #22b3eb } /* Keyword.Declaration */ -.highlight .kn { color: #859900 } /* Keyword.Namespace */ -.highlight .kp { color: #859900 } /* Keyword.Pseudo */ -.highlight .kr { color: #22b3eb } /* Keyword.Reserved */ -.highlight .kt { color: #dc322f } /* Keyword.Type */ -.highlight .ld { color: #586e75 } /* Literal.Date */ -.highlight .m { color: #2aa198 } /* Literal.Number */ -.highlight .s { color: #2aa198 } /* Literal.String */ -.highlight .na { color: #586e75 } /* Name.Attribute */ -.highlight .nb { color: #B58900 } /* Name.Builtin */ -.highlight .nc { color: #22b3eb } /* Name.Class */ -.highlight .no { color: #cb4b16 } /* Name.Constant */ -.highlight .nd { color: #22b3eb } /* Name.Decorator */ -.highlight .ni { color: #cb4b16 } /* Name.Entity */ -.highlight .ne { color: #cb4b16 } /* Name.Exception */ -.highlight .nf { color: #22b3eb } /* Name.Function */ -.highlight .nl { color: #586e75 } /* Name.Label */ -.highlight .nn { color: #586e75 } /* Name.Namespace */ -.highlight .nx { color: #586e75 } /* Name.Other */ -.highlight .py { color: #586e75 } /* Name.Property */ -.highlight .nt { color: #22b3eb } /* Name.Tag */ -.highlight .nv { color: #22b3eb } /* Name.Variable */ -.highlight .ow { color: #859900 } /* Operator.Word */ -.highlight .w { color: #586e75 } /* Text.Whitespace */ -.highlight .mf { color: #2aa198 } /* Literal.Number.Float */ -.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ -.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ -.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ -.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */ -.highlight .sc { color: #2aa198 } /* Literal.String.Char */ -.highlight .sd { color: #586e75 } /* Literal.String.Doc */ -.highlight .s2 { color: #2aa198 } /* Literal.String.Double */ -.highlight .se { color: #cb4b16 } /* Literal.String.Escape */ -.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */ -.highlight .si { color: #2aa198 } /* Literal.String.Interpol */ -.highlight .sx { color: #2aa198 } /* Literal.String.Other */ -.highlight .sr { color: #dc322f } /* Literal.String.Regex */ -.highlight .s1 { color: #2aa198 } /* Literal.String.Single */ -.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ -.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #22b3eb } /* Name.Variable.Class */ -.highlight .vg { color: #22b3eb } /* Name.Variable.Global */ -.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */ -.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ +.highlight .c { + color: #93a1a1; +} /* Comment */ +.highlight .err { + color: #586e75; +} /* Error */ +.highlight .g { + color: #586e75; +} /* Generic */ +.highlight .k { + color: #859900; +} /* Keyword */ +.highlight .l { + color: #586e75; +} /* Literal */ +.highlight .n { + color: #586e75; +} /* Name */ +.highlight .o { + color: #859900; +} /* Operator */ +.highlight .x { + color: #cb4b16; +} /* Other */ +.highlight .p { + color: #586e75; +} /* Punctuation */ +.highlight .cm { + color: #93a1a1; +} /* Comment.Multiline */ +.highlight .cp { + color: #859900; +} /* Comment.Preproc */ +.highlight .c1 { + color: #93a1a1; +} /* Comment.Single */ +.highlight .cs { + color: #859900; +} /* Comment.Special */ +.highlight .gd { + color: #2aa198; +} /* Generic.Deleted */ +.highlight .ge { + color: #586e75; + font-style: italic; +} /* Generic.Emph */ +.highlight .gr { + color: #dc322f; +} /* Generic.Error */ +.highlight .gh { + color: #cb4b16; +} /* Generic.Heading */ +.highlight .gi { + color: #859900; +} /* Generic.Inserted */ +.highlight .go { + color: #586e75; +} /* Generic.Output */ +.highlight .gp { + color: #586e75; +} /* Generic.Prompt */ +.highlight .gs { + color: #586e75; + font-weight: bold; +} /* Generic.Strong */ +.highlight .gu { + color: #cb4b16; +} /* Generic.Subheading */ +.highlight .gt { + color: #586e75; +} /* Generic.Traceback */ +.highlight .kc { + color: #cb4b16; +} /* Keyword.Constant */ +.highlight .kd { + color: #22b3eb; +} /* Keyword.Declaration */ +.highlight .kn { + color: #859900; +} /* Keyword.Namespace */ +.highlight .kp { + color: #859900; +} /* Keyword.Pseudo */ +.highlight .kr { + color: #22b3eb; +} /* Keyword.Reserved */ +.highlight .kt { + color: #dc322f; +} /* Keyword.Type */ +.highlight .ld { + color: #586e75; +} /* Literal.Date */ +.highlight .m { + color: #2aa198; +} /* Literal.Number */ +.highlight .s { + color: #2aa198; +} /* Literal.String */ +.highlight .na { + color: #586e75; +} /* Name.Attribute */ +.highlight .nb { + color: #b58900; +} /* Name.Builtin */ +.highlight .nc { + color: #22b3eb; +} /* Name.Class */ +.highlight .no { + color: #cb4b16; +} /* Name.Constant */ +.highlight .nd { + color: #22b3eb; +} /* Name.Decorator */ +.highlight .ni { + color: #cb4b16; +} /* Name.Entity */ +.highlight .ne { + color: #cb4b16; +} /* Name.Exception */ +.highlight .nf { + color: #22b3eb; +} /* Name.Function */ +.highlight .nl { + color: #586e75; +} /* Name.Label */ +.highlight .nn { + color: #586e75; +} /* Name.Namespace */ +.highlight .nx { + color: #586e75; +} /* Name.Other */ +.highlight .py { + color: #586e75; +} /* Name.Property */ +.highlight .nt { + color: #22b3eb; +} /* Name.Tag */ +.highlight .nv { + color: #22b3eb; +} /* Name.Variable */ +.highlight .ow { + color: #859900; +} /* Operator.Word */ +.highlight .w { + color: #586e75; +} /* Text.Whitespace */ +.highlight .mf { + color: #2aa198; +} /* Literal.Number.Float */ +.highlight .mh { + color: #2aa198; +} /* Literal.Number.Hex */ +.highlight .mi { + color: #2aa198; +} /* Literal.Number.Integer */ +.highlight .mo { + color: #2aa198; +} /* Literal.Number.Oct */ +.highlight .sb { + color: #93a1a1; +} /* Literal.String.Backtick */ +.highlight .sc { + color: #2aa198; +} /* Literal.String.Char */ +.highlight .sd { + color: #586e75; +} /* Literal.String.Doc */ +.highlight .s2 { + color: #2aa198; +} /* Literal.String.Double */ +.highlight .se { + color: #cb4b16; +} /* Literal.String.Escape */ +.highlight .sh { + color: #586e75; +} /* Literal.String.Heredoc */ +.highlight .si { + color: #2aa198; +} /* Literal.String.Interpol */ +.highlight .sx { + color: #2aa198; +} /* Literal.String.Other */ +.highlight .sr { + color: #dc322f; +} /* Literal.String.Regex */ +.highlight .s1 { + color: #2aa198; +} /* Literal.String.Single */ +.highlight .ss { + color: #2aa198; +} /* Literal.String.Symbol */ +.highlight .bp { + color: #22b3eb; +} /* Name.Builtin.Pseudo */ +.highlight .vc { + color: #22b3eb; +} /* Name.Variable.Class */ +.highlight .vg { + color: #22b3eb; +} /* Name.Variable.Global */ +.highlight .vi { + color: #22b3eb; +} /* Name.Variable.Instance */ +.highlight .il { + color: #2aa198; +} /* Literal.Number.Integer.Long */ diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 229c3328..052ab0c5 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -14,8 +14,8 @@ $indent-var: 1.3em; /* system typefaces */ $serif: Georgia, Times, serif; -$sans-serif: "Lato", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, - sans-serif; +$sans-serif: "DMSans", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, + sans-serif; $monospace: "Source Code Pro", Monaco, Consolas, "Lucida Console", monospace; /* sans serif typefaces */ @@ -43,14 +43,27 @@ $type-size-6: 0.75em; // ~12px $type-size-7: 0.6875em; // ~11px $type-size-8: 0.625em; // ~10px +$type-sizes: $type-size-1, $type-size-2, $type-size-3, $type-size-4, + $type-size-5, $type-size-6, $type-size-7, $type-size-8; + +@for $i from 1 through length($type-sizes) { + $size: nth($type-sizes, $i); + + .t-#{$i + 1} { + --font-size: #{$size}; + font-size: #{$size}; + } +} + /* Colors ========================================================================== */ $general-background: #f0f5ff; $dark-milk: #7d93bd; -$dark-blue: #263248; +$dark-blue: #2d69f6; $light-blue: #7e8aa2; +$lighter-blue: #c3ecfb; $very-light-blue: #becdea; $orange: #ff9800; @@ -61,14 +74,15 @@ $head-border-bottom: #f0f5ff; $gray: #666666; $dark-gray: mix(#000, $gray, 40%); $darker-gray: mix(#000, $gray, 60%); -$light-gray: mix(#fff, $gray, 50%); +$light-gray: #f8f7f9; $lighter-gray: mix(#fff, $gray, 90%); +$blue: #2d69f6; $body-color: #fff; $background-color: #fff; $code-background-color: #fafafa; $code-background-color-dark: $light-gray; -$text-color: $gray; +$text-color: #0f0f0f; $border-color: $lighter-gray; $primary-color: $gray; @@ -104,7 +118,7 @@ $mocklab-dark-green: #036334; /* links */ $head-nav-links: #7d93bd; -$link-color: $info-color; +$link-color: $blue; $link-color-hover: mix(#000, $link-color, 25%); $link-color-visited: mix(#fff, $link-color, 25%); $masthead-link-color: $orange; @@ -132,20 +146,20 @@ $right-sidebar-width: 300px; $right-sidebar-width-wide: 400px; $susy: ( - columns: 12, - // column-width: 90px, - gutters: 1/4, - math: fluid, - output: float, - gutter-position: after, - container: $large, - global-box-sizing: border-box, - // debug: ( - // image: show, - // color: blue, - // output: overlay, - // toggle: top right, - // ),,,,,,,,,,,,,,,,,,,,,,,,,,, + columns: 12, + // column-width: 90px, + gutters: 1 * 0.25, + math: fluid, + output: float, + gutter-position: after, + container: $large, + global-box-sizing: border-box, + // debug: ( + // image: show, + // color: blue, + // output: overlay, + // toggle: top right, + // ),,,,,,,,,,,,,,,,,,,,,,,,,,, ); /* @@ -157,3 +171,10 @@ $box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); $navicon-width: 28px; $navicon-height: 4px; $global-transition: all 0.2s ease-in-out; + +$p-s: 6px; +$p-m: 12px; +$p-l: 24px; +$p-xl: 36px; +$p-2xl: 48px; +$p-3xl: 72px; diff --git a/_sass/faq.scss b/_sass/faq.scss index f65a8722..6b35c2a2 100644 --- a/_sass/faq.scss +++ b/_sass/faq.scss @@ -1,25 +1,82 @@ +.faq-wrapper { + margin: 36px 0; +} + .faq { margin: 0 auto; - padding: 0 5em; + + @include breakpoint($medium) { + display: grid; + grid-template-columns: 15% 1fr; + gap: 160px; + + &__title { + margin: 0; + padding: 0; + font-size: 32px; + line-height: 40px; + font-weight: 700; + } + } + + &__title { + &:before { + margin-bottom: 12px; + width: 38px; + height: 38px; + border-radius: 32px; + content: url(/assets/svg/faq.svg); + background: linear-gradient( + rgba(255, 149, 5, 0.5019607843), + rgba(255, 149, 5, 0) + ); + display: block; + padding: 6px; + } + } } .faq-list { + @include breakpoint($large) { + margin-bottom: 100px; + } + dt { + padding: $p-m 0; font-size: 20px; color: #000; - font-weight: bold; + font-weight: 500; - &:before { - content: ''; - border-left: transparent; - border-right: transparent; - border-bottom: 10px solid #000; + @include breakpoint($medium) { + padding: $p-l 0; + font-size: 24px; + line-height: 32px; + + &:first-child { + padding-top: 0; + } + } + } + + &__icon { + align-self: flex-end; + @include fa-icon(); + @extend .fa-plus; + color: #2d69f6; + margin-left: auto; + } + + &--expanded { + .faq-list__icon { + @extend .fa-minus; } } dt { + display: flex; + &.faq-list--collapsed { - margin-bottom: 12px; + border-bottom: 2px solid #dbd8df; & + dd { display: none; @@ -27,28 +84,22 @@ } &.faq-list--expanded { - .faq-list-arrow { - transform: rotate(45deg); - } + border-bottom: none; & + dd { + border-bottom: 2px solid #dbd8df; display: block; } } } dd { - margin: 0 0 16px 0; - } + margin: 0; + padding: $p-m 0; + font-size: 16px; - &-arrow { - border: solid black; - border-width: 0 3px 3px 0; - display: inline-block; - padding: 3px; - transform: rotate(-45deg); - top: -4px; - margin-right: 10px; - position: relative; + @include breakpoint($medium) { + padding-bottom: $p-l 0; + } } -} \ No newline at end of file +} diff --git a/_sass/vendor/breakpoint/_helpers.scss b/_sass/vendor/breakpoint/_helpers.scss index 97e522d1..1accfe9e 100644 --- a/_sass/vendor/breakpoint/_helpers.scss +++ b/_sass/vendor/breakpoint/_helpers.scss @@ -1,6 +1,8 @@ ////////////////////////////// // Converts the input value to Base EMs ////////////////////////////// +@use "sass:math"; + @function breakpoint-to-base-em($value) { $value-unit: unit($value); @@ -9,7 +11,7 @@ $base-unit: unit(breakpoint-get('base font size')); @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' { - @return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em; + @return math.div(base-conversion($value), base-conversion(breakpoint-get('base font size'))) * 1em; } @else { @warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!'; @@ -25,16 +27,16 @@ $unit: unit($value); @if $unit == 'px' { - @return $value / 16px * 1em; + @return math.div($value, 16px) * 1em; } @else if $unit == '%' { - @return $value / 100% * 1em; + @return math.div($value, 100%) * 1em; } @else if $unit == 'em' { @return $value; } @else if $unit == 'pt' { - @return $value / 12pt * 1em; + @return math.div($value, 12pt) * 1em; } @else { @return $value; diff --git a/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss b/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss index 36804212..205e25cd 100644 --- a/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss +++ b/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @function breakpoint-make-resolutions($resolution) { $length: length($resolution); @@ -34,8 +36,8 @@ // Write out feature tests $webkit: ''; $moz: ''; - $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})'; - $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})'; + $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{math.div($value, $base)})'; + $moz: '(#{$feature}-moz-device-pixel-ratio: #{math.div($value, $base)})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); @@ -44,9 +46,9 @@ @else { $webkit: ''; $moz: ''; - $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})'; - $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})'; - $fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})'; + $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{math.div($value, 1dppx)})'; + $moz: '(#{$feature}-moz-device-pixel-ratio: #{math.div($value, 1dppx)})'; + $fallback: '(#{$feature}resolution: #{math.div($value, 1dppx) * 96dpi})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); diff --git a/_sass/vendor/font-awesome/_core.scss b/_sass/vendor/font-awesome/_core.scss index 7425ef85..04ab1e5e 100644 --- a/_sass/vendor/font-awesome/_core.scss +++ b/_sass/vendor/font-awesome/_core.scss @@ -1,9 +1,11 @@ // Base Class Definition // ------------------------- +@use "sass:list"; + .#{$fa-css-prefix} { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/_sass/vendor/font-awesome/_fixed-width.scss b/_sass/vendor/font-awesome/_fixed-width.scss index b221c981..5411f953 100644 --- a/_sass/vendor/font-awesome/_fixed-width.scss +++ b/_sass/vendor/font-awesome/_fixed-width.scss @@ -1,6 +1,8 @@ // Fixed Width Icons // ------------------------- +@use "sass:math"; + .#{$fa-css-prefix}-fw { - width: (18em / 14); + width: math.div(18em, 14); text-align: center; } diff --git a/_sass/vendor/font-awesome/_larger.scss b/_sass/vendor/font-awesome/_larger.scss index 41e9a818..a4065941 100644 --- a/_sass/vendor/font-awesome/_larger.scss +++ b/_sass/vendor/font-awesome/_larger.scss @@ -2,9 +2,11 @@ // ------------------------- /* makes the font 33% larger relative to the icon container */ +@use "sass:math"; + .#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); + font-size: math.div(4em, 3); + line-height: (3em * 0.25); vertical-align: -15%; } .#{$fa-css-prefix}-2x { font-size: 2em; } diff --git a/_sass/vendor/font-awesome/_list.scss b/_sass/vendor/font-awesome/_list.scss index 7d1e4d54..988e6f87 100644 --- a/_sass/vendor/font-awesome/_list.scss +++ b/_sass/vendor/font-awesome/_list.scss @@ -1,6 +1,8 @@ // List Icons // ------------------------- +@use "sass:math"; + .#{$fa-css-prefix}-ul { padding-left: 0; margin-left: $fa-li-width; @@ -11,9 +13,9 @@ position: absolute; left: -$fa-li-width; width: $fa-li-width; - top: (2em / 14); + top: math.div(2em, 14); text-align: center; &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); + left: -$fa-li-width + math.div(4em, 14); } } diff --git a/_sass/vendor/font-awesome/_mixins.scss b/_sass/vendor/font-awesome/_mixins.scss index c3bbd574..86f51385 100644 --- a/_sass/vendor/font-awesome/_mixins.scss +++ b/_sass/vendor/font-awesome/_mixins.scss @@ -1,9 +1,11 @@ // Mixins // -------------------------- +@use "sass:list"; + @mixin fa-icon() { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/_sass/vendor/font-awesome/_variables.scss b/_sass/vendor/font-awesome/_variables.scss index 1f374d6c..2826e022 100644 --- a/_sass/vendor/font-awesome/_variables.scss +++ b/_sass/vendor/font-awesome/_variables.scss @@ -1,6 +1,8 @@ // Variables // -------------------------- +@use "sass:math"; + $fa-font-path: "../fonts" !default; $fa-font-size-base: 14px !default; $fa-line-height-base: 1 !default; @@ -9,7 +11,7 @@ $fa-css-prefix: fa !default; $fa-version: "4.6.1" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; -$fa-li-width: (30em / 14) !default; +$fa-li-width: math.div(30em, 14) !default; $fa-var-500px: "\f26e"; $fa-var-adjust: "\f042"; diff --git a/_sass/vendor/magnific-popup/_magnific-popup.scss b/_sass/vendor/magnific-popup/_magnific-popup.scss index 27b27bcc..45826fb3 100644 --- a/_sass/vendor/magnific-popup/_magnific-popup.scss +++ b/_sass/vendor/magnific-popup/_magnific-popup.scss @@ -1,5 +1,7 @@ /* Magnific Popup CSS */ +@use "sass:math"; + @import "settings"; //////////////////////// @@ -52,7 +54,7 @@ $mfp-include-iframe-type: true !default; $mfp-iframe-padding-top: 40px !default; $mfp-iframe-background: #000 !default; $mfp-iframe-max-width: 900px !default; -$mfp-iframe-ratio: 9/16 !default; +$mfp-iframe-ratio: math.div(9, 16) !default; // Image-type options $mfp-include-image-type: true !default; diff --git a/_sass/vendor/magnific-popup/_settings.scss b/_sass/vendor/magnific-popup/_settings.scss index caaca026..9f912c3d 100644 --- a/_sass/vendor/magnific-popup/_settings.scss +++ b/_sass/vendor/magnific-popup/_settings.scss @@ -3,6 +3,8 @@ //////////////////////// // overlay +@use "sass:math"; + $mfp-overlay-color: #000; // Color of overlay screen $mfp-overlay-opacity: 0.8; // Opacity of overlay screen $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe @@ -28,7 +30,7 @@ $mfp-include-iframe-type: true; // Enable Ifra $mfp-iframe-padding-top: 40px; // Iframe padding top $mfp-iframe-background: #000; // Background color of iframes $mfp-iframe-max-width: 900px; // Maximum width of iframes -$mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) +$mfp-iframe-ratio: math.div(9, 16); // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) // Image-type options $mfp-include-image-type: true; // Enable Image-type popups diff --git a/_sass/vendor/susy/susy/language/susy/_background.scss b/_sass/vendor/susy/susy/language/susy/_background.scss index d39dc721..752b0d36 100644 --- a/_sass/vendor/susy/susy/language/susy/_background.scss +++ b/_sass/vendor/susy/susy/language/susy/_background.scss @@ -1,6 +1,8 @@ // Background Grid Syntax // ====================== +@use "sass:math"; + $susy-overlay-grid-head-exists: false; @@ -156,16 +158,16 @@ $susy-overlay-grid-head-exists: false; $_light : lighten($_color, 15%); $_end : 1 + $_gutters; - $_after : percentage(1/$_end); + $_after : percentage(math.div(1, $_end)); $_stops : (); $_size : span(1 $grid wide); @if is-inside($grid) { $_stops: $_color, $_light; } @else if is-split($grid) { - $_split: $_gutters/2; - $_before: percentage($_split/$_end); - $_after: percentage((1 + $_split)/$_end); + $_split: $_gutters*0.5; + $_before: percentage(math.div($_split, $_end)); + $_after: percentage(math.div(1 + $_split, $_end)); $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after; } @else { $_stops: $_color, $_light $_after, $_trans $_after; diff --git a/_sass/vendor/susy/susy/language/susy/_gallery.scss b/_sass/vendor/susy/susy/language/susy/_gallery.scss index e59b9a0c..9d2f0c1b 100644 --- a/_sass/vendor/susy/susy/language/susy/_gallery.scss +++ b/_sass/vendor/susy/susy/language/susy/_gallery.scss @@ -6,6 +6,8 @@ // Create an isolated gallery // - $span : // - [$selector] : child | of-type +@use "sass:math"; + @mixin gallery( $span, $selector: child @@ -21,7 +23,7 @@ $inside : is-inside($span); $from : from($flow); - $line : floor($context / $n); + $line : floor(math.div($context, $n)); $symmetrical : is-symmetrical($columns); $output: ( diff --git a/_sass/vendor/susy/susy/language/susy/_gutters.scss b/_sass/vendor/susy/susy/language/susy/_gutters.scss index efe7ac20..c11211c4 100644 --- a/_sass/vendor/susy/susy/language/susy/_gutters.scss +++ b/_sass/vendor/susy/susy/language/susy/_gutters.scss @@ -6,6 +6,8 @@ // ------- // Set gutters on an element. // - [$span] : +@use "sass:math"; + @mixin gutters( $span: $susy ) { @@ -77,7 +79,7 @@ } @else { $_columns : susy-get(columns, $context); $_spread : if(is-split($context), wide, susy-get(spread, $context)); - $_gutter : percentage($_gutters / susy-sum($_columns, $_gutters, $_spread)); + $_gutter : percentage(math.div($_gutters, susy-sum($_columns, $_gutters, $_spread))); } } @@ -102,7 +104,7 @@ $_return : (before: null, after: null); @if is-split($context) and $_gutter { - $_gutter: $_gutter / 2; + $_gutter: $_gutter * 0.5; $_return: map-merge($_return, (before: $_gutter, after: $_gutter)); } @else { $_return: map-merge($_return, ($_gutter-position: $_gutter)); diff --git a/_sass/vendor/susy/susy/language/susy/_settings.scss b/_sass/vendor/susy/susy/language/susy/_settings.scss index 9b5d897d..bec4a411 100644 --- a/_sass/vendor/susy/susy/language/susy/_settings.scss +++ b/_sass/vendor/susy/susy/language/susy/_settings.scss @@ -4,6 +4,8 @@ // Susy Language Defaults // ---------------------- // - PRIVATE +@use "sass:math"; + @include susy-defaults(( container: auto, math: fluid, @@ -90,7 +92,7 @@ $susy-keywords: ( @if type-of($_gutters) == list and length($_gutters) > 0 { $_gutters: ( - gutters: nth($_gutters, 2) / nth($_gutters, 1), + gutters: math.div(nth($_gutters, 2), nth($_gutters, 1)), column-width: nth($_gutters, 1), ); } @else { diff --git a/_sass/vendor/susy/susy/language/susy/_span.scss b/_sass/vendor/susy/susy/language/susy/_span.scss index 86ccda91..4e9f6463 100644 --- a/_sass/vendor/susy/susy/language/susy/_span.scss +++ b/_sass/vendor/susy/susy/language/susy/_span.scss @@ -5,6 +5,8 @@ // ------------ // Set a spanning element using shorthand syntax. // - $span : +@use "sass:math"; + @mixin span( $span ) { @@ -153,7 +155,7 @@ @if $_math == static { $width: $span-sum * valid-column-math($_math, $_column-width); } @else { - $width: percentage($span-sum / $context); + $width: percentage(math.div($span-sum, $context)); } } @else { $width: $n; diff --git a/_sass/vendor/susy/susy/language/susyone/_functions.scss b/_sass/vendor/susy/susy/language/susyone/_functions.scss index 68184589..381e5003 100644 --- a/_sass/vendor/susy/susy/language/susyone/_functions.scss +++ b/_sass/vendor/susy/susy/language/susyone/_functions.scss @@ -2,6 +2,8 @@ // Imports // We need access to some basic font settings for handling media-queries. +@use "sass:math"; + @import "compass/typography/vertical_rhythm"; // For now, we also need this... @@ -143,7 +145,7 @@ $rem-with-px-fallback : true !default; $width, $context : $total-columns ) { - @return percentage($width / columns-width($context)); + @return percentage(math.div($width, columns-width($context))); } // Return the total space occupied by multiple columns and associated gutters. @@ -225,19 +227,19 @@ $rem-with-px-fallback : true !default; ){ $font-size : if(unit($ems) == 'rem', $base-font-size, $font-size); $unit : unit($font-size); - $mult : $ems / ($ems * 0 + 1); + $mult : math.div($ems, $ems * 0 + 1); @if $unit == 'px' { - @return $font-size / $browser-default-font-size-px * $mult * 1em; + @return math.div($font-size, $browser-default-font-size-px) * $mult * 1em; } @else if $unit == '%' { - @return $font-size / $browser-default-font-size-percent * $mult * 1em; + @return math.div($font-size, $browser-default-font-size-percent) * $mult * 1em; } @else if $unit == 'em' { - @return $font-size / 1em * $mult * 1em; + @return math.div($font-size, 1em) * $mult * 1em; } @else if $unit == 'pt' { - @return $font-size / $browser-default-font-size-pt * $mult * 1em; + @return math.div($font-size, $browser-default-font-size-pt) * $mult * 1em; } @else { @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.'; @@ -347,7 +349,7 @@ $rem-with-px-fallback : true !default; $return : false; @if comparable($min, $column-width) { - $return : ceil(($min + $gutter-width) / ($column-width + $gutter-width)); + $return : ceil(math.div($min + $gutter-width, $column-width + $gutter-width)); } @else { @warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable."; } diff --git a/_sass/vendor/susy/susy/language/susyone/_isolation.scss b/_sass/vendor/susy/susy/language/susyone/_isolation.scss index 2b70038b..378bb1a4 100644 --- a/_sass/vendor/susy/susy/language/susyone/_isolation.scss +++ b/_sass/vendor/susy/susy/language/susyone/_isolation.scss @@ -6,6 +6,8 @@ // $location : The grid column to isolate in, relative to the container; // $context : [optional] The context (columns spanned by parent). // $from : The start direction of your layout (e.g. 'left' for ltr languages) +@use "sass:math"; + @mixin isolate( $location, $context: $total-columns, @@ -32,7 +34,7 @@ ) { $to: opposite-position($from); $location: 1; - $line: floor($context / $columns); + $line: floor(math.div($context, $columns)); @include span-columns($columns, $context, $from: $from, $style: $style); margin-#{$to}: -100%; diff --git a/assets/css/faq.css b/assets/css/faq.css deleted file mode 100644 index 5a195e66..00000000 --- a/assets/css/faq.css +++ /dev/null @@ -1,3 +0,0 @@ -.faq{margin:0 auto;padding:0 5em}.faq-list dt{font-size:20px;color:#000;font-weight:bold}.faq-list dt:before{content:'';border-left:transparent;border-right:transparent;border-bottom:10px solid #000}.faq-list dt.faq-list--collapsed{margin-bottom:12px}.faq-list dt.faq-list--collapsed+dd{display:none}.faq-list dt.faq-list--expanded .faq-list-arrow{transform:rotate(45deg)}.faq-list dt.faq-list--expanded+dd{display:block}.faq-list dd{margin:0 0 16px 0}.faq-list-arrow{border:solid black;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(-45deg);top:-4px;margin-right:10px;position:relative} - -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZhcS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0FBSyxhQUFhLENBQUMsYUFBYSxDQUFDLGFBQWEsY0FBYyxDQUFDLFVBQVUsQ0FBQyxnQkFBZ0IsQ0FBQyxvQkFBb0IsVUFBVSxDQUFDLHVCQUF1QixDQUFDLHdCQUF3QixDQUFDLDZCQUE2QixDQUFDLGlDQUFpQyxrQkFBa0IsQ0FBQyxvQ0FBb0MsWUFBWSxDQUFDLGdEQUFnRCx1QkFBdUIsQ0FBQyxtQ0FBbUMsYUFBYSxDQUFDLGFBQWEsaUJBQWlCLENBQUMsZ0JBQWdCLGtCQUFrQixDQUFDLHdCQUF3QixDQUFDLG9CQUFvQixDQUFDLFdBQVcsQ0FBQyx3QkFBd0IsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsaUJBQWlCIiwiZmlsZSI6ImZhcS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZmFxe21hcmdpbjowIGF1dG87cGFkZGluZzowIDVlbX0uZmFxLWxpc3QgZHR7Zm9udC1zaXplOjIwcHg7Y29sb3I6IzAwMDtmb250LXdlaWdodDpib2xkfS5mYXEtbGlzdCBkdDpiZWZvcmV7Y29udGVudDonJztib3JkZXItbGVmdDp0cmFuc3BhcmVudDtib3JkZXItcmlnaHQ6dHJhbnNwYXJlbnQ7Ym9yZGVyLWJvdHRvbToxMHB4IHNvbGlkICMwMDB9LmZhcS1saXN0IGR0LmZhcS1saXN0LS1jb2xsYXBzZWR7bWFyZ2luLWJvdHRvbToxMnB4fS5mYXEtbGlzdCBkdC5mYXEtbGlzdC0tY29sbGFwc2VkK2Rke2Rpc3BsYXk6bm9uZX0uZmFxLWxpc3QgZHQuZmFxLWxpc3QtLWV4cGFuZGVkIC5mYXEtbGlzdC1hcnJvd3t0cmFuc2Zvcm06cm90YXRlKDQ1ZGVnKX0uZmFxLWxpc3QgZHQuZmFxLWxpc3QtLWV4cGFuZGVkK2Rke2Rpc3BsYXk6YmxvY2t9LmZhcS1saXN0IGRke21hcmdpbjowIDAgMTZweCAwfS5mYXEtbGlzdC1hcnJvd3tib3JkZXI6c29saWQgYmxhY2s7Ym9yZGVyLXdpZHRoOjAgM3B4IDNweCAwO2Rpc3BsYXk6aW5saW5lLWJsb2NrO3BhZGRpbmc6M3B4O3RyYW5zZm9ybTpyb3RhdGUoLTQ1ZGVnKTt0b3A6LTRweDttYXJnaW4tcmlnaHQ6MTBweDtwb3NpdGlvbjpyZWxhdGl2ZX1cbiJdfQ== */ \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index 40efcaa5..0af1c9c1 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -30,6 +30,7 @@ search: false @import "navigation"; @import "footer"; @import "syntax"; +@import "notify"; @import "forms"; @@ -48,4 +49,6 @@ search: false @import "print"; @import "faq"; +@import "code"; + @import "mocklab-popup"; diff --git a/assets/fonts/DMSans-Medium.ttf b/assets/fonts/DMSans-Medium.ttf new file mode 100644 index 00000000..c29713e5 Binary files /dev/null and b/assets/fonts/DMSans-Medium.ttf differ diff --git a/assets/fonts/DMSans-Regular.ttf b/assets/fonts/DMSans-Regular.ttf new file mode 100644 index 00000000..28ff3c87 Binary files /dev/null and b/assets/fonts/DMSans-Regular.ttf differ diff --git a/assets/js/notifications.js b/assets/js/notifications.js index 38482e81..64232636 100644 --- a/assets/js/notifications.js +++ b/assets/js/notifications.js @@ -1,83 +1,83 @@ - - - -var wiremock_notification_shown = localStorage.getItem("wiremock_notification_shown"); +var wiremock_notification_shown = localStorage.getItem( + "wiremock_notification_shown", +); var notifications = [ - { + { content: { - title: "Join us for Hacktoberfest 2023! " + + title: + "Join us for Hacktoberfest 2023! " + "Adopt WireMock in your projects and contribute to open source. " + "Learn More", - }, - layout: { style: "wiremock_notification_with_link", position: "top", className: "info", autoHide: false} - } + }, + layout: { + style: "wiremock_notification_with_link", + position: "top", + className: "info", + autoHide: false, + }, + }, ]; if (wiremock_notification_shown == null) { - localStorage.setItem("wiremock_notification_shown", true); + localStorage.setItem("wiremock_notification_shown", true); - $.notify.addStyle("wiremock_notification_with_link", { - html: - "
" + - "
" + - "
" + - "
" + - "
", - classes: { - base: { - "font-weight": "bold", - "padding": "8px 15px 8px 14px", - "text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)", - "background-color": "#fcf8e3", - "border": "1px solid #fbeed5", - "border-radius": "4px", - "white-space": "nowrap", - "padding-left": "25px", - "background-repeat": "no-repeat", - "background-position": "3px 7px", - "width": "100%", - }, - error: { - "color": "#B94A48", - "background-color": "#F2DEDE", - "border-color": "#EED3D7", - "background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)" - }, - success: { - "color": "#468847", - "background-color": "#DFF0D8", - "border-color": "#D6E9C6", - "background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)" - }, - info: { - "color": "#3A87AD", - "background-color": "#D9EDF7", - "border-color": "#BCE8F1", - "background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)" - }, - warn: { - "color": "#C09853", - "background-color": "#FCF8E3", - "border-color": "#FBEED5", - "background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)" - } - } - }); + $.notify.addStyle("wiremock_notification_with_link", { + html: + "
" + + "
" + + "
" + + "
" + + "
", + classes: { + base: { + "font-weight": "bold", + padding: "8px 15px 8px 14px", + "text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)", + "background-color": "#fcf8e3", + border: "1px solid #fbeed5", + "border-radius": "4px", + "white-space": "nowrap", + "padding-left": "25px", + "background-repeat": "no-repeat", + "background-position": "3px 7px", + width: "100%", + }, + error: { + color: "#B94A48", + "background-color": "#F2DEDE", + "border-color": "#EED3D7", + "background-image": + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=)", + }, + success: { + color: "#468847", + "background-color": "#DFF0D8", + "border-color": "#D6E9C6", + "background-image": + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==)", + }, + info: { + color: "#3A87AD", + "background-color": "#D9EDF7", + "border-color": "#BCE8F1", + "background-image": + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=)", + }, + warn: { + color: "#C09853", + "background-color": "#FCF8E3", + "border-color": "#FBEED5", + "background-image": + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC)", + }, + }, + }); - notifications.forEach(element => { - $.notify(element.content, element.layout) - }); - - document.querySelector(".masthead_notifications").style.height = (50 * notifications.length) + "px"; + notifications.forEach((element) => { + $.notify(element.content, element.layout); + }); + document.querySelector(".masthead_notifications").style.height = + 50 * notifications.length + "px"; } else { - document.querySelector(".masthead_notifications").style.height = "0px"; + document.querySelector(".masthead_notifications").style.height = "0px"; } - - - - - - - - - diff --git a/assets/svg/bullet.svg b/assets/svg/bullet.svg new file mode 100644 index 00000000..1e4870b9 --- /dev/null +++ b/assets/svg/bullet.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/cloud-logo.svg b/assets/svg/cloud-logo.svg new file mode 100644 index 00000000..9b2e68cd --- /dev/null +++ b/assets/svg/cloud-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/svg/cloud.svg b/assets/svg/cloud.svg new file mode 100644 index 00000000..42fa4e57 --- /dev/null +++ b/assets/svg/cloud.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/faq.svg b/assets/svg/faq.svg new file mode 100644 index 00000000..09ac4cd5 --- /dev/null +++ b/assets/svg/faq.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/svg/source.svg b/assets/svg/source.svg new file mode 100644 index 00000000..1297be96 --- /dev/null +++ b/assets/svg/source.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index d212f4f6..84a0a719 100644 --- a/index.html +++ b/index.html @@ -15,230 +15,342 @@ #a-wiremock-cloud { display: none; } -
-

WireMock: Mock the APIs You Depend On

+

Mock the APIs You Depend On

-

Open Source

+

+ source + Open Source +

- The core WireMock engine.
Embed in your test code, run as a standalone process, or deploy via Docker. + The core WireMock engine.
+ Embed in your test code, run as a standalone process, or deploy via + Docker.

-

Cloud

+

+ cloud + Cloud +

- Web UI with team collaboration, OpenAPI + Swagger support, and chaos testing. -

-

- Start on the generous free-forever tier: + Web UI with team collaboration, OpenAPI + Swagger support, and chaos + testing.

+

Start on the generous free-forever tier:

-
-
-
-
-

Flexible API Mocking for Testing and Development

+
+
+
+

+ Flexible API Mocking for Testing and + Development +

-
- - GitHub Repo stars - - - GitHub forks - - - Downloads - - - Contributors - +
+ + GitHub Repo stars + + + GitHub forks + + + Downloads + + + Contributors + - -
- - -

WireMock is a tool for building mock APIs. Create stable development environments, isolate yourself from flakey 3rd parties and simulate APIs that don't exist yet.

+ -->
- -
-
-

-   - Join us for Hacktoberfest 2023!

-

- Learn WireMock and contribute to open source -

-

- - - -

-

- This October we participate in Hacktoberfest - a global open source hack fest. - We invite you to join us, regardless of your profile and technology stack. -

-

- Adopt WireMock in your projects, contribute new features and fixes, - improve docs, create new demos and artwork, etc. -

-

- Learn More... -

-
-
-
- -
- z -
-
- wiremock cloud screenshot -
-
- -
- wiremock cloud logo -

Hosted API mocking for everyone

- -
    -
  • SaaS, nothing to install
    • -
  • For individuals, teams and enterprises
    • -
  • Intuitive web UI for developers
    • -
  • OpenAPI, Swagger and Postman import
    • -
  • NEW: Chaos Engineering
    • -
  • Generous free plan
    • -
- -
- Learn more - Sign Up for Free -
-
-
- -
-

Key Features

-

WireMock frees you from dependency on unstable APIs and allows you to develop with confidence. It's easy to launch a mock API server and simulate a host of real-world scenarios and APIs - including REST, SOAP, OAuth2 and more.

-
-
- Wiremock Features -

- Advanced request -

-

- matching -

-
-
- wiremock dynamic response -

- Dynamic response -

- templating + WireMock is a tool for building mock APIs. Create stable development + environments, isolate yourself from flakey 3rd parties and simulate + APIs that don't exist yet.

+ +
+ Documentation + Slack Community +
-
- wiremock unit tests +
+

+   Join us for Hacktoberfest 2023! +

+

Learn WireMock and contribute to open source

- Run in your unit tests, on your + + +

- laptop or in your test environment. + This October we participate in Hacktoberfest - a global open source + hack fest. We invite you to join us, regardless of your profile and + technology stack.

-
-
- wiremock fault and latency

- Fault and latency + Adopt WireMock in your projects, contribute new features and fixes, + improve docs, create new demos and artwork, etc.

- injection + Learn More...

-
- wiremock record playback -

- Record / Playback -

+
+
+
+ +
+
+ z +
+
+ wiremock cloud screenshot
-
- wiremock java, python, http -

- Java, Python, HTTP and -

-

- JSON file APIs -

+
+ +
+ +

Hosted API mocking for everyone

+ +
    +
  • SaaS, nothing to install
    • +
  • For individuals, teams and enterprises
    • +
  • Intuitive web UI for developers
    • +
  • OpenAPI, Swagger and Postman import
    • +
  • NEW: Chaos Engineering
    • +
  • Generous free plan
    • +
+ +
+ Learn more + Sign Up for Free +
-
- Full Documentation -
- +
-
-

Downloads

-

WireMock is available as a standalone service, Java library - and integrations for modern languages and technology stacks. +

+
+

Key Features

+

+ WireMock frees you from dependency on unstable APIs and allows you to + develop with confidence. It's easy to launch a mock API server and + simulate a host of real-world scenarios and APIs - including REST, SOAP, + OAuth2 and more.

+
+
+
+ Wiremock Features +
+

Advanced request matching

+
+
+
+ wiremock dynamic response +
+

Dynamic response templating

+
+
+
+ wiremock unit tests +
+

+ Run in your unit tests, on your laptop or in your test environment. +

+
+
+
+ wiremock fault and latency +
+

Fault and latency injection

+
+
+
+ wiremock record playback +
+

Record / Playback

+
+
+
+ wiremock java, python, http +
+

Java, Python, HTTP and

+

JSON file APIs

+
+
+ Full Documentation +
+
+
+

Downloads

+

+ WireMock is available as a standalone service, Java library and + integrations for modern languages and technology stacks. +

- {% include downloads.html show_standalone="true" %} + {% include downloads.html show_standalone="true" %} +
-
+
+
+

Frequently Asked Questions

-
-
-

FAQ

-
-
What is WireMock?
-
WireMock is a free API mocking tool that can be run as a standalone server, or in a hosted version via the WireMock Cloud managed service.
+
+
What is WireMock?
+
+ WireMock is a free API mocking tool that can be run as a standalone + server, or in a hosted version via the + WireMock Cloud managed service. +
-
What is API mocking?
-
API mocking involves creating a simple simulation of an API, accepting the same types of request and returning identically structured responses as the real thing, enabling fast and reliable development and testing.
+
What is API mocking?
+
+ API mocking involves creating a simple simulation of an API, accepting + the same types of request and returning identically structured + responses as the real thing, enabling fast and reliable development + and testing. +
-
When do you need to mock APIs?
-
API mocking is typically used during development and testing as it allows you to build your app without worrying about 3rd party APIs or sandboxes breaking. It can also be used to rapidly prototype APIs that don’t exist yet.
+
When do you need to mock APIs?
+
+ API mocking is typically used during development and testing as it + allows you to build your app without worrying about 3rd party APIs or + sandboxes breaking. It can also be used to rapidly prototype APIs that + don’t exist yet. +
-
How do you create an API mock?
-
WireMock supports several approaches for creating mock APIs - in code, via its REST API, as JSON files and by recording HTTP traffic proxied to another destination.
+
How do you create an API mock?
+
+ WireMock supports several approaches for creating mock APIs - in code, + via its REST API, as JSON files and by recording HTTP traffic proxied + to another destination. +
-
What makes WireMock unique?
-
WireMock has a rich matching system, allowing any part of an incoming request to be matched against complex and precise criteria. Responses of any complexity can be dynamically generated via the Handlebars based templating system. Finally, WireMock is easy to integrate into any workflow due to its numerous extension points and comprehensive APIs.
+
What makes WireMock unique?
+
+ WireMock has a rich + matching system, allowing any + part of an incoming request to be matched against complex and precise + criteria. Responses of any complexity can be dynamically generated via + the Handlebars based templating system. Finally, WireMock is easy to + integrate into any workflow due to its numerous + extension points and + comprehensive APIs. +
-
Is WireMock open source?
-
Yes, WireMock is a completely open source API mocking tool (GitHub repo). If you’re looking for a hosted version of WireMock, check out WireMock Cloud.
+
Is WireMock open source?
+
+ Yes, WireMock is a completely open source API mocking tool (GitHub repo). If you’re looking for a hosted version of WireMock, check out + WireMock Cloud. +
-
Is WireMock a free service?
-
WireMock is completely free under the Apache 2.0 license.
-
-
+
Is WireMock a free service?
+
WireMock is completely free under the Apache 2.0 license.
+
+