Sandboxes V1

.codio

@@ -4,18 +4,14 @@
     "commands": {
         "Make": "clear && make html",
         "Make Instructor": "clear && make html TYPE=instructor",
-        "Make Student": "clear && make html TYPE=student",
-        "Start Ungit":"ungit --port=4000 --ungitBindIp 0.0.0.0"
+        "Make Student": "clear && make html TYPE=student"
     },
     // Preview button configuration
     "preview": {
-        "Instructor": "https://{{domain}}/build/html/index.html",
+        "Instructor": "https://{{domain}}/build/html/source/index.html",
         "Preview": "https://{{domain}}/build/html/{{path}}/{{filename_no_ext}}.html", 
-        "Student": "https://{{domain}}/build/html/student.html",
-        "Visit Ungit": "https://{{domain4000}}/#/repository?path=%2Fhome%2Fcodio%2Fworkspace"
-
-
+        "Student": "https://{{domain}}/build/html/student-source/student.html"
     },
     // Debugger target button configuration
     "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"}]
-}
+}

Makefile

@@ -6,6 +6,8 @@ SPHINXOPTS    =
 SPHINXBUILD   = sphinx-build
 SOURCEDIR     = source
 BUILDDIR      = build
+BUILDDIRSTU   = build
+BUILDTARGET    = -M
 
 # Put it first so that "make" without argument is like "make help".
 help:
@@ -18,17 +20,24 @@ ifeq ($(TYPE),)
 TYPE := both
 endif
 
+ifeq ($(PWD),/home/codio/workspace)
+BUILDTARGET := -b
+BUILDDIR := build/html/source
+BUILDDIRSTU := build/html/student-source
+endif
+
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
 %: Makefile
 	rm -rf "$(BUILDDIR)"
+	rm -rf "$(BUILDDIRSTU)"
 ifeq ($(TYPE),student)
-	@$(SPHINXBUILD) -M $@ "student-$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+	@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "student-$(SOURCEDIR)" "$(BUILDDIRSTU)" $(SPHINXOPTS) $(O)
 else ifeq ($(TYPE),instructor)
-	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+	@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
 else ifeq ($(TYPE),both)
-	@$(SPHINXBUILD) -M $@ "student-$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
-	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+	@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "student-$(SOURCEDIR)" "$(BUILDDIRSTU)" $(SPHINXOPTS) $(O)
+	@$(SPHINXBUILD) "$(BUILDTARGET)" $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
 else
 	$(error Invalid TYPE='$(TYPE)'. Use TYPE=student, TYPE=instructor, or TYPE=both)
 endif

source/_static/css/custom_body.css

@@ -1,138 +1,111 @@
 /* =========================================
-   Codio Docs — Home (index) only
-   Pure theme background, centered layout
+   Codio Docs — Landing pages (Instructor & Student)
+   Layout resets + shared design tokens
    ========================================= */
 
-/* Hide sidebars on the homepage and center content */
-.index-page .bd-sidebar-primary,
-.index-page .bd-sidebar-secondary { display: none !important; }
+/* Hide the sidebars and unbox the layout on the landing pages */
+.landing-page .bd-sidebar-primary,
+.landing-page .bd-sidebar-secondary {
+  display: none !important;
+}
 
