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

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

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