omgitsalexl/noel-design-atelier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated image styling

Browse Source
This commit is contained in:
omgitsalexl
2026-09-18 11:21:18 -07:00
parent 37538c87ad
commit aa2ebcf882
2 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -9
View File
@@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="styles.css?version=image-placement">
<link rel="stylesheet" href="styles.css?version=image-placement-border">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
@@ -82,7 +82,7 @@
<figure class="homepage-hero-image-figure" data-speed="0.5">
<div
class="photography-placeholder photography-placeholder-tall"
class="photography-frame photography-frame-tall"
role="img"
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
>
@@ -102,7 +102,7 @@
<div class="philosophy-content-grid">
<figure class="philosophy-image-figure">
<div
class="photography-placeholder photography-placeholder-portrait"
class="photography-frame photography-frame-portrait"
role="img"
aria-label="Cedar garland and velvet ribbon following a curved staircase"
>
@@ -175,7 +175,7 @@
<figure class="approach-image-figure">
<div
class="photography-placeholder photography-placeholder-landscape"
class="photography-frame photography-frame-landscape"
role="img"
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
>
@@ -232,10 +232,10 @@
</p>
</div>
<div class="work-gallery-grid" aria-label="Imagined holiday settings, with image placeholders">
<div class="work-gallery-grid" aria-label="Imagined holiday settings">
<figure class="work-gallery-primary-figure">
<div
class="photography-placeholder photography-placeholder-wide"
class="photography-frame photography-frame-wide"
role="img"
aria-label="A tall evergreen tree lit with warm lights in a grand room"
>
@@ -252,7 +252,7 @@
<figure class="work-gallery-secondary-figure">
<div
class="photography-placeholder photography-placeholder-portrait"
class="photography-frame photography-frame-portrait"
role="img"
aria-label="A holiday table set with greenery and candles for a small gathering"
>
@@ -269,7 +269,7 @@
<figure class="work-gallery-detail-figure">
<div
class="photography-placeholder photography-placeholder-square"
class="photography-frame photography-frame-square"
role="img"
aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
>
@@ -305,7 +305,7 @@
<figure class="client-fit-image-figure">
<div
class="photography-placeholder photography-placeholder-landscape"
class="photography-frame photography-frame-landscape"
role="img"
aria-label="An open doorway framed by cedar garland and warm lights"
>
styles.css
+18 -18
View File
@@ -3,7 +3,7 @@
--color-noel-black: #0e0e0e;
--color-weathered-paper: #f4ede3;
--color-noel-red: #7a0f18;
--color-photography-placeholder: #ff2d95;
--color-photography-background: #ff2d95;
--color-softened-black: #292724;
--color-subtle-rule: rgba(14, 14, 14, 0.24);
--font-family-editorial: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
@@ -304,50 +304,50 @@ ul {
margin-top: clamp(7rem, 11vw, 11rem);
}
.photography-placeholder {
.photography-frame {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 12rem;
padding: clamp(1.5rem, 4vw, 3rem);
background: var(--color-photography-placeholder);
overflow: hidden;
background: var(--color-photography-background);
color: var(--color-noel-black);
text-align: center;
}
.photography-placeholder span {
max-width: 22rem;
font-size: clamp(0.66rem, 1vw, 0.78rem);
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.6;
text-transform: uppercase;
}
.photography-placeholder img {
.photography-frame img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border: #FFF;
border-width: 1rem;
border-style: solid;
}
.photography-placeholder-tall {
.photography-frame-tall {
aspect-ratio: 4 / 5;
}
.photography-placeholder-portrait {
.photography-frame-portrait {
aspect-ratio: 3 / 4;
}
.photography-placeholder-landscape {
.photography-frame-landscape {
aspect-ratio: 16 / 10;
}
.photography-placeholder-wide {
.photography-frame-wide {
aspect-ratio: 16 / 9;
}
.photography-placeholder-square {
.photography-frame-square {
aspect-ratio: 1;
}