From 00b3ef98b31fab00f065575703f5d21ef8c84b36 Mon Sep 17 00:00:00 2001 From: Jairo Velasquez Date: Thu, 13 Nov 2025 11:51:26 +0000 Subject: [PATCH 1/9] Fixed student pages, use same CSS, updates to instructor --- source/_static/css/custom_body.css | 207 ++++++++--------- source/_static/css/custom_index.css | 170 +++++++++++++- source/_templates/index.html | 42 ++-- student-source/_static/css/custom_body.css | 239 +++++++------------- student-source/_static/css/custom_index.css | 170 +++++++++++++- student-source/_templates/layout.html | 38 ++++ student-source/_templates/student.html | 21 +- 7 files changed, 560 insertions(+), 327 deletions(-) create mode 100644 student-source/_templates/layout.html diff --git a/source/_static/css/custom_body.css b/source/_static/css/custom_body.css index ae5fae8c..067e3fdc 100644 --- a/source/_static/css/custom_body.css +++ b/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; } diff --git a/source/_static/css/custom_index.css b/source/_static/css/custom_index.css index 729bfd77..c234e1ce 100644 --- a/source/_static/css/custom_index.css +++ b/source/_static/css/custom_index.css @@ -1,12 +1,160 @@ -/* Slight width nudge only (kept minimal) */ -.index-page .home-container { max-width: 100%; } - -/* Ensure any Bootstrap-like main column stays centered on the homepage */ -@media (min-width: 1200px) { - .index-page .col-xl-8 { - flex: 0 0 91.66667% !important; - max-width: 91.66667% !important; - margin-left: auto !important; - margin-right: auto !important; - } +/* ========================================= + Shared landing page components + Hero, cards, and responsive utilities + ========================================= */ + +.home-container { padding-inline: clamp(1.5rem, 5vw, 3rem); } + +.landing-hero { + padding: clamp(3.5rem, 6vw, 5.25rem) clamp(1.5rem, 4vw, 2.5rem); + background: linear-gradient(135deg, var(--landing-hero-from), var(--landing-hero-to)); + border-radius: clamp(24px, 5vw, 40px); + position: relative; + overflow: hidden; + box-shadow: var(--landing-hero-shadow); + margin-inline: clamp(1rem, 4vw, 2.5rem); +} + +.hero-inner { position: relative; text-align: center; max-width: 52rem; margin-inline: auto; } +.hero-eyebrow { + font-size: .8rem; + letter-spacing: .32em; + text-transform: uppercase; + font-weight: 600; + color: var(--landing-muted); + margin-bottom: 0.85rem; +} +.hero-title { font-size: clamp(2.3rem, 2.4vw + 1.5rem, 3.4rem); line-height: 1.1; margin: 0 0 1.15rem; color: var(--landing-text); } +.hero-lede { color: var(--landing-muted); font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem); margin: 0 auto clamp(1.6rem, 3.5vw, 2.3rem); max-width: 62ch; } + +.hero-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: .85rem; +} + +.hero-button, +.hero-link { + display: inline-flex; + align-items: center; + gap: .5rem; + border-radius: 999px; + font-weight: 600; + text-decoration: none; + transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; +} + +.hero-button { + padding: .85rem 1.5rem; + background: linear-gradient(135deg, var(--landing-accent), var(--landing-accent-strong)); + color: #f8fafc; + box-shadow: var(--landing-button-shadow); +} + +.hero-link { + padding: .82rem 1.3rem; + background: transparent; + border: 1px solid var(--landing-border); + color: var(--landing-text); +} + +.hero-button:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(14, 165, 233, .22); } +.hero-link:hover { transform: translateY(-1px); border-color: var(--landing-accent); color: var(--landing-accent); } + +.hero-button:focus-visible, +.hero-link:focus-visible, +.card:focus-visible { + outline: 3px solid var(--landing-ring); + outline-offset: 3px; +} + +.home-main { padding-block: clamp(2.5rem, 4vw, 4rem); } +.section { margin-top: clamp(1.5rem, 2vw, 2.5rem); } +.section-title { font-size: .95rem; text-transform: uppercase; letter-spacing: .28em; color: var(--landing-muted); margin-bottom: 1.5rem; text-align: center; } + +.card-grid { + --card-min: 260px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); + gap: clamp(1rem, 2vw, 1.8rem); + align-items: stretch; +} + +.card-grid.cards-4 { + --card-min: 280px; + max-width: min(880px, 100%); + margin-inline: auto; +} + +.card-grid.cards-6 { --card-min: 220px; } + +.card { + position: relative; + display: grid; + grid-template-rows: auto auto 1fr auto; + gap: .65rem; + padding: clamp(1.25rem, 2vw, 1.75rem); + border-radius: 20px; + text-decoration: none; + color: var(--landing-text); + background: var(--landing-surface); + border: 1px solid color-mix(in srgb, var(--landing-border) 70%, transparent); + box-shadow: var(--landing-card-shadow); + backdrop-filter: blur(6px); + transition: transform .22s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease; +} + +.card:hover { + transform: translateY(-4px); + border-color: color-mix(in srgb, var(--landing-accent) 55%, transparent); + box-shadow: 0 24px 44px rgba(14, 165, 233, 0.22); +} + +.card-icon { + width: 44px; + height: 44px; + border-radius: 14px; + display: grid; + place-items: center; + background: linear-gradient(135deg, var(--landing-accent), var(--landing-accent-strong)); + box-shadow: var(--landing-icon-shadow); +} + +.card-icon svg { width: 24px; height: 24px; fill: #f8fafc; } + +.card-title { font-size: 1.15rem; margin: 0; } +.card-desc { margin: 0; color: var(--landing-muted); line-height: 1.55; } +.card-cta { + display: inline-flex; + align-items: center; + gap: .4rem; + margin-top: .2rem; + font-weight: 600; + color: var(--landing-accent); +} + +.card-cta::after { content: "→"; font-size: 1.1em; transition: transform .18s ease; } +.card:hover .card-cta::after { transform: translateX(3px); } + +/* Motion & accessibility */ +@media (prefers-reduced-motion: reduce) { + .hero-button, + .hero-link, + .card { transition: none; } + .card:hover .card-cta::after { transform: none; } +} + +/* Responsive tweaks */ +@media (max-width: 720px) { + .landing-hero { border-radius: clamp(18px, 8vw, 30px); } + .hero-actions { flex-direction: column; } + .hero-link, .hero-button { width: 100%; justify-content: center; } + .section-title { text-align: left; } +} + +@media (max-width: 520px) { + .home-container { padding-inline: clamp(1rem, 6vw, 1.5rem); } + .landing-hero { padding-inline: clamp(1.2rem, 5vw, 1.8rem); margin-inline: 0; } + .card-grid { grid-template-columns: 1fr; } } diff --git a/source/_templates/index.html b/source/_templates/index.html index 2836d239..1bd9accc 100644 --- a/source/_templates/index.html +++ b/source/_templates/index.html @@ -2,44 +2,28 @@ {% set title = _('Codio') %} {% block body %} - -
- - - - - From c10268d3d241e0ef1328926dc1480e7787c8e220 Mon Sep 17 00:00:00 2001 From: Jairo Velasquez Date: Tue, 18 Nov 2025 18:24:52 +0000 Subject: [PATCH 8/9] Too much bold, updated the repo --- source/instructors/admin/sandboxes.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/instructors/admin/sandboxes.rst b/source/instructors/admin/sandboxes.rst index 816f97e5..f407a015 100644 --- a/source/instructors/admin/sandboxes.rst +++ b/source/instructors/admin/sandboxes.rst @@ -13,7 +13,7 @@ Sandboxes provide time‑boxed, ephemeral **AWS Management Console environments* .. important:: - **Sandboxes are not enabled by default.** They require a **signed agreement** because they **incur additional costs** for your organization. To enable Sandboxes for your organization, please **reach out to Support**. + **Sandboxes are not enabled by default.** They require a signed agreement because they incur additional costs for your organization. To enable Sandboxes for your organization, please reach out to Support. .. note:: @@ -65,7 +65,7 @@ Define sandboxes in YAML. The best starting point is using this command to get f .. code-block:: bash - git clone git@github.com:codio-content/sandboxes_examples.git . + git clone https://github.com/codio-content/sandboxes_examples.git . .. important:: From 6c2b3a6d6257869213f7aa33bd501d23cc6644dc Mon Sep 17 00:00:00 2001 From: Jairo Velasquez Date: Tue, 18 Nov 2025 18:40:41 +0000 Subject: [PATCH 9/9] Last one --- source/instructors/admin/sandboxes.rst | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source/instructors/admin/sandboxes.rst b/source/instructors/admin/sandboxes.rst index f407a015..43249d33 100644 --- a/source/instructors/admin/sandboxes.rst +++ b/source/instructors/admin/sandboxes.rst @@ -41,15 +41,15 @@ Key Concepts * - **Lifetime Extension** - Optional, on-demand increments (e.g., ``5m``, ``10m``) that can be applied to a running sandbox, up to ``lifetime_max``. * - **Policy** - - The permissions definition attached to the sandbox (for example, an IAM policy file like ``lab.policy``). This **controls the permission level** from **full** to **least-privileged**. + - The permissions definition attached to the sandbox (for example, an IAM policy file like ``lab.policy``). This controls the permission level from full to least-privileged. * - **Provision Engine** - - The engine used to orchestrate resources defined by the sandbox (e.g., ``terraform``, or ``bash`` for **CloudFormation**). + - The engine used to orchestrate resources defined by the sandbox (e.g., ``terraform``, ``bash``, or CloudFormation). * - **Billing Limit** - - A numeric cap used by the platform to **help control costs** attributed to the sandbox (e.g., ``5.0``). + - A numeric cap used by the platform to help control costs attributed to the sandbox (e.g., ``5.0``). * - **Parameters** - Resource-specific inputs for the sandbox type (for example, EC2 instance settings: ``instance_type``, ``image``, ``volume_size``, ``connection_mode``). * - **Region** - - The AWS region in which sandboxes are created. **Currently fixed to** ``us-east-1``. + - The AWS region in which sandboxes are created. Currently fixed to ``us-east-1``. Lifecycle, Duration, and Cleanup -------------------------------- @@ -124,7 +124,7 @@ Top-level keys * - ``policy`` - string - Conditional - - Path or reference to the IAM policy that defines the sandbox's permissions. Controls access level from **full** to **least-privileged**. + - Path or reference to the IAM policy that defines the sandbox's permissions. Controls access level from full to **least-privileged**. * - ``provision_engine`` - string - Conditional @@ -136,7 +136,7 @@ Top-level keys * - ``parameters`` - mapping - Conditional - - Type-specific inputs. **Required for** ``aws_ec2`` (see below). + - Type-specific inputs. Required for ``aws_ec2`` (see below). .. _ec2type-sandboxes: