From b970a8bc3b97b1d00dfe3ba1ca776fff93ad3100 Mon Sep 17 00:00:00 2001 From: Arthur Le Meur Date: Thu, 11 Jul 2024 09:58:15 +0200 Subject: [PATCH 01/13] WIP up homepage --- assets/scss/_styles_project.scss | 225 ++++++++++++++++ content/en/_index.html | 446 +++++++++++++++++-------------- 2 files changed, 476 insertions(+), 195 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 67fd525b..a0a1cb5c 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -187,3 +187,228 @@ kbd { .gray{ color: $gray; } + + +.indexHeading { + padding: 0 40px; + color: $secondary; + + h1 { + font-weight: bold; + font-size: 45px; + } + + h2 { + font-size: 18px; + } +} + +.downloadPanel { + margin-top: 50px; + position: absolute; + left: -20px; + width: 45dvw; + + > div { + padding-left: 100px; + height: 100px; + background-color: $secondary; + border-top: 1px solid white; + color: white; + + &:nth-child(1) { + border-top: 0; + } + + h4 { + margin: 0; + } + + i { + font-size: 2rem; + } + } + + > div, ul { + display: flex; + align-items: center; + gap: 50px; + } + + ul { + list-style: none; + margin: 0; + a { + color: orange; + &:before { + content: "→"; + margin-right: 10px; + } + } + } +} + +.col { + padding: 0; +} + +.row { + margin: 0; +} + +.bandeau { + display: flex; + align-items: center; + margin: auto; + color: $secondary; + background-color: $primary; + height: 500px; + gap: 20px; + padding: 0 100px; + + button { + color: white; + background-color: $secondary; + height: 50px; + border-radius: 10px; + border-style: none; + display: flex; + align-items: center; + justify-content: center; + padding: 0 20px; + + h4 { + margin: 0; + } + &:after { + content: "→"; + margin-right: 10px; + border: 1px solid orange; + background-color: orange; + color: $secondary; + border-radius: 50%; + margin-left: 30px; + padding: 0 4px; + font-weight: bold; + } + } + + :nth-child(1) { + flex: 2; + } + + &-element { + flex: 1; + background-color: white; + border-radius: 10px; + position: relative; + height: 280px; + padding-top: 50px; + text-align: center; + + i { + position: absolute; + transform: translate(-50%, -50%); + top: -10px; + left: 50%; + font-size: 5rem; + } + + ul { + text-align: start; + padding-left: 20px; + + li { + font-size: 14px; + &:before { + content: "✓"; + margin-right: 5px; + } + } + } + } +} + + +.carousel { + position: relative; + width: 100%; + // overflow: hidden; + display: flex; + justify-content: center; + border-radius: 10px; + margin: 50px 0; + + button { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); + border: none; + color: white; + padding: 2px 10px; + cursor: pointer; + border-radius: 50%; + } + + button.prev { + left: 350px; + z-index: 10; + } + + button.next { + right: 350px; + z-index: 10; + } + + button:hover { + background-color: rgba(0, 0, 0, 0.8); + } +} + +.carousel-images { + display: flex; + transition: transform 0.5s ease-in-out; + width: 800px; + height: 100%; +} + +.carousel-images img { + width: 100%; + flex-shrink: 0; +} + +.carousel-comment { + width: 600px; + flex-shrink: 0; + margin: 0 100px; + border-radius: 10px; + background-color: $primary; + padding: 20px; + position: relative; + height: 200px; + + &:before { + content: ""; + width: 80px; + height: 50px; + border-radius: 40px; + background-color: orange; + position: absolute; + top: -20px; + left: -40px; + z-index: -1; + } + + &:after { + content: ""; + width: 80px; + height: 50px; + border-radius: 40px; + background-color: orange; + position: absolute; + bottom: -20px; + right: -40px; + z-index: -1; + } +} diff --git a/content/en/_index.html b/content/en/_index.html index cdc17a48..c81af134 100644 --- a/content/en/_index.html +++ b/content/en/_index.html @@ -4,250 +4,306 @@ +++
-
-
-

logo of Thorium Reader -Looking to escape into a new novel, catch up on reading for class, or explore a new topic?
Thorium Reader has got you covered!
-

- Completely free, with no ads or data leaks to worry about. Perfect for heavy readers, library-goers, and students alike! - Developed by EDRLab, a non-profit dedicated to open source software and standards for the publishing industry.

- -
-
- -
- -
- -
-

Windows

-
- - -
- -
- -
-
- -
-

Mac

-
- - -
- -
- -
-
- -
-

Linux

-
- - -
- -
-
-

More download options and informations available from the Thorium Reader GitHub Release Page.

- -
-

- Thorium 3 documentation is available as EPUB, different translations are available thru the Thorium documentation catalog. You can Add Documentation catalog to Thorium (OPDS link) or browse English documentation inline within the Readium web reader.

- -

- - -
-
+
+
+
+

Completely free, with no ads or data leaks to worry about

+

Perfect for heavy readers, library-goers, and students alike!

+
+
+ +
+

Download

+
+ +
+ +

Windows

+ +
+ +
+ +

Mac

+ +
+ +
+ +

Mac

+ +
+ +
+
+
+ logo of Thorium Reader +
+
+
- - -
-
-
- - - -
-
- -
-

Reader first

-
-
    -
  • Open & Read
  • -
  • Where Am I feature
  • -
  • Book information panel
  • -
  • Add you catalogs
  • -
  • 20+ languages
  • -
  • Adjust text aspect to your needs
  • -
  • Screen reader support
  • -
- -
-

Read more …

-
- -
-
- -
-

Annotations

-
-
    -
  • Quick highlight & anotate
  • -
  • Margin display distraction free
  • -
  • Serial anotator mode
  • -
  • Coming soon: export & import
  • -
+ +
+
+
+
+

Thorium 3

+

Documentation is available as EPUB, different translations are available thru the Thorium documentation catalog.

+ +
+
+ +

Reader first

+
+
    +
  • Open & Read
  • +
  • Where Am I feature
  • +
  • Book information panel
  • +
  • Add you catalogs
  • +
  • 20+ languages
  • +
  • Adjust text aspect to your needs
  • +
  • Screen reader support
  • +
+ +
+ +
+
+ +

Annotations

+
+
    +
  • Quick highlight & anotate
  • +
  • Margin display distraction free
  • +
  • Serial anotator mode
  • +
  • Coming soon: export & import
  • +
+ +
+ +
+ + +
+ +

3.0 new features

+
+
    +
  • Modern UI
  • +
  • Dark & light theme
  • +
  • Panel docking to your conveniance
  • +
  • Onboarding wizard
  • + +
+ +
+ +
+ + + + +
+
+
+
+

From Our Partners

+ -

Read more …

-
+
+ - - - - - - + \ No newline at end of file From 33145ac47033e5388f69e169c757e462b78e56dd Mon Sep 17 00:00:00 2001 From: Arthur Le Meur Date: Mon, 15 Jul 2024 14:41:52 +0200 Subject: [PATCH 02/13] up footer + about page --- assets/scss/_styles_project.scss | 409 +++++++++++++++++++++++++++---- config.toml | 1 + content/en/_index.html | 87 ++----- content/en/about/_index.html | 151 +++++++++--- i18n/en.toml | 3 + layouts/_default/baseof.html | 2 +- layouts/docs/baseof.html | 2 +- layouts/partials/footer.html | 104 ++++++-- layouts/shortcodes/reviews.html | 61 +++++ 9 files changed, 659 insertions(+), 161 deletions(-) create mode 100644 layouts/shortcodes/reviews.html diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index a0a1cb5c..dd7ff3e9 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -1,4 +1,10 @@ +$color-dark-blue: #0a2f7a; +$color-orange: #f5931b; +$color-grey: grey; +$color-purple: #6b5bd4; +$color-extralight: #edf4ff; + .excerpt{ font-size: 1.8em; @@ -58,7 +64,9 @@ footer.bg-dark { } .td-navbar { - background: var(--success) !important; + background: $color-dark-blue !important; + height: 100px; + padding: 0.5rem 5rem; } .td-content ul li, .td-content ol li { @@ -176,7 +184,7 @@ kbd { @media (min-width: 768px){ .td-navbar-cover { - background: grey !important; + background: $color-grey !important; } } @@ -188,61 +196,97 @@ kbd { color: $gray; } +.hero { + display: flex; + gap: 20px; + align-items: start; + justify-content: space-around; + margin-top: 50px; +} + +// HOME // .indexHeading { - padding: 0 40px; - color: $secondary; + padding: 40px; + color: $color-dark-blue; + background-color: $color-extralight; + border-radius: 20px; h1 { font-weight: bold; - font-size: 45px; + font-size: 30px; } h2 { - font-size: 18px; + font-size: 24px; } } .downloadPanel { margin-top: 50px; - position: absolute; - left: -20px; width: 45dvw; - > div { - padding-left: 100px; - height: 100px; - background-color: $secondary; - border-top: 1px solid white; - color: white; - - &:nth-child(1) { - border-top: 0; - } - - h4 { - margin: 0; + &_title { + display: flex; + align-items: center; + gap: 20px; + img { + height: 50px; + width: 50px; } - - i { - font-size: 2rem; + h3 { + font-weight: 900; + color: $color-dark-blue; } } - > div, ul { + .download { + &_line { + min-height: 80px; display: flex; align-items: center; - gap: 50px; - } - - ul { - list-style: none; - margin: 0; - a { - color: orange; - &:before { - content: "→"; - margin-right: 10px; + gap: 20px; + padding-left: 10px; + color: $color-grey; + flex-wrap: wrap; + + h4 { + margin: 0; + font-weight: 900; + } + i { + font-size: 2rem; + } + ul { + display: flex; + align-items: center; + list-style: none; + margin: 0; + height: fit-content; + + li { + height: 60px; + } + } + } + &_button { + margin: 20px; + background-color: $color-dark-blue; + padding: 15px 20px; + border-radius: 20px; + color: $color-orange; + font-size: 20px; + &:after { + content: "\21E5"; + display: inline-block; + transform: rotate(90deg); + border: 1px solid $color-orange; + background-color: $color-orange; + color: $color-dark-blue; + border-radius: 50%; + margin-left: 10px; + padding: 0 4px; + font-weight: bold; } } } @@ -260,15 +304,19 @@ kbd { display: flex; align-items: center; margin: auto; - color: $secondary; - background-color: $primary; + color: $color-dark-blue; + background-color: $color-extralight; height: 500px; gap: 20px; padding: 0 100px; + h2 { + font-size: 50px; + } + button { color: white; - background-color: $secondary; + background-color: $color-dark-blue; height: 50px; border-radius: 10px; border-style: none; @@ -283,9 +331,9 @@ kbd { &:after { content: "→"; margin-right: 10px; - border: 1px solid orange; - background-color: orange; - color: $secondary; + border: 1px solid $color-orange; + background-color: $color-orange; + color: $color-dark-blue; border-radius: 50%; margin-left: 30px; padding: 0 4px; @@ -383,17 +431,17 @@ kbd { flex-shrink: 0; margin: 0 100px; border-radius: 10px; - background-color: $primary; padding: 20px; position: relative; height: 200px; + background-color: white; &:before { content: ""; width: 80px; height: 50px; border-radius: 40px; - background-color: orange; + background-color: $color-orange; position: absolute; top: -20px; left: -40px; @@ -405,10 +453,281 @@ kbd { width: 80px; height: 50px; border-radius: 40px; - background-color: orange; + background-color: $color-orange; position: absolute; bottom: -20px; right: -40px; z-index: -1; } } + + +.userReviews { + margin-top: 20px; + h2 { + text-align: center; + color: $color-dark-blue; + font-size: 40px; + } +} + + +// FOOTER // + +.footer { + background-color: $color-dark-blue; + position: relative; + min-height: fit-content; + + small { + position: absolute; + bottom: 10px; + left: 20px; + } + + &_links_block { + display: flex; + flex-direction: column; + + .footer_link { + color: white; + text-align: start; + text-transform: uppercase; + font-size: 24px; + border-bottom: 1px solid white; + + a { + color: white; + } + + p { + padding-top: 0; + font-size: 14px; + text-transform: none; + } + } + } + + &_nav { + .active { + color: white; + } + + a { + color: $color-grey; + font-size: 20px; + } + } +} + + +.tab input { + position: absolute; + opacity: 0; + z-index: -1; + + &:checked~.tab__content { + max-height: 10rem; + } + + &:checked+.tab__label::after { + transform: rotate(90deg); + } +} + +.tab__content { + max-height: 0; + overflow: hidden; + transition: all 0.35s; + + p { + margin: 0; + padding: 1rem; + } +} + +.accordion { + color: var(--theme); + overflow: hidden; +} + +.tab__label, +.tab__close { + display: flex; + color: white; + background: var(--theme); + cursor: pointer; +} + +.tab__label { + justify-content: space-between; + padding: 1rem; + + &::after { + content: "\276F"; + width: 1em; + height: 1em; + text-align: center; + transition: all 0.35s; + } +} + +.tab__close { + justify-content: flex-end; + padding: 0.5rem 1rem; + font-size: 0.75rem; +} + +.accordion--radio { + --theme: var(--secondary); +} + + +// ABOUT // + +.about { + &_title { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; + + h2 { + color: $color-dark-blue; + font-size: 60px; + } + } + + ul { + margin-bottom: 50px; + list-style-type: square; + } + + li { + color: $color-dark-blue; + font-size: 20px; + margin-left: 20px; + + &::marker { + color: $color-grey; + } + } + + .big_button_orange { + background-color: $color-orange; + padding: 15px 20px; + border-radius: 20px; + color: white; + font-size: 24px; + &:after { + content: "→"; + margin-right: 10px; + border: 1px solid white; + background-color: white; + color: $color-dark-blue; + border-radius: 50%; + margin-left: 30px; + padding: 0 4px; + font-weight: bold; + } + + } + + &_banner { + background-color: $color-purple; + display: flex; + padding: 20px 80px; + gap: 40px; + &_technology { + background-color: white; + border-radius: 40px; + padding: 80px; + color: $color-dark-blue; + font-size: 20px; + max-width: 550px; + max-height: 550px; + } + + &_medias { + color: white; + + li { + padding-left: 20px; + &::marker { + color: $color-orange; + margin-right: 50px; + } + } + + + a, a:visited, li { + color: white; + } + + a { + text-decoration: underline; + } + } + + h2 { + font-size: 60px; + margin-bottom: 30px; + } + } + + .credits { + padding: 0 100px; + color: $color-dark-blue; + margin-top: 40px; + h2 { + font-size: 60px; + } + + li { + color: $color-orange; + + &::marker { + color: inherit; + } + } + + &_rightside { + flex: 1.8; + font-size: 20px; + + h3 { + margin-bottom: 40px; + font-size: 35px; + } + + h4 { + font-weight: 900; + } + + .financiers { + list-style-type: decimal; + + > li { + color: $color-dark-blue; + } + } + } + + &_leftside { + font-size: 20px; + flex: 1.2; + } + + &_contributors { + background-color: $color-dark-blue; + color: white; + padding: 40px; + border-radius: 40px; + } + } + + .userReviews { + background-color: $color-extralight; + margin-top: 0 !important; + } +} diff --git a/config.toml b/config.toml index 79f112e6..d6ce2352 100644 --- a/config.toml +++ b/config.toml @@ -92,6 +92,7 @@ section = ["HTML", "print", "RSS"] copyright = "EDRLab" privacy_policy = "/documents/privacy" accessibility = "/documents/accessibility" +tou = "/documents/thorium-terms-of-use" # First one is picked as the Twitter card image if not set on page. # images = ["images/project-illustration.png"] diff --git a/content/en/_index.html b/content/en/_index.html index c81af134..994f4958 100644 --- a/content/en/_index.html +++ b/content/en/_index.html @@ -4,54 +4,56 @@ +++
-
+
-

Completely free, with no ads or data leaks to worry about

-

Perfect for heavy readers, library-goers, and students alike!

+

Perfect for heavy readers, library-goers, and students alike!

+

No ads, or data leaks to worry about

-
-

Download

+
+ logo of Thorium Reader +

Download links

-
+

Windows

-
+ -
+

Mac

@@ -127,60 +129,11 @@

3.0 new features

- - - -
-
-

From Our Partners

- -
- - +{{< reviews >}} diff --git a/content/en/about/_index.html b/content/en/about/_index.html index c1a7a7f9..5f310b5c 100644 --- a/content/en/about/_index.html +++ b/content/en/about/_index.html @@ -6,44 +6,131 @@ weight: 30 --- -{{< blocks/section color="white">}} -

logo of Thorium ReaderThe reading application
for all readers

+
+{{< blocks/section color="white" >}} +
+
+ logo of Thorium Reader +

The reading application
for all readers

+
-

For a long time, there was no modern EPUB 3 compliant reading application usable on Windows, OSX and Linux, properly accessible for print disabled people, with a good support for the LCP DRM and capable of browsing OPDS catalogs.

-

EDRLab decided to build such an application and release it for free, in order to provide users a great way to enjoy on a large screen EPUB publications, comics / manga / bandes dessinées, audiobooks, LCP protected PDF documents.

-

Print disabled people now benefit from an EPUB 3 reading app which supports screen readers like Jaws and NVDA on Windows, Voice Over on Mac.

+
    +
  • For a long time, there was no modern EPUB 3 compliant reading application usable on Windows, OSX and Linux, properly accessible for print disabled people, with a good support for the LCP DRM and capable of browsing OPDS catalogs.
  • +
  • EDRLab decided to build such an application and release it for free, in order to provide users a great way to enjoy on a large screen EPUB publications, comics / manga / bandes dessinées, audiobooks, LCP protected PDF documents.
  • +
  • Print disabled people now benefit from an EPUB 3 reading app which supports screen readers like Jaws and NVDA on Windows, Voice Over on Mac.
  • +
+ + Thorium Reader Presentation +
+logo of Thorium Reader {{< /blocks/section >}} -{{< blocks/section color="success" >}} -
-

Learn more about Thorium Reader

+
+
+

Technology

+

Thorium Reader is based on the set of open-source chrome-less modules, a toolkit named Readium Desktop. Thorium + Reader and Readium Desktop both rely on Electron.js, node.js and typescript, which are efficient cross-platform + technologies. Thorium is also using React components based on HTML 5/CSS 3.

+
+
+

Media Coverage

+ +
+
-

Daniel Weck made a presentation of the latest features of Thorium Reader during the Digital Publishing Summit 2022: here are the slides of his presentation.

-
-

Technology

-

Thorium Reader is based on the set of open-source chrome-less modules, a toolkit named Readium Desktop. Thorium Reader and Readium Desktop both rely on Electron.js, node.js and typescript, which are efficient cross-platform technologies. Thorium is also using React components based on HTML 5/CSS 3.

-
-{{< /blocks/section >}} - -{{< blocks/section class="txt-dark" color="white">}} -
-

Quotes

-
“I love Thorium and have introduced it to my students for reading any digital content. It is doubly good when something that makes reading more accessible for visually impaired people is also something that makes things more flexible for all. It makes it so much easier to get buy-in for using it.” Suzanne Norman (Simon Frazer University, Canada)
-
“I am very happy to have found this app. Its simple, easy to use, and most importantly, its very friendly for people who are blind and visually impaired.” (Noberto, USA)
-
“I can’t get enough of this ebook reader its clean and simple makes things easier for me to read! thank you I totally recommend this!” (Gigi, USA)
-
-
-

Media coverage

- -

Introducing Thorium, a new free desktop EPUB reader for Windows and Mac, 24th Annual Accessing Higher Ground, November 2019, speakers Richard Orme (CEO) and George Kerscher (Chief Innovations Officer), DAISY Consortium.

-

Thorium Reader is a free cross-platform eBook reading app, May 2021, GoodEReader.

-

Thorium Reader, une application de lecture pour Windows, macOS et Linux, January 2020, Actualitté.

-

Le logiciel de lecture d’ePub pour Windows MacOS et Linux, Thorium Reader, est disponible, March 2020, Lettresnumerique.be.

-

L’application Thorium Reader peut désormais lire les livres audio., April 2020, Actualitté.

-
-{{< /blocks/section >}} + +{{< reviews >}} + +
+

Credits

+
+
+

This documentation site is designed and maintained by EDRLab as part of the development of the Thorium-Reader application.

+
+

The main contributors of this documentation are : +

    +
  • Gautier Chomel
  • +
  • Georges Kerscher
  • +
  • Noelia Ruiz Martínez
  • +
  • Prashant Verma
  • +
+ This site is made with the static site generator Hugo and the Hugo Book Theme. +

+
+
+
+

Who has developed this app

+
    +
  • Daniel Weck, lead Developer
  • +
  • Pierre Leroux, developer
  • +
  • Arthur Le Meur, developer
  • +
+ +

The UX and UI of Thorium 3 was designed by Mylène Boyrie

+ +

Several other developers have helped making Thorium what it is today:

+
    +
  • Simon Le Roux, designer
  • +
  • Cyrille Lebeaupin, CEO of noop.fr, senior developer
  • +
  • Jiminy Panoz, creator of Readium CSS
  • +
  • Léo Stéfani, node.js, React developer
  • +
  • Manuel Lagrand, intern, node.js developer
  • +
+ +

The project is supervised by Laurent Le Meur, EDRLab CTO

+ +

Who is financing this app

+ +

EDRLab is a non-profit organization. Our budget essentially originates from our members. EDRLab started in France, but is now counting 60 members from Europe, North America, South America and Asia.

+ +

This project would have not seen the light without:

+ +
    +
  • The financial implication of our founding members: Editis, Hachette Livre, Magrigall, Media-Participations, Cercle de la Libraire, Syndicat national de l'Edition. They understand that financing open-standrards and open-source is the best way to energize an open and innovative market for the publishing industry.
  • +
  • Financial grants from the following French public organizations: +
      +
    • CNL (Centre National du Livre)
    • +
    • Ministère de la Culture
    • +
    +
  • +
  • Additional grants from EDRLab members intersted by the addition of specific features: +
      +
    • Fênix Editorial, Brazil
    • +
    • Canadian Electronic Library, Canada
    • +
    • MLOL / Horizons Limited, Italy
    • +
    • Lyrasis, USA
    • +
    +
  • +
+
+
+ +
+ +
diff --git a/i18n/en.toml b/i18n/en.toml index a60a1abe..37e08590 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -30,6 +30,9 @@ other = "Privacy Policy" [footer_accessibility] other = "Accessibility" +[footer_tou] +other = "Terms of use" + # Post (blog, articles etc.) [post_byline_by] other = "By" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d0d87c9a..0f153333 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,7 +7,7 @@
{{ partial "navbar.html" . }}
-
+
{{ block "main" . }}{{ end }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index a4e8eb15..106d5faa 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -7,7 +7,7 @@ class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}" >
{{ partial "navbar.html" . }}
-
+