-.index-page .bd-content,
-.index-page .bd-article-container {
-  max-width: 100%;
+.landing-page .bd-content,
+.landing-page .bd-article-container {
+  max-width: 1200px;
   margin-inline: auto !important;
-  padding-inline: 1rem;
+  padding-inline: clamp(1rem, 5vw, 2.5rem);
+  background: transparent !important;
 }
 
-/* Make every wrapper transparent so there is NO boxed panel */
-.index-page,
-.index-page .bd-main,
-.index-page .bd-content,
-.index-page .bd-article-container,
-.index-page .bd-article {
+.landing-page,
+.landing-page .bd-main,
+.landing-page .bd-content,
+.landing-page .bd-article,
+.landing-page .bd-article-container {
   background: transparent !important;
 }
 
-/* ------- Theme tokens (only for the homepage components) ------- */
-html[data-theme="dark"] .index-page,
-[data-theme="dark"] .index-page {
-  --text: #e6eaf2;
-  --muted: #9aa3b2;
-  --border: rgba(255,255,255,0.14);
-  --surface-hover: rgba(255,255,255,0.06);
-  --brand: #6ee7ff;
-  --brand-strong: #3dd8ff;
-  --ring: #9feaff;
-  --shadow: 0 10px 26px rgba(3,8,48,0.35);
+.landing-page {
+  color-scheme: light dark;
+  color: var(--landing-text);
+  --landing-text: #0f172a;
+  --landing-muted: #475569;
+  --landing-border: rgba(15, 23, 42, 0.12);
+  --landing-surface: rgba(255, 255, 255, 0.85);
+  --landing-surface-hover: rgba(14, 165, 233, 0.08);
+  --landing-accent: #0284c7;
+  --landing-accent-strong: #0369a1;
+  --landing-ring: rgba(14, 165, 233, 0.45);
+  --landing-card-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
+  --landing-card-shadow-dark: 0 22px 40px rgba(8, 47, 73, 0.45);
+  --landing-button-shadow: 0 14px 28px rgba(2, 132, 199, 0.18);
+  --landing-icon-shadow: 0 14px 28px rgba(2, 132, 199, 0.24);
+  --landing-hero-shadow: 0 24px 48px rgba(15, 118, 210, 0.12);
+  --landing-hero-from: #eff6ff;
+  --landing-hero-to: #dbeafe;
 }
 
-html[data-theme="light"] .index-page,
-[data-theme="light"] .index-page {
-  --text: #0b1020;
-  --muted: #475569;
-  --border: rgba(0,0,0,0.12);
-  --surface-hover: rgba(2,132,199,0.05);
-  --brand: #0ea5e9;
-  --brand-strong: #0284c7;
-  --ring: #38bdf8;
-  --shadow: 0 10px 24px rgba(2,132,199,0.08);
+html[data-theme="dark"] .landing-page,
+[data-theme="dark"] .landing-page {
+  --landing-text: #e5edff;
+  --landing-muted: #94a3b8;
+  --landing-border: rgba(148, 163, 184, 0.18);
+  --landing-surface: rgba(15, 23, 42, 0.68);
+  --landing-surface-hover: rgba(56, 189, 248, 0.18);
+  --landing-accent: #38bdf8;
+  --landing-accent-strong: #0ea5e9;
+  --landing-ring: rgba(56, 189, 248, 0.6);
+  --landing-card-shadow: var(--landing-card-shadow-dark);
+  --landing-button-shadow: 0 18px 36px rgba(15, 118, 210, 0.36);
+  --landing-icon-shadow: 0 20px 38px rgba(14, 165, 233, 0.45);
+  --landing-hero-shadow: 0 26px 52px rgba(2, 132, 199, 0.32);
+  --landing-hero-from: #0f172a;
+  --landing-hero-to: #111827;
 }
 
-/* Fallback to OS pref if the site doesn't set data-theme */
-@media (prefers-color-scheme: light) {
-  html:not([data-theme="dark"]) .index-page {
-    --text: #0b1020;
-    --muted: #475569;
-    --border: rgba(0,0,0,0.12);
-    --surface-hover: rgba(2,132,199,0.05);
-    --brand: #0ea5e9;
-    --brand-strong: #0284c7;
-    --ring: #38bdf8;
-    --shadow: 0 10px 24px rgba(2,132,199,0.08);
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) .landing-page {
+    --landing-text: #e5edff;
+    --landing-muted: #94a3b8;
+    --landing-border: rgba(148, 163, 184, 0.18);
+    --landing-surface: rgba(15, 23, 42, 0.68);
+    --landing-surface-hover: rgba(56, 189, 248, 0.18);
+    --landing-accent: #38bdf8;
+    --landing-accent-strong: #0ea5e9;
+    --landing-ring: rgba(56, 189, 248, 0.6);
+    --landing-card-shadow: var(--landing-card-shadow-dark);
+    --landing-button-shadow: 0 18px 36px rgba(15, 118, 210, 0.36);
+    --landing-icon-shadow: 0 20px 38px rgba(14, 165, 233, 0.45);
+    --landing-hero-shadow: 0 26px 52px rgba(2, 132, 199, 0.32);
+    --landing-hero-from: #0f172a;
+    --landing-hero-to: #111827;
   }
 }
 
-/* ------- Hero ------- */
-.home-hero { padding: 5rem 1rem 1.5rem; text-align: center; }
-.home-title { color: var(--text); font-size: clamp(2rem, 2.8vw + 1rem, 3rem); margin: 0 0 .6rem; }
-.home-subtitle { color: var(--muted); margin: 0 auto 1.8rem; max-width: 62ch; }
-
-/* (Search form is commented out in your HTML, but styles left here in case you re-enable) */
-.home-search {
-  display: inline-flex; gap: .5rem; align-items: center;
-  background: transparent;               /* no panel */
-  border: 1px solid var(--border);
-  border-radius: 999px; padding: .5rem;
-  box-shadow: none;
-}
-.home-search input[type="search"] {
-  min-width: clamp(260px, 42vw, 560px);
-  background: transparent; border: none; color: var(--text);
-  outline: none; padding: .75rem 1rem; font-size: 1rem;
-}
-.home-search input::placeholder { color: var(--muted); }
-.search-btn {
-  display: inline-flex; align-items: center; gap: .5rem;
-  border: 1px solid transparent;
-  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
-  color: #001; font-weight: 700; padding: .7rem 1rem;
-  border-radius: 999px; cursor: pointer;
-  box-shadow: 0 10px 24px rgba(0, 190, 255, .18);
-}
-.search-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
-.search-btn .icon { width: 20px; height: 20px; }
-
-/* ------- Sections ------- */
-.home-main { padding: .5rem 0 3rem; }
-.home-container { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }
-.section { margin-top: 1.25rem; }
-.section-title { color: var(--muted); font-weight: 600; letter-spacing: .2px; margin: 0 0 1rem; }
-
-/* ------- Cards: transparent by default (no fill), subtle outline ------- */
-.card-grid {
-  --min: 260px;
-  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
-  gap: 1rem; align-items: stretch;
-}
-.card {
-  display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem;
-  padding: 1rem; border-radius: 16px; text-decoration: none; color: var(--text);
-  background: transparent;                      /* <- no box */
-  border: 1px solid var(--border);
-  box-shadow: none;
-  transition: transform .2s ease, background-color .15s ease, border-color .15s ease;
-}
-.card:hover { transform: translateY(-2px); background: var(--surface-hover); border-color: var(--brand); }
-.card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
-
-.card-icon {
-  width: 36px; height: 36px; display: grid; place-items: center;
-  border-radius: 12px;
-  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
-  box-shadow: 0 8px 18px rgba(0, 190, 255, .2);
+@media (prefers-color-scheme: light) {
+  html:not([data-theme="dark"]) .landing-page {
+    --landing-text: #0f172a;
+    --landing-muted: #475569;
+    --landing-border: rgba(15, 23, 42, 0.12);
+    --landing-surface: rgba(255, 255, 255, 0.85);
+    --landing-surface-hover: rgba(14, 165, 233, 0.08);
+    --landing-accent: #0284c7;
+    --landing-accent-strong: #0369a1;
+    --landing-ring: rgba(14, 165, 233, 0.45);
+    --landing-card-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
+    --landing-button-shadow: 0 14px 28px rgba(2, 132, 199, 0.18);
+    --landing-icon-shadow: 0 14px 28px rgba(2, 132, 199, 0.24);
+    --landing-hero-shadow: 0 24px 48px rgba(15, 118, 210, 0.12);
+    --landing-hero-from: #eff6ff;
+    --landing-hero-to: #dbeafe;
+  }
 }
-.card-icon svg { width: 22px; height: 22px; fill: #001; }
-
-.card-title { font-size: 1.05rem; margin: .25rem 0; }
-.card-desc { margin: 0; color: var(--muted); }
-.card-cta { margin-top: .5rem; font-weight: 700; color: var(--brand); display: inline-flex; gap: .35rem; }
-.card-cta::after { content: "›"; font-size: 1.2em; transform: translateY(-1px); }
 
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) { .card, .search-btn { transition: none; } }
+.section { scroll-margin-top: 5rem; }
 
-/* Small screens */
-@media (max-width: 480px) {
-  .home-search { width: 100%; }
-  .home-search input[type="search"] { min-width: 0; width: 100%; }
+/* Retain backwards-compat class hooks */
+.index-page .home-container,
+.student-page .home-container {
+  max-width: 1100px;
+  margin-inline: auto;
 }