Skip to content

Commit dcebb92

Browse files
jairovelasquezjairovelasquez
authored
Sandboxes V1 (#436)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Landing page redesign with new hero, card grid, responsive layout, and theme-aware styling. * Student and instructor pages migrated to the landing-page layout. * Student site now includes analytics and marketing embed scripts. * **Documentation** * New comprehensive Sandboxes guide for AWS Cloud teaching. * Updated admin docs ordering and changelog entries for Sandboxes and EC2 VM improvements. * **Chores** * Updated preview URLs and build/preview configuration; removed legacy Ungit links. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 65b8983 commit dcebb92

13 files changed

Lines changed: 770 additions & 342 deletions

File tree

‎.codio‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@
44
"commands": {
55
"Make": "clear && make html",
66
"Make Instructor": "clear && make html TYPE=instructor",
7-
"Make Student": "clear && make html TYPE=student",
8-
"Start Ungit":"ungit --port=4000 --ungitBindIp 0.0.0.0"
7+
"Make Student": "clear && make html TYPE=student"
98
},
109
// Preview button configuration
1110
"preview": {
12-
"Instructor": "https://{{domain}}/build/html/index.html",
11+
"Instructor": "https://{{domain}}/build/html/source/index.html",
1312
"Preview": "https://{{domain}}/build/html/{{path}}/{{filename_no_ext}}.html",
14-
"Student": "https://{{domain}}/build/html/student.html",
15-
"Visit Ungit": "https://{{domain4000}}/#/repository?path=%2Fhome%2Fcodio%2Fworkspace"
16-
17-
13+
"Student": "https://{{domain}}/build/html/student-source/student.html"
1814
},
1915
// Debugger target button configuration
2016
"debugger": [{"type":"PYTHON3","command":"{{filepath}}","before":"","uuid":"6c228c3f-596c-c44a-399f-5d86a7e17bf9","name":"Debug"},{"type":"GDB","command":"/codio-docs/","before":"","uuid":"76725fc4-3220-4a33-f739-614ebe121e67","name":"doc test"}]
21-
}
17+
}

‎Makefile‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ SPHINXOPTS =
66
SPHINXBUILD = sphinx-build
77
SOURCEDIR = source
88
BUILDDIR = build
9+
BUILDDIRSTU = build
10+
BUILDTARGET = -M
911

1012
# Put it first so that "make" without argument is like "make help".
1113
help:
@@ -18,17 +20,24 @@ ifeq ($(TYPE),)
1820
TYPE := both
1921
endif
2022

23+
ifeq ($(PWD),/home/codio/workspace)
24+
BUILDTARGET := -b
25+
BUILDDIR := build/html/source
26+
BUILDDIRSTU := build/html/student-source
27+
endif
28+
2129
# Catch-all target: route all unknown targets to Sphinx using the new
2230
# "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS).
2331
%: Makefile
2432
rm -rf "$(BUILDDIR)"
33+
rm -rf "$(BUILDDIRSTU)"
2534
ifeq ($(TYPE),student)
26-
@$(SPHINXBUILD) -M $@ "student-$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
35+
@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "student-$(SOURCEDIR)" "$(BUILDDIRSTU)" $(SPHINXOPTS) $(O)
2736
else ifeq ($(TYPE),instructor)
28-
@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
37+
@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
2938
else ifeq ($(TYPE),both)
30-
@$(SPHINXBUILD) -M $@ "student-$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
31-
@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
39+
@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "student-$(SOURCEDIR)" "$(BUILDDIRSTU)" $(SPHINXOPTS) $(O)
40+
@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
3241
else
3342
$(error Invalid TYPE='$(TYPE)'. Use TYPE=student, TYPE=instructor, or TYPE=both)
3443
endif

‎source/_static/css/custom_body.css‎

Lines changed: 90 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,111 @@
11
/* =========================================
2-
Codio Docs — Home (index) only
3-
Pure theme background, centered layout
2+
Codio Docs — Landing pages (Instructor & Student)
3+
Layout resets + shared design tokens
44
========================================= */
55

6-
/* Hide sidebars on the homepage and center content */
7-
.index-page .bd-sidebar-primary,
8-
.index-page .bd-sidebar-secondary { display: none !important; }
6+
/* Hide the sidebars and unbox the layout on the landing pages */
7+
.landing-page .bd-sidebar-primary,
8+
.landing-page .bd-sidebar-secondary {
9+
display: none !important;
10+
}
911

