Skip to content

Commit

Permalink
Updated articles page and about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cristianmayo
cristianmayo committed Mar 27, 2024
1 parent d757a67 commit 51884e4
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 102 deletions.
175 changes: 93 additions & 82 deletions src/_assets/css/scss/page/about-page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,103 @@
.page-content {
.about-page {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--two-spacing);
margin: var(--default-spacing) 0;
gap: var(--three-spacing);
margin: 0;
padding: 0;

@media screen and (max-width:800px) {
display: flex;
flex-direction: column;
gap: var(--default-spacing);
}

h3, h4, h5, h6 {
color: var(--text-white);
text-transform: capitalize;
}

h2 {
// text-transform: capitalize;
size: var(--text-size-lg);
}

h1 {
border-top: 5px solid var(--bg-primary);
padding-top: var(--default-spacing);
display: block;
gap: var(--two-spacing);
}

> aside {
&__content {
order: 1;
grid-column: 0;
grid-row: span 3;
display: flex;
flex-direction: column;
gap: var(--default-spacing);
padding: 0 var(--two-spacing);
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
gap: var(--three-spacing);

@media screen and (max-width:800px) {
padding: 0 var(--default-spacing);
order: 2;
gap: var(--two-spacing);
}
}

&__toc {
padding: var(--default-spacing);
background-color: var(--bg-slategray);
border-radius: 0.25rem;
&-header {
background-color: var(--bg-primary);
padding: var(--three-spacing) var(--two-spacing);
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;

@media screen and (max-width:800px) {
width: calc(100% - var(--two-spacing));
}
@media screen and (max-width:800px) {
padding: var(--two-spacing) var(--default-spacing);
margin-right: var(--default-spacing);
}

h6 {
text-transform: uppercase;
font-size: var(--text-size-default);
color: var(--text-light);
> h1 {
color: #fff;
padding: 0;
margin: 0;
}
}

ul {
margin: 0;
padding: 0 0 0 1.5rem;
&-toc {
margin: 0 var(--two-spacing);

& > li a {
display: block;
padding: 0.25rem;
color: var(--text-lightgray);
font-size: small;
@media screen and (max-width:800px) {
margin: 0 var(--default-spacing);
}

&:hover {
color: var(--text-white);
}
h6 {
text-transform: uppercase;
font-size: var(--text-size-default);
color: var(--text-light);
}
}
}

&__header {
background-color: var(--bg-primary);
padding: var(--three-spacing) var(--two-spacing);
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
ul {
margin: 0;
padding: 0 0 0 1.5rem;

@media screen and (max-width:800px) {
padding: var(--default-spacing);
margin-right: var(--default-spacing);
}
& > li a {
display: block;
padding: 0.25rem;
color: var(--text-lightgray);
font-size: small;

> h1 {
color: #fff;
padding: 0;
margin: 0;
&:hover {
color: var(--text-white);
}
}
}
}
}

&__content {
padding: 0 var(--two-spacing);
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
&-entry {
padding: 0 var(--two-spacing);

@media screen and (max-width:800px) {
padding: 0 var(--default-spacing);
}
@media screen and (max-width:800px) {
padding: 0 var(--default-spacing);
}

&-entry:not(:first-child) {
margin-top: var(--three-spacing);
}
& h3, & h4, & h5, & h6 {
color: var(--text-white);
text-transform: capitalize;
}

& h2 {
// text-transform: capitalize;
size: var(--text-size-lg);
}

& h1 {
border-top: 5px solid var(--bg-primary);
padding-top: var(--default-spacing);
display: block;
}

img {
width: 100%;
& img {
width: 100%;
}
}

& > .giscus {
Expand All @@ -118,4 +106,27 @@
padding-top: var(--two-spacing);
}
}

&__callout-actions {
order: 3;
grid-column: 2;
margin: 0 var(--two-spacing) 0 0;

@media screen and (max-width:800px) {
margin: 0 var(--default-spacing);
}
}

> aside {
display: flex;
flex-direction: column;
gap: var(--default-spacing);
padding: 0 var(--two-spacing) 0 0;
order: 4;
grid-column: 2;

@media screen and (max-width:800px) {
padding: 0 var(--default-spacing);
}
}
}
2 changes: 1 addition & 1 deletion src/_assets/css/scss/page/article-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
> aside {
display: flex;
flex-direction: column;
gap: var(--default-spacing);
gap: var(--two-spacing);
padding: 0 var(--two-spacing) 0 0;
grid-column: 2;

Expand Down
2 changes: 1 addition & 1 deletion src/_assets/css/style.min.css
View file

Large diffs are not rendered by default.

30 changes: 17 additions & 13 deletions src/about.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,26 @@
title: "About"
---

<section class="page-content">
<aside>
<div class="page-content__toc">
<h6>Jump to...</h6>
<section class="about-page">
<section class="about-page__content">
<div class="about-page__content-header">
<h1>{{title}}</h1>
</div>
<section class="about-page__content-toc">
<h6>Table Of Contents</h6>
<ul>
{% for markdownContent in collections.aboutpage | sortedCollectionByFilenameAsc %}
{% if markdownContent.data.title %}
<li class="page-content__content-anchor">
<li class="about-page__content-anchor">
<a href="#{{ markdownContent.data.title | slugify }}">{{ markdownContent.data.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</aside>
<div class="page-content__header">
<h1>{{title}}</h1>
</div>
<div class="page-content__content">
</section>
{% for markdownContent in collections.aboutpage | sortedCollectionByFilenameAsc %}
{% if markdownContent.templateContent %}
<article class="page-content__content-entry">
<article class="about-page__content-entry">
{% if markdownContent.data.title %}
<h2>
<a id="{{ markdownContent.data.title | slugify }}"></a>
Expand All @@ -34,5 +32,11 @@ title: "About"
</article>
{% endif %}
{% endfor %}
</div>
</section>
{# <section class="about-page__callout-actions container-block">
Callout Actions here...
</section> #}
<aside>
{% include '_content/article-category-cards.njk' %}
</aside>
</section>
11 changes: 6 additions & 5 deletions src/articles.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@ title: Articles
</article>
{% endfor %}
</section>
<div class="articles-page__callout-actions container-block">
{% include '_content/article-category-list.njk' %}
</div>
{# <section class="articles-page__callout-actions container-block">
Callout Actions here...
</section> #}
<aside>
<div>{% include '_content/article-category-list.njk' %}</div>
<div>{% include '_content/article-subcategory-list.njk' %}</div>
{% include '_content/article-category-cards.njk' %}
{% include '_content/article-category-list.njk' %}
{% include '_content/article-subcategory-list.njk' %}
</aside>
</section>

0 comments on commit 51884e4

Please sign in to comment.