diff --git a/.codio b/.codio index 54542513..4d189add 100644 --- a/.codio +++ b/.codio @@ -2,12 +2,13 @@ // This file is used to configure the three buttons along Codio's top menu. // Run button configuration "commands": { - "Make": "make html", + "Make": "clear && make html", "Start Ungit":"ungit --port=4000 --ungitBindIp 0.0.0.0" }, // Preview button configuration "preview": { - "Preview": "https://{{domain}}/build/html/index.html", + "Instructor": "https://{{domain}}/build/html/index.html", + "Student": "https://{{domain}}/build/html/student.html", "Visit Ungit": "https://{{domain4000}}/#/repository?path=%2Fhome%2Fcodio%2Fworkspace" diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 76a18753..2b4b1fce 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -10,7 +10,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Setup env - run: pip install sphinxcontrib-applehelp==1.0.4 sphinxcontrib-devhelp==1.0.2 sphinxcontrib-htmlhelp==2.0.1 sphinxcontrib-qthelp==1.0.3 sphinxcontrib-serializinghtml==1.1.5 sphinx==4.2.0 sphinx-sitemap sphinx_code_tabs recommonmark git+https://github.com/codio/pydata-sphinx-theme.git@master + run: pip install sphinx==8.2.0 sphinxawesome-theme==5.3.2 sphinx-docsearch sphinx-sitemap sphinx_code_tabs recommonmark - name: Checkout uses: actions/checkout@v1 diff --git a/README.md b/README.md index a2910b89..b67ba7bd 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,7 @@ If using Codio, put on the certified Python stack `Python Ubuntu 22.04 (pyenv)`. ### Install ``` -pip install sphinx==4.2.0 sphinx-sitemap sphinx_code_tabs recommonmark git+https://github.com/codio/pydata-sphinx-theme.git@master -``` - -Due to some versions being outdated, temporarily you will need to use this command to install dependencies: - -``` -pip install sphinxcontrib-applehelp==1.0.4 sphinxcontrib-devhelp==1.0.2 sphinxcontrib-htmlhelp==2.0.1 sphinxcontrib-qthelp==1.0.3 sphinxcontrib-serializinghtml==1.1.5 sphinx==4.2.0 sphinx-sitemap sphinx_code_tabs recommonmark git+https://github.com/codio/pydata-sphinx-theme.git@master +pip install sphinx==8.2.0 sphinxawesome-theme==5.3.2 sphinx-docsearch sphinx-sitemap sphinx_code_tabs recommonmark ``` ### Build diff --git a/source/_static/css/codio.css b/source/_static/css/codio.css index d58bf2a5..cd9bd4a1 100644 --- a/source/_static/css/codio.css +++ b/source/_static/css/codio.css @@ -225,13 +225,32 @@ .bd-content a.reference { font-weight: 600; } + .small-text { font-size: 0.85em; } + .tiny { font-size: 0.75em; - } +} .float-right { float: right; width: 300px; margin-left: 50px; - } \ No newline at end of file +} + +header img[src$="logo-white.svg"], +header img[src$="logo-dark.svg"] { + height: 32px !important; + width: auto !important; +} + +header span.font-bold { + display: none !important; +} + +@media (prefers-color-scheme: dark) { + html { background: #0b0d17; } +} +@media (prefers-color-scheme: light) { + html { background: #ffffff; } +} diff --git a/source/_static/css/custom_body.css b/source/_static/css/custom_body.css index 5e9114f1..ae5fae8c 100644 --- a/source/_static/css/custom_body.css +++ b/source/_static/css/custom_body.css @@ -1,19 +1,138 @@ -body { - background-color: #02064e; +/* ========================================= + Codio Docs — Home (index) only + Pure theme background, centered layout + ========================================= */ + +/* Hide sidebars on the homepage and center content */ +.index-page .bd-sidebar-primary, +.index-page .bd-sidebar-secondary { display: none !important; } + +.index-page .bd-content, +.index-page .bd-article-container { + max-width: 100%; + margin-inline: auto !important; + padding-inline: 1rem; } -.footer { - border-top: none; +/* 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 { + background: transparent !important; } -.container-xl .row { - justify-content: center; +/* ------- 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); } -.container-xl .no-sidebar { - display: none !important; +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); +} + +/* 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); + } +} + +/* ------- 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); +} +.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; } } -.container-xl .d-none { - display: none !important; +/* Small screens */ +@media (max-width: 480px) { + .home-search { width: 100%; } + .home-search input[type="search"] { min-width: 0; width: 100%; } } diff --git a/source/_static/css/custom_index.css b/source/_static/css/custom_index.css index f010d044..729bfd77 100644 --- a/source/_static/css/custom_index.css +++ b/source/_static/css/custom_index.css @@ -1,6 +1,12 @@ +/* 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) { - .col-xl-8 { - flex: 0 0 91.66667% !important; - max-width: 91.66667% !important; - } + .index-page .col-xl-8 { + flex: 0 0 91.66667% !important; + max-width: 91.66667% !important; + margin-left: auto !important; + margin-right: auto !important; + } } diff --git a/source/_static/favicon.ico b/source/_static/favicon.ico index 8d393ea6..fae4ef68 100644 Binary files a/source/_static/favicon.ico and b/source/_static/favicon.ico differ diff --git a/source/_static/js/algolia.js b/source/_static/js/algolia.js index 3434bcab..6951b014 100644 --- a/source/_static/js/algolia.js +++ b/source/_static/js/algolia.js @@ -1,12 +1,14 @@ -docsearch({ - // Your apiKey and indexName will be given to you once - // we create your config - apiKey: '7e59277e32050e11c2e8915f1b09d6e2', - indexName: 'CodioDocs', - appId: '0MJO9504F8', // Should be only included if you are running DocSearch on your own. - container: '#docsearch', - // Set debug to true to inspect the dropdown - searchParameters: { - hitsPerPage: 20, - } +window.addEventListener('DOMContentLoaded', () => { + docsearch({ + // Your apiKey and indexName will be given to you once + // we create your config + apiKey: '7e59277e32050e11c2e8915f1b09d6e2', + indexName: 'CodioDocs', + appId: '0MJO9504F8', // Should be only included if you are running DocSearch on your own. + container: '#docsearch', + // Set debug to true to inspect the dropdown + searchParameters: { + hitsPerPage: 20, + } + }); }); diff --git a/source/_static/logo-dark.svg b/source/_static/logo-dark.svg new file mode 100644 index 00000000..6a5e5a65 --- /dev/null +++ b/source/_static/logo-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/source/_templates/index.html b/source/_templates/index.html index 04c25d7c..2836d239 100644 --- a/source/_templates/index.html +++ b/source/_templates/index.html @@ -1,97 +1,102 @@ {% extends "layout.html" %} {% set title = _('Codio') %} {% block body %} + + -
-
- Codio Instructor Help Center -
-
- -
- Overview: Getting Started in Codio -
-
-
-
- Getting started with Codio including videos and tutorials. -
- -
- -
- Content Authoring -
-
-
-
- Authoring instructional content and assessments. -
- -
- -
- Developing Code -
-
-
-
- The Codio development environment. -
- -
- -
- Course Configuration -
-
-
-
- Creating courses, adding students, connecting to LMS TAs. -
- -
- -
- Teaching in Codio -
-
-
-
- Grading, viewing student work, remote toolkit. -
- -
- -
- Admin -
-
-
-
- LMS Integration, Organization settings, FERPA, Accessibility. -
- -
-
+ +
+ + + + + + + +
+
+ +
+
-{% endblock %} \ No newline at end of file + +{% endblock %} diff --git a/source/_templates/layout.html b/source/_templates/layout.html index df4a026a..7ecb168e 100644 --- a/source/_templates/layout.html +++ b/source/_templates/layout.html @@ -1,5 +1,26 @@ {% extends "!layout.html" %} +{% block extrahead %} + {{ super() }} + +{% endblock %} + {% block footer %} {{ super() }} diff --git a/source/admin.rst b/source/admin.rst index 9219bbe4..437cd46f 100644 --- a/source/admin.rst +++ b/source/admin.rst @@ -8,7 +8,7 @@ Admin ===== .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: instructors/admin/integration/intro diff --git a/source/authoring.rst b/source/authoring.rst index c307817b..24dd5ca9 100644 --- a/source/authoring.rst +++ b/source/authoring.rst @@ -8,7 +8,7 @@ Authoring --------- .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: diff --git a/source/common.rst b/source/common.rst index 43302d58..9dc7e275 100644 --- a/source/common.rst +++ b/source/common.rst @@ -8,7 +8,7 @@ Developing Code =============== .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: common/develop/projects/projects diff --git a/source/common/develop/projects/projects.rst b/source/common/develop/projects/projects.rst index 98296cbc..8bbd4166 100644 --- a/source/common/develop/projects/projects.rst +++ b/source/common/develop/projects/projects.rst @@ -8,6 +8,7 @@ Developing Code .. toctree:: :caption: Projects + :maxdepth: 3 :hidden: project-settings diff --git a/source/conf.py b/source/conf.py index e2fdd742..43f6d07e 100644 --- a/source/conf.py +++ b/source/conf.py @@ -16,13 +16,29 @@ # import sys # sys.path.insert(0, os.path.abspath('.')) +from sphinxawesome_theme.postprocess import Icons +from sphinxawesome_theme import ThemeOptions +from datetime import date +from dataclasses import asdict # -- Project information ----------------------------------------------------- project = u'' -copyright = u'Codio 2025. All Rights Reserved' +copyright = f"Codio {date.today().year}. All rights reserved." author = u'' +# Global substitutions for reStructuredText files +substitutions = [ + ":tocdepth: 3", + " ", + ".. meta::", + " :keywords: Documentation,Codio", + ".. |rst| replace:: reStructuredText", + ".. |product| replace:: Documentation", + ".. |conf| replace:: File: conf.py", +] +rst_prolog = "\n".join(substitutions) + # The short X.Y version version = u'' # The full version, including alpha/beta/rc tags @@ -45,6 +61,7 @@ 'sphinx.ext.todo', 'sphinx.ext.coverage', 'sphinx.ext.mathjax', + 'sphinx_docsearch', 'sphinx.ext.ifconfig', 'sphinx.ext.viewcode', 'sphinx.ext.githubpages', @@ -88,29 +105,36 @@ # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # -html_theme = 'pydata_sphinx_theme' +html_theme = "sphinxawesome_theme" # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # -html_theme_options = { - "show_prev_next": True, - "footer_items": ["copyright"], - "navbar_end": ["navbar-icon-links", "search-field"], - "navbar_align": "none", - "search_bar_text": "Search ...", - "show_toc_level": 2, - "page_sidebar_items": [], -# "external_links": [ -# {"name": "Overview", "url": "/instructors/getstarted"}, -# {"name": "Authoring", "url": "/instructors/authoring"}, -# {"name": "IDE", "url": "/common"}, -# {"name": "Course Set Up", "url": "/instructors/setupcourses"}, -# {"name": "Teaching", "url": "/instructors/teaching"}, -# {"name": "Admin", "url": "/instructors/admin"} -# ] -} + +theme_options = ThemeOptions( + show_prev_next=True, + awesome_external_links=True, + main_nav_links={"Changelog": "/instructors/getstarted/support/changelog.html"}, + logo_light="logo-dark.svg", + logo_dark="logo-white.svg", +) + +html_theme_options = asdict(theme_options) + +# html_theme_options = { +# "show_prev_next": True, +# "logo_light": "_static/logo-white.svg", +# "logo_dark": "_static/logo-white.svg", +# # "external_links": [ +# # {"name": "Overview", "url": "/instructors/getstarted"}, +# # {"name": "Authoring", "url": "/instructors/authoring"}, +# # {"name": "IDE", "url": "/common"}, +# # {"name": "Course Set Up", "url": "/instructors/setupcourses"}, +# # {"name": "Teaching", "url": "/instructors/teaching"}, +# # {"name": "Admin", "url": "/instructors/admin"} +# # ] +# } # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, @@ -127,7 +151,7 @@ # html_sidebars = { "index": [], - "**": ['sidebar-nav-bs.html'], + # "**": ['sidebar-nav-bs.html'], } @@ -211,7 +235,9 @@ # -- Options for intersphinx extension --------------------------------------- # Example configuration for intersphinx: refer to the Python standard library. -intersphinx_mapping = {'https://docs.python.org/': None} +intersphinx_mapping = { + 'python': ('https://docs.python.org/3', None), +} # -- Options for todo extension ---------------------------------------------- @@ -220,12 +246,12 @@ html_additional_pages = { 'index': 'index.html' - } +} + html_css_files = [ 'css/codio.css', 'css/search.css', 'https://cdn.jsdelivr.net/npm/@docsearch/css@3' - ] html_js_files = [ @@ -233,6 +259,14 @@ ('js/algolia.js', {'defer': 'defer'}) ] -html_logo = "_static/logo-white.svg" +# html_logo = "_static/logo-white.svg" +html_logo = None +html_title = "Codio" html_favicon = "_static/favicon.ico" html_extra_path = ['robots.txt'] +html_permalinks_icon = Icons.permalinks_icon +html_show_sphinx = False + +docsearch_app_id = "0MJO9504F8" +docsearch_api_key = "7e59277e32050e11c2e8915f1b09d6e2" +docsearch_index_name = "CodioDocs" diff --git a/source/getstarted.rst b/source/getstarted.rst index fdc59cbd..1efb1036 100644 --- a/source/getstarted.rst +++ b/source/getstarted.rst @@ -1,13 +1,13 @@ .. meta:: :description: Getting started with Codio including videos and tutorials -:name: getstarted +.. :name: getstarted Getting Started --------------- .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: instructors/getstarted/startlist diff --git a/source/index.rst b/source/index.rst index 1a215e52..14b6b5c8 100644 --- a/source/index.rst +++ b/source/index.rst @@ -3,8 +3,8 @@ Welcome to CodioDocs's documentation! .. toctree:: - :caption: Theme Documentation - :maxdepth: 2 + :caption: Documentation + :maxdepth: 3 Overview Authoring diff --git a/source/setupcourses.rst b/source/setupcourses.rst index 9fc9ed10..23231cc9 100644 --- a/source/setupcourses.rst +++ b/source/setupcourses.rst @@ -8,7 +8,7 @@ Courses Set up -------------- .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: instructors/setupcourses/courses diff --git a/source/teaching.rst b/source/teaching.rst index 75d41f26..77fbb0cf 100644 --- a/source/teaching.rst +++ b/source/teaching.rst @@ -8,7 +8,7 @@ Teaching ======== .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: instructors/teaching/viewstudentwork diff --git a/student-source/_static/css/codio.css b/student-source/_static/css/codio.css index 043e59e3..072fb8b7 100644 --- a/student-source/_static/css/codio.css +++ b/student-source/_static/css/codio.css @@ -225,3 +225,32 @@ .bd-content a.reference { font-weight: 600; } + +.small-text { + font-size: 0.85em; +} + +.tiny { + font-size: 0.75em; +} + +.float-right { + float: right; width: 300px; margin-left: 50px; +} + +header img[src$="logo-white.svg"], +header img[src$="logo-dark.svg"] { + height: 32px !important; + width: auto !important; +} + +header span.font-bold { + display: none !important; +} + +@media (prefers-color-scheme: dark) { + html { background: #0b0d17; } +} +@media (prefers-color-scheme: light) { + html { background: #ffffff; } +} diff --git a/student-source/_static/css/custom_body.css b/student-source/_static/css/custom_body.css index 5e9114f1..456eaea6 100644 --- a/student-source/_static/css/custom_body.css +++ b/student-source/_static/css/custom_body.css @@ -1,19 +1,174 @@ -body { - background-color: #02064e; +/* ========================================= + Codio Docs — Home (index) only + Pure theme background, centered layout + ========================================= */ + +/* Hide sidebars on the homepage and center content */ +/* Center & unbox the student page just like the home page */ +.student-page .bd-sidebar-primary, +.student-page .bd-sidebar-secondary { display: none !important; } + +.student-page .bd-content, +.student-page .bd-article-container { + max-width: 1200px; + margin-inline: auto !important; + padding-inline: 1rem; + background: transparent !important; +} + +/* Share the same theme tokens */ +html[data-theme="dark"] .student-page, +[data-theme="dark"] .student-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); +} +html[data-theme="light"] .student-page, +[data-theme="light"] .student-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); +} + +.index-page .bd-sidebar-primary, +.index-page .bd-sidebar-secondary { display: none !important; } + +.index-page .bd-content, +.index-page .bd-article-container { + max-width: 100%; + margin-inline: auto !important; + padding-inline: 1rem; +} + +/* 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 { + background: transparent !important; } -.footer { - border-top: none; +/* ------- 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); } -.container-xl .row { - justify-content: center; +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); } -.container-xl .no-sidebar { - display: none !important; +/* 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); + } } -.container-xl .d-none { - display: none !important; +/* ------- 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); +} +.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; } } + +/* Small screens */ +@media (max-width: 480px) { + .home-search { width: 100%; } + .home-search input[type="search"] { min-width: 0; width: 100%; } } diff --git a/student-source/_static/css/custom_index.css b/student-source/_static/css/custom_index.css new file mode 100644 index 00000000..729bfd77 --- /dev/null +++ b/student-source/_static/css/custom_index.css @@ -0,0 +1,12 @@ +/* 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; + } +} diff --git a/student-source/_static/favicon.ico b/student-source/_static/favicon.ico index 8d393ea6..fae4ef68 100644 Binary files a/student-source/_static/favicon.ico and b/student-source/_static/favicon.ico differ diff --git a/student-source/_static/logo-dark.svg b/student-source/_static/logo-dark.svg new file mode 100644 index 00000000..6a5e5a65 --- /dev/null +++ b/student-source/_static/logo-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/student-source/_templates/student.html b/student-source/_templates/student.html index e4976b6e..772b17e0 100644 --- a/student-source/_templates/student.html +++ b/student-source/_templates/student.html @@ -2,67 +2,60 @@ {% set title = _('Student') %} {% block body %} -
-
- Codio Student Help Center -
- + + + -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/student-source/accessing-codio.rst b/student-source/accessing-codio.rst index 70bd926d..2567861f 100644 --- a/student-source/accessing-codio.rst +++ b/student-source/accessing-codio.rst @@ -8,7 +8,7 @@ Accessing Codio =============== .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: diff --git a/student-source/conf.py b/student-source/conf.py index 397d0572..ac5fa02b 100644 --- a/student-source/conf.py +++ b/student-source/conf.py @@ -16,13 +16,29 @@ # import sys # sys.path.insert(0, os.path.abspath('.')) +from sphinxawesome_theme.postprocess import Icons +from sphinxawesome_theme import ThemeOptions +from datetime import date +from dataclasses import asdict # -- Project information ----------------------------------------------------- project = u'' -copyright = u'Codio 2025. All Rights Reserved' +copyright = f"Codio {date.today().year}. All rights reserved." author = u'' +# Global substitutions for reStructuredText files +substitutions = [ + ":tocdepth: 3", + " ", + ".. meta::", + " :keywords: Documentation,Codio", + ".. |rst| replace:: reStructuredText", + ".. |product| replace:: Documentation", + ".. |conf| replace:: File: conf.py", +] +rst_prolog = "\n".join(substitutions) + # The short X.Y version version = u'' # The full version, including alpha/beta/rc tags @@ -45,6 +61,7 @@ 'sphinx.ext.todo', 'sphinx.ext.coverage', 'sphinx.ext.mathjax', + 'sphinx_docsearch', 'sphinx.ext.ifconfig', 'sphinx.ext.viewcode', 'sphinx.ext.githubpages', @@ -88,29 +105,34 @@ # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # -html_theme = 'pydata_sphinx_theme' +html_theme = "sphinxawesome_theme" # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # -html_theme_options = { - "show_prev_next": True, - "footer_items": ["copyright"], - "navbar_end": ["navbar-icon-links", "search-field"], - "navbar_align": "none", - "search_bar_text": "Search ...", - "show_toc_level": 2, - "page_sidebar_items": [], -# "external_links": [ -# {"name": "Overview", "url": "/instructors/getstarted"}, -# {"name": "Authoring", "url": "/instructors/authoring"}, -# {"name": "IDE", "url": "/common"}, -# {"name": "Course Set Up", "url": "/instructors/setupcourses"}, -# {"name": "Teaching", "url": "/instructors/teaching"}, -# {"name": "Admin", "url": "/instructors/admin"} -# ] -} + +theme_options = ThemeOptions( + show_prev_next=True, + awesome_external_links=True, + main_nav_links={"Changelog": "/instructors/getstarted/support/changelog.html"}, + logo_light="logo-dark.svg", + logo_dark="logo-white.svg", +) + +html_theme_options = asdict(theme_options) + +# html_theme_options = { +# "show_prev_next": True, +# # "external_links": [ +# # {"name": "Overview", "url": "/instructors/getstarted"}, +# # {"name": "Authoring", "url": "/instructors/authoring"}, +# # {"name": "IDE", "url": "/common"}, +# # {"name": "Course Set Up", "url": "/instructors/setupcourses"}, +# # {"name": "Teaching", "url": "/instructors/teaching"}, +# # {"name": "Admin", "url": "/instructors/admin"} +# # ] +# } # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, @@ -128,7 +150,7 @@ html_sidebars = { "index": [], "student": [], - "**": ['sidebar-nav-bs.html'], + # "**": ['sidebar-nav-bs.html'], } @@ -212,7 +234,9 @@ # -- Options for intersphinx extension --------------------------------------- # Example configuration for intersphinx: refer to the Python standard library. -intersphinx_mapping = {'https://docs.python.org/': None} +intersphinx_mapping = { + 'python': ('https://docs.python.org/3', None), +} # -- Options for todo extension ---------------------------------------------- @@ -234,6 +258,14 @@ ('js/algolia.js', {'defer': 'defer'}) ] -html_logo = "_static/logo-white.svg" +# html_logo = "_static/logo-white.svg" +html_logo = None +html_title = "Codio" html_favicon = "_static/favicon.ico" html_extra_path = ['robots.txt'] +html_permalinks_icon = Icons.permalinks_icon +html_show_sphinx = False + +docsearch_app_id = "0MJO9504F8" +docsearch_api_key = "7e59277e32050e11c2e8915f1b09d6e2" +docsearch_index_name = "CodioDocs" diff --git a/student-source/courses.rst b/student-source/courses.rst index 07e2584a..a0d361de 100644 --- a/student-source/courses.rst +++ b/student-source/courses.rst @@ -8,7 +8,7 @@ Your Courses ------------ .. toctree:: - :maxdepth: 2 + :maxdepth: 3 :hidden: students/courses/courses diff --git a/student-source/develop.rst b/student-source/develop.rst index 2e6d6027..410b36d4 100644 --- a/student-source/develop.rst +++ b/student-source/develop.rst @@ -8,7 +8,7 @@ Developing Code =============== .. toctree:: - :maxdepth: 1 + :maxdepth: 3 :hidden: develop/develop/projects/projects diff --git a/student-source/student.rst b/student-source/student.rst index 98f65283..70ed4e68 100644 --- a/student-source/student.rst +++ b/student-source/student.rst @@ -3,8 +3,8 @@ Welcome to CodioDocs's documentation! .. toctree:: - :caption: Theme Documentation - :maxdepth: 2 + :caption: Documentation + :maxdepth: 3 Accessing Codio Your Courses