From patchwork Wed Jul 31 16:18:20 2024 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Patchwork-Submitter: "ashish.is--- via Guix-patches\" via" X-Patchwork-Id: 66589 Return-Path: X-Original-To: patchwork@mira.cbaines.net Delivered-To: patchwork@mira.cbaines.net Received: by mira.cbaines.net (Postfix, from userid 113) id 69B8427BBEA; Wed, 31 Jul 2024 17:22:17 +0100 (BST) X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on mira.cbaines.net X-Spam-Level: X-Spam-Status: No, score=-6.4 required=5.0 tests=BAYES_00,DKIM_INVALID, DKIM_SIGNED,FREEMAIL_FROM,MAILING_LIST_MULTI, RCVD_IN_VALIDITY_CERTIFIED,RCVD_IN_VALIDITY_RPBL,RCVD_IN_VALIDITY_SAFE, SPF_HELO_PASS,URIBL_BLOCKED autolearn=ham autolearn_force=no version=3.4.6 Received: from lists.gnu.org (lists.gnu.org [209.51.188.17]) by mira.cbaines.net (Postfix) with ESMTPS id 7CCC927BBE9 for ; Wed, 31 Jul 2024 17:22:11 +0100 (BST) Received: from localhost ([::1] helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1sZC5G-0000Wr-5U; Wed, 31 Jul 2024 12:21:50 -0400 Received: from eggs.gnu.org ([2001:470:142:3::10]) by lists.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256) (Exim 4.90_1) (envelope-from ) id 1sZC5D-0000WL-KH for guix-patches@gnu.org; Wed, 31 Jul 2024 12:21:48 -0400 Received: from debbugs.gnu.org ([2001:470:142:5::43]) by eggs.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_128_GCM_SHA256:128) (Exim 4.90_1) (envelope-from ) id 1sZC5D-0001Bk-8k for guix-patches@gnu.org; Wed, 31 Jul 2024 12:21:47 -0400 DKIM-Signature: v=1; a=rsa-sha256; q=dns/txt; c=relaxed/relaxed; d=debbugs.gnu.org; s=debbugs-gnu-org; h=MIME-Version:Date:From:To:In-Reply-To:References:Subject; bh=yN8RalcgaliluPbsmnneDyLa6vYSlPyy/3+6BUmuw/w=; b=s8UddStqUiC01gqxiJcpvYM5tR5tucZKhZN4IpLuLxNd0nO9FJg/OyZ+d2qf3u7M3zh3GL7yob2Es/C8/sezWlHB1VhSrusgyHw2CFrSQokvPBsBwb/tMDgdFkXaMHpqsHITUmiVNFLt9j2L8jGh/w2Fy6rzBsjlFeOVWYLenHgt+UoIEEtOEjpTSi1H26Ku9g9R22jkdUwqU0KcDNsaGzIx/trddulLTHPHsfQsSUq2vTEb1M7YuczlJaidg6Xfq+yhSsaWJVSdFM4PKt3Bd+D0i++ELd4keT8FTkk59CLAPhXe3hvDGRQRL4XSafWhWitFAMsi6a9+cnJMR6lJVA==; Received: from Debian-debbugs by debbugs.gnu.org with local (Exim 4.84_2) (envelope-from ) id 1sZC5S-0004k2-HK for guix-patches@gnu.org; Wed, 31 Jul 2024 12:22:02 -0400 X-Loop: help-debbugs@gnu.org Subject: [bug#72314] [PATCH v2 1/3] website: Redesign home page. References: <20240726212406.26104-1-sirgazil@zoho.com> In-Reply-To: <20240726212406.26104-1-sirgazil@zoho.com> Resent-From: sirgazil@zoho.com Original-Sender: "Debbugs-submit" Resent-CC: guix-patches@gnu.org Resent-Date: Wed, 31 Jul 2024 16:22:02 +0000 Resent-Message-ID: Resent-Sender: help-debbugs@gnu.org X-GNU-PR-Message: followup 72314 X-GNU-PR-Package: guix-patches X-GNU-PR-Keywords: patch To: 72314@debbugs.gnu.org Cc: Luis Felipe Received: via spool by 72314-submit@debbugs.gnu.org id=B72314.172244286418115 (code B ref 72314); Wed, 31 Jul 2024 16:22:02 +0000 Received: (at 72314) by debbugs.gnu.org; 31 Jul 2024 16:21:04 +0000 Received: from localhost ([127.0.0.1]:50179 helo=debbugs.gnu.org) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1sZC4W-0004i7-Gx for submit@debbugs.gnu.org; Wed, 31 Jul 2024 12:21:04 -0400 Received: from sender4-pp-o91.zoho.com ([136.143.188.91]:25171) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1sZC4T-0004hX-Nq for 72314@debbugs.gnu.org; Wed, 31 Jul 2024 12:21:02 -0400 Delivered-To: sirgazil@zoho.com ARC-Seal: i=1; a=rsa-sha256; t=1722442842; cv=none; d=zohomail.com; s=zohoarc; b=Vd/YS64NrNtbDhxnRPbYyCQj7TtR3RwpcIFeXcZQnwVSQxkjKQTsuGbjVjTiVJkO6WrZBPw/vKCzg6F3FHasCDKUwemdNNs7sGgVcr/P+nOXRBOyQ1bCHe8BWNdf5jAQGR7IWdQXvp7XBtcaB07J9/TAdlhjv8vDcN+AOFydb9E= ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=zohomail.com; s=zohoarc; t=1722442842; h=Content-Type:Content-Transfer-Encoding:Cc:Cc:Date:Date:From:From:MIME-Version:Message-ID:Subject:Subject:To:To:Message-Id:Reply-To; bh=yN8RalcgaliluPbsmnneDyLa6vYSlPyy/3+6BUmuw/w=; b=CGOln5ddF4r8b0CZBX8NOt4us5vJBEup5JuaKkO1EvKMwj6M1AFtEZc0OH20TbVhpRjdvDJLaKFGhvYBZqmssJzK4sq3MsQnrgiOyxPstDnQ61BnLxMKaGvjbuvv1Nj7sdBscI38B1CCYFkt/c+Qkf63DmGBMUQdMOD1CcicUsc= ARC-Authentication-Results: i=1; mx.zohomail.com; dkim=pass header.i=zoho.com; spf=pass smtp.mailfrom=sirgazil@zoho.com; dmarc=pass header.from= DKIM-Signature: v=1; a=rsa-sha256; q=dns/txt; c=relaxed/relaxed; t=1722442842; s=zm2022; d=zoho.com; i=sirgazil@zoho.com; h=From:From:To:To:Cc:Cc:Subject:Subject:Date:Date:Message-ID:MIME-Version:Content-Type:Content-Transfer-Encoding:Feedback-ID:Message-Id:Reply-To; bh=yN8RalcgaliluPbsmnneDyLa6vYSlPyy/3+6BUmuw/w=; b=M0y6/fCLPKdE9iRPKAc2C3KSbpeIUJ16ca70oGxamNzQ3c8c7AQGDZXvqNCZlsla bOgOlWwfSct8pHmqKoSVvY5Q9aX4ExxIttNKqOdEUlqs5NpZ88xRhJcjLQ+ezcXzaMT WOW+WKAp1SNWUwy3bfcUAm0ocPiCOhA7/wyxXs58= Received: by mx.zohomail.com with SMTPS id 1722442840314212.23742957071738; Wed, 31 Jul 2024 09:20:40 -0700 (PDT) Date: Wed, 31 Jul 2024 11:18:20 -0500 Message-ID: <20240731161835.11144-1-sirgazil@zoho.com> X-Mailer: git-send-email 2.45.2 MIME-Version: 1.0 Feedback-ID: rr08011227e55f1b1e4a2dcb0648a76698000098a2ad47725ce3501beae7e07649acdf3cd5c043bd4c91b2ce:zu08011227034f2ec3923a3492a46fc3c50000d78f7be50975f859974445c4a3800c4df2bace6aac73ea8413:rf08011226b1d08eb4a19e526c6b275ac8000057f36737408fa584211e19ce24bd51db5ecde4531ff316de:ZohoMail X-ZohoMailClient: External X-BeenThere: debbugs-submit@debbugs.gnu.org X-Mailman-Version: 2.1.18 Precedence: list X-BeenThere: guix-patches@gnu.org List-Id: List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-to: sirgazil@zoho.com X-ACL-Warn: , sirgazil--- via Guix-patches X-Patchwork-Original-From: sirgazil--- via Guix-patches via From: "ashish.is--- via Guix-patches\" via" Errors-To: guix-patches-bounces+patchwork=mira.cbaines.net@gnu.org Sender: guix-patches-bounces+patchwork=mira.cbaines.net@gnu.org X-getmail-retrieved-from-mailbox: Patches From: Luis Felipe 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 https://lists.gnu.org/archive/html/guix-devel/2023-10/msg00133.html) * 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 | 380 +++-- .../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, 5182 insertions(+), 182 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 diff --git a/website/apps/base/templates/home.scm b/website/apps/base/templates/home.scm index aa1fbb5..4ea923c 100644 --- a/website/apps/base/templates/home.scm +++ b/website/apps/base/templates/home.scm @@ -41,68 +41,38 @@ 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_ (manual-link-yellow + "package manager" + (G_ "en") + (G_ "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_ (manual-link-yellow + "reproduce over time" + (G_ "en") + (G_ "Invoking-guix-time_002dmachine.html"))) " and " - ,(G_ (manual-link-yellow "whole-system configurations" - (G_ "en") - (G_ "System-Configuration.html"))) - "."))) + ,(G_ (manual-link-yellow + "deploy" + (G_ "en") + (G_ "Invoking-guix-deploy.html"))) + " to one or many devices."))) (div (@ (class "action-box centered-text")) + ,(button-big + #:label (C_ "button" "FEATURES") + #:url (G_ (manual-url-with-language (G_ "en") "Features.html")) + #:light #true) + " " ; A space for readability in non-CSS browsers. ,(button-big #:label (C_ "button" "DOWNLOAD") #:url (guix-url "download/") @@ -113,63 +83,166 @@ 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 on the same machine can manage their own \ +packages independently from each other, without superuser privileges.")) + ,(button-big + #:label (C_ "button" "LEARN MORE") + #:url (G_ (manual-url-with-language + (G_ "en") + "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_ (manual-link-yellow + "Package" + (G_ "en") + (G_ "Defining-Packages.html"))) + (img + (@ (src ,(guix-url "static/base/img/reproducible-outputs-package.svg")) + (alt "")))) + (div (@ (class "stack")) + ,(G_ (manual-link-yellow + "Shell Environment" + (G_ "en") + (G_ "Invoking-guix-shell.html"))) + (img + (@ (src ,(guix-url "static/base/img/reproducible-outputs-shell.svg")) + (alt "")))) + (div (@ (class "stack")) + ,(G_ (manual-link-yellow + "Container" + (G_ "en") + (G_ "Invoking-guix-container.html"))) + (img + (@ (src ,(guix-url "static/base/img/reproducible-outputs-container.svg")) + (alt "")))) + (div (@ (class "stack")) + ,(G_ (manual-link-yellow + "Systems" + (G_ "en") + (G_ "System-Configuration.html"))) + (img + (@ (src ,(guix-url "static/base/img/reproducible-outputs-systems.svg")) + (alt ""))))) (div - (@ (class "fields-box")) - - ,(button-big - #:label (C_ "button" "ALL VIDEOS") - #:url (guix-url "videos/") - #:light #true)) + (@ (id "timeline") + (class "limit-width text-larger")) + + ,(G_ '(p (@ (id "timeline-today")) "Build an environment today")) + (p (@ (id "timeline-lapse")) + ,(G_ (manual-link-yellow + "Reproduce in time" + (G_ "en") + (G_ "Invoking-guix-time_002dmachine.html")))) + ,(G_ `(p (@ (id "timeline-future")) + "Get the same environment in the future" + ;; TRANSLATORS: The * indicates there's more information in another place. + ,(G_ (link-yellow + #:label "*" + #:url (guix-url "blog/2024/adventures-on-the-quest-for-long-term-reproducible-deployment/")))))) + + ,(button-big + #:label (C_ "button" "EXPLORE PACKAGES") + #:url (packages-url) + #:light #true)) + + ;; One Language for Everything. + (section + (@ (id "one-language") + (class "panel panel-dark")) - ,(horizontal-separator #:light #true) + (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 (G_ (manual-url-with-language + (G_ "en") + "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")) - ;; Guix in different fields. - ,(G_ `(h3 "GNU Guix in your field")) + (div + (@ (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_ - `(p - (@ (class "limit-width centered-block")) - "Read some stories about how people are using GNU Guix in -their daily lives.")) + ,(G_ '(h2 "GNU Guix in Your Field")) (div - (@ (class "fields-box")) + (@ (class "limit-width centered-block")) " " ; A space for readability in non-CSS browsers (same below). ,(button-big @@ -195,52 +268,86 @@ 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 (G_ (manual-url-with-language + (G_ "en") + "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 +356,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 +371,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/static/base/img/background-pattern-white-dots.svg b/website/static/base/img/background-pattern-white-dots.svg new file mode 100644 index 0000000..2a25656 --- /dev/null +++ b/website/static/base/img/background-pattern-white-dots.svg @@ -0,0 +1,397 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/give-users-control.svg b/website/static/base/img/give-users-control.svg new file mode 100644 index 0000000..3286db1 --- /dev/null +++ b/website/static/base/img/give-users-control.svg @@ -0,0 +1,528 @@ + + + + + Guix · Give Users Control + + + + + + + + image/svg+xml + + Guix · Give Users Control + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/guile-logo-outlined-floating.svg b/website/static/base/img/guile-logo-outlined-floating.svg new file mode 100644 index 0000000..075c8f8 --- /dev/null +++ b/website/static/base/img/guile-logo-outlined-floating.svg @@ -0,0 +1,144 @@ + + + + + Guile logo · Outlined and floating + + + + + + + + image/svg+xml + + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + Guile logo · Outlined and floating + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/guix-shell.svg b/website/static/base/img/guix-shell.svg new file mode 100644 index 0000000..73a123e --- /dev/null +++ b/website/static/base/img/guix-shell.svg @@ -0,0 +1,143 @@ + + + + + Guix · Floating Guix Shell + + + + + + + + image/svg+xml + + Guix · Floating Guix Shell + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + x + + + + diff --git a/website/static/base/img/guix-system-display.svg b/website/static/base/img/guix-system-display.svg new file mode 100644 index 0000000..c905066 --- /dev/null +++ b/website/static/base/img/guix-system-display.svg @@ -0,0 +1,211 @@ + + + + + Guix System Display + + + + + + + + + + + + + + + + + image/svg+xml + + Guix System Display + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/people-focused.svg b/website/static/base/img/people-focused.svg new file mode 100644 index 0000000..40857ec --- /dev/null +++ b/website/static/base/img/people-focused.svg @@ -0,0 +1,160 @@ + + + + + Guix · People Focused + + + + + + + + image/svg+xml + + Guix · People Focused + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/reproducible-outputs-container.svg b/website/static/base/img/reproducible-outputs-container.svg new file mode 100644 index 0000000..7454875 --- /dev/null +++ b/website/static/base/img/reproducible-outputs-container.svg @@ -0,0 +1,389 @@ + + + + + Guix Reproducible Outputs · Container + + + + + + + + + + + + + + + + + + + image/svg+xml + + Guix Reproducible Outputs · Container + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/reproducible-outputs-package.svg b/website/static/base/img/reproducible-outputs-package.svg new file mode 100644 index 0000000..2f8770d --- /dev/null +++ b/website/static/base/img/reproducible-outputs-package.svg @@ -0,0 +1,215 @@ + + + + + Guix Reproducible Outputs · Package + + + + + + + + + + + + + + + + + + + image/svg+xml + + Guix Reproducible Outputs · Package + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/reproducible-outputs-shell.svg b/website/static/base/img/reproducible-outputs-shell.svg new file mode 100644 index 0000000..8af40e2 --- /dev/null +++ b/website/static/base/img/reproducible-outputs-shell.svg @@ -0,0 +1,332 @@ + + + + + Guix Reproducible Outputs · Shell + + + + + + + + + + + + + + + + + + + image/svg+xml + + Guix Reproducible Outputs · Shell + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/reproducible-outputs-systems.svg b/website/static/base/img/reproducible-outputs-systems.svg new file mode 100644 index 0000000..6244516 --- /dev/null +++ b/website/static/base/img/reproducible-outputs-systems.svg @@ -0,0 +1,1412 @@ + + + + + Guix Reproducible Outputs · Systems + + + + + + + + + + + + + + + + + + + image/svg+xml + + Guix Reproducible Outputs · Systems + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/timeline-lapse-arrow-down.svg b/website/static/base/img/timeline-lapse-arrow-down.svg new file mode 100644 index 0000000..9d9f563 --- /dev/null +++ b/website/static/base/img/timeline-lapse-arrow-down.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/timeline-lapse-arrow.svg b/website/static/base/img/timeline-lapse-arrow.svg new file mode 100644 index 0000000..13069d0 --- /dev/null +++ b/website/static/base/img/timeline-lapse-arrow.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/timeline-lapse-dot-down.svg b/website/static/base/img/timeline-lapse-dot-down.svg new file mode 100644 index 0000000..8f6eaf0 --- /dev/null +++ b/website/static/base/img/timeline-lapse-dot-down.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/base/img/timeline-lapse-dot.svg b/website/static/base/img/timeline-lapse-dot.svg new file mode 100644 index 0000000..ec166bb --- /dev/null +++ b/website/static/base/img/timeline-lapse-dot.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/website/themes/initial/css/common.css b/website/themes/initial/css/common.css index eaf4ed8..2e4c8db 100644 --- a/website/themes/initial/css/common.css +++ b/website/themes/initial/css/common.css @@ -21,6 +21,10 @@ margin-right: auto; } +.centered-content { + justify-content: center; +} + .centered-text { text-align: center; } @@ -33,6 +37,11 @@ clear: both; } +.grid { + display: flex; + flex-wrap: wrap; +} + .hidden { visibility: hidden; } @@ -142,6 +151,11 @@ box-sizing: border-box; } +.stack { + display: flex; + flex-direction: column; +} + .table-box { overflow-x: auto; } @@ -151,6 +165,10 @@ border-collapse: collapse; } +.text-larger { + font-size: larger; +} + .top-shadow-bg { background-image: url("../img/depression-shadow-top.png"); background-repeat: repeat-x; diff --git a/website/themes/initial/css/index.css b/website/themes/initial/css/index.css index 7cb96eb..a04f3b6 100644 --- a/website/themes/initial/css/index.css +++ b/website/themes/initial/css/index.css @@ -1,16 +1,121 @@ /* Public domain 2017. All rights waived */ h2 { - color: #4D4D4D; font-size: 2.5em; - margin: 50px 0px; + margin: 1.5em 0em; } -h3 { - color: #4D4D4D; - font-size: 2.0em; - font-weight: normal; - margin: 50px 0px; +#reproducible-outputs .grid { + margin: 3em auto 0em auto; +} + +#timeline { + display: flex; + flex-direction: column; + justify-content: center; + margin: 3em auto; +} + +#timeline-today { + border-color: #F4BB15; + border-radius: 0.3em; + border-style: none none solid none; + margin: auto; + max-width: 500px; + padding: 1em; +} + +#timeline-lapse { + background-image: url("../../../static/base/img/timeline-lapse-arrow-down.svg"), + url("../../../static/base/img/timeline-lapse-dot-down.svg"); + background-position-x: center, center; + background-position-y: bottom, top; + background-repeat: no-repeat, repeat-y; + margin: 2em auto; + max-width: 500px; + min-height: 100px; + padding: 2em 0em; +} + +#timeline-lapse a { + display: inline-block; + background-color: #3D3D3D; + border-radius: 0.3em; + padding: 0.5em; + vertical-align: middle; +} + +#timeline-future { + border-color: #F4BB15; + border-radius: 0.3em; + border-style: solid none none none; + margin: auto; + max-width: 500px; + padding: 1em; +} + +#one-language { + background-color: #3B285C; + background-image: url("../img/depression-shadow-top.png"), + url("../img/depression-shadow-bottom.png"), + url("../../../static/base/img/background-pattern-white-dots.svg"); + background-position: top, bottom, top; + background-repeat: repeat-x, repeat-x, repeat; + padding: 1em; +} + +#all-free-software { + background-color: #FFCC00; + background-image: url("../img/background-pattern-checkerboard-dark.svg"); + background-repeat: repeat; + padding: 1em; +} + +#guix-in-your-field { + background-image: url("../img/depression-shadow-top.png"); + background-position: top; + background-repeat: repeat-x; + text-align: center; + padding: 1em 1em 4.5em 1em; +} + +#get-guix-system { + background-color: #22241C; +} + +#blog-latest-posts, +#contact-info { + padding: 1em 0em; +} + +#blog-latest-posts .item-preview:link, +#blog-latest-posts .item-preview:visited, +#contact-info .item-preview:link, +#contact-info .item-preview:visited { + color: #E6E6E6; +} + +#blog-latest-posts .item-preview:active, +#blog-latest-posts .item-preview:focus, +#blog-latest-posts .item-preview:hover, +#contact-info .item-preview:active, +#contact-info .item-preview:focus, +#contact-info .item-preview:hover { + color: #1A1A1A; +} + +#blog-latest-posts .item-preview h3, +#contact-info .item-preview h3 { + color: #E6E6E6; +} + +#blog-latest-posts .item-preview:active h3, +#blog-latest-posts .item-preview:focus h3, +#blog-latest-posts .item-preview:hover h3, +#contact-info .item-preview:active h3, +#contact-info .item-preview:focus h3, +#contact-info .item-preview:hover h3 { + color: #1A1A1A; } .action-box { @@ -23,27 +128,81 @@ h3 { url("../img/featured-box-bg.png"); background-position: top, bottom; background-repeat: repeat, repeat-x; + border-color: black; + border-style: none none solid none; + border-width: thin; color: white; - font-size: 17px; - padding: 40px 20px; - position: relative; + padding: 1.5em 1em; } -.featured-content > ul { - list-style-image: url("../img/white-star.png"); - margin: auto; - max-width: 960px; +.featured-content .summary { + font-size: 1.5em; } -.featured-content li { - padding: 10px 0px; +.panel { + /* ... */ } -.h-separator { - display: block; - margin: auto; - padding: 60px 0px 30px 0px; - width: 100%; +.panel > div { + display: flex; + flex-direction: column; + justify-content: center; + padding: 4em 3em; + text-align: center; +} + +.panel h2 { + margin-bottom: 1em; + margin-top: 0em; +} + +.panel p { + font-size: 1.5em; + margin-bottom: 2em; +} + +.panel .button-big { + margin: 0em 1em 0em 0em; +} + +.panel-dark, +.panel-light { + border-color: black; + border-style: none none solid none; + border-width: thin; +} + +.panel-dark { + background-color: #1A1A1A; + background-image: url("../img/h-separator.svg"); + background-position: top center; + background-repeat: no-repeat; + color: #E6E6E6; +} + +.panel-dark h2 { + color: #E6E6E6; +} + +.panel-light { + background-color: #E6E6E6; + color: #1A1A1A; +} + +.panel-light h2 { + color: #1A1A1A; +} + +.panel-light .button-big:link, +.panel-light .button-big:visited { + border-color: #1A1A1A; +} + +.panel-light .button-big:active, +.panel-light .button-big:focus, +.panel-light .button-big:hover { + border-color: darkmagenta; + color: darkmagenta; } .button-big:link, @@ -56,8 +215,11 @@ h3 { background-image: url("../img/depression-shadow-top.png"), url("../img/noise-bg.png"); background-repeat: repeat-x, repeat; + border-color: black; + border-style: none none solid none; + border-width: thin; color: #E6E6E6; - padding: 40px 10px; + padding: 2em 1em 4em 1em; text-align: center; } @@ -100,27 +262,6 @@ h3 { box-shadow: 0 0 4px black; } -.fields-box { - padding: 40px 0px 0px 0px; -} - -.info-box { - display: inline-block; - margin: 0px 20px 20px 20px; - vertical-align: top; -} - -.contact-box { - background-color: #F5F5F5; - background-image: url("../img/h-separator-dark.png"), - url("../img/h-separator-dark.png"); - background-position: top center, bottom center; - background-repeat: no-repeat; - box-sizing: border-box; - color: #4D4D4D; - padding: 10px; -} - @media screen and (min-width: 300px) { @@ -157,13 +298,71 @@ h3 { } +@media screen and (min-width: 850px) { + #timeline { + flex-direction: row; + flex-wrap: no-wrap; + margin: 0em auto; + } + + #timeline-today { + flex: initial; + border-style: none solid none none; + max-width: 200px; + padding: 0em 1em 0em 0em; + margin-right: 0.5em; + text-align: right; + } + + #timeline-lapse { + flex: auto; + background-image: url("../../../static/base/img/timeline-lapse-arrow.svg"), + url("../../../static/base/img/timeline-lapse-dot.svg"); + background-position-x: right, left; + background-position-y: center, center; + background-repeat: no-repeat, repeat-x; + max-width: unset; + } + + #timeline-lapse a { + background-color: transparent; + } + + #timeline-future { + flex: initial; + border-style: none none none solid; + max-width: 200px; + padding: 0em 0em 0em 1em; + margin-left: 0.5em; + text-align: left; + } +} + + +@media screen and (min-width: 960px) { + .panel > div { + flex-direction: row; + text-align: left; + } +} + @media screen and (min-width: 1024px) { - .info-box { - width: 420px; + #blog-latest-posts .item-preview:active, + #blog-latest-posts .item-preview:focus, + #blog-latest-posts .item-preview:hover, + #contact-info .item-preview:active, + #contact-info .item-preview:focus, + #contact-info .item-preview:hover { + color: #E6E6E6; } - .h-separator { - width: auto; + #blog-latest-posts .item-preview:active h3, + #blog-latest-posts .item-preview:focus h3, + #blog-latest-posts .item-preview:hover h3, + #contact-info .item-preview:active h3, + #contact-info .item-preview:focus h3, + #contact-info .item-preview:hover h3 { + color: #E6E6E6; } } diff --git a/website/themes/initial/img/background-pattern-checkerboard-dark.svg b/website/themes/initial/img/background-pattern-checkerboard-dark.svg new file mode 100644 index 0000000..0ef53d5 --- /dev/null +++ b/website/themes/initial/img/background-pattern-checkerboard-dark.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/website/themes/initial/img/depression-shadow-bottom.png b/website/themes/initial/img/depression-shadow-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..33ac067aa3a669c4e74d5e7ae379224885f83ed8 GIT binary patch literal 4220 zcmeHKYitx%6rL(lTB(8&1p{_EivsHGy!J6O?$ScHbXS>DX@wS1xI1&V9opR)W@o!Y z35cLkic;_u6bZgTF$5n)A{ZZ_fFcSuU=Xz;h;5MS4}2ncXZnsNriuLPCcAUzobP=1 zobR4{vv+xENpVj0HQ5-3F8;XhYuNyevi9?C(vV8eR+jB9i(yH&|+#W#LWdd z#G$3eFw8mX^x#*(W-MWdUti#86Mci)ULQ{8_py*?+>u;RIvS^7`% zt8FdEUfHy46Fy||68>g>!dv0x=Wop>qXGW(?(GX3x2KnsQrstPBQrf;`O21WTeEj_ z!!tAQr5~7hZ{A1y*zdN#`s=RLExNEuArMntu&kQX7Znj?8^2Bg%-IL>14qI`bZ^n@|Bcz9{2L9!F;)zQ~ zHQv7ej;ET8$Gq)(=ZxIndgI5lHwX_7y6V+IS;Up)w@n`9i@wqJd`0-c;-kCskN(X6-?3XQ`;YDx|5Rti|0x z(W208#dXwo7#7I4bRgG26OY0wH4!A*x4%Q+suCn-dL>%Y3t_byt~X#=eMz}oUn2_& zkv}mzV2Owz4o!et@!CXEw1R}gE26P&rU=}Dm^DG7LMp`zH3Q-vx5rJBMV4B}5)-rW zfT6_1>7gl|6zDBTRGX$QQdByfcBeVFW>is(AP5xAQY=d%1esirFo8uTk}jK~gChi! zvZ3mxswHrn6GXL?86*hg$Gh^2>yp$>pGbD9fb^g&pi_*Srs8p`cSO=GszW553H@tC zvK;MFYC246DMN-ubueMNdQ&KJcf6i5YMpWvnS!-2j-W|2E7NDn;)qn*9brpQrN(t9 z3W?nZX{xavvHIj@dz^B5CxXJedHbNdYInd0B}rmPlT&tjkx-DZ=NA=CRu$11(md_) z#(WIPd4WQDq8vl=F~64-gcyj@T$BYo(~BySNSYuaLz@bbyH&&^L|NVgy)wyrp-g%N zz>|WP1|*c(n3sn%4WXwO#WX`jT?uM?XJu0!y1wrM19}p@1MURZXO<9!I$v zhh-+P)nxoEBe0y{r+E(=vOS;~&`6?Av^g2t&G{UUy(}Us1_=x7K1BqM9n~Th8W5P8 zQLbsVLBdW6wn&#(kzqwIP10VG?uFMBHMZct(DvrR z1072qR+DJ{1&*m>N0q_(9d8}4wW_m~aNOAxB9J>uNP;@3IC&zj4wqaF5>*hL9-Zyl zWmo^D75p4a$2fr}y-|fBJscAwf#UO%T-5IsfCsQp5c;wwwV0U(2AoudbVORA_H?wu z$2$u(p)WdJ4eeDxf|0bJ{HI`4XTg+xW^`2?p#Gsrzyb6+WKdj(4IN(SETp;*!%ofY zW9I^XI@jU?&VZ-~Ch3>H19A<>)h`A51s>?G0lE66K)=8P-Sxl8mECilf(i65D2*;l zVM*JGE?R@5w-$%6u~;s~ta$OzK4i(#!<9*NJ3DNDGbWE;YawH%8Ig)If5;p)Y$$tR z>n&T6>H0`$Qu+8#Wo7Q%xd6Xt3r*AduuZETY0DM{?|;bk`Qhf2>r4hVas$?Mk{ovq PMPQMllF;VKbC>=NU6SPW literal 0 HcmV?d00001 diff --git a/website/themes/initial/img/h-separator.svg b/website/themes/initial/img/h-separator.svg new file mode 100644 index 0000000..1209605 --- /dev/null +++ b/website/themes/initial/img/h-separator.svg @@ -0,0 +1,164 @@ + + + + + Guix · Horizontal Separator + + + + + + + + + + + + + + + image/svg+xml + + Guix · Horizontal Separator + + 2023-09-21 + + + Luis Felipe López Acevedo + + + en + + + + + + + + + + + + + + + + + +