me/website
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rename elements and update styling

Browse Source
This commit is contained in:
Matthew Grove
2024-06-23 18:37:44 +01:00
parent 171af2ddcf
commit 490d47eee6
5 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/head.html
View File

@@ -7,12 +7,12 @@
<!--
- favicon
-->
<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
<link rel="shortcut icon" href="/assets/images/logo.ico" type="image/x-icon">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="/assets/css/style.css">
<!--
- google font link
@@ -20,4 +20,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>

2
_subpages/02-resume.md
View File

@@ -1,5 +1,5 @@
---
title: Resume
title: Résumé
permalink: /resume
---

12
_subpages/03-portfolio.md
View File

@@ -49,23 +49,23 @@ permalink: /portfolio
</div>
<ul class="project-list">
<ul class="select-grid-list">
{% for project-item in site.data.portfolio %}
<li class="project-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
<li class="select-grid-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
<a target="_blank" href="{{ project-item.link }}">
<figure class="project-img">
<div class="project-item-icon-box">
<figure class="select-grid-item-img">
<div class="select-grid-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="{{ project-item.image }}" alt="{{ project-item.image_alt }}" loading="lazy">
</figure>
<h3 class="project-title">{{ project-item.title }}</h3>
<h3 class="select-grid-item-title">{{ project-item.title }}</h3>
<p class="project-category">{{ project-item.date }}, {{ project-item.tag }}</p>
<p class="select-grid-item-description">{{ project-item.date }}, {{ project-item.tag }}</p>
</a>
</li>

15
_subpages/04-photos.md
View File

@@ -49,23 +49,22 @@ permalink: /photos
</div>
<ul class="project-list">
<ul class="select-grid-list photo-list">
{% for photo-item in site.data.photos %}
<li class="project-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
<li class="select-grid-item photo-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
<a href="{{ photo-item.link }}">
<figure class="project-img">
<div class="project-item-icon-box">
<figure class="select-grid-item-img">
<div class="select-grid-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/assets/photos/{{ photo-item.file }}" alt="{{ photo-item.alt }}" loading="lazy" data-photos-image>
</figure>
<h3 class="project-title" data-photos-alt>{{ photo-item.alt }}</h3>
<h3 class="select-grid-item-title" data-photos-alt>{{ photo-item.alt }}</h3>
<p class="project-category" data-photos-tag>{{ photo-item.tag }}</p>
<p class="select-grid-item-description" data-photos-tag>{{ photo-item.tag }}</p>
</a>
</li>
@@ -114,3 +113,5 @@ permalink: /photos
</section>
</div>
<script src="/assets/js/photos.js"></script>

50
assets/css/style.css
View File

@@ -956,16 +956,16 @@ main {
.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
.project-list {
.select-grid-list {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 10px;
}
.project-item { display: none; }
.select-grid-item { display: none; }
.project-item.active {
.select-grid-item.active {
display: block;
animation: scaleUp 0.25s ease forwards;
}
@@ -975,9 +975,9 @@ main {
100% { transform: scale(1); }
}
.project-item > a { width: 100%; }
.select-grid-item > a { width: 100%; }
.project-img {
.select-grid-item-img {
position: relative;
width: 100%;
height: 184px;
@@ -986,7 +986,7 @@ main {
margin-bottom: 15px;
}
.project-img::before {
.select-grid-item-img::before {
content: "";
position: absolute;
top: 0;
@@ -998,9 +998,9 @@ main {
transition: var(--transition-1);
}
.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
.project-item-icon-box {
.select-grid-item-icon-box {
--scale: 0.8;
background: var(--jet);
@@ -1017,26 +1017,26 @@ main {
transition: var(--transition-1);
}
.project-item > a:hover .project-item-icon-box {
.select-grid-item > a:hover .select-grid-item-icon-box {
--scale: 1;
opacity: 1;
}
.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
.select-grid-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
.project-img img {
.select-grid-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-1);
}
.project-item > a:hover img { transform: scale(1.1); }
.select-grid-item > a:hover img { transform: scale(1.1); }
.project-title,
.project-category { margin-left: 10px; }
.select-grid-item-title,
.select-grid-item-description { margin-left: 10px; }
.project-title {
.select-grid-item-title {
color: var(--white-2);
font-size: var(--fs-5);
font-weight: var(--fw-400);
@@ -1044,7 +1044,7 @@ main {
line-height: 1.3;
}
.project-category {
.select-grid-item-description {
color: var(--light-gray-70);
font-size: var(--fs-6);
font-weight: var(--fw-300);
@@ -1052,6 +1052,18 @@ main {
/*-----------------------------------*\
#PHOTOS
\*-----------------------------------*/
.select-grid-list.photo-list {
grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
grid-auto-rows: 0;
}
.select-grid-list.photo-list .select-grid-item-img {
height: min-content;
}
/*-----------------------------------*\
@@ -1532,7 +1544,7 @@ textarea.form-input::-webkit-resizer { display: none; }
* #PORTFOLIO, BLOG
*/
.project-img, .blog-banner-box { border-radius: 16px; }
.select-grid-item-img, .blog-banner-box { border-radius: 16px; }
.blog-posts-list { gap: 30px; }
@@ -1650,7 +1662,7 @@ textarea.form-input::-webkit-resizer { display: none; }
/* portfolio and blog grid */
.project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
.select-grid-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
@@ -1770,7 +1782,7 @@ textarea.form-input::-webkit-resizer { display: none; }
* PORTFOLIO
*/
.project-list { grid-template-columns: repeat(3, 1fr); }
.select-grid-list { grid-template-columns: repeat(3, 1fr); }