Skip to content

Commit f04cc0e

Browse files
pancakereportpancakereport
authored
Merge pull request #32 from data-8/fix-color-contrast
Fix Color Contrast
2 parents 7a433dd + 0788ad0 commit f04cc0e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+32878
-2
lines changed

‎_includes/head-custom.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/header.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
<link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
1+
<link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
2+
3+
<link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/fontawesome.css" rel="stylesheet" />
4+
<link href="{{ site.baseurl }}/assets/vendor/fontawesome/css/solid.css" rel="stylesheet" />

‎_sass/berkeley/berkeley.scss‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// This config applies to all berkeley courses.
2+
// It is loaded *after* all Just-the-class customizations
3+
4+
// UC Berkeley fonts 'Inter' (sans serif) 'Source Serif' (serif), and 'Source Code Pro' (monospace)
5+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
6+
7+
// Override default JTD CSS for larger/more accessibile fonts.
8+
html {
9+
font-size: 16px;
10+
}
11+
12+
body {
13+
font-family: $body-font-family;
14+
font-size: inherit;
15+
line-height: $body-line-height;
16+
color: $body-text-color;
17+
background-color: $body-background-color;
18+
overflow-wrap: break-word;
19+
}
20+
21+
// Link Colors
22+
a,
23+
.main-content .anchor-heading svg {
24+
color: $link-color;
25+
26+
&:hover,
27+
&:focus {
28+
color: $hover-focus-link-color;
29+
}
30+
}
31+
32+
a:not([class]):hover {
33+
text-decoration-color: lighten($link-color, 20%);
34+
}
35+
36+
h1, h2, h3, h4, h5, h6,
37+
.serif {
38+
font-family: $serif-font-family;
39+
}
40+
41+
// Override JTD to be darker
42+
.label-green:not(g) {
43+
background-color: $green-300;
44+
}
45+
46+
.label-red:not(g) {
47+
background-color: $red-300;
48+
}
49+
50+
code {
51+
padding: 0.2em 0.4em;
52+
border: none;
53+
}
54+
55+
iframe {
56+
max-width: 100%;
57+
}
58+
59+
details {
60+
@extend .mb-4;
61+
}
62+
63+
summary {
64+
@extend .btn, .btn-outline;
65+
66+
width: 100%;
67+
}
68+
69+
.main-content-wrap {
70+
max-width: $content-width;
71+
margin: auto;
72+
}
73+
74+
.main-content {
75+
dl {
76+
display: block;
77+
grid-template-columns: none;
78+
}
79+
80+
dt {
81+
font-weight: 700;
82+
text-align: start;
83+
84+
&::after {
85+
content: normal;
86+
}
87+
}
88+
89+
dd {
90+
font-weight: normal;
91+
92+
+ dt {
93+
margin-top: 1em;
94+
}
95+
}
96+
}
97+
98+
// This is intended to be used for the footer
99+
.text-lighter {
100+
color: $body-lighter-color;
101+
}
102+
103+
a[target="_blank"]:not(.btn)::after {
104+
font-family: 'Font Awesome 6 Free';
105+
font-weight: 900;
106+
content: "\f08e";
107+
padding: 0 0.25rem;
108+
}
109+
110+
.lecture .subhead {
111+
@extend h3
112+
}

‎_sass/berkeley/variables.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Common Berkeley Variables.
2+
// This file is explicitly included before berkeley.scss in setup.scss
3+
// Some colors may be override by berkeley_light or berkeley_dark
4+
5+
$content-width: 1200px;
6+
7+
// Typography
8+
$mono-font-family: "Source Code Pro", "SFMono-Regular", menlo, consolas, monospace !default;
9+
$body-font-family: 'Inter', system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
10+
roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
11+
$serif-font-family: 'Source Serif 4', 'Georiga', 'Baskerville', serif;
12+
13+
$berkeley-blue-old: #003262;
14+
$berkeley-blue: #002676; // rgb(0, 38, 118);
15+
16+
// Colors
17+
$link-color: $berkeley-blue;
18+
$hover-focus-link-color: lighten($link-color, 20%);
19+
20+
// Layout
21+
$gutter-spacing: $sp-6;
22+
$gutter-spacing-sm: $sp-4;
23+
$nav-width: 256px;
24+
25+
// Components
26+
$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
27+
$module-date-color: $link-color;
28+
$staffer-image-size: 100px;

