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.

Sign up for GitHub

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

Update style #57

Merged
merged 3 commits into from
Apr 23, 2024
Merged

Update style #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d29538
Update component styles with border-radius changes
afnizarnur Apr 23, 2024
2164b87
Add font-size to content component
afnizarnur Apr 23, 2024
91ae563
Update button and content styles
afnizarnur Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/assets/styles/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 8px;
border-radius: $border-radius-8;
margin: 0px;

font-size: 1.125rem;
Expand Down
9 changes: 7 additions & 2 deletions src/assets/styles/components/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@
margin-top: 4rem;
margin-bottom: 2rem;
color: var(--text-primary);

@include mq-down(sm) {
margin-bottom: 1rem;
}
}

h3,
Expand Down Expand Up @@ -79,7 +83,7 @@
line-height: 1.75;
margin-top: 2rem;
margin-bottom: 1.5rem;
border-radius: 16px;
border-radius: $border-radius-8;
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
Expand All @@ -88,6 +92,7 @@
background-color: var(--text-primary);
overflow-x: auto;
font-weight: 400;
font-size: 0.875rem;

code {
font-weight: inherit;
Expand Down Expand Up @@ -182,7 +187,7 @@
img {
width: 100%;
height: auto;
border-radius: 8px;
border-radius: $border-radius-8;
}

ul.tag-list {
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/_rec-accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@
display: inline-block;
background: var(--surface-default);
padding: 24px;
border-radius: 16px;
border-radius: $border-radius-16;
transition: transform 0.3s ease;
height: 100%;
margin-bottom: 24px;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

&.speaking-card {
padding: 0;
.title {
Expand Down
3 changes: 2 additions & 1 deletion src/assets/styles/components/_rec-carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@
display: flex;
background: var(--surface-default);
padding: 24px;
border-radius: 16px;
border-radius: $border-radius-16;
transition: transform 0.3s ease;
flex-basis: calc(50% - 12px);
height: 100%;

@include mq-down(sm) {
flex-basis: 100%;
flex-shrink: 0;
border-radius: $border-radius-12;
}

blockquote {
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/about/_outside-work.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@
&--item {
img {
margin-bottom: 16px;
border-radius: 16px;
border-radius: $border-radius-16;
width: 100%;
height: auto;

@include mq-down(sm) {
border-radius: $border-radius-12;
}
}

p {
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/about/_process.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@

.process-card {
background: var(--surface-default);
border-radius: 16px;
border-radius: $border-radius-16;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

.thumbnail-wrapper {
display: flex;
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/home/_design-tooling.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@

.design-tooling-card {
background: var(--surface-default);
border-radius: 16px;
border-radius: $border-radius-16;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

.thumbnail-wrapper {
display: flex;
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/home/_selected-work.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,13 @@

.thumbnail-wrapper {
position: relative;
border-radius: 16px;
border-radius: $border-radius-16;
overflow: hidden;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

.badge-draft {
position: absolute;
top: 44px;
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/components/work/_other-work-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
}
.thumbnail-wrapper {
position: relative;
border-radius: 16px;
border-radius: $border-radius-16;
overflow: hidden;

@include mq-down(sm) {
border-radius: $border-radius-12;
}
a {
padding: 0;
margin: 0;
Expand Down
10 changes: 4 additions & 6 deletions src/assets/styles/components/writing/_article-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
justify-content: space-between;
border-radius: $border-radius-16;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

.article-date {
display: inline-flex;
flex-direction: column;
Expand Down Expand Up @@ -45,12 +49,6 @@
overflow: hidden;
display: inline;
}

&:hover {
h5 {
text-decoration: underline;
}
}
}

p.description {
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/pages/_about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,15 @@
width: 100%;
height: auto;
margin: 44px 0;
border-radius: 16px;
border-radius: $border-radius-16;

@include mq-down(lg) {
margin: 24px 0;
}

@include mq-down(sm) {
border-radius: $border-radius-12;
}
}
}
}
Expand Down
6 changes: 5 additions & 1 deletion src/assets/styles/pages/_contact.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,13 @@
.accordion {
margin-top: 44px;
background: var(--surface-default);
border-radius: 16px;
border-radius: $border-radius-16;
overflow: hidden;

@include mq-down(sm) {
border-radius: $border-radius-12;
}

&--title {
padding: 16px 24px;
}
Expand Down
10 changes: 6 additions & 4 deletions ...ing/behind-the-screens-refreshing-my-personal-site-for-2024/2024-04-19-index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Behind the screens refreshing my personal site for 2024
description: Each year, I take the opportunity to refresh my personal website with updates to the design and technology. For 2024, I've made some changes embracing a more minimalist look while keeping the focus on showcasing my work.
description: Each year, I take the opportunity to refresh my personal website with updates to the design and tech. For 2024, I've made some changes embracing a more minimalist look while keeping the focus on showcasing my work.
tags: ["portfolio", "website", "development"]
---

Expand Down Expand Up @@ -42,8 +42,10 @@ The foundational layout work from the previous year carried over, minimizing any
</r-grid>
```

## Make it open-source
## Make it open source

After a considerable amount of time, I've finally taken the step to open-source the code for this website. The goal is to provide a learning resource for others, rather than a mere template. As always, I aim to inspire other designers who may not have explored coding to take an interest and learn from this project.
I also taken the step to open source the code for this website. The goal is to provide a learning resource for others, rather than a mere template. As always, I aim to inspire other designers who may not have explored coding to take an interest and learn from this project.

![GitHub Repository of afnizarnur.com](https://res.cloudinary.com/afnizarnur/image/upload/afnizarnur.com/afnizar-com-github_dmhvcq.png)
![GitHub Repository of afnizarnur.com](https://res.cloudinary.com/afnizarnur/image/upload/afnizarnur.com/afnizar-com-github_dmhvcq.png)

That covers the updates for this year's website refresh. Until next time!