docs/stylesheets/styles.css

   1 /* Set some CSS variables for use throughout the page */
   2
   3 :root>* {
   4   --md-hue: 208; /* blue-7 hue */
   5   --md-footer-bg-color: var(--md-code-bg-color);
   6   --md-footer-fg-color: var(--md-code-fg-color);
   7 }
   8
   9 [data-md-color-scheme="default"] {
  10   --md-primary-fg-color: var(--blue-7);
  11   --md-accent-fg-color: var(--violet-6);
  12   --md-code-bg-color: var(--gray-2);
  13   --md-default-fg-color--lightest: var(--gray-4);
  14 }
  15
  16 [data-md-color-scheme="slate"] {
  17   --md-primary-fg-color: var(--blue-5);
  18   --md-accent-fg-color: var(--violet-4);
  19 }
  20
  21 /* Override some default material styles */
  22
  23 [dir=ltr] .md-header__title,
  24 [dir=rtl] .md-header__title {
  25   margin-inline: 0.3rem;
  26 }
  27
  28 .md-nav__title {
  29   display: none;
  30 }
  31
  32 .md-footer__link {
  33   display: inline-flex;
  34   flex-direction: row;
  35   align-items: center;
  36   padding-top: 0.7rem;
  37 }
  38
  39 .md-footer__link:is(:focus,:hover) {
  40   opacity: unset;
  41 }
  42
  43 .md-footer__title {
  44   line-height: unset;
  45   margin-top: 0.65rem;
  46   padding-inline: 0.6rem;
  47 }
  48
  49 .md-footer__direction {
  50   padding-inline: 0.6rem;
  51 }
  52
  53 .md-footer-meta {
  54   background-color: hsla(var(--md-hue), 15%, 10%, 1);
  55 }
  56
  57 html .md-footer .md-footer-meta a:focus,
  58 html .md-footer .md-footer-meta a:hover,
  59 html .md-footer a:focus,
  60 html .md-footer a:hover {
  61   color: var(--md-accent-fg-color);
  62 }
  63
  64 /* Our custom styles */
  65
  66 .hero-image {
  67   width: 65%;
  68   margin-inline-start: 17.5%;
  69   border-radius: var(--radius-2);
  70   box-shadow: var(--shadow-3);
  71 }