docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Align with Design System (#16201) 

* add DDS colors to docs and change main variables and style.scss sheet

* find and replace colors from color-palette-2 and deprecate palette 2

* find and replace colors from color-palette-3 and deprecate palette 3

* more alignment with colors

* change typography

* typography tweaks

* fix fonts

* dark mode and accessibility

* review changes

* icons

* icons

* icons

* accessibility fix on footer

* review comments
This commit is contained in:
Allie Sadler 2022-11-30 15:57:19 +00:00 committed by GitHub
parent 3fe2d7a0e5
commit fef904be8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 687 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
_scss/_DS-colors.scss Normal file
View File

@ -0,0 +1,99 @@
// This file defines two palettes and is taken from Docker's Design System. The light palette should only be used
// in light mode, and vice versa. In general, if you use one of the colors
// in light mode, you should the same-named color in the dark palette in
// dark mode.
$white: #FFFFFF;
$light-page-background: #F9F9FA;
$dark-palette-background: #1C262D;
$grey-100: #EFEFF2;
$black: #000000;
// light palette contrast colors:
$light-grey-200: #E1E2E6;
$light-grey-300: #C4C8D1;
$light-grey-400: #8993A5;
$light-grey-500: #677285;
$light-grey-600: #505968;
$light-grey-700: #393F49;
$light-grey-800: #17191E;
$light-red-300: #EEA3A5;
$light-red-400: #E25D68;
$light-red-500: #D52536;
$light-red-600: #B72132;
$light-red-700: #8B1924;
$light-viole-200: #E9D4FF;
$light-viole-300: #C9A6FF;
$light-viole-400: #9860FF;
$light-viole-500: #7D2EFF;
$light-viole-600: #6D00EB;
$light-viole-700: #5700BB;
$light-viole-800: #220041;
$light-blue-100: #E5F2FC;
$light-blue-200: #C0E0FA;
$light-blue-300: #8BC7F5;
$light-blue-400: #1C90ED;
$light-blue-500: #086DD7;
$light-blue-600: #0055BD;
$light-blue-700: #1144A6;
$light-blue-800: #00084D;
$light-green-200: #C6EAE1;
$light-green-300: #88D5C0;
$light-green-400: #3BA08D;
$light-green-500: #2E7F74;
$light-green-600: #1E6C5F;
$light-green-700: #185A51;
$light-amber-100: #FFF4DC;
$light-amber-200: #FCE1A9;
$light-amber-300: #FBB552;
$light-amber-400: #DD7805;
$light-amber-500: #B85504;
// dark palette contrast colors:
$dark-grey-100: #141B1F;
$dark-grey-200: #27343E;
$dark-grey-300: #364754;
$dark-grey-400: #465C6E;
$dark-grey-500: #7794AB;
$dark-grey-600: #94ABBC;
$dark-grey-700: #ADBECB;
$dark-grey-800: #C4D0DA;
$dark-red-200: #951C2F;
$dark-red-300: #BC233C;
$dark-red-400: #D1334C;
$dark-red-500: #ED5669;
$dark-red-600: #E96C7C;
$dark-red-700: #EA8E9A;
$dark-red-800: #F0AAB4;
$dark-viole-100: #491D7B;
$dark-viole-200: #5F25A0;
$dark-viole-300: #7835D3;
$dark-viole-400: #8A53EC;
$dark-viole-500: #A371FC;
$dark-viole-600: #B38BFC;
$dark-viole-700: #C5A6FD;
$dark-viole-800: #D4BDFE;
$dark-blue-100: #06326D;
$dark-blue-200: #08489B;
$dark-blue-300: #1760CA;
$dark-blue-400: #2673E3;
$dark-blue-500: #3391EE;
$dark-blue-600: #55A4F1;
$dark-blue-700: #7CB9F4;
$dark-blue-800: #98C8F6;
$dark-green-200: #155048;
$dark-green-300: #176254;
$dark-green-400: #228375;
$dark-green-500: #2AA391;
$dark-green-600: #3CC1AD;
$dark-green-700: #7ACCC3;
$dark-green-800: #A5DDD6;
$dark-amber-300: #AF560A;
$dark-amber-400: #CD6A0A;
$dark-amber-500: #ED8D25;
$dark-amber-600: #F6A650;
$dark-amber-700: #F8B974;
$dark-amber-800: #FAC892;

4
_scss/_buttons.scss
View File

@ -57,10 +57,10 @@ a.button.outline-btn.min-hgt {
.outline-btn {
background: #fff;
border: 1px solid #0087C8;
border: 1px solid $light-blue-400;
margin: 0;
&:hover {
color: #1488C6;
color: $light-blue-400;
}
}

2
_scss/_color-palette-v3.scss
View File

@ -1,3 +1,5 @@
//This has now been deprecated. See DS-colors instead//
// This file defines two palettes. The light palette should only be used
// in light mode, and vice versa. In general, if you use one of the colors
// in light mode, you should the same-named color in the dark palette in

4
_scss/_content.scss
View File

@ -14,8 +14,8 @@
* Code formatting *************************************************************
*/
pre, code {
background-color: #f5f8fa!important;
color: #0c5176 !important;
background-color: $light-page-background!important;
color: $light-blue-600 !important;
}
pre {

14
_scss/_landing.scss
View File

@ -210,11 +210,11 @@ body.landing {
}
.cardlet {
background-color: $white-25;
background-color: $grey-100;
padding: 24px 36px;
.title {
font-family: "Open Sans", sans-serif;
font-family: "Roboto", sans-serif;
line-height: 22px;
font-size: 22px;
}
@ -250,8 +250,8 @@ body.landing {
}
a.btn {
background: #FF3F73;
color: white;
background: $white;
color: $dark-blue-400;
font-size: 17px;
margin-top: 20px;
padding: 15px 30px;
@ -270,12 +270,12 @@ body.landing {
.tab-section {
.title {
font-family: "Open Sans", sans-serif;
font-family: "Roboto", sans-serif;
font-size: 22px;
}
ul.nav.nav-tabs li a, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
@ -291,7 +291,7 @@ body.landing {
li.active a {
background-color: inherit;
border: none;
border-bottom: 5px solid $dark-blue;
border-bottom: 5px solid $dark-blue-500;
}
}

12
_scss/_layout.scss
View File

@ -124,7 +124,7 @@ border-right: 1px solid #ddd;
footer {
background: $white;
border-top: 1px solid #E0E4E7;
border-top: 1px solid $light-grey-200;
position: relative;
}
@ -138,7 +138,7 @@ footer {
li {
margin-bottom: 10px;
a {
color: #637986;
color: $black;
font-size: 12px;
line-height: 16px;
}
@ -157,7 +157,7 @@ footer {
margin-left: 10px;
padding-bottom: 6px;
a {
color: #637986;
color: $white;
font-size: 12px;
}
}
@ -167,7 +167,7 @@ footer {
.bottom_footer {
clear: both;
padding: 30px 0 20px;
border-top: 1px solid #E0E4E7;
border-top: 1px solid $light-grey-200;
float: left;
width: 100%;
}
@ -179,7 +179,7 @@ footer {
.footer-copyright p {
font-size: 12px;
line-height: 17px;
color: #637986;
color: $light-grey-500;
margin-bottom: 0;
padding: 0 0 15px;
}
@ -214,7 +214,7 @@ footer {
.footer_social_nav ul li a {
width: 32px;
height: 32px;
background-color: #82949E;
background-color: $light-grey-400;
border-radius: 50px;
color: $white;
display: block;

35
_scss/_navigation.scss
View File

@ -42,7 +42,7 @@
// Some links don't have 'href' attr, hence no mouse pointer
.nav-sidebar li a {
cursor: pointer;
color: $light-palette-grey-800;
color: $light-grey-800;
}
.nav-sidebar>li>a {
@ -53,8 +53,8 @@
.nav-sidebar>.active>a,
.nav-sidebar>.active>a:focus,
.nav-sidebar>.active>a:hover {
color: #2089C4;
background-color: #428bca;
color: $light-blue-600;
background-color: $light-blue-500;
}
.nav-sidebar ul {
@ -79,7 +79,7 @@
.nav-sidebar ul li a,
.nav-sidebar ul li a:focus {
border-bottom: none;
border-left: 1px solid $light-palette-grey-200;
// border-left: 1px solid $light-grey-200;
}
.nav-sidebar .nav > li > a {
@ -95,9 +95,9 @@
.nav-sidebar ul li a.active,
.nav-sidebar.nav > li > a:focus {
background: $bg-sidebar-active;
border-left: 4px solid $primary-links;
border-left: 4px solid $light-blue-500;
font-weight: 600;
color: #2089C4;
color: $light-blue-500;
}
.nav-sidebar ul li ul li a {
@ -139,34 +139,35 @@
display: inline-block;
font-size: 12px;
padding: 2px 10px 2px 10px;
color: #677285;
color: $light-grey-500;
}
.slider{
background-color: #e0e4e7;
border: 1px solid #e0e4e7;
background-color: $light-grey-200;
border: 1px solid $light-grey-200;
}
.slider:before{
background-color: #677285;
background-color: $light-grey-500;
}
}
}
.toc-nav li a.active {
border-left: 4px solid #677285;
border-left: 4px solid $light-grey-500;
font-weight: bold;
color: #677285;
color: $light-grey-500;
}
.toc-nav i.fa {
font-size: 14px;
margin: 0 8px 0 0;
color: #677285;
color: $light-grey-500;
}
div.side-toc-title {
font-size: 12px;
font-weight: bold;
margin: 11px 0 10px 13px;
color: $light-grey-500;
}
.edit {
@ -184,7 +185,7 @@ div.side-toc-title {
.icon {
width: 25px;
float: left;
font-size: 1.5rem;
font-size: 1rem;
}
}
@ -215,7 +216,7 @@ div.side-toc-title {
right: 0;
bottom: 0;
background-color: $slider-bg;
border: 1px solid #c3e4f7;
border: 1px solid $light-blue-200;
}
.slider:before {
@ -271,13 +272,13 @@ input:checked+.slider:before {
&:hover {
background-color: rgba(0, 0, 0, 0.17);
border-bottom: 4px solid rgba($white, 0.75);
border-bottom: 4px solid $white;
}
}
.navbar-nav > li.active > a {
cursor: default;
border-left: none;
border-bottom: 4px solid rgba($white, 0.5);
border-bottom: 4px solid $white;
}
}

77
_scss/_night-mode.scss
View File

@ -1,6 +1,8 @@
html.night {
color-scheme: dark;
$icons: rocket, download-docker, guides, language-guides, whats-new, manuals, reference;
body {
background-color: $bg-body-night;
color: $body-text-night;
@ -13,13 +15,33 @@ html.night {
.card, .cardlet {
color: inherit;
background-color: $bg-card-night;
&.rocket {
background-image: url(/assets/images/rocket-dark.svg)
}
&.download-docker {
background-image: url(/assets/images/download-docker-dark.svg)
}
&.guides {
background-image: url(/assets/images/guides-dark.svg)
}
&.language-guides {
background-image: url(/assets/images/language-guides-dark.svg)
}
&.manuals {
background-image: url(/assets/images/manuals-dark.svg)
}
&.reference {
background-image: url(/assets/images/reference-dark.svg)
}
}
footer {
background-color: $bg-footer-landing-night;
}
}
}
a {
color: $dark-blue-600;
}
.rating-nero-value,
.reading-time,
.release-date {
@ -31,16 +53,17 @@ html.night {
color: $white;
}
a:not(.btn):not(.button) {
color: $primary-links-night;
//color: $primary-links-night;
}
.header {
background-color: $bg-header-night;
color: $white;
}
hr {
border-top: 1px solid #4f6071;
}
.nav-secondary {
background-color: $bg-secondary-night;
background-color: $bg-header-night;
.search-form input[type=search] {
background-color: rgba(76, 76, 76, 0.47);
@ -52,22 +75,35 @@ html.night {
}
}
.breadcrumb {
background-color: $bg-sidebar-night-active;
border-bottom: 0.1px solid $primary-links;
background-color: $dark-grey-100;
border-bottom: 0.1px solid $dark-grey-700;
}
.sidebar,
.col-nav {
background-color: $bg-sidebar-night;
border: none;
color: $dark-grey-700;
}
.nav-sidebar li a {
cursor: pointer;
color: $dark-grey-700;
}
.toc-nav ul li a {
color: $dark-grey-700;
}
.nav-sidebar ul li a.active,
.nav-sidebar.nav > li > a:focus,
.toc-nav li a.active {
background: $bg-sidebar-night-active;
border-left: 4px solid $primary-links;
background: $dark-palette-background;
//border-left: 4px solid $dark-blue-800;
color: $white;
}
div.side-toc-title {
color: $dark-grey-700;
}
.navbar-nav > li.active > a {
border-color: $primary-links;
border-color: $dark-blue-600;
border-bottom: 4px solid $white;
}
.slider {
background-color: #344658;
@ -89,7 +125,7 @@ html.night {
border: 1px solid $black;
}
code {
color: #c1f1f0 !important;
color: $dark-grey-700 !important;
background: #0a121b !important;
}
.nav-secondary .dropdown-btn {
@ -134,14 +170,14 @@ html.night {
background-color: #192837!important;
}
a.gs-title {
color: #cccccc !important;
color: $dark-grey-700 !important;
text-decoration: none;
}
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
color: #a8b0b7!important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
color: #a9e4ff!important;
color: $dark-blue-700!important;
}
.component {
background: $bg-component-night;
@ -156,12 +192,15 @@ html.night {
border: 1px solid rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
.primary-btn{
background: $dark-blue-100;
}
.footer {
background-color: $bg-footer-night;
border-top: 1px solid rgb(31, 52, 66);
}
.footer_links li a {
color: #b2b2b2;
color: $white;
}
.bottom_footer {
border-top: 1px solid rgb(78, 93, 106);
@ -169,6 +208,12 @@ html.night {
.footer_social_nav ul li a {
background-color: #2f2f2f;
}
.footer_sub_nav ul li a {
color: $white;
}
.footer-copyright p {
color: $white;
}
/* syntax highlighting */
.highlight {
@ -217,10 +262,14 @@ html.night {
/* tabs */
.nav-tabs {
border-bottom: 1px solid #4f6071;
color: $dark-grey-700;
}
.nav-tabs>li>a {
color: $dark-grey-700;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: $white;
background-color: #4e6071;
background-color: $dark-grey-200;
border: 1px solid transparent;
}
.popover {
@ -235,3 +284,5 @@ html.night {
color: $white!important;
}
}

63
_scss/_notes.scss
View File

@ -59,54 +59,57 @@ blockquote {
&:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
@include notification(
$bg-color: $dark-palette-blue-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-blue-200,
$header-color: $white,
$body-text-color: $white,
$icon: "\f06a"
);
a {
color: $dark-blue-800;
};
}
&.important {
@include notification(
$bg-color: $dark-palette-amber-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-amber-300,
$header-color: $white,
$body-text-color: $white,
$icon: "\f06a"
);
}
&.warning {
@include notification(
$bg-color: $dark-palette-red-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-red-200,
$header-color: $white,
$body-text-color: $white,
$icon: "\f06a"
);
}
&.restricted {
@include notification(
$bg-color: $dark-palette-violet-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-viole-200,
$header-color: $white,
$body-text-color: $white,
$icon: "\f135"
);
}
&.experimental {
@include notification(
$bg-color: $dark-palette-blue-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-blue-200,
$header-color: $white,
$body-text-color: $white,
$icon: "\f492"
);
}
&.tip {
@include notification(
$bg-color: $dark-palette-green-200,
$header-color: $white-0,
$body-text-color: $white-0,
$bg-color: $dark-green-200,
$header-color: $white,
$body-text-color: $white,
$icon: "\f164"
);
}
@ -117,8 +120,8 @@ blockquote {
&:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
@include notification(
$bg-color: $light-palette-blue-100,
$header-color: $light-palette-blue-500,
$bg-color: $light-blue-100,
$header-color: $light-blue-600,
$body-text-color: inherit,
$icon: "\f05a"
);
@ -126,8 +129,8 @@ blockquote {
&.important {
@include notification(
$bg-color: $light-palette-amber-100,
$header-color: $light-palette-amber-500,
$bg-color: $light-amber-100,
$header-color: $dark-amber-300,
$body-text-color: inherit,
$icon: "\f06a"
);
@ -135,8 +138,8 @@ blockquote {
&.warning {
@include notification(
$bg-color: $light-palette-red-100,
$header-color: $light-palette-red-500,
$bg-color: $light-red-300,
$header-color: $light-red-700,
$body-text-color: inherit,
$icon: "\f06a"
);
@ -144,8 +147,8 @@ blockquote {
&.restricted {
@include notification(
$bg-color: $light-palette-violet-100,
$header-color: $light-palette-violet-500,
$bg-color: $light-viole-200,
$header-color: $light-viole-600,
$body-text-color: inherit,
$icon: "\f135"
);
@ -153,8 +156,8 @@ blockquote {
&.experimental {
@include notification(
$bg-color: $light-palette-blue-100,
$header-color: $light-palette-blue-500,
$bg-color: $light-blue-100,
$header-color: $light-blue-500,
$body-text-color: inherit,
$icon: "\f492"
);
@ -162,8 +165,8 @@ blockquote {
&.tip {
@include notification(
$bg-color: $light-palette-green-100,
$header-color: $light-palette-green-500,
$bg-color: $light-green-200,
$header-color: $light-green-600,
$body-text-color: inherit,
$icon: "\f164"
)

19
_scss/_overrides.scss
View File

@ -24,7 +24,7 @@
.dropdown-menu>li>a {
font-size: 13.5px;
line-height: 16px;
color: #1488c6;
color: $light-blue-400;
padding: 5px 15px;
display: block;
}
@ -38,14 +38,14 @@
font-family: $buttons;
}
.btn-primary {
background-color: $marine-50;
background-color: $light-blue-500;
border: 1px solid rgba(0, 0, 0, 0.1);
&:hover {
opacity: 0.8;
// override default bootstrap behaviour
background-color: $marine-50;
background-color: $light-blue-500;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
@ -86,7 +86,7 @@
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
color: #ffffff;
background-color: #0c5176;
background-color: $light-blue-700;
}
/*
@ -109,7 +109,7 @@
* override google results +++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
color: #27343B!important;
color: $light-blue-700!important;
line-height: 23px!important;
}
.gsc-webResult .gsc-result {
@ -117,15 +117,15 @@
}
a.gs-title {
color: #2089C4!important;
color: $light-blue-500!important;
text-decoration: none;
}
.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
color: #F993A6!important;
color: $light-red-400!important;
}
.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
color: #82949E!important;
color: $light-grey-500!important;
}
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
@ -136,6 +136,9 @@ a.gs-title {
border-color: #f7f7f761 !important;
background: transparent;
}
.gsc-tabHeader.gsc-tabActive, .gsc-refinementHeader.gscrefinementActive{
color: $dark-grey-700!important;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
display: none!important;

10
_scss/_perldoc.scss
View File

@ -1,14 +1,14 @@
/*
.highlight .hll { background-color: #ffffcc }
.highlight { background: #eeeedd } */
.highlight .c { color: #228B22 } /* Comment */
.highlight .c { color: #3BA08D } /* Comment */
.highlight .err { color: #a61717 } /* Error */
.highlight .k { color: #8B008B } /* Keyword */
.highlight .ch { color: #228B22 } /* Comment.Hashbang */
.highlight .cm { color: #228B22 } /* Comment.Multiline */
.highlight .ch { color: #3BA08D } /* Comment.Hashbang */
.highlight .cm { color: #3BA08D } /* Comment.Multiline */
.highlight .cp { color: #1e889b } /* Comment.Preproc */
.highlight .cpf { color: #228B22 } /* Comment.PreprocFile */
.highlight .c1 { color: #228B22 } /* Comment.Single */
.highlight .cpf { color: #3BA08D } /* Comment.PreprocFile */
.highlight .c1 { color: #3BA08D } /* Comment.Single */
.highlight .cs { color: #8B008B } /* Comment.Special */
.highlight .gd { color: #aa0000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */

109
_scss/_typography.scss
View File

@ -30,7 +30,7 @@
*/
/* latin */
@font-face {
/*@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
@ -82,3 +82,110 @@ dd, dt {
ol, ul {
padding-left: 25px;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
h1, .h1 {
font-size: 2.5rem;
font-weight: 500;
line-height: 1.167;
}
h2, .h2 {
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
}
h3, .h3 {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.167;
}
h4, .h4 {
font-size: 1.286rem;
font-weight: 500;
line-height: 1.235;
}
.subtitle1 {
font-size: 1.143rem;
font-weight: 500;
line-height: 1.75;
}
p, .body1 {
font-size: 1rem;
line-height: 1.5;
}
.body2 {
font-size: 0.86rem;
line-height: 1.43;
}
code, pre {
font-size: 1rem;
font-family: 'Roboto Mono', monospace;
}
.overline {
font-size: 0.72rem;
font-weight: 500;
line-height: 2.66;
text-transform: uppercase;
}
.inline-code {
font-size: 1rem;
font-family: 'Roboto Mono', monospace;
background-color: white; /* black if dark mode */
border: 1px solid #E1E2E6; /* grey.200 */
padding: 0.2em 0.4em;
border-radius: 4px;
}
.code-block {
font-size: 1rem;
font-family: 'Roboto Mono', monospace;
background-color: white; /* black if dark mode */
border: 1px solid #E1E2E6; /* grey.200 */
padding: 8px;
border-radius: 4px;
display: block;
}

10
_scss/_upgrade-cta.scss
View File

@ -1,13 +1,13 @@
.docker-upgrade-cta {
html.night & {
background-color: change-color($orange-10, $alpha: 0.3);
border: 1px solid $orange-10;
p, .docker-upgrade-cta__heading { color: $white-0; }
background-color: change-color($light-amber-100, $alpha: 0.3);
border: 1px solid $light-amber-100;
p, .docker-upgrade-cta__heading { color: $white; }
}
html:not(.night) & {
background-color: $orange-10;
border: 1px solid $orange-20;
background-color: $light-amber-100;
border: 1px solid $light-amber-200;
p, .docker-upgrade-cta__heading { color: inherit; }
}

3
_scss/_utilities.scss
View File

@ -68,7 +68,6 @@ i.fa.fa-outdent {
color: $white;
padding: 16px 15px 0 0;
font-size: 1.5rem;
opacity: 0.5;
}
/* Inline graphics and icons (like the whale menu icon in d4mac, d4win) */
@ -85,7 +84,7 @@ img.inline {
& input[type=text] {
background: rgba(0, 0, 0, 0.17) url("/assets/images/search.png") no-repeat 10px 9px;
border: 0;
color: #0C5176;
color: $light-blue-700;
border-radius: 0;
margin: 0;
transition: all 0.2s ease;

77
_scss/_variables.scss
View File

@ -1,14 +1,14 @@
@import "color-palette-v2";
@import "DS-colors";
/*
* global
*/
$headings: "Open Sans", sans-serif;
$headings-landing: "Open Sans", sans-serif;
$buttons: "Open Sans", sans-serif;
$font: "Open Sans", sans-serif;
$headings: "Roboto", sans-serif;
$headings-landing: "Roboto", sans-serif;
$buttons: "Roboto", sans-serif;
$font: "Roboto", sans-serif;
$body-text-size: 14px;
$white: #fff;
$black: #000;
@ -17,47 +17,48 @@ $top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcru
/*
* standard mode
*/
$body-text: $black-0;
$primary-links: $blue-70;
$body-text: $black;
$primary-links: $light-blue-600;
//
$bg-body: $white-0;
$bg-body-landing: $white-10;
$bg-header: $blue-60;
$bg-secondary: $blue-60;
$bg-sidebar: $white-10;
$bg-sidebar-active: $white-15;
$bg-footer: $white-0;
$bg-footer-landing: $marine-90;
$bg-component: $white-5;
$bg-card: $white-0;
$bg-body: $white;
$bg-body-landing: $light-page-background;
$bg-header: $light-blue-500;
$bg-secondary: $light-blue-500;
$bg-sidebar: $light-page-background;
$bg-sidebar-active: $light-page-background;
$bg-footer: $white;
$bg-footer-landing: $light-grey-500;
$bg-component: $light-page-background;
$bg-card: $white;
// notes, warnings//
$note-color: $blue-80;
$important-color: $orange-90;
$warning-color: $red-90;
$slider-bg: $marine-10;
$slider-btn: $blue-60;
$table-head: $grey-10;
$note-color: $light-blue-500;
$important-color: $light-amber-500;
$warning-color: $light-red-700;
$slider-bg: $light-blue-200;
$slider-btn: $light-blue-500;
$table-head: $light-grey-200;
/*
* night mode
*/
$body-text-night: hsl(180, 1%, 83%);
$primary-links-night: hsl(203, 85%, 79%);
$body-text-night: $white;
$primary-links-night: $dark-grey-700;
$bg-body-night: hsl(203, 90%, 10%);
$bg-body-landing-night: hsl(203, 90%, 10%);
$bg-header-night: hsl(203, 40%, 10%);
$bg-secondary-night: hsl(203, 40%, 10%);
$bg-sidebar-night: hsl(203, 40%, 10%);
$bg-sidebar-night-active: hsl(203, 40%, 7%);
$bg-footer-night: hsl(203, 0%, 0%);
$bg-footer-landing-night: hsl(214, 100%, 20%);
$bg-body-night: $dark-palette-background;
$bg-body-landing-night: $dark-palette-background;
$bg-header-night: $dark-blue-200;
$bg-secondary-night: $dark-grey-100;
$bg-sidebar-night: $dark-grey-100;
$bg-sidebar-night-active: $dark-grey-100;
$bg-footer-night: $dark-grey-100;
$bg-footer-landing-night: $dark-grey-100;
$bg-component-night: hsl(203, 44%, 10%);
$bg-card-night: #0e161b;
$bg-component-night: $dark-grey-200;
$bg-card-night: $dark-grey-200;
$active-sidebar-night: hsl(203, 85%, 79%);
$active-sidebar-night: $dark-grey-800;
$bg-search-results-night: $black;
$bg-search-results-night: hsla(0, 0%, 4%, 0.95);

1
assets/css/style.scss
View File

@ -5,6 +5,7 @@
@import "breakpoint";
@import "color-palette-v2";
@import "color-palette-v3";
@import "DS-colors";
@import "variables";
@import "night-mode";
@import "base";

23
assets/images/download-docker-dark.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32032)">
<path d="M23.5 40C32.6127 40 40 32.6127 40 23.5C40 14.3873 32.6127 7 23.5 7C14.3873 7 7 14.3873 7 23.5C7 32.6127 14.3873 40 23.5 40Z" fill="#2673E3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.4837 21.3661C37.4114 21.3077 36.7353 20.7977 35.3108 20.7977C34.9544 20.7977 34.5785 20.8301 34.1879 20.8943C33.9127 19.0035 32.3525 18.0825 32.2799 18.0408L31.8971 17.8198L31.6447 18.1832C31.6259 18.2102 31.1826 18.8557 30.9651 19.7744C30.7097 20.8533 30.8646 21.8663 31.4128 22.7335C30.7509 23.1018 29.6942 23.1979 29.4749 23.2008H11.9C11.4415 23.2008 11.0669 23.5734 11.0651 24.0316C11.0581 25.6486 11.3246 27.2112 11.8354 28.5503C12.4412 30.1384 13.3423 31.3075 14.5132 32.0253C15.8266 32.8299 17.9648 33.2915 20.3793 33.2915C21.509 33.2915 22.6351 33.1895 23.6356 32.9963C25.2123 32.6924 26.6438 32.1724 27.8899 31.4514C28.9767 30.8228 29.9527 30.0231 30.791 29.0752C32.1836 27.4995 33.0132 25.7395 33.63 24.1821C33.7132 24.1854 33.7951 24.1869 33.8759 24.1869C35.4003 24.1869 36.3378 23.5776 36.8555 23.0661C37.417 22.5113 37.6169 21.9583 37.6377 21.897L37.7469 21.5773L37.4837 21.3661Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5289 22.6867H15.8842C15.9977 22.6867 16.0902 22.5946 16.0902 22.4805V20.3816C16.0902 20.2675 15.9977 20.1753 15.8842 20.1753H13.5289C13.4152 20.1753 13.3228 20.2675 13.3228 20.3816V22.4805C13.3228 22.5946 13.4152 22.6867 13.5289 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7746 22.6867H19.1293C19.2433 22.6867 19.3356 22.5946 19.3356 22.4805V20.3816C19.3356 20.2675 19.2433 20.1753 19.1293 20.1753H16.7746C16.6605 20.1753 16.5684 20.2675 16.5684 20.3816V22.4805C16.5684 22.5946 16.6605 22.6867 16.7746 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0697 22.6867H22.4248C22.5385 22.6867 22.631 22.5946 22.631 22.4805V20.3816C22.631 20.2675 22.5385 20.1753 22.4248 20.1753H20.0697C19.956 20.1753 19.8638 20.2675 19.8638 20.3816V22.4805C19.8638 22.5946 19.956 22.6867 20.0697 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 22.6867H25.6813C25.7954 22.6867 25.8876 22.5946 25.8876 22.4805V20.3816C25.8876 20.2675 25.7954 20.1753 25.6813 20.1753H23.3264C23.2128 20.1753 23.1201 20.2675 23.1201 20.3816V22.4805C23.1201 22.5946 23.2128 22.6867 23.3264 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7746 19.6667H19.1293C19.2433 19.6667 19.3356 19.5745 19.3356 19.4607V17.3615C19.3356 17.2477 19.2433 17.1553 19.1293 17.1553H16.7746C16.6605 17.1553 16.5684 17.2477 16.5684 17.3615V19.4607C16.5684 19.5745 16.6605 19.6667 16.7746 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0697 19.6667H22.4248C22.5385 19.6667 22.631 19.5745 22.631 19.4607V17.3615C22.631 17.2477 22.5385 17.1553 22.4248 17.1553H20.0697C19.956 17.1553 19.8638 17.2477 19.8638 17.3615V19.4607C19.8638 19.5745 19.956 19.6667 20.0697 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 19.6667H25.6813C25.7954 19.6667 25.8876 19.5745 25.8876 19.4607V17.3615C25.8876 17.2477 25.7954 17.1553 25.6813 17.1553H23.3264C23.2128 17.1553 23.1201 17.2477 23.1201 17.3615V19.4607C23.1201 19.5745 23.2128 19.6667 23.3264 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 16.6468H25.6813C25.7954 16.6468 25.8876 16.5542 25.8876 16.4404V14.3416C25.8876 14.2275 25.7954 14.1353 25.6813 14.1353H23.3264C23.2128 14.1353 23.1201 14.2275 23.1201 14.3416V16.4404C23.1201 16.5542 23.2128 16.6468 23.3264 16.6468Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6115 22.6867H28.9663C29.0803 22.6867 29.1725 22.5946 29.1725 22.4805V20.3816C29.1725 20.2675 29.0803 20.1753 28.9663 20.1753H26.6115C26.4974 20.1753 26.4053 20.2675 26.4053 20.3816V22.4805C26.4053 22.5946 26.4974 22.6867 26.6115 22.6867Z" fill="white"/>
<path d="M35.0501 40.0001C37.7839 40.0001 40.0001 37.7839 40.0001 35.0501C40.0001 32.3163 37.7839 30.1001 35.0501 30.1001C32.3163 30.1001 30.1001 32.3163 30.1001 35.0501C30.1001 37.7839 32.3163 40.0001 35.0501 40.0001Z" fill="#3CC1AD"/>
<path d="M35.05 38.3498L38.35 35.0498H31.75L35.05 38.3498Z" fill="white"/>
<path d="M36.4862 32.2998H33.6133V35.2423H36.4862V32.2998Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32032">
<rect width="33" height="33" fill="white" transform="translate(7 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

37
assets/images/download-docker.svg
View File

@ -1,16 +1,23 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#2854A1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.9263 27.1071C49.8252 27.0254 48.8802 26.3126 46.8891 26.3126C46.391 26.3126 45.8656 26.3579 45.3197 26.4476C44.935 23.8048 42.7543 22.5175 42.6528 22.4591L42.1177 22.1503L41.765 22.6582C41.7387 22.696 41.119 23.5982 40.815 24.8823C40.458 26.3903 40.6746 27.8062 41.4408 29.0183C40.5156 29.5331 39.0387 29.6674 38.7321 29.6714H14.1672C13.5263 29.6714 13.0027 30.1923 13.0002 30.8327C12.9905 33.0928 13.3629 35.2769 14.0769 37.1486C14.9236 39.3683 16.1832 41.0024 17.8198 42.0057C19.6555 43.1303 22.6441 43.7755 26.0189 43.7755C27.598 43.7755 29.172 43.6329 30.5704 43.3629C32.7742 42.9381 34.775 42.2113 36.5168 41.2036C38.0358 40.3249 39.4 39.2071 40.5717 37.8823C42.5182 35.6798 43.6777 33.2199 44.5399 31.043C44.6561 31.0477 44.7706 31.0498 44.8836 31.0498C47.0143 31.0498 48.3246 30.1981 49.0482 29.4831C49.8331 28.7077 50.1124 27.9347 50.1415 27.8491L50.2941 27.4023L49.9263 27.1071Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.444 28.9527H19.736C19.8947 28.9527 20.0239 28.8239 20.0239 28.6644V25.7307C20.0239 25.5713 19.8947 25.4424 19.736 25.4424H16.444C16.285 25.4424 16.1558 25.5713 16.1558 25.7307V28.6644C16.1558 28.8239 16.285 28.9527 16.444 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9806 28.9527H24.2719C24.4313 28.9527 24.5602 28.8239 24.5602 28.6644V25.7307C24.5602 25.5713 24.4313 25.4424 24.2719 25.4424H20.9806C20.8212 25.4424 20.6924 25.5713 20.6924 25.7307V28.6644C20.6924 28.8239 20.8212 28.9527 20.9806 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5862 28.9527H28.8779C29.0369 28.9527 29.1661 28.8239 29.1661 28.6644V25.7307C29.1661 25.5713 29.0369 25.4424 28.8779 25.4424H25.5862C25.4272 25.4424 25.2983 25.5713 25.2983 25.7307V28.6644C25.2983 28.8239 25.4272 28.9527 25.5862 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 28.9527H33.4295C33.5889 28.9527 33.7178 28.8239 33.7178 28.6644V25.7307C33.7178 25.5713 33.5889 25.4424 33.4295 25.4424H30.1379C29.9792 25.4424 29.8496 25.5713 29.8496 25.7307V28.6644C29.8496 28.8239 29.9792 28.9527 30.1379 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9806 24.7314H24.2719C24.4313 24.7314 24.5602 24.6025 24.5602 24.4434V21.5094C24.5602 21.3503 24.4313 21.2211 24.2719 21.2211H20.9806C20.8212 21.2211 20.6924 21.3503 20.6924 21.5094V24.4434C20.6924 24.6025 20.8212 24.7314 20.9806 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5862 24.7314H28.8779C29.0369 24.7314 29.1661 24.6025 29.1661 24.4434V21.5094C29.1661 21.3503 29.0369 21.2211 28.8779 21.2211H25.5862C25.4272 21.2211 25.2983 21.3503 25.2983 21.5094V24.4434C25.2983 24.6025 25.4272 24.7314 25.5862 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 24.7314H33.4295C33.5889 24.7314 33.7178 24.6025 33.7178 24.4434V21.5094C33.7178 21.3503 33.5889 21.2211 33.4295 21.2211H30.1379C29.9792 21.2211 29.8496 21.3503 29.8496 21.5094V24.4434C29.8496 24.6025 29.9792 24.7314 30.1379 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 20.5104H33.4295C33.5889 20.5104 33.7178 20.3811 33.7178 20.222V17.2884C33.7178 17.1289 33.5889 17 33.4295 17H30.1379C29.9792 17 29.8496 17.1289 29.8496 17.2884V20.222C29.8496 20.3811 29.9792 20.5104 30.1379 20.5104Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7292 28.9527H38.0205C38.1799 28.9527 38.3087 28.8239 38.3087 28.6644V25.7307C38.3087 25.5713 38.1799 25.4424 38.0205 25.4424H34.7292C34.5697 25.4424 34.4409 25.5713 34.4409 25.7307V28.6644C34.4409 28.8239 34.5697 28.9527 34.7292 28.9527Z" fill="#71CFFF"/>
<circle cx="51" cy="51" r="9" fill="#71CFFF"/>
<path d="M51 57L57 51H45L51 57Z" fill="white"/>
<rect x="48.3882" y="46" width="5.22358" height="5.35" fill="white"/>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32015)">
<path d="M23.5 40C32.6127 40 40 32.6127 40 23.5C40 14.3873 32.6127 7 23.5 7C14.3873 7 7 14.3873 7 23.5C7 32.6127 14.3873 40 23.5 40Z" fill="#086DD7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.4837 21.3661C37.4114 21.3077 36.7353 20.7977 35.3108 20.7977C34.9544 20.7977 34.5785 20.8301 34.1879 20.8943C33.9127 19.0035 32.3525 18.0825 32.2799 18.0408L31.8971 17.8198L31.6447 18.1832C31.6259 18.2102 31.1826 18.8557 30.9651 19.7744C30.7097 20.8533 30.8646 21.8663 31.4128 22.7335C30.7509 23.1018 29.6942 23.1979 29.4749 23.2008H11.9C11.4415 23.2008 11.0669 23.5734 11.0651 24.0316C11.0581 25.6486 11.3246 27.2112 11.8354 28.5503C12.4412 30.1384 13.3423 31.3075 14.5132 32.0253C15.8266 32.8299 17.9648 33.2915 20.3793 33.2915C21.509 33.2915 22.6351 33.1895 23.6356 32.9963C25.2123 32.6924 26.6438 32.1724 27.8899 31.4514C28.9767 30.8228 29.9527 30.0231 30.791 29.0752C32.1836 27.4995 33.0132 25.7395 33.63 24.1821C33.7132 24.1854 33.7951 24.1869 33.8759 24.1869C35.4003 24.1869 36.3378 23.5776 36.8555 23.0661C37.417 22.5113 37.6169 21.9583 37.6377 21.897L37.7469 21.5773L37.4837 21.3661Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5289 22.6867H15.8842C15.9977 22.6867 16.0902 22.5946 16.0902 22.4805V20.3816C16.0902 20.2675 15.9977 20.1753 15.8842 20.1753H13.5289C13.4152 20.1753 13.3228 20.2675 13.3228 20.3816V22.4805C13.3228 22.5946 13.4152 22.6867 13.5289 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7746 22.6867H19.1293C19.2433 22.6867 19.3356 22.5946 19.3356 22.4805V20.3816C19.3356 20.2675 19.2433 20.1753 19.1293 20.1753H16.7746C16.6605 20.1753 16.5684 20.2675 16.5684 20.3816V22.4805C16.5684 22.5946 16.6605 22.6867 16.7746 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0697 22.6867H22.4248C22.5385 22.6867 22.631 22.5946 22.631 22.4805V20.3816C22.631 20.2675 22.5385 20.1753 22.4248 20.1753H20.0697C19.956 20.1753 19.8638 20.2675 19.8638 20.3816V22.4805C19.8638 22.5946 19.956 22.6867 20.0697 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 22.6867H25.6813C25.7954 22.6867 25.8876 22.5946 25.8876 22.4805V20.3816C25.8876 20.2675 25.7954 20.1753 25.6813 20.1753H23.3264C23.2128 20.1753 23.1201 20.2675 23.1201 20.3816V22.4805C23.1201 22.5946 23.2128 22.6867 23.3264 22.6867Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7746 19.6667H19.1293C19.2433 19.6667 19.3356 19.5745 19.3356 19.4607V17.3615C19.3356 17.2477 19.2433 17.1553 19.1293 17.1553H16.7746C16.6605 17.1553 16.5684 17.2477 16.5684 17.3615V19.4607C16.5684 19.5745 16.6605 19.6667 16.7746 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0697 19.6667H22.4248C22.5385 19.6667 22.631 19.5745 22.631 19.4607V17.3615C22.631 17.2477 22.5385 17.1553 22.4248 17.1553H20.0697C19.956 17.1553 19.8638 17.2477 19.8638 17.3615V19.4607C19.8638 19.5745 19.956 19.6667 20.0697 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 19.6667H25.6813C25.7954 19.6667 25.8876 19.5745 25.8876 19.4607V17.3615C25.8876 17.2477 25.7954 17.1553 25.6813 17.1553H23.3264C23.2128 17.1553 23.1201 17.2477 23.1201 17.3615V19.4607C23.1201 19.5745 23.2128 19.6667 23.3264 19.6667Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3264 16.6468H25.6813C25.7954 16.6468 25.8876 16.5542 25.8876 16.4404V14.3416C25.8876 14.2275 25.7954 14.1353 25.6813 14.1353H23.3264C23.2128 14.1353 23.1201 14.2275 23.1201 14.3416V16.4404C23.1201 16.5542 23.2128 16.6468 23.3264 16.6468Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6115 22.6867H28.9663C29.0803 22.6867 29.1725 22.5946 29.1725 22.4805V20.3816C29.1725 20.2675 29.0803 20.1753 28.9663 20.1753H26.6115C26.4974 20.1753 26.4053 20.2675 26.4053 20.3816V22.4805C26.4053 22.5946 26.4974 22.6867 26.6115 22.6867Z" fill="white"/>
<path d="M35.0501 40.0001C37.7839 40.0001 40.0001 37.7839 40.0001 35.0501C40.0001 32.3163 37.7839 30.1001 35.0501 30.1001C32.3163 30.1001 30.1001 32.3163 30.1001 35.0501C30.1001 37.7839 32.3163 40.0001 35.0501 40.0001Z" fill="#88D5C0"/>
<path d="M35.05 38.3498L38.35 35.0498H31.75L35.05 38.3498Z" fill="white"/>
<path d="M36.4862 32.2998H33.6133V35.2423H36.4862V32.2998Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32015">
<rect width="33" height="33" fill="white" transform="translate(7 7)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

16
assets/images/download-docker2.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="#2854A1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.9263 27.1071C49.8252 27.0254 48.8802 26.3126 46.8891 26.3126C46.391 26.3126 45.8656 26.3579 45.3197 26.4476C44.935 23.8048 42.7543 22.5175 42.6528 22.4591L42.1177 22.1503L41.765 22.6582C41.7387 22.696 41.119 23.5982 40.815 24.8823C40.458 26.3903 40.6746 27.8062 41.4408 29.0183C40.5156 29.5331 39.0387 29.6674 38.7321 29.6714H14.1672C13.5263 29.6714 13.0027 30.1923 13.0002 30.8327C12.9905 33.0928 13.3629 35.2769 14.0769 37.1486C14.9236 39.3683 16.1832 41.0024 17.8198 42.0057C19.6555 43.1303 22.6441 43.7755 26.0189 43.7755C27.598 43.7755 29.172 43.6329 30.5704 43.3629C32.7742 42.9381 34.775 42.2113 36.5168 41.2036C38.0358 40.3249 39.4 39.2071 40.5717 37.8823C42.5182 35.6798 43.6777 33.2199 44.5399 31.043C44.6561 31.0477 44.7706 31.0498 44.8836 31.0498C47.0143 31.0498 48.3246 30.1981 49.0482 29.4831C49.8331 28.7077 50.1124 27.9347 50.1415 27.8491L50.2941 27.4023L49.9263 27.1071Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.444 28.9527H19.736C19.8947 28.9527 20.0239 28.8239 20.0239 28.6644V25.7307C20.0239 25.5713 19.8947 25.4424 19.736 25.4424H16.444C16.285 25.4424 16.1558 25.5713 16.1558 25.7307V28.6644C16.1558 28.8239 16.285 28.9527 16.444 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9806 28.9527H24.2719C24.4313 28.9527 24.5602 28.8239 24.5602 28.6644V25.7307C24.5602 25.5713 24.4313 25.4424 24.2719 25.4424H20.9806C20.8212 25.4424 20.6924 25.5713 20.6924 25.7307V28.6644C20.6924 28.8239 20.8212 28.9527 20.9806 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5862 28.9527H28.8779C29.0369 28.9527 29.1661 28.8239 29.1661 28.6644V25.7307C29.1661 25.5713 29.0369 25.4424 28.8779 25.4424H25.5862C25.4272 25.4424 25.2983 25.5713 25.2983 25.7307V28.6644C25.2983 28.8239 25.4272 28.9527 25.5862 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 28.9527H33.4295C33.5889 28.9527 33.7178 28.8239 33.7178 28.6644V25.7307C33.7178 25.5713 33.5889 25.4424 33.4295 25.4424H30.1379C29.9792 25.4424 29.8496 25.5713 29.8496 25.7307V28.6644C29.8496 28.8239 29.9792 28.9527 30.1379 28.9527Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9806 24.7314H24.2719C24.4313 24.7314 24.5602 24.6025 24.5602 24.4434V21.5094C24.5602 21.3503 24.4313 21.2211 24.2719 21.2211H20.9806C20.8212 21.2211 20.6924 21.3503 20.6924 21.5094V24.4434C20.6924 24.6025 20.8212 24.7314 20.9806 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5862 24.7314H28.8779C29.0369 24.7314 29.1661 24.6025 29.1661 24.4434V21.5094C29.1661 21.3503 29.0369 21.2211 28.8779 21.2211H25.5862C25.4272 21.2211 25.2983 21.3503 25.2983 21.5094V24.4434C25.2983 24.6025 25.4272 24.7314 25.5862 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 24.7314H33.4295C33.5889 24.7314 33.7178 24.6025 33.7178 24.4434V21.5094C33.7178 21.3503 33.5889 21.2211 33.4295 21.2211H30.1379C29.9792 21.2211 29.8496 21.3503 29.8496 21.5094V24.4434C29.8496 24.6025 29.9792 24.7314 30.1379 24.7314Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1379 20.5104H33.4295C33.5889 20.5104 33.7178 20.3811 33.7178 20.222V17.2884C33.7178 17.1289 33.5889 17 33.4295 17H30.1379C29.9792 17 29.8496 17.1289 29.8496 17.2884V20.222C29.8496 20.3811 29.9792 20.5104 30.1379 20.5104Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7292 28.9527H38.0205C38.1799 28.9527 38.3087 28.8239 38.3087 28.6644V25.7307C38.3087 25.5713 38.1799 25.4424 38.0205 25.4424H34.7292C34.5697 25.4424 34.4409 25.5713 34.4409 25.7307V28.6644C34.4409 28.8239 34.5697 28.9527 34.7292 28.9527Z" fill="#71CFFF"/>
<circle cx="51" cy="51" r="9" fill="#71CFFF"/>
<path d="M51 57L57 51H45L51 57Z" fill="white"/>
<rect x="48.3882" y="46" width="5.22358" height="5.35" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

27
assets/images/guides-dark.svg Normal file
View File

@ -0,0 +1,27 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_805_32049" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="15" width="25" height="25">
<g clip-path="url(#clip0_805_32049)">
<path d="M12.5002 17.0835C8.46891 17.0835 5.2085 20.3439 5.2085 24.3752C5.2085 28.7189 9.81266 34.7085 11.7085 36.9897C12.1252 37.4897 12.8856 37.4897 13.3022 36.9897C15.1877 34.7085 19.7918 28.7189 19.7918 24.3752C19.7918 20.3439 16.5314 17.0835 12.5002 17.0835ZM12.5002 26.9793C11.0627 26.9793 9.896 25.8127 9.896 24.3752C9.896 22.9377 11.0627 21.771 12.5002 21.771C13.9377 21.771 15.1043 22.9377 15.1043 24.3752C15.1043 25.8127 13.9377 26.9793 12.5002 26.9793Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask0_805_32049)">
<rect y="15" width="25" height="25" fill="#55A4F1"/>
</g>
<path d="M16 37H33.6234C33.6234 37 39 36.6251 39 32.1271C39 27.629 33.6234 27.629 33.6234 27.629H26.7532C26.7532 27.629 22.5714 27.629 22.5714 23.1309C22.5714 18.6328 26.7532 19.0077 26.7532 19.0077H33.6234" stroke="#1760CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
<mask id="mask1_805_32049" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="7" width="14" height="14">
<g clip-path="url(#clip1_805_32049)">
<path d="M36.9998 8.1665C34.7423 8.1665 32.9165 9.99234 32.9165 12.2498C32.9165 14.6823 35.4948 18.0365 36.5565 19.314C36.7898 19.594 37.2157 19.594 37.449 19.314C38.5048 18.0365 41.0832 14.6823 41.0832 12.2498C41.0832 9.99234 39.2573 8.1665 36.9998 8.1665ZM36.9998 13.7082C36.1948 13.7082 35.5415 13.0548 35.5415 12.2498C35.5415 11.4448 36.1948 10.7915 36.9998 10.7915C37.8048 10.7915 38.4582 11.4448 38.4582 12.2498C38.4582 13.0548 37.8048 13.7082 36.9998 13.7082Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask1_805_32049)">
<rect x="30" y="7" width="14" height="14" fill="#55A4F1"/>
</g>
<defs>
<clipPath id="clip0_805_32049">
<rect width="25" height="25" fill="white" transform="translate(0 15)"/>
</clipPath>
<clipPath id="clip1_805_32049">
<rect width="14" height="14" fill="white" transform="translate(30 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

30
assets/images/guides.svg
View File

@ -1,5 +1,27 @@
<svg width="53" height="50" viewBox="0 0 53 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5 16C5.14912 16 0 21.0745 0 27.3333C0 35.8333 11.5 50 11.5 50C11.5 50 23 35.8333 23 27.3333C23 21.0745 17.8509 16 11.5 16ZM11.5 33C8.326 33 5.75 30.4613 5.75 27.3333C5.75 24.2053 8.326 21.6667 11.5 21.6667C14.674 21.6667 17.25 24.2053 17.25 27.3333C17.25 30.4613 14.674 33 11.5 33Z" fill="#2854A1"/>
<path d="M14 49H43.1169C43.1169 49 52 48.4169 52 41.4199C52 34.4229 43.1169 34.4229 43.1169 34.4229H31.7662C31.7662 34.4229 24.8571 34.4229 24.8571 27.4258C24.8571 20.4288 31.7662 21.0119 31.7662 21.0119H43.1169" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
<path d="M44.5 0C40.3581 0 37 3.2835 37 7.33333C37 12.8333 44.5 22 44.5 22C44.5 22 52 12.8333 52 7.33333C52 3.2835 48.6419 0 44.5 0ZM44.5 11C42.43 11 40.75 9.35733 40.75 7.33333C40.75 5.30933 42.43 3.66667 44.5 3.66667C46.57 3.66667 48.25 5.30933 48.25 7.33333C48.25 9.35733 46.57 11 44.5 11Z" fill="#2854A1"/>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_805_32016" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="15" width="25" height="25">
<g clip-path="url(#clip0_805_32016)">
<path d="M12.5002 17.0835C8.46891 17.0835 5.2085 20.3439 5.2085 24.3752C5.2085 28.7189 9.81266 34.7085 11.7085 36.9897C12.1252 37.4897 12.8856 37.4897 13.3022 36.9897C15.1877 34.7085 19.7918 28.7189 19.7918 24.3752C19.7918 20.3439 16.5314 17.0835 12.5002 17.0835ZM12.5002 26.9793C11.0627 26.9793 9.896 25.8127 9.896 24.3752C9.896 22.9377 11.0627 21.771 12.5002 21.771C13.9377 21.771 15.1043 22.9377 15.1043 24.3752C15.1043 25.8127 13.9377 26.9793 12.5002 26.9793Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask0_805_32016)">
<rect y="15" width="25" height="25" fill="#086DD7"/>
</g>
<path d="M16 37H33.6234C33.6234 37 39 36.6251 39 32.1271C39 27.629 33.6234 27.629 33.6234 27.629H26.7532C26.7532 27.629 22.5714 27.629 22.5714 23.1309C22.5714 18.6328 26.7532 19.0077 26.7532 19.0077H33.6234" stroke="#8BC7F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
<mask id="mask1_805_32016" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="7" width="14" height="14">
<g clip-path="url(#clip1_805_32016)">
<path d="M36.9998 8.1665C34.7423 8.1665 32.9165 9.99234 32.9165 12.2498C32.9165 14.6823 35.4948 18.0365 36.5565 19.314C36.7898 19.594 37.2157 19.594 37.449 19.314C38.5048 18.0365 41.0832 14.6823 41.0832 12.2498C41.0832 9.99234 39.2573 8.1665 36.9998 8.1665ZM36.9998 13.7082C36.1948 13.7082 35.5415 13.0548 35.5415 12.2498C35.5415 11.4448 36.1948 10.7915 36.9998 10.7915C37.8048 10.7915 38.4582 11.4448 38.4582 12.2498C38.4582 13.0548 37.8048 13.7082 36.9998 13.7082Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask1_805_32016)">
<rect x="30" y="7" width="14" height="14" fill="#086DD7"/>
</g>
<defs>
<clipPath id="clip0_805_32016">
<rect width="25" height="25" fill="white" transform="translate(0 15)"/>
</clipPath>
<clipPath id="clip1_805_32016">
<rect width="14" height="14" fill="white" transform="translate(30 7)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

5
assets/images/guides2.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="53" height="50" viewBox="0 0 53 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5 16C5.14912 16 0 21.0745 0 27.3333C0 35.8333 11.5 50 11.5 50C11.5 50 23 35.8333 23 27.3333C23 21.0745 17.8509 16 11.5 16ZM11.5 33C8.326 33 5.75 30.4613 5.75 27.3333C5.75 24.2053 8.326 21.6667 11.5 21.6667C14.674 21.6667 17.25 24.2053 17.25 27.3333C17.25 30.4613 14.674 33 11.5 33Z" fill="#2854A1"/>
<path d="M14 49H43.1169C43.1169 49 52 48.4169 52 41.4199C52 34.4229 43.1169 34.4229 43.1169 34.4229H31.7662C31.7662 34.4229 24.8571 34.4229 24.8571 27.4258C24.8571 20.4288 31.7662 21.0119 31.7662 21.0119H43.1169" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
<path d="M44.5 0C40.3581 0 37 3.2835 37 7.33333C37 12.8333 44.5 22 44.5 22C44.5 22 52 12.8333 52 7.33333C52 3.2835 48.6419 0 44.5 0ZM44.5 11C42.43 11 40.75 9.35733 40.75 7.33333C40.75 5.30933 42.43 3.66667 44.5 3.66667C46.57 3.66667 48.25 5.30933 48.25 7.33333C48.25 9.35733 46.57 11 44.5 11Z" fill="#2854A1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

19
assets/images/language-guides-dark.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32054)">
<path d="M31.6667 9H14.4444C12.5421 9 11 10.5936 11 12.5593V35.6949C11 37.6607 12.5421 39.2542 14.4444 39.2542H31.6667C33.569 39.2542 35.1111 37.6607 35.1111 35.6949V12.5593C35.1111 10.5936 33.569 9 31.6667 9Z" fill="#55A4F1"/>
<path d="M14.4443 13.7456H31.6666V14.932H14.4443V13.7456Z" fill="white"/>
<path d="M14.4443 16.7119H31.6666V17.8984H14.4443V16.7119Z" fill="white"/>
<path d="M14.4443 19.6777H31.6666V20.8642H14.4443V19.6777Z" fill="white"/>
<path d="M14.4443 22.644H31.6666V23.8305H14.4443V22.644Z" fill="white"/>
<path d="M14.4443 25.6099H28.2221V26.7963H14.4443V25.6099Z" fill="white"/>
<path d="M14.4443 28.5762H27.074V29.7626H14.4443V28.5762Z" fill="white"/>
<path d="M35.3982 23.8306C31.7524 23.8306 28.7964 26.8409 28.7964 30.5537C28.7964 35.5961 35.3982 44.0001 35.3982 44.0001C35.3982 44.0001 42.0001 35.5961 42.0001 30.5537C42.0001 26.8409 39.0441 23.8306 35.3982 23.8306ZM35.3982 33.9153C33.5761 33.9153 32.0973 32.4093 32.0973 30.5537C32.0973 28.6981 33.5761 27.1922 35.3982 27.1922C37.2203 27.1922 38.6992 28.6981 38.6992 30.5537C38.6992 32.4093 37.2203 33.9153 35.3982 33.9153Z" fill="#1760CA"/>
<path d="M35.685 35.1015C37.9044 35.1015 39.7035 33.2423 39.7035 30.9489C39.7035 28.6555 37.9044 26.7964 35.685 26.7964C33.4657 26.7964 31.6665 28.6555 31.6665 30.9489C31.6665 33.2423 33.4657 35.1015 35.685 35.1015Z" fill="#1760CA"/>
<path d="M33.6347 29.1718L34.0549 30.0474L32.2156 30.9514L34.0549 31.8057L33.6347 32.7311L31.1685 31.4853V30.4175L33.6347 29.1718ZM35.7453 27.4775L36.8613 27.748L35.4698 34.1477L34.3538 33.8772L35.7453 27.4775ZM37.5694 29.1718L40.0356 30.4175V31.4853L37.5694 32.7311L37.1492 31.8057L38.9885 30.9514L37.1492 30.0474L37.5694 29.1718Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32054">
<rect width="31" height="35" fill="white" transform="translate(11 9)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

20
assets/images/language-guides.svg
View File

@ -1 +1,19 @@
<svg fill="none" height="59" viewBox="0 0 54 59" width="54" xmlns="http://www.w3.org/2000/svg"><rect fill="#2854a1" height="51" rx="6" width="42"/><g fill="#71cfff"><path d="m6 8h30v2h-30z"/><path d="m6 13h30v2h-30z"/><path d="m6 18h30v2h-30z"/><path d="m6 23h30v2h-30z"/><path d="m6 28h24v2h-24z"/><path d="m6 33h22v2h-22z"/><path d="m42.5 25c-6.3509 0-11.5 5.0745-11.5 11.3333 0 8.5 11.5 22.6667 11.5 22.6667s11.5-14.1667 11.5-22.6667c0-6.2588-5.1491-11.3333-11.5-11.3333zm0 17c-3.174 0-5.75-2.5387-5.75-5.6667s2.576-5.6666 5.75-5.6666 5.75 2.5386 5.75 5.6666-2.576 5.6667-5.75 5.6667z"/><circle cx="43" cy="37" r="7"/></g><path d="m39.428 34.004.732 1.476-3.204 1.524 3.204 1.44-.732 1.56-4.296-2.1v-1.8zm3.6766-2.856 1.944.456-2.424 10.788-1.944-.456zm3.1774 2.856 4.296 2.1v1.8l-4.296 2.1-.732-1.56 3.204-1.44-3.204-1.524z" fill="#fff"/></svg>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32017)">
<path d="M31.6667 9H14.4444C12.5421 9 11 10.5936 11 12.5593V35.6949C11 37.6607 12.5421 39.2542 14.4444 39.2542H31.6667C33.569 39.2542 35.1111 37.6607 35.1111 35.6949V12.5593C35.1111 10.5936 33.569 9 31.6667 9Z" fill="#086DD7"/>
<path d="M14.4443 13.7456H31.6666V14.932H14.4443V13.7456Z" fill="white"/>
<path d="M14.4443 16.7119H31.6666V17.8984H14.4443V16.7119Z" fill="white"/>
<path d="M14.4443 19.6777H31.6666V20.8642H14.4443V19.6777Z" fill="white"/>
<path d="M14.4443 22.644H31.6666V23.8305H14.4443V22.644Z" fill="white"/>
<path d="M14.4443 25.6099H28.2221V26.7963H14.4443V25.6099Z" fill="white"/>
<path d="M14.4443 28.5762H27.074V29.7626H14.4443V28.5762Z" fill="white"/>
<path d="M35.3982 23.8306C31.7524 23.8306 28.7964 26.8409 28.7964 30.5537C28.7964 35.5961 35.3982 44.0001 35.3982 44.0001C35.3982 44.0001 42.0001 35.5961 42.0001 30.5537C42.0001 26.8409 39.0441 23.8306 35.3982 23.8306ZM35.3982 33.9153C33.5761 33.9153 32.0973 32.4093 32.0973 30.5537C32.0973 28.6981 33.5761 27.1922 35.3982 27.1922C37.2203 27.1922 38.6992 28.6981 38.6992 30.5537C38.6992 32.4093 37.2203 33.9153 35.3982 33.9153Z" fill="#8BC7F5"/>
<path d="M35.685 35.1015C37.9044 35.1015 39.7035 33.2423 39.7035 30.9489C39.7035 28.6555 37.9044 26.7964 35.685 26.7964C33.4657 26.7964 31.6665 28.6555 31.6665 30.9489C31.6665 33.2423 33.4657 35.1015 35.685 35.1015Z" fill="#8BC7F5"/>
<path d="M33.6347 29.1718L34.0549 30.0474L32.2156 30.9514L34.0549 31.8057L33.6347 32.7311L31.1685 31.4853V30.4175L33.6347 29.1718ZM35.7453 27.4775L36.8613 27.748L35.4698 34.1477L34.3538 33.8772L35.7453 27.4775ZM37.5694 29.1718L40.0356 30.4175V31.4853L37.5694 32.7311L37.1492 31.8057L38.9885 30.9514L37.1492 30.0474L37.5694 29.1718Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32017">
<rect width="31" height="35" fill="white" transform="translate(11 9)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 848 B

After

Width:  |  Height:  |  Size: 1.9 KiB

1
assets/images/language-guides2.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" height="59" viewBox="0 0 54 59" width="54" xmlns="http://www.w3.org/2000/svg"><rect fill="#2854a1" height="51" rx="6" width="42"/><g fill="#71cfff"><path d="m6 8h30v2h-30z"/><path d="m6 13h30v2h-30z"/><path d="m6 18h30v2h-30z"/><path d="m6 23h30v2h-30z"/><path d="m6 28h24v2h-24z"/><path d="m6 33h22v2h-22z"/><path d="m42.5 25c-6.3509 0-11.5 5.0745-11.5 11.3333 0 8.5 11.5 22.6667 11.5 22.6667s11.5-14.1667 11.5-22.6667c0-6.2588-5.1491-11.3333-11.5-11.3333zm0 17c-3.174 0-5.75-2.5387-5.75-5.6667s2.576-5.6666 5.75-5.6666 5.75 2.5386 5.75 5.6666-2.576 5.6667-5.75 5.6667z"/><circle cx="43" cy="37" r="7"/></g><path d="m39.428 34.004.732 1.476-3.204 1.524 3.204 1.44-.732 1.56-4.296-2.1v-1.8zm3.6766-2.856 1.944.456-2.424 10.788-1.944-.456zm3.1774 2.856 4.296 2.1v1.8l-4.296 2.1-.732-1.56 3.204-1.44-3.204-1.524z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 848 B

15
assets/images/manuals-dark.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32067)">
<path d="M11 32.3037H36V37.4823C36 37.7683 35.7716 38.0001 35.4898 38.0001H14.5714C12.599 38.0001 11 36.3772 11 34.3751V32.3037Z" fill="#55A4F1"/>
<path d="M11 12.1071C11 10.3911 12.3706 9 14.0612 9H34.4694C35.3147 9 36 9.69556 36 10.5536V32.3036H11V12.1071Z" fill="#55A4F1"/>
<path d="M12 34.5C12 33.1193 13.1729 32 14.6198 32H36V37H14.6198C13.1729 37 12 35.8807 12 34.5Z" fill="#1760CA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1086 9H26.2173V12.1071L28.6629 11.175L31.1086 12.1071V9Z" fill="#8A53EC"/>
<path d="M30.5983 16.25H16.4013C16.1195 16.25 15.8911 16.4819 15.8911 16.7679C15.8911 17.0539 16.1195 17.2857 16.4013 17.2857H30.5983C30.8801 17.2857 31.1085 17.0539 31.1085 16.7679C31.1085 16.4819 30.8801 16.25 30.5983 16.25Z" fill="white"/>
<path d="M28.9683 18.3213H18.0322C17.7504 18.3213 17.522 18.5531 17.522 18.8391C17.522 19.1252 17.7504 19.357 18.0322 19.357H28.9683C29.2501 19.357 29.4785 19.1252 29.4785 18.8391C29.4785 18.5531 29.2501 18.3213 28.9683 18.3213Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32067">
<rect width="25" height="29" fill="white" transform="translate(11 9)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
assets/images/manuals.svg
View File

@ -1,8 +1,15 @@
<svg width="49" height="56" viewBox="0 0 49 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 45H49V55C49 55.5523 48.5523 56 48 56H7C3.13401 56 0 52.866 0 49V45Z" fill="#2854A1"/>
<path d="M0 6C0 2.68629 2.68629 0 6 0H46C47.6569 0 49 1.34315 49 3V45H0V6Z" fill="#2854A1"/>
<path d="M2.13043 49C2.13043 46.2386 4.36901 44 7.13043 44H47.9348V54H7.13043C4.36901 54 2.13043 51.7614 2.13043 49Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.413 0H29.8261V6L34.6196 4.2L39.413 6V0Z" fill="#71CFFF"/>
<rect x="9.58696" y="14" width="29.8261" height="2" rx="1" fill="white"/>
<rect x="12.7826" y="18" width="23.4348" height="2" rx="1" fill="white"/>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32018)">
<path d="M11 32.3037H36V37.4823C36 37.7683 35.7716 38.0001 35.4898 38.0001H14.5714C12.599 38.0001 11 36.3772 11 34.3751V32.3037Z" fill="#086DD7"/>
<path d="M11 12.1071C11 10.3911 12.3706 9 14.0612 9H34.4694C35.3147 9 36 9.69556 36 10.5536V32.3036H11V12.1071Z" fill="#086DD7"/>
<path d="M12 34.5C12 33.1193 13.1729 32 14.6198 32H36V37H14.6198C13.1729 37 12 35.8807 12 34.5Z" fill="#8BC7F5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1086 9H26.2173V12.1071L28.6629 11.175L31.1086 12.1071V9Z" fill="#C9A6FF"/>
<path d="M30.5983 16.25H16.4013C16.1195 16.25 15.8911 16.4819 15.8911 16.7679C15.8911 17.0539 16.1195 17.2857 16.4013 17.2857H30.5983C30.8801 17.2857 31.1085 17.0539 31.1085 16.7679C31.1085 16.4819 30.8801 16.25 30.5983 16.25Z" fill="white"/>
<path d="M28.9683 18.3213H18.0322C17.7504 18.3213 17.522 18.5531 17.522 18.8391C17.522 19.1252 17.7504 19.357 18.0322 19.357H28.9683C29.2501 19.357 29.4785 19.1252 29.4785 18.8391C29.4785 18.5531 29.2501 18.3213 28.9683 18.3213Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32018">
<rect width="25" height="29" fill="white" transform="translate(11 9)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 688 B

After

Width:  |  Height:  |  Size: 1.3 KiB

8
assets/images/manuals2.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="49" height="56" viewBox="0 0 49 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 45H49V55C49 55.5523 48.5523 56 48 56H7C3.13401 56 0 52.866 0 49V45Z" fill="#2854A1"/>
<path d="M0 6C0 2.68629 2.68629 0 6 0H46C47.6569 0 49 1.34315 49 3V45H0V6Z" fill="#2854A1"/>
<path d="M2.13043 49C2.13043 46.2386 4.36901 44 7.13043 44H47.9348V54H7.13043C4.36901 54 2.13043 51.7614 2.13043 49Z" fill="#71CFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.413 0H29.8261V6L34.6196 4.2L39.413 6V0Z" fill="#71CFFF"/>
<rect x="9.58696" y="14" width="29.8261" height="2" rx="1" fill="white"/>
<rect x="12.7826" y="18" width="23.4348" height="2" rx="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

16
assets/images/reference-dark.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32075)">
<path d="M31.8947 12.0527H12.0526C10.3667 12.0527 9 13.4194 9 15.1054V34.9475C9 36.6334 10.3667 38.0001 12.0526 38.0001H31.8947C33.5807 38.0001 34.9474 36.6334 34.9474 34.9475V15.1054C34.9474 13.4194 33.5807 12.0527 31.8947 12.0527Z" fill="#1760CA"/>
<path d="M34.9475 9H15.1054C13.4194 9 12.0527 10.3667 12.0527 12.0526V31.8947C12.0527 33.5807 13.4194 34.9474 15.1054 34.9474H34.9475C36.6334 34.9474 38.0001 33.5807 38.0001 31.8947V12.0526C38.0001 10.3667 36.6334 9 34.9475 9Z" fill="#55A4F1"/>
<path d="M15.4229 17.0397L18.3066 18.3096V17.2315C16.5935 16.5966 16.5935 16.5966 16.5935 16.5966L18.3066 15.9616V14.8901L15.4229 16.16V17.0397Z" fill="white"/>
<path d="M22.7367 17.6489H20.1929C19.9119 17.6489 19.6841 17.8767 19.6841 18.1577C19.6841 18.4387 19.9119 18.6665 20.1929 18.6665H22.7367C23.0177 18.6665 23.2455 18.4387 23.2455 18.1577C23.2455 17.8767 23.0177 17.6489 22.7367 17.6489Z" fill="white"/>
<path d="M14.851 12.0527C15.2725 12.0527 15.6142 11.711 15.6142 11.2895C15.6142 10.868 15.2725 10.5264 14.851 10.5264C14.4296 10.5264 14.0879 10.868 14.0879 11.2895C14.0879 11.711 14.4296 12.0527 14.851 12.0527Z" fill="white"/>
<path d="M16.8862 12.0527C17.3077 12.0527 17.6494 11.711 17.6494 11.2895C17.6494 10.868 17.3077 10.5264 16.8862 10.5264C16.4647 10.5264 16.123 10.868 16.123 11.2895C16.123 11.711 16.4647 12.0527 16.8862 12.0527Z" fill="white"/>
<path d="M18.9209 12.0527C19.3424 12.0527 19.684 11.711 19.684 11.2895C19.684 10.868 19.3424 10.5264 18.9209 10.5264C18.4994 10.5264 18.1577 10.868 18.1577 11.2895C18.1577 11.711 18.4994 12.0527 18.9209 12.0527Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32075">
<rect width="29" height="29" fill="white" transform="translate(9 9)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

23
assets/images/reference.svg
View File

@ -1,9 +1,16 @@
<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="6" width="51" height="51" rx="6" fill="#71CFFF"/>
<rect x="6" width="51" height="51" rx="6" fill="#2854A1"/>
<path d="M12.624 15.802L18.292 18.298V16.179C14.925 14.931 14.925 14.931 14.925 14.931L18.292 13.683V11.577L12.624 14.073V15.802Z" fill="white"/>
<rect x="21" y="17" width="7" height="2" rx="1" fill="white"/>
<circle cx="11.5" cy="4.5" r="1.5" fill="white"/>
<circle cx="15.5" cy="4.5" r="1.5" fill="white"/>
<circle cx="19.5" cy="4.5" r="1.5" fill="white"/>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32019)">
<path d="M31.8947 12.0527H12.0526C10.3667 12.0527 9 13.4194 9 15.1054V34.9475C9 36.6334 10.3667 38.0001 12.0526 38.0001H31.8947C33.5807 38.0001 34.9474 36.6334 34.9474 34.9475V15.1054C34.9474 13.4194 33.5807 12.0527 31.8947 12.0527Z" fill="#8BC7F5"/>
<path d="M34.9475 9H15.1054C13.4194 9 12.0527 10.3667 12.0527 12.0526V31.8947C12.0527 33.5807 13.4194 34.9474 15.1054 34.9474H34.9475C36.6334 34.9474 38.0001 33.5807 38.0001 31.8947V12.0526C38.0001 10.3667 36.6334 9 34.9475 9Z" fill="#086DD7"/>
<path d="M15.4229 17.0397L18.3066 18.3096V17.2315C16.5935 16.5966 16.5935 16.5966 16.5935 16.5966L18.3066 15.9616V14.8901L15.4229 16.16V17.0397Z" fill="white"/>
<path d="M22.7367 17.6489H20.1929C19.9119 17.6489 19.6841 17.8767 19.6841 18.1577C19.6841 18.4387 19.9119 18.6665 20.1929 18.6665H22.7367C23.0177 18.6665 23.2455 18.4387 23.2455 18.1577C23.2455 17.8767 23.0177 17.6489 22.7367 17.6489Z" fill="white"/>
<path d="M14.851 12.0527C15.2725 12.0527 15.6142 11.711 15.6142 11.2895C15.6142 10.868 15.2725 10.5264 14.851 10.5264C14.4296 10.5264 14.0879 10.868 14.0879 11.2895C14.0879 11.711 14.4296 12.0527 14.851 12.0527Z" fill="white"/>
<path d="M16.8862 12.0527C17.3077 12.0527 17.6494 11.711 17.6494 11.2895C17.6494 10.868 17.3077 10.5264 16.8862 10.5264C16.4647 10.5264 16.123 10.868 16.123 11.2895C16.123 11.711 16.4647 12.0527 16.8862 12.0527Z" fill="white"/>
<path d="M18.9209 12.0527C19.3424 12.0527 19.684 11.711 19.684 11.2895C19.684 10.868 19.3424 10.5264 18.9209 10.5264C18.4994 10.5264 18.1577 10.868 18.1577 11.2895C18.1577 11.711 18.4994 12.0527 18.9209 12.0527Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_805_32019">
<rect width="29" height="29" fill="white" transform="translate(9 9)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 1.8 KiB

9
assets/images/reference2.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="6" width="51" height="51" rx="6" fill="#71CFFF"/>
<rect x="6" width="51" height="51" rx="6" fill="#2854A1"/>
<path d="M12.624 15.802L18.292 18.298V16.179C14.925 14.931 14.925 14.931 14.925 14.931L18.292 13.683V11.577L12.624 14.073V15.802Z" fill="white"/>
<rect x="21" y="17" width="7" height="2" rx="1" fill="white"/>
<circle cx="11.5" cy="4.5" r="1.5" fill="white"/>
<circle cx="15.5" cy="4.5" r="1.5" fill="white"/>
<circle cx="19.5" cy="4.5" r="1.5" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B

17
assets/images/rocket-dark.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_805_32084)">
<path d="M13.6006 34.1473C14.5307 28.7438 16.0067 26.8419 18.4459 26.9586L20.7893 29.302C20.906 31.7411 19.0042 33.2173 13.6006 34.1473Z" fill="#CD6A0A"/>
<path d="M16.7891 25.6374C22.6165 14.0841 29.2828 10.281 37.5437 10.1992C37.6257 18.4603 34.0673 25.1259 22.003 30.8514L16.7891 25.6374Z" fill="#55A4F1"/>
<path d="M27.4898 20.2577C28.5601 21.328 30.2954 21.328 31.3657 20.2577C32.436 19.1874 32.436 17.4521 31.3657 16.3818C30.2954 15.3115 28.5601 15.3115 27.4898 16.3818C26.4195 17.4521 26.4195 19.1874 27.4898 20.2577Z" fill="white"/>
<path d="M27.943 31.6933L28.2863 27.001L22.2828 30.7991L21.0504 33.616C20.8689 34.0309 21.2734 34.4609 21.6986 34.305L27.6071 32.1386C27.7968 32.069 27.9282 31.8948 27.943 31.6933Z" fill="#55A4F1"/>
<path d="M15.9707 19.7208L20.6629 19.3774L16.8648 25.3809L14.0478 26.6133C13.633 26.7948 13.203 26.3903 13.3589 25.9651L15.5253 20.0566C15.5949 19.8669 15.7691 19.7355 15.9707 19.7208Z" fill="#55A4F1"/>
<path d="M10.8267 32.793L7.26367 36.356" stroke="#1760CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8994 36.0107L6.72754 41.1827" stroke="#1760CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.1172 37.083L11.5542 40.646" stroke="#1760CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_805_32084">
<rect width="36" height="36" fill="white" transform="translate(6 6)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
assets/images/rocket.svg
View File

@ -1,10 +1 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7791 54.7305C16.5876 44.2236 19.4577 40.5254 24.2005 40.7525L28.7571 45.3091C28.9841 50.0518 25.2861 52.9221 14.7791 54.7305Z" fill="#71CFFF"/>
<path d="M20.9791 38.1836C32.3102 15.7188 45.2724 8.32395 61.3353 8.16491C61.4947 24.2282 54.5757 37.1891 31.1174 48.3219L20.9791 38.1836Z" fill="#2854A1"/>
<circle cx="45.5538" cy="23.9553" r="5.32911" transform="rotate(45 45.5538 23.9553)" fill="#71CFFF"/>
<path d="M42.667 49.9593L43.3346 40.8354L31.6612 48.2206L29.2648 53.698C28.9119 54.5047 29.6985 55.3408 30.5252 55.0377L42.014 50.8252C42.3829 50.6899 42.6384 50.3511 42.667 49.9593Z" fill="#2854A1"/>
<path d="M19.3871 26.6792L28.5109 26.0116L21.1257 37.685L15.6483 40.0814C14.8416 40.4343 14.0055 39.6477 14.3086 38.8209L18.5212 27.3322C18.6564 26.9633 18.9952 26.7078 19.3871 26.6792Z" fill="#2854A1"/>
<line x1="9.38519" y1="52.0973" x2="2.45713" y2="59.0254" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="11.4706" y1="58.354" x2="1.41422" y2="68.4105" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="17.7275" y1="60.4396" x2="10.7995" y2="67.3677" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_805_32020)"><path d="M17.001 42.684C18.163 35.93 20.008 33.552 23.057 33.698L25.987 36.627C26.133 39.676 23.755 41.522 17.001 42.684Z" fill="#FBB552"/><path d="M20.986 32.047C28.271 17.605 36.604 12.851 46.93 12.749C47.032 23.075 42.584 31.407 27.504 38.564L20.986 32.047Z" fill="#086DD7"/><path d="M34.362 25.322C35.7 26.66 37.869 26.66 39.207 25.322C40.545 23.984 40.545 21.815 39.207 20.477C37.869 19.139 35.7 19.139 34.362 20.477C33.024 21.815 33.024 23.984 34.362 25.322Z" fill="white"/><path d="M34.929 39.617L35.358 33.751L27.854 38.499L26.313 42.02C26.086 42.539 26.592 43.076 27.123 42.881L34.509 40.173C34.746 40.086 34.91 39.868 34.929 39.617Z" fill="#086DD7"/><path d="M19.963 24.651L25.829 24.222L21.081 31.726L17.56 33.267C17.041 33.493 16.504 32.988 16.699 32.456L19.407 25.071C19.494 24.834 19.711 24.669 19.963 24.651Z" fill="#086DD7"/><path d="M13.533 40.991L9.08 45.445" stroke="#8BC7F5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.874 45.013L8.409 51.478" stroke="#8BC7F5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.896 46.354L14.443 50.808" stroke="#8BC7F5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_805_32020"><path width="60" height="36" fill="white" transform="translate(6 6)" d="M0 0H75V45H0V0z"/></clipPath></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

10
assets/images/rocket2.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7791 54.7305C16.5876 44.2236 19.4577 40.5254 24.2005 40.7525L28.7571 45.3091C28.9841 50.0518 25.2861 52.9221 14.7791 54.7305Z" fill="#71CFFF"/>
<path d="M20.9791 38.1836C32.3102 15.7188 45.2724 8.32395 61.3353 8.16491C61.4947 24.2282 54.5757 37.1891 31.1174 48.3219L20.9791 38.1836Z" fill="#2854A1"/>
<circle cx="45.5538" cy="23.9553" r="5.32911" transform="rotate(45 45.5538 23.9553)" fill="#71CFFF"/>
<path d="M42.667 49.9593L43.3346 40.8354L31.6612 48.2206L29.2648 53.698C28.9119 54.5047 29.6985 55.3408 30.5252 55.0377L42.014 50.8252C42.3829 50.6899 42.6384 50.3511 42.667 49.9593Z" fill="#2854A1"/>
<path d="M19.3871 26.6792L28.5109 26.0116L21.1257 37.685L15.6483 40.0814C14.8416 40.4343 14.0055 39.6477 14.3086 38.8209L18.5212 27.3322C18.6564 26.9633 18.9952 26.7078 19.3871 26.6792Z" fill="#2854A1"/>
<line x1="9.38519" y1="52.0973" x2="2.45713" y2="59.0254" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="11.4706" y1="58.354" x2="1.41422" y2="68.4105" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="17.7275" y1="60.4396" x2="10.7995" y2="67.3677" stroke="#71CFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

7
assets/images/whats-new-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.215 17.4701C22.215 9.42371 17.1402 8.93233 15.3693 10.3893C13.4133 11.9986 12.7612 16.5046 22.215 17.4701Z" stroke="#1760CA" stroke-width="4.88" stroke-linejoin="round"/>
<path d="M24.6035 17.4701C24.6035 9.42371 29.6783 8.93233 31.4492 10.3893C33.4052 11.9986 34.0572 16.5046 24.6035 17.4701Z" stroke="#1760CA" stroke-width="4.88" stroke-linejoin="round"/>
<path d="M9 25H38V37C38 38.6569 36.6569 40 35 40H12C10.3431 40 9 38.6569 9 37V25Z" fill="#55A4F1"/>
<rect x="40" y="24" width="33" height="7" rx="3" transform="rotate(-180 40 24)" fill="#55A4F1"/>
<path d="M28 17H20V40H28V17Z" fill="#1760CA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 718 B

13
assets/images/whats-new.svg
View File

@ -1,8 +1,7 @@
<svg width="56" height="55" viewBox="0 0 56 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.8191 16.2765C25.8191 2.44674 17.2073 1.60218 14.2022 4.10632C10.883 6.87228 9.7764 14.617 25.8191 16.2765Z" stroke="#71CFFF" stroke-width="4.88"/>
<path d="M29.8724 16.2765C29.8724 2.44674 38.4842 1.60218 41.4893 4.10632C44.8086 6.87228 45.9151 14.617 29.8724 16.2765Z" stroke="#71CFFF" stroke-width="4.88"/>
<rect x="3.31903" y="24.0212" width="48.6809" height="30.9787" rx="4.88" fill="#2854A1"/>
<rect y="15.1702" width="55.3191" height="12.1702" rx="4.88" fill="#2854A1"/>
<rect x="21.0211" y="15.1702" width="13.2766" height="39.8298" fill="#51BCFD"/>
<rect x="3.31903" y="27.3405" width="48.6809" height="2.21277" fill="white"/>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.215 16.7245C22.215 8.67811 17.1402 8.18672 15.3693 9.64368C13.4133 11.253 12.7612 15.759 22.215 16.7245Z" stroke="#8BC7F5" stroke-width="4.88" stroke-linejoin="round"/>
<path d="M24.6035 16.7245C24.6035 8.67811 29.6783 8.18672 31.4492 9.64368C33.4052 11.253 34.0572 15.759 24.6035 16.7245Z" stroke="#8BC7F5" stroke-width="4.88" stroke-linejoin="round"/>
<path d="M9 24.2544H38V36.2544C38 37.9112 36.6569 39.2544 35 39.2544H12C10.3431 39.2544 9 37.9112 9 36.2544V24.2544Z" fill="#086DD7"/>
<rect x="40" y="23.2544" width="33" height="7" rx="3" transform="rotate(-180 40 23.2544)" fill="#086DD7"/>
<path d="M28 16.2544H20V39.2544H28V16.2544Z" fill="#8BC7F5"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 751 B

After

Width:  |  Height:  |  Size: 774 B

8
assets/images/whats-new2.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="56" height="55" viewBox="0 0 56 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.8191 16.2765C25.8191 2.44674 17.2073 1.60218 14.2022 4.10632C10.883 6.87228 9.7764 14.617 25.8191 16.2765Z" stroke="#71CFFF" stroke-width="4.88"/>
<path d="M29.8724 16.2765C29.8724 2.44674 38.4842 1.60218 41.4893 4.10632C44.8086 6.87228 45.9151 14.617 29.8724 16.2765Z" stroke="#71CFFF" stroke-width="4.88"/>
<rect x="3.31903" y="24.0212" width="48.6809" height="30.9787" rx="4.88" fill="#2854A1"/>
<rect y="15.1702" width="55.3191" height="12.1702" rx="4.88" fill="#2854A1"/>
<rect x="21.0211" y="15.1702" width="13.2766" height="39.8298" fill="#51BCFD"/>
<rect x="3.31903" y="27.3405" width="48.6809" height="2.21277" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 751 B