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

Fix open photo position

Browse source
This commit is contained in:
Alex 2026-06-10 11:45:32 -07:00
parent eb6f3f08ed
commit 9cab7a69f7
3 changed files with 54 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/styles/main.css
View file

File diff suppressed because one or more lines are too long

77
assets/styles/scss/front/_photos.scss
View file

@ -133,48 +133,59 @@
#open-image {
display: none;
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100vh;
.close {
cursor: pointer;
font-family: AtomicAge-Regular;
font-size: 2rem;
.wrapper {
position: absolute;
right: 5px;
top: 0;
}
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
img {
width: 100%;
height: auto;
}
#details {
display: block;
height: auto;
padding: 1rem 1rem;
background-color: colors.$computerBorder;
p {
margin: 0;
.close {
cursor: pointer;
font-family: AtomicAge-Regular;
font-size: 2rem;
position: absolute;
right: 5px;
top: 0;
}
#caption {
font-size: 1.5rem;
padding-bottom: 1rem;
img {
width: 100%;
height: auto;
}
#location, #date, #equipment {
font-size: 1.25rem;
#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;
}
}

16
templates/front/photos/detail.html.twig
View file

@ -33,13 +33,15 @@
</ul>
</article>
<div id="open-image">
<span class="close">X</span>
<img src="" alt="" id="image">
<div id="details">
<p id="caption"></p>
<p id="date"></p>
<p id="location"></p>
<p id="equipment"></p>
<div class="wrapper">
<span class="close">X</span>
<img src="" alt="" id="image">
<div id="details">
<p id="caption"></p>
<p id="date"></p>
<p id="location"></p>
<p id="equipment"></p>
</div>
</div>
</div>
{% endblock body %}