diff --git a/_includes/components/book-authors.html b/_includes/components/book-authors.html new file mode 100644 index 00000000..68fdbd0b --- /dev/null +++ b/_includes/components/book-authors.html @@ -0,0 +1,12 @@ +
+ {% for author in include.authors %} +
+
+ +
+

+ {{ author.description }} +

+
+ {% endfor %} +
diff --git a/_includes/components/book-presenter.html b/_includes/components/book-presenter.html new file mode 100644 index 00000000..517456d9 --- /dev/null +++ b/_includes/components/book-presenter.html @@ -0,0 +1,26 @@ +
+
+ +
+ +
+

+ {{ include.book.description }} +

+ +

You can get it from these vendors:

+ + {% for vendor in include.book.vendors %} +
+ + {% include icons/book.svg %} + Buy on {{ vendor.name }} + +
+ {% endfor %} +
+ +
+ {{ include.book.details }} +
+
diff --git a/_includes/components/image-list.html b/_includes/components/image-list.html new file mode 100644 index 00000000..9bee5d00 --- /dev/null +++ b/_includes/components/image-list.html @@ -0,0 +1,10 @@ +
+ {% for item in include.items %} +
+ {% include elements/hex-icon.html file=item.image %} +
+ {{ item.description }} +
+
+ {% endfor %} +
diff --git a/_includes/elements/hex-icon.html b/_includes/elements/hex-icon.html new file mode 100644 index 00000000..d4abeb2b --- /dev/null +++ b/_includes/elements/hex-icon.html @@ -0,0 +1,5 @@ +
+
+ {% include {{ include.file }} %} +
+
diff --git a/_includes/icons/apps.svg b/_includes/icons/apps.svg new file mode 100644 index 00000000..4b340d6e --- /dev/null +++ b/_includes/icons/apps.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/book.svg b/_includes/icons/book.svg new file mode 100644 index 00000000..3ad9ce85 --- /dev/null +++ b/_includes/icons/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/code.svg b/_includes/icons/code.svg new file mode 100644 index 00000000..d8434b76 --- /dev/null +++ b/_includes/icons/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/folder.svg b/_includes/icons/folder.svg new file mode 100644 index 00000000..5e42ce7b --- /dev/null +++ b/_includes/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/library-books.svg b/_includes/icons/library-books.svg new file mode 100644 index 00000000..2aaa84b1 --- /dev/null +++ b/_includes/icons/library-books.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/merge-type.svg b/_includes/icons/merge-type.svg new file mode 100644 index 00000000..36b3f665 --- /dev/null +++ b/_includes/icons/merge-type.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/icons/update.svg b/_includes/icons/update.svg new file mode 100644 index 00000000..d125c96b --- /dev/null +++ b/_includes/icons/update.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_layouts/book.html b/_layouts/book.html new file mode 100644 index 00000000..acb49db7 --- /dev/null +++ b/_layouts/book.html @@ -0,0 +1,24 @@ +--- +layout: wide +--- + +{% include components/book-presenter.html book=page.book %} + +
+
+
+ What you will learn +
+
+ {% include components/image-list.html items=page.what_you_will_learn %} +
+
+
+ +
+

About the Authors

+ {% include components/book-authors.html authors=page.authors %} +
+ + diff --git a/_layouts/learning.html b/_layouts/learning.html deleted file mode 100644 index 3fe813d9..00000000 --- a/_layouts/learning.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -layout: base ---- -
-
-

{{ page.headline }}

-
- - - -
-
- -
-
-

- {{ page.description }} -

- - {% if page.vendors %} -

- You can get it from these vendors: -

- - - {% endif %} - -
- {% if page.book_info.isbn %} -
ISBN
-
{{ page.book_info.isbn }}
- {% endif %} - {% if page.book_info.publisher %} -
Publisher
-
- {{ page.book_info.publisher }} -
- {% endif %} - {% if page.book_info.numberOfPages %} -
Number of pages
-
{{ page.book_info.numberOfPages }}
- {% endif %} - {% if page.book_info.datePublished %} -
Published
- - {% endif %} -
-
-
- - {{ content }} - - {% if page.authors %} -
-

About the authors

- -
- {% for author in page.authors %} - - {% endfor %} -
-
- {% endif %} -
diff --git a/_pages/learning/crystal_programming.html b/_pages/learning/crystal_programming.html index 41d15308..7f81df2a 100644 --- a/_pages/learning/crystal_programming.html +++ b/_pages/learning/crystal_programming.html @@ -1,81 +1,48 @@ --- -title: "Book: Crystal Programming" -description: | - Crystal Programming is a project-based book by George Dietrich and Guilherme Bernal that covers all the - fundamental concepts needed to start programming in Crystal, such as OOP and concurrent programming. -layout: learning +title: "Building efficient, safe, and readable web and CLI applications with Crystal" +layout: book -headline: Building efficient, safe, and readable web and CLI applications with Crystal -cover_image: /assets/learning/crystal_programming.png -vendors: -- url: https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2 - name: Amazon -- url: https://www.packtpub.com/product/crystal-programming/9781801818674 - name: Packt +book: + cover_image: /assets/learning/crystal_programming.png + description: | + Crystal Programming is a project-based book by George Dietrich and Guilherme Bernal that covers all the + fundamental concepts needed to start programming in Crystal, such as OOP and concurrent programming. + details: | + While focused towards those with programming experience, previous knowledge of Crystal itself is not required, as + the book is outlined with step-by-step explanations of essential concepts and practical examples. By the end of + this book, you’ll be equipped with the skills you need to use Crystal programming for building and understanding any + application you come across. + vendors: + - url: https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2 + name: Amazon + - url: https://www.packtpub.com/product/crystal-programming/9781801818674 + name: Packt -book_info: - name: Crystal Programming - isbn: 978-1801818674 - publisher: Packt Publishing - numberOfPages: 356 - datePublished: 2022-05-27 +what_you_will_learn: +- image: icons/merge-type.svg + description: Explore how Crystal combines the merits of other languages +- image: icons/folder.svg + description: Understand how to leverage existing C libraries without writing any C +- image: icons/update.svg + description: Focus on zero-cost abstractions with compile-time macros +- image: icons/code.svg + description: Use an example-based approach to demonstrate language features +- image: icons/apps.svg + description: Develop a variety of Crystal applications, such as web and CLI apps +- image: icons/library-books.svg + description: Gain an understanding of the macro API and annotations authors: -- name: George Dietrich - image: /assets/learning/george.png - github_handle: Blacksmoke16 +- image: /assets/learning/george.png description: | - A software engineer, open-source aficionado, and Crystal community moderator. He + George Dietrich is a software engineer, open-source aficionado, and Crystal community moderator. He holds a Master of Science degree in internet information systems and a Bachelor of Science degree in information sciences. -- name: Guilherme Bernal - image: /assets/learning/guilherme.jpg - github_handle: lbguilherme +- image: /assets/learning/guilherme.jpg description: | - He is the chief technology officer at Cubos Tecnologia. He holds a bachelor's + Guilherme Bernal is the chief technology officer at Cubos Tecnologia. He holds a bachelor's degree in TI management. Guilherme co-founded a software development company and several tech start-ups, including one that focused on teaching programming skills to a new generation of developers. He is also a two-time world finalist - in the coding competition, ACM ICPC. + in the coding competition, ACM ICPC. --- -

- While focused towards those with programming experience, previous knowledge of Crystal itself is not required, as - the book is outlined with step-by-step explanations of essential concepts and practical examples. By the end of - this - book, you’ll be equipped with the skills you need to use Crystal programming for building and understanding any - application you come across. -

- -
- What you will learn -
- - - - diff --git a/_sass/components/_book-authors.scss b/_sass/components/_book-authors.scss new file mode 100644 index 00000000..b6423952 --- /dev/null +++ b/_sass/components/_book-authors.scss @@ -0,0 +1,28 @@ +.book-authors { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); + + column-gap: var(--padding-md); + row-gap: var(--padding-lg); +} + +.book-author { + display: grid; + + grid-template-areas: + "icon main"; + grid-template-columns: auto 1fr; + column-gap: var(--padding-sm); + + > * { + grid-area: main; + } + + > .book-author-icon { + grid-area: icon; + width: 6ch; + aspect-ratio: 1; + object-fit: cover; + clip-path: content-box circle(50%); + } +} diff --git a/_sass/components/_book-presenter.scss b/_sass/components/_book-presenter.scss new file mode 100644 index 00000000..3930730c --- /dev/null +++ b/_sass/components/_book-presenter.scss @@ -0,0 +1,31 @@ +.book-presenter { + font-size: var(--font-size-lead); + display: grid; + grid-template-areas: + "cover" + "main" + "details"; + row-gap: var(--padding-md); + column-gap: var(--padding-md); + + > .cover { + grid-area: cover; + } + + > .description { + @include blockflow; + grid-area: main; + } + + > .details { + grid-area: details; + } +} + +@media (min-width: 35em) { + .book-presenter { + grid-template-areas: + "cover main" + "details details"; + } +} diff --git a/_sass/components/_image-list.scss b/_sass/components/_image-list.scss new file mode 100644 index 00000000..7904bb7a --- /dev/null +++ b/_sass/components/_image-list.scss @@ -0,0 +1,14 @@ +.image-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr)); + align-items: center; + row-gap: var(--block-flow-sm); + column-gap: var(--padding-md); + + > .item { + display: grid; + grid-template-columns: min-content 1fr; + align-items: center; + column-gap: var(--padding-xs); + } +} diff --git a/_sass/elements/_hex-icon.scss b/_sass/elements/_hex-icon.scss new file mode 100644 index 00000000..b4ab3b28 --- /dev/null +++ b/_sass/elements/_hex-icon.scss @@ -0,0 +1,42 @@ +:root { + --sin-60: 0.866; +} + +.hex-icon { + --icon-height: 48px; + + width: calc(var(--icon-height) * var(--sin-60)); + height: var(--icon-height); + display: inline-block; + position: relative; + + filter: drop-shadow(0 0 2px rgba(0,0,0,0.1)) + drop-shadow(0 1px 1px rgba(0,0,0,0.2)) + drop-shadow(0 1px 1px rgba(0,0,0,0.1)); + + .inner { + background-color: white; + width: 100%; + height: 100%; + + clip-path: polygon( + evenodd, + 0% 25%, + 0% 75%, + 50% 100%, + 100% 75%, + 100% 25%, + 50% 0, + 0% 25% + ); + + & > * { + position: absolute; + width: calc(var(--icon-height) / 2); + height: calc(var(--icon-height) / 2); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +} diff --git a/_sass/elements/_hex.scss b/_sass/elements/_hex.scss index c4fd09e0..09f0318d 100644 --- a/_sass/elements/_hex.scss +++ b/_sass/elements/_hex.scss @@ -3,7 +3,7 @@ --sin-70: 0.93; } -a.hex { +.hex { --hex-height: 2.5em; --hex-width: 2px; --cos-a: var(--cos-70); @@ -55,21 +55,12 @@ a.hex { ); } - &:hover::before { - background-color: hsl(0, 0%, 95%); - } - &:not(.bordered) { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 20%)) drop-shadow(0 1px 3px rgb(0 0 0 / 10%)); transition: filter 0.2s; - - &:hover { - filter: drop-shadow(0 0 3px rgba(0 0 0 / 10%)) - drop-shadow(0 1px 1px rgba(0 0 0 / 40%)) - drop-shadow(0 1px 3px rgba(0 0 0 / 20%)); - } } + &.bordered::after { background-color: currentColor; clip-path: polygon( @@ -90,4 +81,18 @@ a.hex { var(--b) var(--hex-width) ); } + + &:is(a) { + &:hover::before { + background-color: hsl(0, 0%, 95%); + } + + &:not(.bordered) { + &:hover { + filter: drop-shadow(0 0 3px rgba(0 0 0 / 10%)) + drop-shadow(0 1px 1px rgba(0 0 0 / 40%)) + drop-shadow(0 1px 3px rgba(0 0 0 / 20%)); + } + } + } } diff --git a/_sass/main.scss b/_sass/main.scss index d81fa7da..b258370e 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -23,13 +23,17 @@ @import "elements/avatar-list"; @import "elements/color-sample"; @import "elements/hex"; + @import "elements/hex-icon"; @import "elements/table"; + @import "components/book-authors"; + @import "components/book-presenter"; @import "components/callout"; @import "components/card"; @import "components/cards-list"; @import "components/profile-card"; @import "components/content"; + @import "components/image-list"; @import "components/link-item"; @import "components/navbar"; @import "components/post-teaser"; diff --git a/_sass/mixins/_blockflow.scss b/_sass/mixins/_blockflow.scss index afe5f9e6..c61c28a6 100644 --- a/_sass/mixins/_blockflow.scss +++ b/_sass/mixins/_blockflow.scss @@ -5,13 +5,13 @@ + * { margin-block-start: var(--block-flow, $width); - &:is(hr) { + &:is(hr, .full-width-rule) { margin-block-start: var(--block-flow-md); } } } - :where(& > hr + *) { + :where(& > :is(hr, .full-width-rule) + *) { margin-block-start: var(--block-flow-md); } diff --git a/_style_guide/components/book-authors.html b/_style_guide/components/book-authors.html new file mode 100644 index 00000000..d659e335 --- /dev/null +++ b/_style_guide/components/book-authors.html @@ -0,0 +1,16 @@ +--- +title: Book Authors +type: components +module: _includes/components/book-authors.html + +authors: +- image: /assets/learning/george.png + description: | + Lorem ipsum dolor sit amet. +- image: /assets/learning/guilherme.jpg + description: | + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem + veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. + Id vel error quia ipsam sit saepe hic at amet excepturi ea. +--- +{% include components/book-authors.html authors=page.authors %} diff --git a/_style_guide/components/book-presenter.html b/_style_guide/components/book-presenter.html new file mode 100644 index 00000000..eebfcc69 --- /dev/null +++ b/_style_guide/components/book-presenter.html @@ -0,0 +1,24 @@ +--- +title: Book Presenter +type: components +module: _includes/components/book-presenter.html + +book: + cover_image: /assets/learning/crystal_programming.png + description: | + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem + veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. + Id vel error quia ipsam sit saepe hic at amet excepturi ea. + details: | + Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi + id animi fugiat vero explicabo illo officiis assumenda nulla rerum, + dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos + maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat + in accusantium! + vendors: + - url: https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2 + name: Amazon + - url: https://www.packtpub.com/product/crystal-programming/9781801818674 + name: Packt +--- +{% include components/book-presenter.html book=page.book %} diff --git a/_style_guide/components/image-list.html b/_style_guide/components/image-list.html new file mode 100644 index 00000000..aca8bb65 --- /dev/null +++ b/_style_guide/components/image-list.html @@ -0,0 +1,12 @@ +--- +title: Image List +type: components +module: _includes/components/image-list.html + +items: +- image: icons/merge-type.svg + description: Lorem ipsum dolor sit amet consectetur, adipisicing elit +- image: icons/folder.svg + description: Quia quos autem veniam libero! +--- +{% include components/image-list.html items=page.items %} diff --git a/_style_guide/elements/hex-icon.md b/_style_guide/elements/hex-icon.md new file mode 100644 index 00000000..6f379702 --- /dev/null +++ b/_style_guide/elements/hex-icon.md @@ -0,0 +1,6 @@ +--- +title: Hex Icon +type: elements +module: _includes/elements/hex-icon.html +--- +{% include elements/hex-icon.html file='icons/folder.svg' %}