10-
.index-page .bd-content,
11-
.index-page .bd-article-container {
12-
max-width: 100%;
12+
.landing-page .bd-content,
13+
.landing-page .bd-article-container {
14+
max-width: 1200px;
1315
margin-inline: auto !important;
14-
padding-inline: 1rem;
16+
padding-inline: clamp(1rem, 5vw, 2.5rem);
17+
background: transparent !important;
1518
}
1619

17-
/* Make every wrapper transparent so there is NO boxed panel */
18-
.index-page,
19-
.index-page .bd-main,
20-
.index-page .bd-content,
21-
.index-page .bd-article-container,
22-
.index-page .bd-article {
20+
.landing-page,
21+
.landing-page .bd-main,
22+
.landing-page .bd-content,
23+
.landing-page .bd-article,
24+
.landing-page .bd-article-container {
2325
background: transparent !important;
2426
}
2527

26-
/* ------- Theme tokens (only for the homepage components) ------- */
27-
html[data-theme="dark"] .index-page,
28-
[data-theme="dark"] .index-page {
29-
--text: #e6eaf2;
30-
--muted: #9aa3b2;
31-
--border: rgba(255,255,255,0.14);
32-
--surface-hover: rgba(255,255,255,0.06);
33-
--brand: #6ee7ff;
34-
--brand-strong: #3dd8ff;
35-
--ring: #9feaff;
36-
--shadow: 0 10px 26px rgba(3,8,48,0.35);
28+
.landing-page {
29+
color-scheme: light dark;
30+
color: var(--landing-text);
31+
--landing-text: #0f172a;
32+
--landing-muted: #475569;
33+
--landing-border: rgba(15, 23, 42, 0.12);
34+
--landing-surface: rgba(255, 255, 255, 0.85);
35+
--landing-surface-hover: rgba(14, 165, 233, 0.08);
36+
--landing-accent: #0284c7;
37+
--landing-accent-strong: #0369a1;
38+
--landing-ring: rgba(14, 165, 233, 0.45);
39+
--landing-card-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
40+
--landing-card-shadow-dark: 0 22px 40px rgba(8, 47, 73, 0.45);
41+
--landing-button-shadow: 0 14px 28px rgba(2, 132, 199, 0.18);
42+
--landing-icon-shadow: 0 14px 28px rgba(2, 132, 199, 0.24);
43+
--landing-hero-shadow: 0 24px 48px rgba(15, 118, 210, 0.12);
44+
--landing-hero-from: #eff6ff;
45+
--landing-hero-to: #dbeafe;
3746
}
3847

39-
html[data-theme="light"] .index-page,
40-
[data-theme="light"] .index-page {
41-
--text: #0b1020;
42-
--muted: #475569;
43-
--border: rgba(0,0,0,0.12);
44-
--surface-hover: rgba(2,132,199,0.05);
45-
--brand: #0ea5e9;
46-
--brand-strong: #0284c7;
47-
--ring: #38bdf8;
48-
--shadow: 0 10px 24px rgba(2,132,199,0.08);
48+
html[data-theme="dark"] .landing-page,
49+
[data-theme="dark"] .landing-page {
50+
--landing-text: #e5edff;
51+
--landing-muted: #94a3b8;
52+
--landing-border: rgba(148, 163, 184, 0.18);
53+
--landing-surface: rgba(15, 23, 42, 0.68);
54+
--landing-surface-hover: rgba(56, 189, 248, 0.18);
55+
--landing-accent: #38bdf8;
56+
--landing-accent-strong: #0ea5e9;
57+
--landing-ring: rgba(56, 189, 248, 0.6);
58+
--landing-card-shadow: var(--landing-card-shadow-dark);
59+
--landing-button-shadow: 0 18px 36px rgba(15, 118, 210, 0.36);
60+
--landing-icon-shadow: 0 20px 38px rgba(14, 165, 233, 0.45);
61+
--landing-hero-shadow: 0 26px 52px rgba(2, 132, 199, 0.32);
62+
--landing-hero-from: #0f172a;
63+
--landing-hero-to: #111827;
4964
}
5065

51-
/* Fallback to OS pref if the site doesn't set data-theme */
52-
@media (prefers-color-scheme: light) {
53-
html:not([data-theme="dark"]) .index-page {
54-
--text: #0b1020;
55-
--muted: #475569;
56-
--border: rgba(0,0,0,0.12);
57-
--surface-hover: rgba(2,132,199,0.05);
58-
--brand: #0ea5e9;
59-
--brand-strong: #0284c7;
60-
--ring: #38bdf8;
61-
--shadow: 0 10px 24px rgba(2,132,199,0.08);
66+
@media (prefers-color-scheme: dark) {
67+
html:not([data-theme="light"]) .landing-page {
68+
--landing-text: #e5edff;
69+
--landing-muted: #94a3b8;
70+
--landing-border: rgba(148, 163, 184, 0.18);
71+
--landing-surface: rgba(15, 23, 42, 0.68);
72+
--landing-surface-hover: rgba(56, 189, 248, 0.18);
73+
--landing-accent: #38bdf8;
74+
--landing-accent-strong: #0ea5e9;
75+
--landing-ring: rgba(56, 189, 248, 0.6);
76+
--landing-card-shadow: var(--landing-card-shadow-dark);
77+
--landing-button-shadow: 0 18px 36px rgba(15, 118, 210, 0.36);
78+
--landing-icon-shadow: 0 20px 38px rgba(14, 165, 233, 0.45);
79+
--landing-hero-shadow: 0 26px 52px rgba(2, 132, 199, 0.32);
80+
--landing-hero-from: #0f172a;
81+
--landing-hero-to: #111827;
6282
}
6383
}
6484

65-
/* ------- Hero ------- */
66-
.home-hero { padding: 5rem 1rem 1.5rem; text-align: center; }
67-
.home-title { color: var(--text); font-size: clamp(2rem, 2.8vw + 1rem, 3rem); margin: 0 0 .6rem; }
68-
.home-subtitle { color: var(--muted); margin: 0 auto 1.8rem; max-width: 62ch; }
69-
70-
/* (Search form is commented out in your HTML, but styles left here in case you re-enable) */
71-
.home-search {
72-
display: inline-flex; gap: .5rem; align-items: center;
73-
background: transparent; /* no panel */
74-
border: 1px solid var(--border);
75-
border-radius: 999px; padding: .5rem;
76-
box-shadow: none;
77-
}
78-
.home-search input[type="search"] {
79-
min-width: clamp(260px, 42vw, 560px);
80-
background: transparent; border: none; color: var(--text);
81-
outline: none; padding: .75rem 1rem; font-size: 1rem;
82-
}
83-
.home-search input::placeholder { color: var(--muted); }
84-
.search-btn {
85-
display: inline-flex; align-items: center; gap: .5rem;
86-
border: 1px solid transparent;
87-
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
88-
color: #001; font-weight: 700; padding: .7rem 1rem;
89-
border-radius: 999px; cursor: pointer;
90-
box-shadow: 0 10px 24px rgba(0, 190, 255, .18);
91-
}
92-
.search-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
93-
.search-btn .icon { width: 20px; height: 20px; }
94-
95-
/* ------- Sections ------- */
96-
.home-main { padding: .5rem 0 3rem; }
97-
.home-container { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }
98-
.section { margin-top: 1.25rem; }
99-
.section-title { color: var(--muted); font-weight: 600; letter-spacing: .2px; margin: 0 0 1rem; }
100-
101-
/* ------- Cards: transparent by default (no fill), subtle outline ------- */
102-
.card-grid {
103-
--min: 260px;
104-
display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
105-
gap: 1rem; align-items: stretch;
106-
}
107-
.card {
108-
display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem;
109-
padding: 1rem; border-radius: 16px; text-decoration: none; color: var(--text);
110-
background: transparent; /* <- no box */
111-
border: 1px solid var(--border);
112-
box-shadow: none;
113-
transition: transform .2s ease, background-color .15s ease, border-color .15s ease;
114-
}
115-
.card:hover { transform: translateY(-2px); background: var(--surface-hover); border-color: var(--brand); }
116-
.card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
117-
118-
.card-icon {
119-
width: 36px; height: 36px; display: grid; place-items: center;
120-
border-radius: 12px;
121-
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
122-
box-shadow: 0 8px 18px rgba(0, 190, 255, .2);
85+
@media (prefers-color-scheme: light) {
86+
html:not([data-theme="dark"]) .landing-page {
87+
--landing-text: #0f172a;
88+
--landing-muted: #475569;
89+
--landing-border: rgba(15, 23, 42, 0.12);
90+
--landing-surface: rgba(255, 255, 255, 0.85);
91+
--landing-surface-hover: rgba(14, 165, 233, 0.08);
92+
--landing-accent: #0284c7;
93+
--landing-accent-strong: #0369a1;
94+
--landing-ring: rgba(14, 165, 233, 0.45);
95+
--landing-card-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
96+
--landing-button-shadow: 0 14px 28px rgba(2, 132, 199, 0.18);
97+
--landing-icon-shadow: 0 14px 28px rgba(2, 132, 199, 0.24);
98+
--landing-hero-shadow: 0 24px 48px rgba(15, 118, 210, 0.12);
99+
--landing-hero-from: #eff6ff;
100+
--landing-hero-to: #dbeafe;
101+
}
123102
}
124-
.card-icon svg { width: 22px; height: 22px; fill: #001; }
125-
126-
.card-title { font-size: 1.05rem; margin: .25rem 0; }
127-
.card-desc { margin: 0; color: var(--muted); }
128-
.card-cta { margin-top: .5rem; font-weight: 700; color: var(--brand); display: inline-flex; gap: .35rem; }
129-
.card-cta::after { content: "›"; font-size: 1.2em; transform: translateY(-1px); }
130103

131-
/* Reduced motion */
132-
@media (prefers-reduced-motion: reduce) { .card, .search-btn { transition: none; } }
104+
.section { scroll-margin-top: 5rem; }
133105

134-
/* Small screens */
135-
@media (max-width: 480px) {
136-
.home-search { width: 100%; }
137-
.home-search input[type="search"] { min-width: 0; width: 100%; }
106+
/* Retain backwards-compat class hooks */
107+
.index-page .home-container,
108+
.student-page .home-container {
109+
max-width: 1100px;
110+
margin-inline: auto;
138111
}

0 commit comments

Comments
 (0)