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

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); }