code/alexdaniels.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Build

Browse source
This commit is contained in:
Alex 2026-06-03 17:18:50 -07:00
parent 71cd3acccd
commit 6c0d9a3f98
140 changed files with 9802 additions and 2403 deletions
Download patch file Download diff file Expand all files Collapse all files

179
assets/styles/scss/front/_photos.scss Normal file
View file

@ -0,0 +1,179 @@
@use '../shared/colors' as colors;
.photos {
display: block;
.albums {
display: flex;
flex-direction: column;
width: 100%;
@media (min-width: 800px) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
gap: 1rem;
list-style: none;
padding: 0;
.album {
display: block;
width: 100%;
a {
display: block;
position: relative;
color: white;
text-decoration: none;
overflow: hidden;
img {
display: block;
width: 100%;
height: auto;
}
.title, .date, .overlay {
position: absolute;
visibility: visible;
margin: 0;
}
.title, .date, .category {
z-index: 2;
}
.title {
top: 1rem;
left: 1rem;
}
.date {
bottom: 1rem;
left: 1rem;
font-weight: bold;
}
.overlay {
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.333);
z-index: 1;
}
&:hover {
.title, .date, .category, .overlay {
visibility: hidden;
}
img {
transform: scale(1.01);
transition: transform 100ms ease-in-out;
}
}
}
}
}
img {
width: 100%;
}
}
#album {
.title {
margin: 0;
}
.meta {
border-bottom: 5px solid colors.$computerBorder;
}
.photos {
display: flex;
flex-direction: column;
width: 100%;
@media (min-width: 800px) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
gap: 1rem;
list-style: none;
padding: 0;
.photo {
width: 100%;
overflow: hidden;
img {
//width: 100%;
transition: transform 100ms ease-in-out;
}
&:hover {
cursor: pointer;
img {
transform: scale(1.01);
transition: transform 100ms ease-in-out;
}
}
}
}
}
#open-image {
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 999;
.close {
cursor: pointer;
font-size: 2rem;
position: absolute;
right: 0;
top: 0;
}
img {
width: 100%;
height: auto;
}
#details {
display: block;
height: auto;
padding: 1rem 1rem;
background-color: colors.$computerBorder;
p {
margin: 0;
}
#caption {
font-size: 1.5rem;
padding-bottom: 1rem;
}
#location, #date, #equipment {
font-size: 1.25rem;
}
}
&.open {
display: block;
}
}