From c493d5d1283588f04d472f14845eee4d7717f65f Mon Sep 17 00:00:00 2001 From: Sharbel Marshi Date: Tue, 30 Jun 2026 13:42:55 +0300 Subject: [PATCH] Modernize homepage design --- _layouts/default.html | 47 ++++- css/app.css | 446 +++++++++++++++++++++++++++++++++++++++++- img/PDE.svg | 1 + img/PDE2.svg | 1 + img/curved.svg | 1 + img/heateuqation.svg | 1 + img/math-graph.svg | 1 + pages/get-involved.md | 32 ++- pages/index.md | 249 ++++++++++------------- 9 files changed, 619 insertions(+), 160 deletions(-) create mode 100644 img/PDE.svg create mode 100644 img/PDE2.svg create mode 100644 img/curved.svg create mode 100644 img/heateuqation.svg create mode 100644 img/math-graph.svg diff --git a/_layouts/default.html b/_layouts/default.html index d83173d..d90aecd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -43,13 +43,44 @@ + {%- comment -%} Inline SVG icon sprite (navigation icons, no webfont) {%- endcomment -%} + +
@@ -58,8 +89,16 @@ {%- for page in site.pages -%} {%- if page.menu -%}
  • - {{ page.icon }} - {{ page.title }} + + {%- case page.title -%} + {%- when 'Download' -%} + {%- when 'Contribute' -%} + {%- when 'About' -%} + {%- when 'Support' -%} + {%- when 'Donate' -%} + {%- else -%}{{ page.icon }} + {%- endcase -%} + {{ page.title }}
    • {%- endif -%} diff --git a/css/app.css b/css/app.css index 72c33ec..e50d2b8 100644 --- a/css/app.css +++ b/css/app.css @@ -1,6 +1,46 @@ /* Custom classes*/ -body { background-color: #333; } +/* ============================================================ + Quicksand (self-hosted, variable font 300-700) + Files in /fonts/quicksand/ - no external request at runtime. + Quicksand is licensed under the SIL Open Font License 1.1. + ============================================================ */ +@font-face { + font-family: "Quicksand"; + font-style: normal; + font-weight: 300 700; + font-display: swap; + src: url("../fonts/quicksand/quicksand-latin.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, + U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, + U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Quicksand"; + font-style: normal; + font-weight: 300 700; + font-display: swap; + src: url("../fonts/quicksand/quicksand-latin-ext.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, + U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, + U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, + U+A720-A7FF; +} + +/* Typography (self-hosted Quicksand, with system fallbacks) */ +body { + background-color: #333; + font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +code, pre, kbd, samp, tt, +.highlight, .home-pre { + font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, + Consolas, "Liberation Mono", monospace; +} + div.white { background-color: #FFF; } div.vertical-stretch { min-height: 70vh; } @@ -18,21 +58,396 @@ footer { font-weight: bold; } -h2.landing-page-logo { - color: #0790c0; +/* ============================================================ + Homepage redesign ("liquid glass") + White page + tiled SVG math-graph background. Content is NOT + boxed in cards; only translucent liquid-glass surfaces are used + (buttons, pills, and the code/news panels). + Scoped to .home* classes used by pages/index.md + ============================================================ */ + +.home { + position: relative; + overflow: hidden; + /* Bleed over the .grid-container-mod padding for a full-width canvas */ + margin: -1.5em; + padding: 1.5em; + background: #ffffff; +} + +/* Decorative background layer (3-D surface + tiled SVG graphs) */ +.home-bg { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + overflow: hidden; +} +.home-bg-surface { + position: absolute; + top: calc(1.5rem + 20pt); + right: calc(-3% + 18pt); + width: min(600px, 50%); + height: auto; + opacity: 0.72; +} + +.home-content { position: relative; z-index: 1; } + +/* Shared liquid-glass surface (used sparingly) */ +.home-glass { + background: rgba(255, 255, 255, 0.55); + -webkit-backdrop-filter: blur(16px) saturate(170%); + backdrop-filter: blur(16px) saturate(170%); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: 18px; + box-shadow: 0 10px 30px rgba(16, 48, 66, 0.10); + padding: 1.5rem; +} + +/* Section rhythm */ +.home-section { margin-top: 2.75rem; } +.home-section-gap { margin-top: 1rem; } +.home-h2 { + font-size: 1.6rem; + font-weight: 800; + color: #0c2b39; + letter-spacing: -0.01em; + margin: 0 0 1.25rem 0; +} +.home-section-lead { + color: #51626c; + max-width: 62ch; + margin: 0 0 1.25rem 0; +} + +/* Responsive grids */ +.home-grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(3, 1fr); +} +.home-grid-2 { grid-template-columns: repeat(2, 1fr); } +.home-grid-3 { grid-template-columns: repeat(3, 1fr); } + +/* ---- Hero (text on the graph background, glass buttons) ---- */ +.home-hero { padding: 0.5rem 0 0 0; } +.home-hero-brand { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; +} +.home-hero-logo { height: 44px; width: auto; } +.home-eyebrow { + font-size: 0.78rem; font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #0a6f93; + background: rgba(7, 144, 192, 0.10); + border: 1px solid rgba(7, 144, 192, 0.22); + padding: 0.3rem 0.7rem; + border-radius: 999px; +} +.home-title { + font-size: clamp(2.4rem, 6vw, 3.4rem); + font-weight: 800; + line-height: 1.05; + letter-spacing: -0.02em; + color: #0c2b39; + margin: 0 0 0.5rem 0; +} +.home-subtitle { + font-size: clamp(1rem, 2vw, 1.25rem); + font-weight: 600; + color: #274b59; margin: 0 0 1rem 0; - font-size: 2.33rem; +} +.home-lead { + font-size: 1rem; + line-height: 1.6; + color: #51626c; + max-width: 54ch; + margin: 0; +} + +/* Hero visual: liquid-glass frame around the example plot */ +.home-hero-visual { + margin: 0; + padding: 0.6rem; + background: rgba(255, 255, 255, 0.5); + -webkit-backdrop-filter: blur(16px) saturate(170%); + backdrop-filter: blur(16px) saturate(170%); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: 18px; + box-shadow: 0 14px 36px rgba(16, 48, 66, 0.14); +} +.home-hero-visual img { + display: block; + width: 100%; + height: auto; + background: #fff; + border-radius: 12px; +} +.home-hero-visual figcaption { + margin-top: 0.6rem; + font-size: 0.85rem; + color: #33525f; + text-align: center; +} +.home-hero-visual figcaption a { color: #0790c0; } + +/* ---- Zig-zag math-graph accents ---- */ +.home-graph { + margin: 0; + max-width: 520px; +} +.home-graph img { + display: block; + width: 100%; + height: auto; +} +.home-graph-left { margin-left: 0; margin-right: auto; } +.home-graph-right { margin-left: auto; margin-right: 0; } +/* hero graph keeps its custom downward offset under the buttons */ +.home-graph-hero { margin-top: calc(2.5rem + 15pt); } +/* spacing between consecutive zig-zag rows */ +.home-zigzag + .home-zigzag { margin-top: -5.5rem; } +/* nudge the right-hand column of every zig-zag row up */ +.home-zigzag > .cell:last-child { margin-top: -30pt; } +.home-graph-curved { margin-top: -100pt; } +.home-feature-up { margin-top: -40pt; } + +/* ---- Buttons: liquid glass ---- */ +.home-cta { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.5rem; +} +.home-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.8rem 1.4rem; + border-radius: 14px; + font-weight: 700; + line-height: 1; + text-decoration: none; + border: 1px solid transparent; + -webkit-backdrop-filter: blur(12px) saturate(170%); + backdrop-filter: blur(12px) saturate(170%); + transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; +} +.home-btn:hover { transform: translateY(-1px); } +.home-btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; margin-top: 0.75rem; } +.home-btn-primary { + background: rgba(7, 144, 192, 0.85); + color: #fff; + border-color: rgba(255, 255, 255, 0.45); + box-shadow: 0 10px 24px rgba(7, 144, 192, 0.30); +} +.home-btn-primary:hover { background: rgba(7, 144, 192, 0.95); color: #fff; } +.home-btn-secondary { + background: rgba(255, 255, 255, 0.5); + color: #0a4f6a; + border-color: rgba(255, 255, 255, 0.7); +} +.home-btn-secondary:hover { background: rgba(255, 255, 255, 0.7); color: #0a4f6a; } +.home-btn-ghost { + background: rgba(255, 255, 255, 0.28); + color: #0a4f6a; + border-color: rgba(7, 144, 192, 0.35); +} +.home-btn-ghost:hover { background: rgba(255, 255, 255, 0.45); color: #0a4f6a; } + +/* ---- Platform pills (liquid glass, not cards) ---- */ +.home-platforms { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} +.home-platform { + display: inline-flex; + align-items: center; + gap: 0.6rem; + padding: 0.7rem 1.15rem; + border-radius: 14px; + font-weight: 600; + color: #0c2b39; + text-decoration: none; + background: rgba(255, 255, 255, 0.5); + -webkit-backdrop-filter: blur(14px) saturate(170%); + backdrop-filter: blur(14px) saturate(170%); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: 0 8px 22px rgba(16, 48, 66, 0.10); + transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; +} +.home-platform i { font-size: 1.3rem; color: #0790c0; } +.home-platform:hover { + transform: translateY(-2px); + box-shadow: 0 14px 30px rgba(16, 48, 66, 0.16); + color: #0790c0; +} + +/* ---- Features (plain text columns, no cards) ---- */ +.home-features { + display: grid; + gap: 1.25rem 1.5rem; + grid-template-columns: repeat(3, 1fr); +} +.home-feature { text-align: center; } +.home-feature h3 { + font-size: 1.05rem; + color: #0c2b39; + margin: 0 0 0.35rem 0; +} +.home-feature h3 i { color: #0790c0; margin-right: 0.4rem; } +.home-feature p { margin: 0; color: #51626c; font-size: 0.95rem; } + +/* ---- Code panels (liquid glass; kept opaque enough to read) ---- */ +.home-code { background: rgba(255, 255, 255, 0.74); } +.home-code-label { + font-weight: 700; + color: #0c2b39; + font-size: 0.95rem; + margin: 0 0 0.5rem 0; +} +.home-code-note { + margin: 0.5rem 0 0 0; + color: #5d6e78; + font-size: 0.9rem; +} +/* Neutralize the global figure.highlight frame inside glass code panels + (syntax-highlight.css spans are untouched) */ +.home-code figure.highlight, +.home-code div.highlight { + border: none; + background: transparent; + margin: 0; + padding: 0; + font-size: 0.9rem; +} + +/* ---- Community / development (liquid-glass pills) ---- */ +.home-links { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 1.25rem; +} +.home-link { + display: inline-flex; + align-items: center; + gap: 0.55rem; + padding: 0.6rem 1rem; + border-radius: 14px; + font-weight: 600; + font-size: 0.95rem; + color: #0c2b39; + text-decoration: none; + background: rgba(255, 255, 255, 0.5); + -webkit-backdrop-filter: blur(14px) saturate(170%); + backdrop-filter: blur(14px) saturate(170%); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: 0 8px 22px rgba(16, 48, 66, 0.10); + transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; +} +.home-link i { color: #0790c0; } +.home-link:hover { + transform: translateY(-2px); + box-shadow: 0 14px 30px rgba(16, 48, 66, 0.16); + color: #0790c0; +} + +.home-dev p { color: #33525f; margin: 0 0 0.75rem 0; } +.home-dev a { color: #0790c0; } +.home-pre { + margin: 0; + padding: 0.9rem 1rem; + background: #0a2734; + color: #dff0f7; + border-radius: 12px; + overflow-x: auto; + font-size: 0.9rem; +} +.home-pre code { background: transparent; color: inherit; border: none; } + +/* ---- News / release callout (liquid glass) ---- */ +.home-news { position: relative; border-left: 4px solid #0790c0; } +.home-news-rss { + float: right; + background: #f5a623; + color: #fff; + font-weight: 700; + font-size: 0.75rem; + padding: 0.3rem 0.6rem; + border-radius: 8px; + text-decoration: none; +} +.home-news-rss:hover { color: #fff; } +.home-news-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; } +.home-news-title a { color: #0c2b39; } +.home-news-date { + display: block; + font-size: 0.82rem; + font-weight: 500; + color: #5d6e78; + margin-top: 0.2rem; +} +.home-news .entry-content { color: #51626c; font-size: 0.95rem; } +.home-news-more { margin: 0.75rem 0 0 0; } +.home-news-more a { color: #0790c0; font-weight: 600; } + +/* ============================================================ + Homepage responsive + ============================================================ */ +@media screen and (max-width: 63.9375em) { + .home-grid, + .home-grid-2, + .home-grid-3, + .home-features { grid-template-columns: repeat(2, 1fr); } + .home-hero-content { margin-bottom: 1.5rem; } +} + +@media screen and (max-width: 39.9375em) { + .home { padding: 1em; } + .home-bg-surface { width: 90%; right: -10%; opacity: 0.10; } + .home-grid, + .home-grid-2, + .home-grid-3, + .home-features { grid-template-columns: 1fr; } + .home-hero { text-align: center; } + .home-hero-brand { justify-content: center; } + .home-subtitle, + .home-lead { margin-left: auto; margin-right: auto; } + .home-cta { justify-content: center; } + .home-cta .home-btn { width: 100%; justify-content: center; } + .home-platforms .home-platform { flex: 1 1 100%; justify-content: center; } + .home-news-rss { float: none; display: inline-block; margin-bottom: 0.5rem; } } .entry-content > :last-child { margin-bottom: 0 !important; } .grid-container-mod { padding: 1.5em; } -.dark-background, +/* ---- Top bar: liquid glass ---- */ +.dark-background { + background: + linear-gradient(180deg, rgba(74, 76, 79, 0.72), rgba(48, 49, 51, 0.64)); + -webkit-backdrop-filter: blur(16px) saturate(120%); + backdrop-filter: blur(16px) saturate(120%); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 8px 30px rgba(20, 20, 22, 0.25); +} .title-bar, .top-bar, -.top-bar ul { background: #333; } +.top-bar ul, +.top-bar .menu { background: transparent; } .top-bar { padding-left: 1.5em; @@ -41,9 +456,26 @@ h2.landing-page-logo { margin: auto; } +/* SVG logo + nav icons */ +.nav-logo { width: 32px; height: auto; } +.nav-icon { + width: 1.05em; + height: 1.05em; + vertical-align: -0.16em; + margin-right: 0.1em; +} +.nav-icon-heart { color: #ff7a90; } + .top-bar ul li a, footer ul li a { color: #FFF; } -.top-bar ul li a:hover, +.top-bar ul li a { + border-radius: 10px; + transition: background-color 0.15s ease; +} +.top-bar ul li a:hover { + color: #FFF; + background-color: rgba(255, 255, 255, 0.16); +} footer ul li a:hover { color: #FFF; background-color: #585858; diff --git a/img/PDE.svg b/img/PDE.svg new file mode 100644 index 0000000..8fcbf9c --- /dev/null +++ b/img/PDE.svg @@ -0,0 +1 @@ +xyz \ No newline at end of file diff --git a/img/PDE2.svg b/img/PDE2.svg new file mode 100644 index 0000000..661bfb6 --- /dev/null +++ b/img/PDE2.svg @@ -0,0 +1 @@ +xyu(x,y,t) \ No newline at end of file diff --git a/img/curved.svg b/img/curved.svg new file mode 100644 index 0000000..7454bb4 --- /dev/null +++ b/img/curved.svg @@ -0,0 +1 @@ +xyz \ No newline at end of file diff --git a/img/heateuqation.svg b/img/heateuqation.svg new file mode 100644 index 0000000..9fe9e92 --- /dev/null +++ b/img/heateuqation.svg @@ -0,0 +1 @@ +xyz \ No newline at end of file diff --git a/img/math-graph.svg b/img/math-graph.svg new file mode 100644 index 0000000..4fea74a --- /dev/null +++ b/img/math-graph.svg @@ -0,0 +1 @@ +-8-4048-1.6-0.800.81.6xy \ No newline at end of file diff --git a/pages/get-involved.md b/pages/get-involved.md index d98b659..66472b5 100644 --- a/pages/get-involved.md +++ b/pages/get-involved.md @@ -1,6 +1,6 @@ --- layout: page -title: Get Involved +title: Contribute icon: menu: true permalink: get-involved @@ -27,7 +27,32 @@ Discuss your ideas with us on [Discourse]({{ site.discourse_url }}) [Libera `#octave` channel](https://web.libera.chat/#octave). -### Get the Development Sources +### Community & development + +- [Documentation]({{ site.docs_url }}) +- [Packages]({{ site.packages_url }}) +- [Bug tracker]({{ site.bugs_url }}) +- [Source code](https://hg.octave.org/octave) +- [Wiki]({{ site.wiki_url }}) +- [Discourse forum]({{ site.discourse_url }}) + + +### Developer documentation + +Everything you need to start developing Octave: + +- [Developer FAQ]({{ site.wiki_url }}/Developer_FAQ) – building Octave, + coding style, and the development workflow. +- [List of possible projects]({{ site.wiki_url }}/Projects) – ideas to + work on, from beginner to advanced. +- [Bug tracker]({{ site.bugs_url }}) – report, track, and fix issues. +- [Octave packages]({{ site.packages_url }}) – extend Octave with add-on + packages. +- Octave is free software licensed under the + [GNU General Public License (GPL)]({{ "license.html" | relative_url }}). + + +### Get the Development Sources The latest development sources of GNU Octave are available via [Mercurial](https://www.mercurial-scm.org/) (hg). @@ -41,4 +66,5 @@ command: hg clone https://hg.octave.org/octave ``` The [Developer FAQ]({{ site.wiki_url }}/Developer_FAQ) on the Octave wiki -contains more detailed and recent information about Octave development. +contains more detailed and recent information about Octave development, +including how to build Octave from source. diff --git a/pages/index.md b/pages/index.md index f0534bf..e2de9fb 100644 --- a/pages/index.md +++ b/pages/index.md @@ -3,152 +3,109 @@ layout: default permalink: index --- - +
    -
    -
    - - Example mesh - + + -
    - -

    Scientific Programming Language

    -
      -
    • Powerful mathematics-oriented syntax with built-in 2D/3D plotting and visualization tools
      • -
    • Free software, runs on GNU/Linux, macOS, BSD, and Microsoft Windows
      • -
    • Drop-in compatible with many Matlab scripts
      • -
    -
    -
    - - -### Syntax Examples - -The Octave syntax is largely compatible with Matlab. -The Octave interpreter can be run in -GUI mode, as a console, -or invoked as part of a shell script. -More Octave examples can be found in -[the Octave wiki]({{ site.wiki_url }}/Using_Octave). - -
    -
    -

    - Solve systems of equations with linear algebra operations on - vectors and matrices. -

    -
    -
    -{%- include code1.html -%} - -
    -
    - -
    -
    -

    - Visualize data with high-level plot commands - in 2D and 3D. -

    -
    -
    -{%- include code2.html -%} - - Click here to see the plot output -
    -
    - - -### Octave Packages - -GNU Octave can be extended by packages. Find them at: -- [{{ site.packages_url }}]({{ site.packages_url }}) - - -### Development - -Octave is free software licensed under the -[GNU General Public License (GPL)]({{ "license.html" | relative_url }}). -Assuming you have Mercurial installed on your machine you may obtain the latest -development version of Octave sources with the following command: - -``` -hg clone https://hg.octave.org/octave -``` - - - -### [News]({{ "/news.html" | relative_url }}) - -{% assign latest_post = site.posts.first %} -{% if latest_post %} -
    - - RSS - -

    - {{ latest_post.title }} - – {{ latest_post.date | date: "%b %-d, %Y" }} -

    -
    {{ latest_post.excerpt }}
    -
    -{% endif %} - -
    - Example mesh - -
    - -
    - Example plot - -
    -
    - GNU Octave GUI screenshot - -
    +
    + + +
    +
    +
    +
    + + Free and open source +
    +

    GNU Octave

    +

    Scientific programming and numerical computing, free and open source.

    +

    + GNU Octave is a high-level language for numerical computations, with a + powerful mathematics-oriented syntax, built-in 2D/3D plotting, and a rich + set of tools for linear algebra. It is largely compatible with + MATLAB-style workflows, so many existing scripts run with little or no change. +

    +
    + + Download + + + Documentation + + + Contribute + +
    +
    +
    +
    + Math graph +
    +
    +
    +
    +

    Plotting & visualization

    +

    High-level 2-D and 3-D plotting commands are built right in.

    +
    +
    +
    +
    +
    +
    + + +
    + + +
    +
    +
    +

    Matrix & vector computation

    +

    First-class arrays with linear algebra for systems, decompositions, and transforms.

    +
    +
    +
    +
    + Curve plot +
    +
    +
    + + +
    +
    +
    + Heat equation +
    +
    +
    +
    +

    Numerical methods

    +

    Tools for optimization, integration, differential equations, and statistics.

    +
    +
    +
    + + +
    +
    +
    +

    MATLAB-compatible scripting

    +

    Run many existing MATLAB-style scripts with little or no modification.

    +
    +
    +
    +
    + Partial differential equation +
    +
    +
    + +
    + +
    +