‎_sass/color_schemes/dark.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// This file is coped from Just The Docs
2+
// Individual courses should not modify it!
3+
// All deviations should be documented.
4+
// https://github.com/just-the-docs/just-the-docs/blob/main/_sass/color_schemes/light.scss
5+
6+
/////////// Do not modify this section.
7+
$color-scheme: dark;
8+
$body-background-color: $grey-dk-300;
9+
$body-heading-color: $grey-lt-000;
10+
$body-text-color: $grey-lt-300;
11+
// $link-color: $blue-000;
12+
$nav-child-link-color: $grey-dk-000;
13+
$sidebar-color: $grey-dk-300;
14+
$base-button-color: $grey-dk-250;
15+
// $btn-primary-color: $blue-200;
16+
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
17+
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
18+
$feedback-color: darken($sidebar-color, 3%);
19+
$table-background-color: $grey-dk-250;
20+
$search-background-color: $grey-dk-250;
21+
$search-result-preview-color: $grey-dk-000;
22+
$border-color: $grey-dk-200;
23+
/////////////////// Add modifications below
24+
25+
@import '../snytax_highliters/a11y-dark';
26+
27+
// Override dark-mode variables here
28+
$berkeley-blue: #002676; // rgb(0, 38, 118);
29+
$grey-dk-400: #0C0A0E !default;
30+
$body-background-color: $grey-dk-400;
31+
$sidebar-color: $grey-dk-400;
32+
$search-background-color: $grey-dk-400;
33+
$body-text-color: $white;
34+
$body-lighter-color: darken($body-text-color, 20%);
35+
36+
$link-color: #406FFE;
37+
$hover-focus-link-color: darken($link-color, 10%);
38+
39+
// TODO(template): We need to figure out a much better solution!
40+
// This swaps the "dk" and "lt" variants from the original JTD files.
41+
$grey-lt-000: #959396;
42+
$grey-lt-100: #5c5962;
43+
$grey-lt-200: #44434d;
44+
$grey-lt-250: #302d36;
45+
$grey-lt-300: #27262b;
46+
47+
$grey-dk-000: #f5f6fa;
48+
$grey-dk-100: #eeebee;
49+
$grey-dk-200: #ecebed;
50+
$grey-dk-300: #e6e1e8;
51+
52+
$btn-primary-color: $berkeley-blue;
53+
$base-button-color: $grey-dk-200;
54+
55+
// This is not great, but JTD forces $link-color
56+
.btn:not(.btn-outline) {
57+
color: $btn-primary-color !important;
58+
}

‎_sass/color_schemes/dark_overrides.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
@mixin dark-mode-overrides {
3+
4+
p.important-title > p:first-child,
5+
blockquote.important-title > p:first-child {
6+
color: #8975FF;
7+
}
8+
9+
table td, table th {
10+
background-color: #3D3D3D; /* Light background for cells */
11+
color: #FFFFFF; /* Light text color for readability */
12+
}
13+
14+
table td a, table th a {
15+
color: #9ECCF0; /* Default link color */
16+
}
17+
}

‎_sass/color_schemes/light.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// This file is coped from Just The Docs
2+
// Individual courses should not modify it!
3+
// All deviations should be documented.
4+
// https://github.com/just-the-docs/just-the-docs/blob/main/_sass/color_schemes/light.scss
5+
6+
/////////// Do not modify this section.
7+
$color-scheme: light !default;
8+
$body-background-color: $white !default;
9+
$body-heading-color: $grey-dk-300 !default;
10+
$body-text-color: $grey-dk-100 !default;
11+
$link-color: $purple-000 !default;
12+
$nav-child-link-color: $grey-dk-100 !default;
13+
$sidebar-color: $grey-lt-000 !default;
14+
$base-button-color: #f7f7f7 !default;
15+
$btn-primary-color: $purple-100 !default;
16+
$code-background-color: $grey-lt-000 !default;
17+
$feedback-color: darken($sidebar-color, 3%) !default;
18+
$table-background-color: $white !default;
19+
$search-background-color: $white !default;
20+
$search-result-preview-color: $grey-dk-000 !default;
21+
/////////////////// Add modifications below
22+
23+
@import "../snytax_highliters/a11y-light";
24+
25+
// Minimum lightness on white.
26+
$body-lighter-color: $grey-dk-100;

‎_sass/custom/course_overrides.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Put your custom CSS here!
2+
// You an reference all variables in the Berkeley files

‎_sass/custom/custom.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// You may want to add CSS in additional files.
2+
// It's best to not edit this file too much.
3+
// "course_overrides.scss" is designed for each course's customizations.
4+
// You can make additional files as necessary.
5+
// You would then add `@import "file"; to this file.
6+
7+
// Just the Class customizations are all loaded in one file.
8+
@import '../just-the-class/just-the-class';
9+
@import '../berkeley/berkeley';
10+
11+
@import '../color_schemes/dark_overrides';
12+
13+
@if $color-scheme == dark {
14+
@include dark-mode-overrides;
15+
}
16+
17+
div.highlighter-rouge {
18+
overflow-x: auto;
19+
}
20+
21+
div.highlighter-rouge div.highlight {
22+
overflow-x: unset;
23+
}
24+
25+
// Place all of your course-specific CSS here.
26+
@import './course_overrides';

‎_sass/custom/setup.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Use this file to customize SASS variables.
2+
// You will likely want to review the Jst the Docs CSS
3+
// This file is loaded *early* in the SASS compilation process.
4+
5+
// Load berkeley variable customizations
6+
// These are loaded before berkeley_light and berkeley_dark themes
7+
@import '../berkeley/variables';

0 commit comments

Comments
 (0)