diff --git a/static/css/spin-logo-dark.fd644710.svg b/static/css/spin-logo-dark.fd644710.svg
new file mode 100644
index 00000000..290bf4e6
--- /dev/null
+++ b/static/css/spin-logo-dark.fd644710.svg
@@ -0,0 +1,7 @@
+
diff --git a/static/css/spin-logo-light.9b984a2b.svg b/static/css/spin-logo-light.9b984a2b.svg
new file mode 100644
index 00000000..b541ad9a
--- /dev/null
+++ b/static/css/spin-logo-light.9b984a2b.svg
@@ -0,0 +1,7 @@
+
diff --git a/static/css/styles.css b/static/css/styles.css
index f6596505..e69b76bc 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1414,17 +1414,13 @@ html.dark-theme body.documentation #topbar.navbar {
}
html.dark-theme body.documentation #topbar.navbar .logo-wrap .logo {
- color: #fff;
+ background: url("spin-logo-dark.fd644710.svg") 0 0 / contain no-repeat;
}
html.dark-theme body.documentation #topbar.navbar .logo-wrap:hover .logo {
color: #a87ce6;
}
-html.dark-theme body.documentation #topbar.navbar .logo-wrap .logo-developer a {
- color: #c5fff1 !important;
-}
-
html.dark-theme body.documentation #topbar.navbar .logo-wrap:after {
background-color: #384687;
}
@@ -2546,34 +2542,13 @@ html.dark-theme .external {
}
#topbar.navbar .logo-wrap .logo {
+ text-indent: -9999rem;
+ background: url("spin-logo-light.9b984a2b.svg") 0 0 / contain no-repeat;
+ min-width: 8rem;
+ height: 2.25rem;
padding: .3rem 1.125rem;
- margin-top: -4px !important;
-}
-
-#topbar.navbar .logo-wrap .logo svg {
- margin-left: 1.2vw;
- height: 30% !important;
- min-height: auto !important;
- max-height: auto !important;
- max-width: auto !important;
-}
-
-#topbar.navbar .logo-wrap .logo-developer {
- letter-spacing: .0225rem;
- text-transform: uppercase;
- letter-spacing: .1125rem;
- margin: 0;
- font-family: Space Grotesk, Tofu, Sen, Europa, Avenir, system, -apple-system, SFNSText-Regular, San Francisco, Segoe UI, Helvetica Neue, Lucida Grande, sans-serif;
- font-size: 70%;
- font-weight: 500;
- display: inline-block !important;
-}
-
-#topbar.navbar .logo-wrap .logo-developer a {
- font-size: 15px !important;
- font-weight: 500 !important;
- line-height: 12px !important;
- display: inline-block !important;
+ position: relative;
+ margin: .6rem 0 .4rem 1.2rem !important;
}
#topbar.navbar .logo-wrap:after {
diff --git a/static/image/spin-logo-dark.svg b/static/image/spin-logo-dark.svg
new file mode 100644
index 00000000..f9c27f68
--- /dev/null
+++ b/static/image/spin-logo-dark.svg
@@ -0,0 +1,7 @@
+
diff --git a/static/image/spin-logo-light.svg b/static/image/spin-logo-light.svg
new file mode 100644
index 00000000..4e9b8d31
--- /dev/null
+++ b/static/image/spin-logo-light.svg
@@ -0,0 +1,7 @@
+
diff --git a/static/image/twitter_card_summary.png b/static/image/twitter_card_summary.png
index 3476c722..c0a28b75 100644
Binary files a/static/image/twitter_card_summary.png and b/static/image/twitter_card_summary.png differ
diff --git a/static/sass/developer-color-dark.scss b/static/sass/developer-color-dark.scss
index 42a0a0e0..5f212664 100644
--- a/static/sass/developer-color-dark.scss
+++ b/static/sass/developer-color-dark.scss
@@ -34,16 +34,13 @@ html.dark-theme {
.logo-wrap {
.logo {
- color: white;
+ background: url(/static/image/spin-logo-dark.svg) no-repeat 0 0;
+ background-size: contain;
}
&:hover .logo {
color: $lavenderfloral;
}
- .logo-developer a {
- color: $greenfoam !important;
- }
-
&::after {
background-color: $bluedark;
}
@@ -410,10 +407,7 @@ html.dark-theme {
}
}
}
-
}
-
-
}
.logo-wrap {
diff --git a/static/sass/developer-include-topbar.scss b/static/sass/developer-include-topbar.scss
index dc967f9d..822a50a6 100644
--- a/static/sass/developer-include-topbar.scss
+++ b/static/sass/developer-include-topbar.scss
@@ -16,36 +16,16 @@
border: none;
.logo {
- margin-top: -4px !important;
+ margin: 0.6rem 0 0.4rem 1.2rem !important;
+ height: 2.25rem;
+ min-width: 8rem;
padding: 0.3rem 1.125rem;
-
- svg {
- height: 30% !important;
- min-height: auto !important ;
- max-height: auto !important;
- max-width: auto !important;
- margin-left: 1.2vw;
- }
- }
-
- .logo-developer {
- margin: 0;
- font-family: $spaceGro;
- letter-spacing: 0.0225rem;
- font-size: 70%;
- font-weight: 500;
- display: inline-block !important;
- @include upperCase;
-
- a {
- font-weight: 500 !important;
- font-size: 15px !important;
- line-height: 12px !important;
- display: inline-block !important;
- // margin-top: -1px;
- }
+ background: url(/static/image/spin-logo-light.svg) no-repeat 0 0;
+ background-size: contain;
+ text-indent: -9999rem;
+ position: relative;
}
-
+
&:after {
width: 1px;
height: 2rem;