freedomofpress / securedrop-docs

Documentation for the SecureDrop project
https://docs.securedrop.org/
Other
22 stars 26 forks source link

Customize RTD theme consistent with SecureDrop brand #89

Open ninavizz opened 5 years ago

ninavizz commented 5 years ago

Problem

With SD 1.0, the product UI color schemas will be new. Small updates to RTD should be made, to reflect the new color schema and use of branding in all the web UIs.

Solution

Exact solution TBD. See comments for updates. Tentatively, the below was crafted in late night Firefox pokings... image

I also think the unique color on "visited" links should be disabled, as it just clutters the layout while offering little/no value to the folks who use SD's RTD.

CSSy Things

...for above screenshot.

/* theme.css | https://docs.securedrop.org/en/release-0.14.0/_static/css/theme.css */

.wy-side-nav-search {
  /* background-color: #2980B9; */
  background-color: #FFFFFF;
}

.wy-menu-vertical header, .wy-menu-vertical p.caption {
  /* color: #3a7ca8; */
  color: #2E8AE8;
}

a {
  /* color: #2980B9; */
  color: #0065DB;
}

.wy-nav-side {
  /* color: #9b9b9b; */
  /* background: #343131; */
  color: #e25cab;
  background: #202020;
}

body {
  /* color: #404040; */
  color: #303030;
}

@media screen and (min-width: 1100px) {
  .wy-nav-content {
    /* background: #fcfcfc; */
    background: #fafafa;
  }
}

.wy-side-nav-search > a, .wy-side-nav-search .wy-dropdown > a {
  /* color: #fcfcfc; */
  color: #000C6C;
}

.wy-side-nav-search > div.version {
  /* color: rgba(255,255,255,0.3); */
  color: #9C9DBB;
}

.wy-side-nav-search input[type="text"] {
  /* border-color: #2472a4; */
  border-color: #9f9f9f;
}

a:hover {
  /* color: #3091d1; */
  color: #000C6C;
}
eloquence commented 4 years ago

(The logo was updated at the time, but other style tweaks are still very much worth considering. Retitled for clarity.)