Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Books Block Component [Learn Area Redesign] #1481

Merged
merged 16 commits into from
Sep 4, 2023

Conversation

SaySayo
Copy link
Contributor

@SaySayo SaySayo commented Aug 7, 2023

Created the books component according to the learn area redesign.

Design
Screenshot 2023-08-07 at 10 04 35

Current look
Screenshot 2023-08-06 at 16 41 41

@sabine
Copy link
Collaborator

sabine commented Aug 7, 2023

  • no h- on text elements (e.g. heading)
  • "Books" in small-caps
  • don't overflow, collapse reasonably Screenshot from 2023-08-07 15-00-11
  • on very small screens, stack on top of each other, space is too narrow
  • use object-contain on the img to avoid stretching the image - instead, the image shrinks to fit the available space in the img element
  • the link at the bottom is a parameter { url ; text } that sets the text to display on the "see more books" link, and the target of the link (this would allow linking to all "beginner books", for example)

@SaySayo SaySayo force-pushed the learn-book-component branch 2 times, most recently from c18738a to 3846b65 Compare August 22, 2023 10:25
<div class="w-full bg-default flex h-full p-4 md:w-1/2">
<div class="w-96 sm:w-auto lg:ml-auto lg:pr-4">
<div class="pt-4 text-default text-sm font-medium leading-7 tracking-widest"> BOOK </div>
<h2 class="mt-2 text-default text-2xl font-normal leading-7"> Recommended Books </h2>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest to make the title a parameter of the component, so that we can say something like "Books for Beginners"

=
<div class="w-full bg-default flex h-full p-4 md:w-1/2">
<div class="w-96 sm:w-auto lg:ml-auto lg:pr-4">
<div class="pt-4 text-default text-sm font-medium leading-7 tracking-widest"> BOOK </div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="pt-4 text-default text-sm font-medium leading-7 tracking-widest"> BOOK </div>
<div class="pt-4 text-default text-sm font-medium leading-7 tracking-widest"> BOOKS </div>

@@ -17,15 +20,15 @@ featured: false
difficulty: intermediate
---

In "More OCaml" John Whitington takes a meandering tour of functional
In "More OCaml," John Whitington takes a meandering tour of functional
programming with OCaml, introducing various language features and describing
some classic algorithms. The book ends with a large worked example dealing with
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does "large worked example" mean? A large project?

@sabine sabine merged commit 783c8ee into ocaml:main Sep 4, 2023
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants