-
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
532 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,11 +2,12 @@ | |
| {% load static %} | ||
| {% spaceless %} | ||
| {% block content %} | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" | ||
| integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" | ||
| crossorigin="anonymous" async></script> | ||
| {# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"#} | ||
| {# integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"#} | ||
| {# crossorigin="anonymous" async></script>#} | ||
|
|
||
| <div class=" container pt-5 pb-3"> | ||
|
|
||
| <div class="max-w-screen-xl py-4 mx-auto"> | ||
| <div id="homeIntroSection" class="hero" style="max-width: 860px;margin: 0 auto;text-align: center;"> | ||
| <h1 class="display-1"> | ||
| Browse tutorial by <br/><span | ||
|
|
@@ -18,55 +19,77 @@ <h1 class="display-1"> | |
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| <div class="row row-eq-height archive-grid pb-4" data-masonry='{"percentPosition": true }'> | ||
| {% if categories|length <= 0 %} | ||
| <p class="lead my-3 text-muted">No contents found!</p> | ||
| {% endif %} | ||
|
|
||
| {% for category in categories %} | ||
| <div class="col-md-3"> | ||
| <div class="py-2 h-100"> | ||
| <div class="h-100 article-card p-3 p-lg-4" | ||
| style="border-bottom: 3px solid {{ category.color }};"> | ||
| <div class="d-flex justify-content-between flex-row mb-1"> | ||
| <div class="d-flex flex-column ml-2"> | ||
| <h3 class="display-5 fw-500">{{ category.title }}</h3> | ||
| <small class="d-inline-block text-muted text-uppercase fw-bold font-xs"> | ||
| {{ category.article_count }} article{{ category.article_count | pluralize }} | ||
| </small> | ||
| </div> | ||
| {% if category.thumbnail %} | ||
| <div style="width:42px; | ||
| height: 42px; | ||
| background-image: url('{{ category.thumbnail.url }}'); | ||
| -o-object-fit: contain; | ||
| object-fit: contain; | ||
| text-align:center; | ||
| padding: 0px; | ||
| overflow: hidden; | ||
| background-size: contain; | ||
| position: absolute; | ||
| right: 1rem; | ||
| background-repeat: no-repeat; | ||
| top: 1rem;"> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| <div class="max-w-screen-xl py-4 mx-auto"> | ||
|
|
||
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | ||
| {% for category in categories %} | ||
| <a href="{% url 'categories_single' slug=category.slug %}" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"> | ||
| <h3 class="text-lg font-semibold">{{ category.title }}</h3> | ||
| <p class="text-sm text-gray-500"> | ||
| {{ category.article_count }} article{{ category.article_count | pluralize }} | ||
| </p> | ||
|
|
||
| {% if category.excerpt %} | ||
| <small class="text-muted fw-normal mb-0 text-ellipsis" | ||
| style="line-clamp: 6;-webkit-line-clamp: 6">{{ category.excerpt }}</small> | ||
| <p class="text-sm">{{ category.excerpt | slice:"0:120"}}..</p> | ||
| {% endif %} | ||
| </a> | ||
| {% endfor %} | ||
|
|
||
| <div class="d-flex justify-content-start text-muted"> | ||
| <a href="{% url 'categories_single' slug=category.slug %}" | ||
| style="text-decoration: none; color: initial" class="stretched-link"></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| {# <div class="max-w-screen-xl py-4 mx-auto">#} | ||
| {# <div class="flex flex-row gap-5 px-4" data-masonry='{"percentPosition": true }'>#} | ||
| {# {% if categories|length <= 0 %}#} | ||
| {# <p class="lead my-3 text-muted">No contents found!</p>#} | ||
| {# {% endif %}#} | ||
| {##} | ||
| {# {% for category in categories %}#} | ||
| {# <div class="col-md-3">#} | ||
| {# <div class="py-2 h-100">#} | ||
| {# <div class="h-100 article-card p-3 p-lg-4"#} | ||
| {# style="border-bottom: 3px solid {{ category.color }};">#} | ||
| {# <div class="d-flex justify-content-between flex-row mb-1">#} | ||
| {# <div class="d-flex flex-column ml-2">#} | ||
| {# <h3 class="display-5 fw-500">{{ category.title }}</h3>#} | ||
| {# <small class="d-inline-block text-muted text-uppercase fw-bold font-xs">#} | ||
| {# {{ category.article_count }} article{{ category.article_count | pluralize }}#} | ||
| {# </small>#} | ||
| {# </div>#} | ||
| {# {% if category.thumbnail %}#} | ||
| {# <div style="width:42px;#} | ||
| {# height: 42px;#} | ||
| {# background-image: url('{{ category.thumbnail.url }}');#} | ||
| {# -o-object-fit: contain;#} | ||
| {# object-fit: contain;#} | ||
| {# text-align:center;#} | ||
| {# padding: 0px;#} | ||
| {# overflow: hidden;#} | ||
| {# background-size: contain;#} | ||
| {# position: absolute;#} | ||
| {# right: 1rem;#} | ||
| {# background-repeat: no-repeat;#} | ||
| {# top: 1rem;">#} | ||
| {# </div>#} | ||
| {# {% endif %}#} | ||
| {# </div>#} | ||
| {# {% if category.excerpt %}#} | ||
| {# <small class="text-muted fw-normal mb-0 text-ellipsis"#} | ||
| {# style="line-clamp: 6;-webkit-line-clamp: 6">{{ category.excerpt }}</small>#} | ||
| {# {% endif %}#} | ||
| {##} | ||
| {# <div class="d-flex justify-content-start text-muted">#} | ||
| {# <a href="{% url 'categories_single' slug=category.slug %}"#} | ||
| {# style="text-decoration: none; color: initial" class="stretched-link"></a>#} | ||
| {# </div>#} | ||
| {# </div>#} | ||
| {# </div>#} | ||
| {# </div>#} | ||
| {# {% endfor %}#} | ||
| {# </div>#} | ||
| {# </div>#} | ||
| {% endblock content %} | ||
| {% endspaceless %} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.