Light mode: fix new-style faq, stack overflow icon

assets/img/logos/lightmode/stack-overflow.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 47.999999 48.000001"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="stack-overflow.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="2.0241158"
+     inkscape:cx="204.78077"
+     inkscape:cy="61.75536"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="1080"
+     inkscape:window-y="840"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g824" />
+  <g
+     id="g824"
+     transform="matrix(0.3894695,0,0,0.3894695,4,0)">
+    <polygon
+       fill="#bbbbbb"
+       points="11,113 88,113 88,80 99,80 99,124 0,124 0,80 11,80 "
+       id="polygon4"
+       style="fill-rule:evenodd;fill:#000000"
+       transform="translate(0,-0.192)" />
+    <path
+       fill="#f58025"
+       fill-rule="nonzero"
+       d="m 22.987891,76.538 54.025,11.355 2.271,-10.8 -54.025,-11.36 z m 7.149,-25.869 50.046,23.308 4.662,-10.009 -50.047,-23.308 z m 13.848,-24.553 42.428,35.331 7.066,-8.485 -42.428,-35.33 z M 71.371891,0 l -8.86,6.59 32.948,44.3 8.859999,-6.589 z M 22,101.808 h 55 v -11 H 22 Z"
+       id="path6"
+       style="fill:#000000" />
+  </g>
+</svg>

styles/_pages.scss

@@ -86,11 +86,10 @@
     right: 0;
     // background-image set on the page-* classes
     background-repeat: no-repeat;
-    background-position-x: left -20vw;
+    background-position-x: left;
     background-position-y: top;
     opacity: 0.6;
     @include media-breakpoint-up(md) {
-      background-position-x: left;
       opacity: 1.0;
     }
   }
@@ -167,20 +166,7 @@
 
 .page-uses {
   &::before {
-    content: "";
+    background-image: url(../img/backgrounds/use-cases-blue.svg);
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: url(../img/backgrounds/use-cases-blue.svg) no-repeat;
-    background-position-x: left -20vw;
-    background-position-y: top;
-    opacity: 0.6;
-    @include media-breakpoint-up(md) {
-      background-position-x: left;
-      opacity: 1.0;
-    }
   }
   @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
     ##{$usecase} {
@@ -306,27 +292,11 @@
 }
 
 
-// FAQ Page
-#faq-background {//old
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-
 .page-faq {
+  &::before {
     background-image: url(../img/backgrounds/faq-bg.svg);
-  background-repeat: no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
     @include media-breakpoint-up(md) {
-    background-position-x: left;
       background-size: contain;
-
-    .dactyl-tree-nav {
-      background: linear-gradient(90deg, $body-bg 0%, $body-bg 75%, transparent 100%);
-      padding-left: 1rem;
-      margin-left: -1rem;
     }
   }
 
@@ -512,6 +482,14 @@
   }
 }
 
+.page-community {
+  @each $platform in "github", "twitch", "stack-overflow", "twitter" {
+    #platform-#{$platform} {
+      content: url("../img/logos/#{$platform}.svg")
+    }
+  }
+}
+
 .page-references {
   #refs-types .card-deck {
     .card:nth-child(1) .card-footer {

styles/_top-nav.scss

@@ -601,6 +601,7 @@ a {
 .custom-theme-toggle {
   .custom-control-label {
     padding: 1rem;
+    cursor: pointer;
   }
   .custom-control-label::before,
   .custom-control-input:checked ~ .custom-control-label::before {

styles/light/_light-theme.scss

@@ -10,7 +10,6 @@ $light-standout-bg: $white;
 // General color elements ------------------------------------------------------
 
 body {
-    background: $light-bg;
   background-color: $light-bg;
   color: $light-fg;
 }
@@ -326,10 +325,28 @@ aside .active > a:hover {
   box-shadow: $light-box-shadow;
 }
 
-// FAQ (old style)
+// FAQ
-.accordian-row {
+.page-faq {
+  &.landing-builtin-bg::before {
+    // Lighten the background image for legibility, since this one
+    // runs under a significant amount of the header text.
+    opacity: 0.6;
+  }
+
+  .q-wrapper {
     background-color: $gray-200;
     color: $light-fg;
+
+    > a.expander:hover {
+      color: $light-fg;
+    }
+  }
+}
+
+.page-community {
+  #platform-stack-overflow {
+    content: url("../img/logos/lightmode/stack-overflow.svg")
+  }
 }
 
 // Status labels

template/page-community.html.jinja

@@ -57,24 +57,24 @@
 
   {% set platforms = [
     { "name": "GitHub",
-      "img": "assets/img/logos/github.svg",
+      "id": "github",
       "link": "https://github.com/ripple/xrpl-dev-portal",
       "imgclasses": "invertible-img"},
     { "name": "Twitch",
-      "img": "assets/img/logos/twitch.svg",
+      "id": "twitch",
       "link": "https://www.twitch.tv/ripplexdev"},
     { "name": "Stack Overflow",
-      "img": "assets/img/logos/stack-overflow.svg",
+      "id": "stack-overflow",
       "link": "https://stackoverflow.com/questions/tagged/xrp"},
     { "name": "Twitter",
-      "img": "assets/img/logos/twitter.svg",
+      "id": "twitter",
       "link": "https://twitter.com/XRPLF/"},
   ] %}
   <div class="row row-cols-2 row-cols-lg-4 card-deck">
   {% for plat in platforms %}
     <a class="card" href="{{plat.link}}">
       <div class="card-body">
-        <div class="circled-logo"><img src="{{plat.img}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
+        <div class="circled-logo"><img id="platform-{{plat.id}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
         <h4 class="card-title h5">{{plat.name}}</h4>
       </div>
       <div class="card-footer">&nbsp;</div>

template/page-faq2.html.jinja

@@ -1,6 +1,6 @@
 {% extends "pagetype-doc.html.jinja" %}
 
-{% block bodyclasses %}page-faq{% endblock %}
+{% block bodyclasses %}page-faq landing-builtin-bg{% endblock %}
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}