build/stylesheets/root.css

   1
   2 :root {
   3
   4     /* color scheme - one dark */
   5     /* --black-normal:   #282C34; */
   6     /* --black-bright:   #454C59; */
   7     /* --red-normal:     #E06C75; */
   8     /* --red-bright:     #FF7A85; */
   9     /* --green-normal:   #98C379; */
  10     /* --green-bright:   #B5E890; */
  11     /* --yellow-normal:  #E5C07B; */
  12     /* --yellow-bright:  #FFD68A; */
  13     /* --blue-normal:    #61AFEF; */
  14     /* --blue-bright:    #69BBFF; */
  15     /* --magenta-normal: #C678DD; */
  16     /* --magenta-bright: #E48AFF; */
  17     /* --cyan-normal:    #56B6C2; */
  18     /* --cyan-bright:    #66D9E8; */
  19     /* --white-normal:   #ABB2BF; */
  20     /* --white-bright:   #CFD7E6; */
  21
  22     /* color scheme - gruvbox */
  23     --black-normal:   #282828;
  24     --black-bright:   #3c3836;
  25     --red-normal:     #cc241d;
  26     --red-bright:     #fb4934;
  27     --green-normal:   #98971a;
  28     --green-bright:   #b8bb26;
  29     --yellow-normal:  #d79921;
  30     --yellow-bright:  #fabd2f;
  31     --blue-normal:    #458588;
  32     --blue-bright:    #83a598;
  33     --magenta-normal: #b16286;
  34     --magenta-bright: #d3869b;
  35     --cyan-normal:    #689d6a;
  36     --cyan-bright:    #8ec07c;
  37     --white-normal:   #a89984;
  38     --white-bright:   #ebdbb2;
  39
  40     --bg-dark:  var(--black-normal);
  41     --bg-light: var(--black-bright);
  42     --text-dark: var(--white-normal);
  43     --text-light: var(--white-bright);
  44
  45     color: var(--text-dark);
  46     background-color: var(--bg-dark);
  47     font-family: 'Courier New', monospace;
  48
  49 }
  50
  51 body {
  52     height: 100%;
  53     margin: 0;
  54     padding: 0;
  55 }
  56
  57 nav {
  58     background-color: var(--bg-light);
  59     padding: 1rem;
  60     text-align: right;
  61 }
  62
  63 h1, h2, h3, h4, h5, h6 {
  64     color: var(--text-light);
  65 }
  66
  67 a {
  68     color: var(--text-light);
  69     transition: color 0.2s;
  70 }
  71 a:hover {
  72     color: var(--text-dark);
  73 }
  74
  75 strong {
  76     color: var(--text-light);
  77 }
  78
  79 pre {
  80     background-color: var(--bg-light);
  81     padding: 0.75rem;
  82 }
  83
  84 code {
  85     color: var(--text-light);
  86     background-color: var(--bg-light);
  87 }
  88
  89 .article-container, .rolling-container, .archive-container {
  90     margin: 0 auto;
  91     margin-top: 2rem;
  92     width: clamp(40ch, 50%, 80ch);
  93 }
  94