[accessibility] update color schemes, interactive link spacing

_config.yml

@@ -28,8 +28,7 @@ url: "" # the base hostname & protocol for your site, e.g. http://example.com
 
 # Build settings
 remote_theme: pmarsceill/just-the-docs
-color_scheme: custom
-
+color_scheme: wider
 aux_links:
   "CS 161":
     - "https://cs161.org"

_sass/color_schemes/dark_wider.scss

@@ -0,0 +1,131 @@
+@import "./color_schemes/dark";
+
+$content-width: 68.75rem;
+$nav-width: 18.75rem;
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
+);
+
+// Change bottom-left "generated by JTD" text color to be darker
+$grey-dk-000: #E6E1E8 !important;
+
+// Pygments monokai, from https://github.com/richleland/pygments-css/blob/master/monokai.css
+.highlight .hll { background-color: #49483e }
+.highlight  { background: #272822; color: #f8f8f2 }
+.highlight .c { color: #acdfa2 } /* Comment (manually changed) */
+.highlight .err { color: #FF75BF; background-color: #1e0010 } /* Error (manually changed) */
+.highlight .k { color: #66d9ef } /* Keyword */
+.highlight .l { color: #D7C2FF } /* Literal (manually changed) */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #FCA1C3 } /* Operator (manually changed) */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .ch { color: #C3BFB6 } /* Comment.Hashbang (manually changed) */
+.highlight .cm { color: #C3BFB6 } /* Comment.Multiline (manually changed) */
+.highlight .cp { color: #C3BFB6 } /* Comment.Preproc (manually changed) */
+.highlight .cpf { color: #C3BFB6 } /* Comment.PreprocFile v*/
+.highlight .c1 { color: #C3BFB6 } /* Comment.Single (manually changed) */
+.highlight .cs { color: #C3BFB6 } /* Comment.Special (manually changed) */
+.highlight .gd { color: #FCABC9 } /* Generic.Deleted (manually changed) */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gi { color: #a6e22e } /* Generic.Inserted */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #C3BFB6 } /* Generic.Subheading (manually changed) */
+.highlight .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight .kn { color: #FCA6C6 } /* Keyword.Namespace (manually changed) */
+.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight .kt { color: #66d9ef } /* Keyword.Type */
+.highlight .ld { color: #e6db74 } /* Literal.Date */
+.highlight .m { color: #D7C2FF } /* Literal.Number (manually changed) */
+.highlight .s { color: #e6db74 } /* Literal.String */
+.highlight .na { color: #a6e22e } /* Name.Attribute */
+.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight .nc { color: #a6e22e } /* Name.Class */
+.highlight .no { color: #66d9ef } /* Name.Constant */
+.highlight .nd { color: #a6e22e } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #a6e22e } /* Name.Exception */
+.highlight .nf { color: #a6e22e } /* Name.Function */
+.highlight .nl { color: #f8f8f2 } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #a6e22e } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #FCA6C6 } /* Name.Tag (manually changed) */
+.highlight .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight .ow { color: #FCA6C6 } /* Operator.Word (manually changed) */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mb { color: #D7C2FF } /* Literal.Number.Bin (manually changed) */
+.highlight .mf { color: #D7C2FF } /* Literal.Number.Float (manually changed) */
+.highlight .mh { color: #D7C2FF } /* Literal.Number.Hex (manually changed) */
+.highlight .mi { color: #D7C2FF } /* Literal.Number.Integer (manually changed) */
+.highlight .mo { color: #D7C2FF } /* Literal.Number.Oct (manually changed) */
+.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
+.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
+.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight .se { color: #D7C2FF } /* Literal.String.Escape (manually changed) */
+.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
+.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
+.highlight .il { color: #D7C2FF } /* Literal.Number.Integer.Long (manually changed) */
+
+
+.code-blue { color: #66d9ef; font-weight: bold }
+.code-red { color: #FCA6C6; font-weight: bold }
+.code-green { color: #a6e22e; font-weight: bold }
+.cell-highlight td { background-color: #212024; position: relative; }
+
+a,
+.icon,
+.nav-list .nav-list-item .nav-list-expander,
+.main-content .anchor-heading svg,
+.search-input:focus + .search-label .search-icon,
+.search-result-doc .search-result-icon,
+a.skip-to-main:focus, a.skip-to-main:active {
+  color: #A0CFEE !important;
+}
+
+.site-title {
+  color: #f5f6fa !important;
+}
+
+span.blue {
+  color: #00D3EB;
+}
+
+span.red {
+  color: #FFB3B3;
+}
+
+span.green {
+  color: #79DB00;
+}
+
+body {
+  color: #E6E1E8 !important;
+}
+
+.highlight, pre.highlight {
+  color: #dee2f7 !important;
+}
+
+img {
+    filter: invert(100%) brightness(100%) hue-rotate(175deg) saturate(100%);
+}

_sass/color_schemes/wider.scss

@@ -0,0 +1,123 @@
+@import "./color_schemes/light";
+
+$content-width: 68.75rem;
+$nav-width: 18.75rem;
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
+);
+
+// Change bottom-left "generated by JTD" text color to be darker
+$grey-dk-000: #4A464E;
+
+// Pygments default, from https://github.com/richleland/pygments-css/blob/master/default.css
+// Some manual changes made (and labeled as such) to meet WCAG AA (weird that default Pygment doesn't)
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f8f8f8; }
+.highlight .c { color: #265A5A; font-style: italic } /* Comment (manually changed) */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #005700; font-weight: bold } /* Keyword (manually changed) */
+.highlight .o { color: #4A4A4A } /* Operator (manually changed) */
+.highlight .ch { color: #265A5A; font-style: italic } /* Comment.Hashbang (manually changed) */
+.highlight .cm { color: #265A5A; font-style: italic } /* Comment.Multiline (manually changed) */
+.highlight .cp { color: #704900 } /* Comment.Preproc (manually changed) */
+.highlight .cpf { color: #265A5A; font-style: italic } /* Comment.PreprocFile (manually changed) */
+.highlight .c1 { color: #265A5A; font-style: italic } /* Comment.Single (manually changed) */
+.highlight .cs { color: #265A5A; font-style: italic } /* Comment.Special (manually changed) */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #AD0000 } /* Generic.Error (manually changed) */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #006100 } /* Generic.Inserted (manually changed) */
+.highlight .go { color: #525252 } /* Generic.Output (manually changed) */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #003DCC } /* Generic.Traceback (manually changed) */
+.highlight .kc { color: #006100; font-weight: bold } /* Keyword.Constant (manually changed) */
+.highlight .kd { color: #006100; font-weight: bold } /* Keyword.Declaration (manually changed) */
+.highlight .kn { color: #006100; font-weight: bold } /* Keyword.Namespace (manually changed) */
+.highlight .kp { color: #006100 } /* Keyword.Pseudo (manually changed) */
+.highlight .kr { color: #006100; font-weight: bold } /* Keyword.Reserved (manually changed) */
+.highlight .kt { color: #A3003C } /* Keyword.Type (manually changed) */
+.highlight .m { color: #4D4D4D } /* Literal.Number (manually changed) */
+.highlight .s { color: #981B1B } /* Literal.String (manually changed) */
+.highlight .na { color: #4D561A } /* Name.Attribute (manually changed) */
+.highlight .nb { color: #005C00 } /* Name.Builtin (manually changed) */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #7509B9 } /* Name.Decorator (manually changed) */
+.highlight .ni { color: #4A4A4A; font-weight: bold } /* Name.Entity (manually changed) */
+.highlight .ne { color: #912721; font-weight: bold } /* Name.Exception (manually changed) */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #006100; font-weight: bold } /* Name.Tag (manually changed) */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #7509B9; font-weight: bold } /* Operator.Word (manually changed) */
+.highlight .w { color: #545454 } /* Text.Whitespace (manually changed) */
+.highlight .mb { color: #4A4A4A } /* Literal.Number.Bin (manually changed) */
+.highlight .mf { color: #4A4A4A } /* Literal.Number.Float (manually changed) */
+.highlight .mh { color: #4A4A4A } /* Literal.Number.Hex (manually changed) */
+.highlight .mi { color: #4A4A4A } /* Literal.Number.Integer (manually changed) */
+.highlight .mo { color: #4A4A4A } /* Literal.Number.Oct (manually changed) */
+.highlight .sa { color: #9C1C1C } /* Literal.String.Affix (manually changed) */
+.highlight .sb { color: #9C1C1C } /* Literal.String.Backtick (manually changed) */
+.highlight .sc { color: #9C1C1C } /* Literal.String.Char (manually changed) */
+.highlight .dl { color: #9C1C1C } /* Literal.String.Delimiter (manually changed) */
+.highlight .sd { color: #9C1C1C; font-style: italic } /* Literal.String.Doc (manually changed) */
+.highlight .s2 { color: #9C1C1C } /* Literal.String.Double (manually changed) */
+.highlight .se { color: #703E15; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #9C1C1C } /* Literal.String.Heredoc (manually changed) */
+.highlight .si { color: #7F3955; font-weight: bold } /* Literal.String.Interpol (manually changed) */
+.highlight .sx { color: #006100 } /* Literal.String.Other (manually changed) */
+.highlight .sr { color: #7F3955 } /* Literal.String.Regex (manually changed) */
+.highlight .s1 { color: #9C1C1C } /* Literal.String.Single (manually changed) */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #006100 } /* Name.Builtin.Pseudo (manually changed) */
+.highlight .fm { color: #0000FF } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #4A4A4A } /* Literal.Number.Integer.Long (manually changed) */
+
+.cell-highlight td { background-color: #ebeef6; position: relative; }
+
+a,
+.icon,
+.nav-list .nav-list-item .nav-list-expander,
+.main-content .anchor-heading svg,
+.search-input:focus + .search-label .search-icon,
+.search-result-doc .search-result-icon,
+a.skip-to-main:focus, a.skip-to-main:active {
+  color: #305A37 !important;
+}
+
+.site-title {
+  color: #27262b !important;
+}
+
+span.blue {
+  color: blue;
+}
+
+span.red {
+  color: #AD0000;
+}
+
+span.green {
+  color: #005200;
+}
+
+body, .site-footer {
+  color: #4A464E !important;
+}
+
+.highlight, pre.highlight {
+  color: #4D4B53 !important;
+}

_sass/custom/custom.scss

@@ -8,51 +8,6 @@
   margin-bottom: 0;
 }
 
-:root {
-  --blue-color-light: blue;
-  --blue-color-dark: #00CAE0;
-  --green-color-light: green;
-  --green-color-dark: #70CC00;
-  --red-color-light: red;
-  --red-color-dark: #FF9999;
-}
-
-[data-theme="default"] {
-  --blue-color: var(--blue-color-light);
-  --green-color: var(--green-color-light);
-  --red-color: var(--red-color-light);
-
-  a {
-    color: #136719;
-  }
-
-  .site-title {
-    color: #27262B;
-  }
-}
-
-[data-theme="dark"] {
-  a {
-    color: #7EBDE7 !important;
-  }
-
-  .site-title {
-    color: #f5f6fa !important;
-  }
-
-  --blue-color: var(--blue-color-dark);
-  --green-color: var(--green-color-dark);
-  --red-color: var(--red-color-dark);
-
-  img {
-    filter: invert(100%) brightness(100%) hue-rotate(175deg) saturate(100%);
-  }
-
-  .site-title {
-    color: #f5f6fa;
-  }
-}
-
 span code {
   color: var(--blue-color);
   color: var(--green-color);
@@ -135,4 +90,32 @@ code[style*="color: red"] {
   .main-header {
     width: $content-width;
   }
+}
+
+.nav-list .nav-list-item .nav-list-link {
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.65rem !important;
+  text-decoration: none;
+}
+
+.nav-list-expander .btn-reset,
+.nav-list .nav-list-item .nav-list-expander {
+  padding: 0.85rem !important;
+  min-height: 2.75rem !important;
+  min-width: 2.75rem !important;
+}
+
+td a,
+li a,
+.padded-link {
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+  text-decoration: none;
+  min-width: 2.75rem !important;
+  min-height: 2.75rem !important;
+}
+
+h2.text-delta + ul a, #markdown-toc a {
+  padding: 0.75rem !important;
+  text-decoration: none;
 }

assets/css/just-the-docs-dark.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="dark_wider" %}

index.md

@@ -13,7 +13,7 @@ This is the textbook for [CS 161: Computer Security](https://cs161.org/) at [UC
 
 ## Corrections
 
-As of the Summer 2024 semester, this textbook is still being actively maintained and updated.
+As of the Fall 2024 semester, this textbook is still being actively maintained and updated.
 
 If you see any parts that needs to be corrected, please open a Github issue [here](https://github.com/cs161-staff/textbook/issues).
 

memory-safety/mitigations.md

@@ -52,7 +52,7 @@ Some of these library functions may take arguments. For example, `execv` takes a
 
 We can take this idea of returning to already-loaded code and extend it further to now execute arbitrary code. Return-oriented programming is a technique that overwrites a chain of return addresses starting at the RIP in order to execute a series of "ROP gadgets" which are equivalent to the desired malicious code. Essentially, we are constructing a custom shellcode using pieces of code that already exist in memory. Instead of executing an existing function, like we did in "Return to libc", with ROP you can execute your own code by simply executing different pieces of different code. For example, imagine we want to add 4 to the value currently in the EDX register as part of a larger program. In loaded memory, we have the following functions:
 
-```
+```shell
 foo:
     ...
     0x4005a1 <foo+33> mov %edx, %eax