These changes implement the design of the home page presented as part
of the proposal "Differentiate products more clearly", sent to the
Guix development mailing list in October 2023 (see
* website/apps/base/templates/home.scm (home-t):
+ Rewrite summary.
+ Add new section: Give Users Control.
+ Add new section: Reproducible Outputs.
+ Add new section: One Language for Everything.
+ Add new section: All of It, Free Software.
+ Add new section: Get Guix.
+ Add new section: Get the Guix System.
+ Restyle section: GNU Guix in Your Field.
+ Restyle section: Instructional Videos.
+ Restyle section: Blog.
+ Restyle section: Contact.
+ Remove section: Discover Guix (screenshots will be presented as
part of the future Guix System home page, "Instructional Videos"
section was converted into an independent section, and "GNU Guix
in other GNU/Linux distros" was removed (see below)).
+ Remove section: GNU Guix in other GNU/Linux distros (the new
section "Get Guix" serves the same purpose).
* website/themes/initial/css/common.css: Update style accordingly.
* website/themes/initial/css/index.css: Likewise.
The following files are new:
* website/static/base/img/background-pattern-white-dots.svg
* website/static/base/img/give-users-control.svg
* website/static/base/img/guile-logo-outlined-floating.svg
* website/static/base/img/guix-shell.svg
* website/static/base/img/guix-system-display.svg
* website/static/base/img/people-focused.svg
* website/static/base/img/reproducible-outputs-container.svg
* website/static/base/img/reproducible-outputs-package.svg
* website/static/base/img/reproducible-outputs-shell.svg
* website/static/base/img/reproducible-outputs-systems.svg
* website/static/base/img/timeline-lapse-arrow-down.svg
* website/static/base/img/timeline-lapse-arrow.svg
* website/static/base/img/timeline-lapse-dot-down.svg
* website/static/base/img/timeline-lapse-dot.svg
* website/themes/initial/img/background-pattern-checkerboard-dark.svg
* website/themes/initial/img/depression-shadow-bottom.png
* website/themes/initial/img/h-separator.svg
---
website/apps/base/templates/home.scm | 351 ++--
.../img/background-pattern-white-dots.svg | 397 +++++
.../static/base/img/give-users-control.svg | 528 ++++++
.../base/img/guile-logo-outlined-floating.svg | 144 ++
website/static/base/img/guix-shell.svg | 143 ++
.../static/base/img/guix-system-display.svg | 211 +++
website/static/base/img/people-focused.svg | 160 ++
.../img/reproducible-outputs-container.svg | 389 +++++
.../base/img/reproducible-outputs-package.svg | 215 +++
.../base/img/reproducible-outputs-shell.svg | 332 ++++
.../base/img/reproducible-outputs-systems.svg | 1412 +++++++++++++++++
.../base/img/timeline-lapse-arrow-down.svg | 108 ++
.../static/base/img/timeline-lapse-arrow.svg | 108 ++
.../base/img/timeline-lapse-dot-down.svg | 121 ++
.../static/base/img/timeline-lapse-dot.svg | 120 ++
website/themes/initial/css/common.css | 18 +
website/themes/initial/css/index.css | 293 +++-
.../background-pattern-checkerboard-dark.svg | 121 ++
.../initial/img/depression-shadow-bottom.png | Bin 0 -> 4220 bytes
website/themes/initial/img/h-separator.svg | 164 ++
20 files changed, 5154 insertions(+), 181 deletions(-)
create mode 100644 website/static/base/img/background-pattern-white-dots.svg
create mode 100644 website/static/base/img/give-users-control.svg
create mode 100644 website/static/base/img/guile-logo-outlined-floating.svg
create mode 100644 website/static/base/img/guix-shell.svg
create mode 100644 website/static/base/img/guix-system-display.svg
create mode 100644 website/static/base/img/people-focused.svg
create mode 100644 website/static/base/img/reproducible-outputs-container.svg
create mode 100644 website/static/base/img/reproducible-outputs-package.svg
create mode 100644 website/static/base/img/reproducible-outputs-shell.svg
create mode 100644 website/static/base/img/reproducible-outputs-systems.svg
create mode 100644 website/static/base/img/timeline-lapse-arrow-down.svg
create mode 100644 website/static/base/img/timeline-lapse-arrow.svg
create mode 100644 website/static/base/img/timeline-lapse-dot-down.svg
create mode 100644 website/static/base/img/timeline-lapse-dot.svg
create mode 100644 website/themes/initial/img/background-pattern-checkerboard-dark.svg
create mode 100644 website/themes/initial/img/depression-shadow-bottom.png
create mode 100644 website/themes/initial/img/h-separator.svg
Toggle diff (425 lines)
diff --git a/website/apps/base/templates/home.scm b/website/apps/base/templates/home.scm
index aa1fbb5..5840c29 100644
--- a/website/apps/base/templates/home.scm
+++ b/website/apps/base/templates/home.scm
@@ -41,68 +41,32 @@ management|Reproducibility") #\|)
(section
(@ (class "featured-content"))
,(G_ `(h2 (@ (class "a11y-offset")) "Summary"))
- (ul
- ,(G_
- `(li
- ,(G_ `(b "Liberating."))
- " Guix is a distribution of the "
- ,(G_ (link-yellow
- #:label "GNU operating system"
- #:url (gnu-url "gnu/about-gnu.html")))
- " developed by the "
- ,(G_ (link-yellow
- #:label "GNU Project"
- #:url (gnu-url)))
- "—which respects the "
- ,(G_ (link-yellow
- #:label "freedom of computer users"
- #:url (gnu-url "distros/free-system-distribution-\
-guidelines.html")))
- ". "))
-
- ;; TRANSLATORS: Package Management, Features and Using the
- ;; Configuration System are section names in the English (en)
- ;; manual.
- ,(G_
- `(li
- ,(G_ `(b "Dependable."))
- " Guix "
- ,(G_ (manual-link-yellow "supports"
- (G_ "en")
- (G_ "Package-Management.html")))
- " transactional upgrades and roll-backs, unprivileged \
-package management, "
- ,(G_ (manual-link-yellow "and more"
- (G_ "en")
- (G_ "Features.html")))
- ". When used as a standalone distribution, Guix supports "
- ,(G_ (manual-link-yellow "declarative system configuration"
- (G_ "en")
- (G_ "Using-the-Configuration-System.html")))
- " for transparent and reproducible operating systems."))
-
- ;; TRANSLATORS: Defining Packages and System Configuration are
- ;; section names in the English (en) manual.
+
+ (div
+ (@ (class "summary centered-block centered-text limit-width"))
,(G_
- `(li
- ,(G_ `(b "Hackable."))
- " It provides "
- ,(G_ (link-yellow
- #:label "Guile Scheme"
- #:url (gnu-url "software/guile/")))
- " APIs, including high-level embedded domain-specific \
-languages (EDSLs) to "
- ,(G_ (manual-link-yellow "define packages"
- (G_ "en")
- (G_ "Defining-Packages.html")))
+ `(p
+ "GNU Guix is a "
+ ,(G_ (link-yellow #:label "package manager"
+ #:url (manual-devel-url "Package-Management.html")))
+ " for GNU/Linux systems. It is designed to give users "
+ ,(G_ `(b "more control")) ; TODO: Link to relevant documentation.
+ " over their general purpose and specialized computing \
+environments, and make these easier to "
+ ,(G_ (link-yellow #:label "reproduce over time"
+ #:url (manual-devel-url "Invoking-guix-time_002dmachine.html")))
" and "
- ,(G_ (manual-link-yellow "whole-system configurations"
- (G_ "en")
- (G_ "System-Configuration.html")))
- ".")))
+ ,(G_ (link-yellow #:label "deploy"
+ #:url (manual-devel-url "Invoking-guix-deploy.html")))
+ " to one or many devices.")))
(div
(@ (class "action-box centered-text"))
+ ,(button-big
+ #:label (C_ "button" "FEATURES")
+ #:url (manual-devel-url "Features.html")
+ #:light #true)
+ " " ; A space for readability in non-CSS browsers.
,(button-big
#:label (C_ "button" "DOWNLOAD")
#:url (guix-url "download/")
@@ -113,63 +77,147 @@ languages (EDSLs) to "
#:url (guix-url "contribute/")
#:light #true)))
- ;; Discover Guix.
+ ;; Give Users control.
(section
- (@ (class "discovery-box"))
- ,(G_ `(h2 "Discover Guix"))
-
- ,(G_
- `(p
- (@ (class "limit-width centered-block"))
- "Guix comes with thousands of packages which include \
-applications, system tools, documentation, fonts, and other digital \
-goods readily available for installing with the "
- ,(G_ (link-yellow #:label "GNU Guix"
- #:url (identity "#guix-in-other-distros")))
- " package manager."))
-
- ,(screenshots-box (context-datum context "screenshots"))
+ (@ (class "panel panel-dark"))
(div
- (@ (class "fields-box"))
-
- ,(button-big
- #:label (C_ "button" "ALL PACKAGES")
- #:url (packages-url)
- #:light #true))
+ (@ (class "limit-width centered-block"))
+
+ (div
+ ,(G_ '(h2 "Give Users Control"))
+ ,(G_ '(p "Users can manage their own packages independently \
+from each other, without superuser privileges."))
+ ,(button-big
+ #:label (C_ "button" "LEARN MORE")
+ #:url (manual-devel-url "Package-Management.html")
+ #:light #true))
+
+ (img
+ (@ (src ,(guix-url "static/base/img/give-users-control.svg"))
+ (alt "")))))
+
+ ;; Reproducible Outputs.
+ (section
+ (@ (id "reproducible-outputs")
+ (class "discovery-box"))
- ,(horizontal-separator #:light #true)
+ (div
+ (@ (class "limit-width centered-block"))
- ,(G_ '(h3 "Instructional videos"))
+ ,(G_ '(h2 "Reproducible Outputs"))
+ ,(G_
+ `(p "Guix provides "
+ ,(G_ (link-yellow #:label "thousands of packages"
+ #:url (packages-url)))
+ " which include desktop environments, applications, \
+system tools, programming languages and their packages, data and other \
+digital artifacts which work as the building blocks for creating "
+ ,(G_ (link-yellow #:label "reproducible"
+ #:url "https://en.wikipedia.org/wiki/Reproducible_builds"))
+ " shell environments, containers and systems for \
+different computing needs.")))
(div
- ,@(map
- (lambda (item)
- (cond ((video? item) (video-preview item))
- (else (playlist-preview item))))
- (context-datum context "videos")))
+ (@ (class "grid centered-content text-larger"))
+
+ (div (@ (class "stack"))
+ ,(G_ (link-yellow #:label "Package"
+ #:url (manual-devel-url "Defining-Packages.html")))
+ (img
+ (@ (src ,(guix-url "static/base/img/reproducible-outputs-package.svg"))
+ (alt ""))))
+ (div (@ (class "stack"))
+ ,(G_ (link-yellow #:label "Shell Environment"
+ #:url (manual-devel-url "Invoking-guix-shell.html")))
+ (img
+ (@ (src ,(guix-url "static/base/img/reproducible-outputs-shell.svg"))
+ (alt ""))))
+ (div (@ (class "stack"))
+ ,(G_ (link-yellow #:label "Container"
+ #:url (manual-devel-url "Invoking-guix-container.html")))
+ (img
+ (@ (src ,(guix-url "static/base/img/reproducible-outputs-container.svg"))
+ (alt ""))))
+ (div (@ (class "stack"))
+ ,(G_ (link-yellow #:label "Systems"
+ #:url (manual-devel-url "System-Configuration.html")))
+ (img
+ (@ (src ,(guix-url "static/base/img/reproducible-outputs-systems.svg"))
+ (alt "")))))
(div
- (@ (class "fields-box"))
+ (@ (id "timeline")
+ (class "limit-width text-larger"))
- ,(button-big
- #:label (C_ "button" "ALL VIDEOS")
- #:url (guix-url "videos/")
- #:light #true))
+ ,(G_ '(p (@ (id "timeline-today")) "Build an environment today"))
+ (p (@ (id "timeline-lapse"))
+ ,(G_ (link-yellow #:label "Reproduce in time"
+ #:url (manual-devel-url "Invoking-guix-time_002dmachine.html"))))
+ ,(G_ '(p (@ (id "timeline-future")) "Get the same environment 50 years later")))
- ,(horizontal-separator #:light #true)
+ ,(button-big
+ #:label (C_ "button" "EXPLORE PACKAGES")
+ #:url (packages-url)
+ #:light #true))
- ;; Guix in different fields.
- ,(G_ `(h3 "GNU Guix in your field"))
+ ;; One Language for Everything.
+ (section
+ (@ (id "one-language")
+ (class "panel panel-dark"))
- ,(G_
- `(p
- (@ (class "limit-width centered-block"))
- "Read some stories about how people are using GNU Guix in
-their daily lives."))
+ (div
+ (@ (class " limit-width centered-block"))
+
+ (div
+ ,(G_ '(h2 "One Language for Everything"))
+ ,(G_ '(p "Use Guile Scheme APIs, including high-level embedded \
+domain-specific languages (EDSLs) to define packages and whole-system \
+configurations."))
+ ,(button-big
+ #:label (C_ "button" "CHECK THE API")
+ #:url (manual-devel-url "Programming-Interface.html")
+ #:light #true)
+ " " ; A space for readability in non-CSS browsers.
+ ,(button-big
+ #:label (C_ "button" "WHAT'S GUILE")
+ #:url (gnu-url "software/guile/")
+ #:light #true))
+
+ (img
+ (@ (src ,(guix-url "static/base/img/guile-logo-outlined-floating.svg"))
+ (alt "")))))
+
+ ;; All of It, Free Software.
+ (section
+ (@ (id "all-free-software")
+ (class "panel panel-light"))
(div
- (@ (class "fields-box"))
+ (@ (class " limit-width centered-block"))
+
+ (div
+ ,(G_ '(h2 "All of It, Free Software"))
+ ,(G_ '(p "Guix is a GNU Project—which respects the freedom of \
+computer users. You are free to use, study, modify, and share Guix and \
+all the packages it provides."))
+ ,(button-big
+ #:label (C_ "button" "LEARN MORE")
+ #:url (gnu-url "philosophy/free-sw.en.html")))
+
+ (img
+ (@ (src ,(guix-url "static/base/img/people-focused.svg"))
+ (alt "")))))
+
+ ;; GNU Guix in Your Field.
+ (section
+ (@ (id "guix-in-your-field")
+ (class "panel-dark"))
+
+ ,(G_ '(h2 "GNU Guix in Your Field"))
+
+ (div
+ (@ (class "limit-width centered-block"))
" " ; A space for readability in non-CSS browsers (same below).
,(button-big
@@ -195,52 +243,84 @@ their daily lives."))
,(button-big
#:label (C_ "button" "ALL FIELDS...")
#:url (guix-url "blog/")
- #:light #true))
+ #:light #true)))
- ,(horizontal-separator #:light #true)
+ ;; Get Guix.
+ (section
+ (@ (class "panel panel-dark"))
- ;; Using Guix in other distros.
- ,(G_
- `(h3
- (@ (id "guix-in-other-distros"))
- "GNU Guix in other GNU/Linux distros"))
+ (div
+ (@ (class "limit-width centered-block"))
+
+ (div
+ ,(G_ '(h2 "Get Guix"))
+ ,(G_ '(p "You can use Guix on top of any GNU/Linux \
+distribution of your preference. It won't clash with your distro's \
+package manager."))
+ ,(button-big
+ #:label (C_ "button" "DOWNLOAD")
+ #:url (guix-url "download/")
+ #:light #true))
+
+ (img
+ (@ (src ,(guix-url "static/base/img/guix-shell.svg"))
+ (alt "")))))
+
+ ;; Get the Guix System.
+ (section
+ (@ (id "get-guix-system")
+ (class "panel panel-dark"))
(div
- (@ (class "info-box"))
- (video
- (@ (src "https://audio-video.gnu.org/video/misc/2016-07__GNU_Guix_Demo_2.webm")
- (poster ,(guix-url "static/media/img/guix-demo.png"))
- (controls "controls"))
- ,(G_
- `(p
- "Video: "
- ,(G_ (link-yellow
- #:label "Demo of Guix in another GNU/Linux distribution"
- #:url "https://audio-video.gnu.org/video/misc/\
-2016-07__GNU_Guix_Demo_2.webm"))
- " (1 minute, 30 seconds)."))))
+ (@ (class "limit-width centered-block"))
+
+ (div
+ ,(G_ '(h2 "Get the Guix System"))
+ ,(G_ '(p "A complete GNU operating system harnessing all the \
+capabilities of the Guix software. Spawned by Guix itself."))
+ ,(button-big
+ #:label (C_ "button" "OVERVIEW")
+ #:url (manual-devel-url "System-Installation.html")
+ #:light #true)
+ " " ; A space for readability in non-CSS browsers.
+ ,(button-big
+ #:label (C_ "button" "DOWNLOAD")
+ #:url (guix-url "download/")
+ #:light #true))
+
+ (img
+ (@ (src ,(guix-url "static/base/img/guix-system-display.svg"))
+ (alt "")))))
+
+ ;; Instructional Videos.
+ (section
+ (@ (id "instructional-videos")
+ (class "discovery-box"))
(div
- (@ (class "info-box justify-left"))
- ,(G_ `(p
- "If you don't use GNU Guix as a standalone GNU/Linux \
-distribution, you still can use it as a package manager on top of any \
-GNU/Linux distribution. This way, you can benefit from all its conveniences."))
+ (@ (class "limit-width centered-block"))
- ,(G_ `(p
- "Guix won't interfere with the package manager that comes \
-with your distribution. They can live together.")))
+ ,(G_ '(h2 "Instructional Videos")))
(div
- (@ (class "action-box centered-text"))
+ ,@(map
+ (lambda (item)
+ (cond ((video? item) (video-preview item))
+ (else (playlist-preview item))))
+ (context-datum context "videos")))
+
+ (div
+ (@ (class "action-box"))
+
,(button-big
- #:label (C_ "button" "TRY IT OUT!")
- #:url (guix-url "download/")
+ #:label (C_ "button" "ALL VIDEOS")
+ #:url (guix-url "videos/")
#:light #true)))
;; Latest Blog posts.
(section
- (@ (class "centered-text"))
+ (@ (id "blog-latest-posts")
+ (class "panel-dark centered-text"))
,(G_ `(h2 "Blog"))
,@(map post-preview (context-datum context "posts"))
@@ -249,11 +329,13 @@ with your distribution. They can live together.")))
(@ (class "action-box centered-text"))
,(button-big
#:label (C_ "button" "ALL POSTS")
- #:url (guix-url "blog/"))))
+ #:url (guix-url "blog/")
+ #:light #true)))
;; Contact info.
(section
- (@ (class "contact-box centered-text"))
+ (@ (id "contact-info")
+ (class "panel-dark centered-text"))
,(G_ `(h2 "Contact"))
,@(map contact-preview (context-datum context "contact-media"))
@@ -262,4 +344,5 @@ with your distribution. They can live together.")))
(@ (class "action-box centered-text"))
,(button-big
#:label (C_ "button" "ALL CONTACT MEDIA")
- #:url (guix-url "contact/")))))))
+ #:url (guix-url "contact/")
+ #:light #true))))))
diff --git a/website/stat
