html, body {
margin: 0;
padding: 0;
height: auto; /* auto; */
overflow-y: auto;
/* width: 100%;*/
}
body {
margin: 0;
font-family: sans-serif;
background: #FFFFFF; /* #9ED2E5; #FFFFFF; #930000; ... sets BG color*/
overflow-x: hidden;
}
body.no-scroll {
overflow: hidden;
height: 100vh;
}
/* ... ALL CODE ABOVE NEW ... FOR TOUBLESHOOTING NAME ISSUE */
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #FFFFFF;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
*/
header {
/* background: #FFB5B5; */
background-color: #FFFFFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
letter-spacing: .7vw;
text-transform: initial;
color: #000000;
padding: 3.5vh 0 0 60px; /* 40px 0 0 60px; top, right, bottom, left */
text-align: left;
font-size: 2.6em;
width: 100%;
height: 9vh; /* 9vh; 90px;*/
position: fixed;
top: 0;
left: 0;
z-index: 10;
/* margin-bottom: 80vh; ... no effect?*/
}
header le {
opacity: .7;
}
.header-inner {
position: relative;
width: 100%;
height: 100%;
}
#header-rollover { /* ... controls position of ... MICHAEL ACEVES*/
/* background: #76E9C8;*/
position: absolute;
left: 60px;
top: 30%; /* top: 50%; */
transform: translateY(-50%);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
/* background: transparent; */
}
#header-rollover:hover {
/* color: #0078d7;*/
opacity: 1;
font-weight: 400;
/* text-shadow: 1px 1px 20px #0078d7; */
text-shadow: 5px 5px 10px #0078d7; /* 0 0 12px #0078d7; */
/* background: transparent; */
/*
text-decoration: underline;
cursor: pointer;
opacity: .3;*/
}
.main-content {
/* background: #6C8610;*/
background: #FFFFFF;
display: flex;
flex-direction: column;
margin-top: 7vh; /* 90px; */
min-height: calc(100vh - 7vh); /* - 7vh 90px */
width: 100%;
overflow-y: auto; /* scroll; */
overflow-x: hidden;
}
.sidebar {
background: #FFFFFF;
width: 15vw;
padding-top: 0; /* Reduced from 150px since we have margin-top */
position: fixed; /* Changed from relative; */
top: 12vh; /* Below the fixed header */
left: 0vw;
/* height: calc(100vh - 90px);*/ /* Prevent overflow under footer */
height: 100%;
z-index: 5;
}
/* .sidebar h2TT {
background: #6C8610;
font-size: 1.2em;
margin-bottom: 20px;
text-align: left;
width: 100%;
}*/
.categories {
list-style: none;
width: 100%;
text-align: left;
}
.categories li { /* ... main categories text styling */
margin-bottom: 15px;
font-size: 1.3em;
cursor: pointer;
/* transition: color 0.2s;*/
text-align: left;
opacity: .5;
padding: 10px 0px 6px 40px; /* 10px 0px 6px 40px; */
font-weight: 400;
line-height: 2.3vh;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
}
.categories li:hover:not(.hover-on) {
color: #000000;
opacity: 1;
font-weight: 500;
text-shadow: 0px 0px 0px #0078d7;
}
.categories li:hover {
color: #0078d7;
opacity: 1;
font-weight: 500;
/* text-shadow: 3px 3px 15px #0078d7;*/
text-shadow: 3px 3px 7px #0078d7; /* 0 0 8px #0078d7; */
}
.container { /* ... main image on homepage ... not gallerys */
/* display: flex;*/
/* background: #A5D4CD; */
background: #FFFFFF; /* #FFFFFF; #D77E7E;*/
margin-left: 0; /* Remove margin since sidebar is not fixed */
width: 100%;
height: 100vh; /* 100vh; auto; */
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 0 0 20vh 0;
}
.art-image { /* ... main container */
background: #FFFFFF;
width: 65%; /* 75%; ... sets size of main images */
height: auto;
padding: 60px 0; /* ... 60px 0; ... top, right, bottom, left ... moves main image over from the left a bit */
margin: 0 auto;
}
#main-art {
width: 90%;
height: auto;
padding: 5vh 0px 0px 10vw; /* ... 5vh 0px 0px 4vw; top, right, bottom, left */
/* padding: 60px 0;
margin: 0 auto;*/
/* margin-top: 40vh; ... only effects home page - not galleris */
opacity: 100%;
}
.overlay { /* ... positions iframe on homepage*/
/* background: #97BADB; */
background: rgba(255, 255, 255, 0.98);
position: fixed; /* Changed from absolute */
/* top: 5vh; */ /* 90px; 10vh; pushes galleroes below header - but they still scroll up close to top text */
left: 2vw; /* ... this moves iframe ... thus all aglleries over just a bit to match top catatory listing */
width: 100%;
/* height: calc(100vh - 9vh); */ /* 100vh - 9vh 100vh - 90px Full height minus header */
/* height: 120%; ... doesnot extend gallery page ... can nt see footer */
height: 100%;
/* margin-top: 20vh; ... crops the gallery */
/* padding-top: 20vh; still not working */
z-index: 8; /* 9; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden; /* Remove overlay scroll */
}
/* overlay .no-scroll {
overflow: hidden;
} */
.overlay iframe { /* ... gallery menu*/
background: #76E9C8; /* ... cant set an iframe bg?*/
/* top: 20vh; ... does not move galleries down */
width: 96%;
height: 100%; /* 100%; */
border: none;
padding: 0; /* Remove padding */
opacity: 1;
overflow-y: hidden; /* Only iframe scrolls */
overflow: hidden; /* Hide horizontal scroll */
z-index: 9;
}
.hidden {
display: none;
}
.bottom-gallery {
/* background: #76E9C8; */
background: #FFFFFF;
width: 100%;
height: 30vh; /* 45vh;*/
margin-top: 8vh; /* auto; Push to bottom */
padding-left: 8vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* flex-direction: column;
align-items: center;*/
gap: 10vw;
}
.gallery-item {
/* background: #B89CB8;*/
/* height: 10vh; */
width: auto;
display: flex;
flex-direction: column; /* ... needed to keep text uder images ... not row; */
align-items: center;
/* margin-top: 40vh; ... lowers recent imhae thumbs on homepage */
/* margin: 0 0 0 0; */ /* top, right, bottom, left */
}
.gallery-item img {
width: 18vw; /* 14vw; ... thumb sizes */
/* background: #B7A43C; */ /* background: #FFFFFF; #FFFFFF;*/
display: block;
transition: opacity 0.3s ease;
cursor: pointer;
opacity: 1;
}
.gallery-item img:hover {
opacity: .5;
}
.caption { /* ... text under bottom gallery images */
margin-top: 1vh;
font-size: 1.2rem;
color: #333;
text-align: center;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
letter-spacing: .3vw;
font-weight: bold;
opacity: .6;
}
.caption-label { /* ... bottom gallery labels next to name */
/* background: #FFFFFF;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* background: transparent; */ /* remove color block */
font-size: 0.7em;
font-weight: 400;
color: #555;
opacity: 0;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
white-space: nowrap;
pointer-events: auto;
cursor: default;
}
.caption-label.visible {
opacity: 1;
}
.category-label { /* ... category label next to name */
position: absolute;
top: 35%; /* ... should match header */
left: 50%;
transform: translate(-50%, -50%);
background: transparent; /* remove color block */
font-size: 0.7em;
font-weight: 400;
color: #555;
opacity: 0;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out; /* ... only applies to Digital Sketch? */
white-space: nowrap;
pointer-events: auto;
cursor: default;
}
.category-label.visible {
opacity: 1;
}
/* categoryLabel.style.textDecoration:hover {
text-decoration: underline;
cursor: pointer;
opacity: .3;
}
*/
/*
.category-label {
transition: text-shadow 0.4s ease-in-out;
}
*/
/* .category-label:hover {
text-decoration: underline;
cursor: pointer;
}
*/
.site-footer {
/* background: #B89CB8;*/
background-color: #FFFFFF;
/* position: inherit;
bottom: 0;*/
/* padding-left: 5vw;*/
width: 100%;
height: 5vh; /* 3vh; */
color: #000000;
text-align: center;
font-size: 0.7vw;
line-height: 20px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 400;
letter-spacing: .9vw;
white-space: pre;
z-index: 1; /* 20; */
margin-top: 0vh;; /* 8vh; */
/* margin-bottom: 10vh;*/
/* bottom: 5vh;*/
padding: 0 0 1vh 5vw;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXX END OF NORMAL DESKTOP SETTINGS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*
.hamburger-menu {
display: none;
}
*/
/* ==========================================================================================*/
@media only screen and /* tv hd, onion, our tv, surface pro 7, */
(min-width: 933px) /* 931px */
and
(max-width: 1920px) /* 1920px */
{
header {
/* background: #76E9C8; */
background-color: #FFFFFF;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
letter-spacing: .7vw;
text-transform: initial;
color: #000000;
padding: 3.5vh 0 0 60px; /* 40px 0 0 60px; top, right, bottom, left */
text-align: left;
/* font-size: 2em;*/
width: 100%;
height: 9vh; /* 9vh; 90px;*/
position: fixed;
top: 0;
left: 0;
z-index: 10;
font-weight: 400;
/* margin-bottom: 80vh; ... no effect?*/
}
header le {
opacity: .7;
}
.header-inner {
position: relative;
width: 100%;
height: 100%;
}
#header-rollover { /* ... controls position of ... MICHAEL ACEVES*/
font-size: 2vw;
position: absolute;
left: 3vw;
top: 30%; /* top: 50%; */
transform: translateY(-50%);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
}
#header-rollover:hover {
color: #0078d7;
opacity: 1;
font-weight: 400;
/* text-shadow: 1px 1px 20px #0078d7; */
text-shadow: 3px 3px 6px #0078d7; /* 5px 5px 10px x y blur r color 0 0 12px #0078d7; */
}
.main-content {
/* background: #6C8610;*/
background: #FFFFFF;
display: flex;
/* flex-direction: column;*/
margin-top: 1vh; /* 90px; */
min-height: calc(100vh - 9vh); /* 90px; */
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.sidebar {
/* background: #6C8610;*/
width: 25vw !important;
padding-top: 0vh; /* Reduced from 150px since we have margin-top */
position: fixed; /* Changed from relative; */
top: 12vh; /* Below the fixed header */
left: 1vw;
/*height: calc(100vh - 90px); */ /* Prevent overflow under footer */
height: 100%;
z-index: 3;
opacity: 1;
}
.categories {
/* width: 100%;*/
list-style: none;
text-align: left;
padding: 0 0vw 0 0;
margin: 0 0vw 0 0;
}
.categories li { /* ... main categories text styling */
/* background: #76E9C8;*/
/* margin-bottom: 15px;*/
font-size: 1vw;
cursor: pointer;
text-align: left;
opacity: .6;
padding: 0vh 0vw 0vw 2.6vw; /* ... move categories over a bit */
margin: 0 0 0 0;
font-weight: 400;
line-height: 5.5vh;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
width: 100%;
left: 0;
letter-spacing: .4vw;
}
.categories li:hover {
color: #0078d7;
opacity: 1;
width: 100%;
font-weight: 500;
/* text-shadow: 3px 3px 15px #0078d7;*/
text-shadow: 2px 2px 5px #0078d7; /* x y blur r color 3px 3px 7px 0 0 8px #0078d7; */
}
.container { /* ... main image on homepage ... not gallerys */
/* background: #66A1CC;*/
background: #FFFFFF; /* #FFFFFF; #D77E7E;*/
/* margin-left: 0;*/ /* Remove margin since sidebar is not fixed */
width: 100%;
height: 100vh; /* 100vh; auto; */
display: flex;
/* flex-direction: column; */
align-items: center;
justify-content: center;
position: relative;
/* text-align: center;*/
padding: 0vh 0 0vh 0vw; /* ... offest image for sidebar */
margin: 19vh 0 0 0; /* ... just ADD to container top */
}
.art-image { /* ... main container */
/* background: #6C8610;*/
background: #FFFFFF;
width: 100%; /* 75%; ... sets size of main images */
height: auto;
/* padding: 3vh 0 0 0vw; *//* ... 60px 0; ... top, right, bottom, left ... moves main image over from the left a bit */
/* margin: 0 0 0 0;*/
padding: 0vh 0 0vh 18vw; /* ... offest image for sidebar adds padding to image side ... */
margin: 0vh 0 12vh 0; /* ... just ADD to image bottom */
display: flex;
align-items: center;
justify-content: center;
/* text-align: center;*/
}
#main-art {
/* background: #795387;*/
width: 55%;
height: auto;
padding: 0vh 0px 0px 0vw; /* ... 5vh 0px 0px 4vw; top, right, bottom, left */
/* padding: 40vh 0 10vh 0;*/
/* padding: 60px 0;
margin: 0 auto;*/
/* margin: 0 0 0 0;*/
margin: 0 0 0vh 0;
/* margin-top: 40vh; ... only effects home page - not galleris */
opacity: 100%;
display: block;
/* align-items: center;*/
/* justify-content: center;
position: relative;*/
}
.overlay {
position: fixed;
/* left: 0vw; */
width: 100vw; /* 100%; */
height: 100%;
background: rgba(255, 255, 255, 0.98);
/* z-index: 9;*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: none;
border-radius: none;
box-shadow: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.overlay iframe {
width: 100%; /* 96%; */
height: 100%;
/* border: none;*/
/* padding: 0;*/
opacity: 1;
overflow-y: hidden;
overflow: hidden;
z-index: 9;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: none;
border-radius: none;
box-shadow: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.close-overlayTT {
position: absolute;
top: 100px;
right: 50px;
font-size: 1.5rem;
color: #870002;
cursor: pointer;
background: rgba(0,0,0,0.1);
padding: 0.5rem;
border-radius: 50%;
z-index: 11;
}
.hidden {
display: none;
}
.bottom-gallery {
/* background: #795387;*/
background: #FFFFFF;
width: 100%;
height: 60vh; /* 30vh;*/
margin-top: 0vh;
/* padding-left: 20vw; */
padding: 0vh 0 0 20vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10vw;
}
.gallery-item {
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.gallery-item img {
width: 18vw;
display: block;
transition: opacity 0.3s ease;
cursor: pointer;
opacity: 1;
}
.gallery-item img:hover {
opacity: .5;
}
.caption { /* ... text under bottom gallery images on homepage */
margin-top: 1vh;
font-size: 1vw;
color: #333;
text-align: center;
/* font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; */
letter-spacing: .3vw;
font-weight: 500;
opacity: .6;
}
.caption-label { /* ... bottom gallery labels next to name */
position: absolute;
top: 35%;
left: 45%;
transform: translate(-50%, -50%);
background: transparent;
font-size: 1.6vw;
font-weight: 400;
color: #555;
opacity: 0;
white-space: nowrap;
pointer-events: auto;
cursor: default;
}
.caption-label.visible {
opacity: 1;
}
.category-label { /* ... category label next to name */
/* background: #795387;*/
position: absolute;
top: 35%;
left: 45%;
transform: translate(-50%, -50%);
background: transparent;
font-size: 1.6vw;
font-weight: 400;
color: #555;
opacity: 0;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
white-space: nowrap;
pointer-events: auto;
cursor: default;
}
.category-label.visible {
opacity: 1;
}
.site-footer {
position: relative; /* inherit; */
/* bottom: 0vh;*/
padding: 0 0 1vh 5vw;
width: 100vw;
height: 3vh;
text-align: center;
font-size: .7vw;
line-height: 20px;
font-weight: 400;
letter-spacing: .9vw;
margin-top: 10vh;
z-index: 6;
}
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXX END OF SETTINGS FOR ONION AND TV XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* Base styles ... EFFECTS MOST DESKTOP MODES */
@media screen and (min-width: 1024px) {
/* Desktop styles */
headerTT {
background: #74A9D9;
}
.bottom-galleryTT {
flex-direction: row;
gap: 10vw;
}
.hamburger-menu {
display: none !important; /* Force hide on desktop */
}
.sidebar {
display: block !important; /* Always show sidebar on desktop */
width: 15vw;
position: fixed;
}
}
/* Tablet and smaller desktops .... EFFECTS BOTH PHONE MODES */
@media screen and (max-width: 1023px) {
.sidebarTT {
width: 20vw;
}
headerTT {
background: #74A9D9;
}
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Mobile devices - Portrait */
@media screen and (max-width: 767px) and (orientation: portrait) {
/* xxx to disable the gallery from scrolling behind the hamberger menu in portrait mode */
body.no-scroll-mobile {
overflow: hidden;
height: 100vh;
position: fixed;
width: 100%;
}
/* ... EVERYTHING ABOVE THIS IS NEW ... ATTEMPTING TO SOLVE NAME ISSUE */
body{
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
/*
body:has(.sidebar.active) {
overflow: hidden !important;
height: 100vh;
}
*/
header {
background: #FFFFFF; /* background: #64C99C; */
font-size: 7vw; /* 1.5em + 1.3vw*/
/* padding: 2vh 0 0 20px;*/
letter-spacing: 1vw; /* 1vw; 0.2em; */
text-align: center; /* Center the header text */
/*padding: 2vh 0 0 4vw; *//* Remove left padding */
padding: 0vh 0vw 0 0vw;
margin: 0 0 0 0;
/* white-space: nowrap; */ /* Keeps text on one line */
height: 8vh; /* 10vh; 8vh; ... RAISE TO NOT COVER IMAGE */
}
#header-rollover {
/* background: #64C99C; */
position: absolute;
left: 53%; /* Center horizontally */
/* padding-left: 5vw;*/
top: 40%; /* 30%; */
transform: translate(-50%, -50%); /* Center both vertically and horizontally */
text-decoration: none;
color: inherit;
cursor: pointer;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
white-space: nowrap; /* Ensures header text stays on one line */
padding: 0vh 4vw 0 7vw;
margin: 0 0 0 0;
/* letter-spacing: 1.1vw;*/
/* width: 2vw;*/
}
.sidebar { /* ... CONTROLS CATEGORIES MENU bg IN PROTRAIT MODE */
/* background: #66B0ED;*/
display: none;
width: 100%;
background: rgba(255, 255, 255, 0.85); /* (255, 255, 255, 0.80); (255, 255, 255, 0.95) */
position: fixed;
top: 7vh; /* 5vh; 90px; */
height: calc(100dvh - 9vh); /* calc(100vh - 9vh); */
padding-top: 0vh; /* 20px; */
z-index: 8;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 6vh;
}
.sidebar.active {
display: block;
}
.categories {
height: auto;
min-height: 100%;
padding-bottom: 0vh; /* extra safety ... NEW ADDS OR REMOVES FROM UNDER VFX */
}
.categories li {
/* background: #74A9D9;*/
font-size: 4.8vw;
font-weight: 500;
line-height: 6vh; /* 5.5vh; */
opacity: .8;
margin: 0 0 0 0;
padding: 0 0 0 0;
left: 0;
text-align: left;
letter-spacing: .8vw;
height: auto;
overflow: visible;
}
.hamburger-menu {
background: #66B0ED;
/* display: block;
position: fixed;*/
/* top: 5vh;
left: 3vw; */
z-index: 2000;
cursor: pointer;
/* display: flex;
flex-direction: column;*/
/* justify-content: space-between;*/
}
.overlay {
position: relative; /* ← CRITICAL */
height: auto;
overflow: visible;
}
#overlay-frame {
/* z-index: 20; */ /* lower than hamburger */
/* background: #66B0ED;*/
background: #FFFFFF;
width: 100vw;
margin: 0vh 0 0 0;
padding: 0 0 0 0;
/* z-index: 20;*/
border: none; /* ... WTF ... IT CAUSED AN OFFSET */
box-shadow: none;
/*overflow-y: auto; */
}
/* ensure overlay doesn't cover hamburger */
#overlay {
/* z-index: 20; */ /* lower than hamburger */
/* background: #66B0ED;*/
background: #FFFFFF;
width: 100vw;
margin: 10vh 0 0 0; /* 10vh 0 0 0; */
padding: 0 0 0 0;
left: 0;
/* z-index: 20;*/
overflow-y: auto;
height: 100%;
/*height: 100%;
overflow-y: auto;
max-height: none;*/
}
.overlay iframe { /* ... gallery menu*/
/* background: #76E9C8; */ /* ... cant set an iframe bg?*/
/* top: 20vh; ... does not move galleries down */
width: 100vw; /* 96%; */
/* height: 100%; */ /* 100%; */
border: none;
padding: 0 0 0 0; /* Remove padding */
margin: 0vh 0 0 0;
opacity: 1;
overflow-y: auto; /* Only iframe scrolls */
/* overflow: hidden;*/ /* Hide horizontal scroll */
/* min-height: 100%; */
height: auto;
min-height: 100vh;
overflow: visible;
/* z-index: 9; */
/* padding-top: 40vh; ... does move galleries down ... but creates issues */
/* margin-top: 40vh; ... does move galleries down ... but creates issues */
}
iframeTT { /* ... gallery menu*/
/* background: #76E9C8; */ /* ... cant set an iframe bg?*/
width: 100vw; /* 96%; */
padding: 0 0 0 0; /* Remove padding */
margin: 0vh 0 0 0;
}
.container {
/*background: #66B0ED; */
position: relative;
/* min-height: auto;*/
/* margin-bottom: 0vh;*/
margin: 0vh 0 0vh 0; /*... moves image up ... but it then image becomes cropped */
padding: 0vh 0 0vh 0;
width:100vw;
height: auto;
/*top: -20px; ... moves image up ... but it then becomes cropped */
/* z-index: 1000 !important;*/
/* overflow-y: visible; */
}
.main-content {
/* background: #A7E3A6; */
/*overflow-y: auto;*/
/* display: flex;
flex-direction: column;*/
padding: 0 0 0 0; /* ... spacing around main image */
margin: 0 0 0 0;
margin-top: 7vh; /* 10vh ... should match header ... USE TO MOVE IMAGE UP ... but it still will be under the header*/
height: auto; /* auto; ... this seems to keep footer at bottom 100vh; */
width:100vw;
/* min-height: 100vh; ... this added too much room at bottom under footer */
overflow-y: visible;
}
/* ... MAIN IMAGE */
.art-image { /* ... outside */
width: 100%;
height: auto;
padding: 0vh 0 3.5vh 0vw; /* ... spacing around main image */
margin: 0 0 0 0;
/* top: -100px; */
}
#main-art { /* ... inside */
padding: 0vh 0 0 0vw;
margin: 0vh 0 0 0; /* ... moving it up crops itby the header */
width: 140%;
/* top: -100px;*/
/* display: block;
height: auto;*/
}
.bottom-gallery {
/* background: #429E3E;*/
width: 100%;
height: auto;
/* margin-top: 0;
padding: 0 0vw;*/
flex-direction: column;
gap: 2vh;
position: relative;
order: 2;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.gallery-item {
/* background: #FFFF9C;*/
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.gallery-item img {
width: 55vw;
height: auto;
padding: 0vh 0 0 0vw;
margin: 0 0 0 0;
}
.caption { /* ... text under recent work on homepage */
font-size: 3.6vw; /* 1rem */
margin-top: 2vh;
margin-bottom: 0vh;
font-weight: 500;
opacity: .7;
}
.caption-label { /* ... bottom gallery labels next to name */
/* background: #FFFF9C;*/
position: absolute;
top: 10vh; /* 50%; */
left: 50%;
transform: translate(-50%, -50%);
background: transparent; /* remove color block */
font-size: 5vw; /* 0.7em; */
font-weight: 400;
color: #555;
opacity: 1;
/* transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;*/
white-space: nowrap;
pointer-events: auto;
cursor: default;
width: 100vw;
height: 56%; /* ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
}
.caption-label.visible { /* ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
background: #FFFFFF;
opacity: 1;
}
.category-labelTT { /* ... category label next to name ... WAS BLOCKING ... FACES ... IN MOBILE MENU */
/* background: #FFFF9C;*/
background: transparent; /* remove color block */
position: absolute;
top: 9vh; /* 8vh; 35%; ... should match header */
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.7em;
font-weight: 400;
/* color: #555;*/
opacity: 0;
/* transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out; */ /* ... only applies to Digital Sketch? */
white-space: nowrap;
pointer-events: auto;
/* cursor: default;*/
width: 100vw;
height: 10%; /* 60%; ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
}
.category-label.visible {
background: #FFFFFF;
opacity: 1;
z-index: 5; /* ... to hide recents lable */
}
.site-footer {
/* background: #FFFF9C;*/
position: relative;
width: 100%;
max-width: 100%;
font-size: 2.3vw; /* 0.6rem */
font-weight: 400;
letter-spacing: 2vw;
padding-left: 0vw;
line-height: 2vh;
text-wrap: wrap;
height: auto;
/* padding-top: 0vh;*/
/* padding: 0vh 5vw 0vh 5vw;
margin: 0vh 0 0vh 0;*/
/* bottom: -5vh; */ /* -3vh; auto; */
padding: 0 0 0 0; /* remove left/right offsets */
margin: 5vh 0 1vh 0;
/* margin-top: 6vh;
*/
bottom: auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
}
/* Mobile devices - Landscape */
@media screen and (max-height: 767px) and (max-width: 1000px) and (orientation: landscape) {
/* xxx to disable the gallery from scrolling behind the hamberger menu in portrait mode */
body.no-scroll-mobile {
overflow: visible;
height: 100vh;
position: fixed;
width: 100%;
}
body{
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
/* Lock background scroll when sidebar is active */
/*
body.sidebar-open .container {
overflow: hidden !important;
height: 100vh;
}
*/
header {
/* background: #74A9D9;*/
background-color: #FFFFFF;
font-size: 3vw; /* calc(1.5em + 1vw); */
/* padding: 2vh 0 0 20px;*/
letter-spacing: 1.7vw;
text-align: center; /* Center the header text */
/*padding: 2vh 0 0 4vw; *//* Remove left padding */
padding: 0vh 0 0 0vw;
margin: 0 0 0 0;
white-space: nowrap; /* Keeps text on one line */
height: 12vh; /* 20vh; 14vh; ... RAISE TO NOT COVER IMAGE */
top: 0;
}
#header-rollover {
position: absolute;
left: 50%; /* Center horizontally */
top: 50%; /* 30%; */
transform: translate(-50%, -50%); /* Center both vertically and horizontally */
text-decoration: none;
color: inherit;
cursor: pointer;
transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;
white-space: nowrap; /* Ensures header text stays on one line */
}
.sidebar { /* ... CONTROLS CATEGORIES MENU bg IN PROTRAIT MODE */
/* background: #66B0ED;*/
display: none;
width: 100%;
background: rgba(255, 255, 255, 0.85); /* (255, 255, 255, 0.95) */
position: fixed;
top: 9vh; /* 12vh; 90px; ... rase or lower to match header */
height: calc(100vh - 9vh); /* 100vh - 90px increase or decrease to cover whole viewport */
z-index: 8;
padding-top: 0vh;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 8vh;
}
.sidebar.active {
display: block;
}
.categories {
/* background: #50B070;*/
height: auto;
min-height: 100%;
padding-bottom: 15vh;
}
.categories li {
/* background: #74A9D9;*/
font-size: 2vw;
font-weight: 500;
line-height: 11vh; /* 5.6vh;*/
opacity: .8;
margin: 0 0 0 0;
padding: 0 0 0 0;
left: 0;
text-align: left;
letter-spacing: 2vw;
height: auto;
overflow-y: visible;
}
.hamburger-menu {
/*background: #74A9D9;*/
/* display: block;
position: fixed;
top: 4vh !important;
left: 1.5vw !important; */
/* z-index: 11; */
top: 4vh !important;
left: 1.5vw !important;
cursor: pointer;
}
/* ensure overlay doesn't cover hamburger */
#overlay {
/* background: #A6C57B;*/
background: #FFFFFF;
width: 100vw;
margin: 14vh 0 0 0; /* 17vh 19vh ... effects all galleries ... LOWERS & RAISES GALLERIES BELOW HEADER ... JUST HAVE TO ADJUST EACH GALLERY FOOTER*/
padding: 0 0 0 0;
left: 0;
overflow-y: auto;
height: 100%;
/* z-index: 2000; */
}
.overlay iframe { /* ... gallery menu*/
/* background: #76E9C8; */ /* ... cant set an iframe bg?*/
width: 100vw; /* 96%; */
height: 100%; /* 100%; */
border: none;
padding: 0 0 0 0; /* Remove padding */
margin: 0vh 0 0 0;
opacity: 1;
overflow-y: auto; /* Only iframe scrolls */
overflow: hidden; /* Hide horizontal scroll */
}
.close-overlay {
/* background: #66B0ED;*/
opacity: 0;
}
.container { /* ... main image on homepage ... not gallerys */
/* display: flex;*/
/* background: #A5D4CD; */
background: #FFFFFF; /* #FFFFFF; #D77E7E;*/
margin-left: 0; /* Remove margin since sidebar is not fixed */
width: 100%;
/* height: 100vh; */ /* 100vh; auto; */
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 0 0 40vh 0;
}
.main-content {
/* background: #6C8610;*/
background: #FFFFFF;
display: flex;
flex-direction: column;
/* margin-top: 7vh; */ /* 90px; */
height: auto !important; /* Allow it to grow with content */
min-height: 100vh;
/* min-height: calc(100vh - 7vh); */ /* - 7vh 90px */
width: 100%;
overflow-y: visible; /* scroll; */
overflow-x: hidden;
padding: 0 0 0vh 0vw;
}
/* ... MAIN IMAGE */
.art-image { /* ... outside */
width: 100%;
height: auto;
padding: 0 0 8vh 0vw; /* ... spacing around main image */
margin: 0 0 0 0;
/* top: 100px; */
/* overflow: visible;*/
}
#main-art { /* ... inside */
padding: 0 0 0 0;
margin: 0 0 0 0;
width: 100%;
height: auto;
/* margin-top: -2vh;*/
/* raises the image up a bit */
/* width: 100%;
height: auto;
margin: 0;
padding: 0;
transform: translateY(-4vh);
*/
/*top: 0;*/
}
.bottom-gallery {
/* background: #72658B;*/
width: 100%;
height: auto;
margin-top: 0;
margin-bottom: 0vh;
padding: 0 0vw;
flex-direction: row;
gap: .5vw;
position: relative;
order: 2;
}
.gallery-item {
/* background: #7FBFA6;*/
width: 40vw;
height: auto;
/* padding: 2vh 0vh 2vh 0vw;*/
margin: 0vh 0vh 0vh 0vw;
padding: 2vh 0 2vh 0;
}
.gallery-item img {
/* background: #6693D0;*/
width: 25vw;
height: auto;
/*padding: 0vh 10vh 0vh 10vw;*/
/* margin: 0vh 10vh 0vh 10vw;*/
margin: 0 0 0 0;
padding: 0 0 0 0;
/* border: none;
box-shadow: none;*/
}
.caption { /* ... text under recent work on homepage */
font-size: 1.6vw; /* 1rem */
margin-top: 2vh;
margin-bottom: 2vh;
font-weight: 450;
opacity: .8;
letter-spacing: .8vw;
/* margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
box-shadow: none;*/
}
.caption-label { /* ... bottom gallery labels next to name */
/* background: #FFFF9C;*/
background: transparent; /* remove color block */
position: absolute;
top: 16vh; /* 50%; */
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.7vw; /* 0.7em; */
font-weight: 450;
letter-spacing: 1vw;
color: #555;
opacity: 1;
/* transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out;*/
white-space: nowrap;
pointer-events: auto;
cursor: default;
width: 100vw;
height: 56%; /* ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
}
.caption-label.visible { /* ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
background: #FFFFFF;
opacity: 1;
}
.category-label { /* ... category label next to name */
/*background: #FFFF9C;*/
background: transparent; /* remove color block */
position: absolute;
top: 16vh; /* 8vh; 35%; ... CAN NOT COVER NAME */
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.7vw;
font-weight: 450;
letter-spacing: 1vw;
/* color: #555;*/
opacity: 0;
/* transition: opacity 0.4s ease, text-shadow 0.4s ease-in-out; */ /* ... only applies to Digital Sketch? */
white-space: nowrap;
pointer-events: auto;
/* cursor: default;*/
width: 100vw;
height: 60%; /* 56%; ... bottom gallery labels next to name .. ADDED JUST TO COVER MAIN IMAGE ON HOME PAGE */
}
.category-label.visible {
background: #FFFFFF;
opacity: 1;
z-index: 5; /* ... to hide recents lable */
}
/*
.site-footer {
position: relative;
width: 100vw;
font-size: 1.3vw;
line-height: 20px;
letter-spacing: 1vw;
opacity: .7;
text-wrap: wrap;
padding: 0vh 0 15vh 0vw;
margin: 6vh 0 0 0;
height: auto;
bottom: 0vh;
}
*/
.site-footer {
/* background: #F7A83B;*/
background-color: #FFFFFF;
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 5vh; /* 25.5vh; 13.5vh; ... INCREASE TO FIT FOOTER IN ... reduce to lower gallery */
color: #000000;
text-align: center;
font-size: 1.3vw;
line-height: auto;
/* font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; */
font-weight: 400;
letter-spacing: .9vw;
white-space: pre;
z-index: 1; /* 20; */
padding: 0vh 0;
/* margin: 0vh auto 0 auto;*/ /* 3vh auto 0 auto; increase to lower footer */
margin-top: 50vh;
/* display: flex;*/
justify-content: center;
align-items: center;
/* opacity: 0;*/
clear: both;
/* display: block;*/
}
}
/* ========================================================== */
/* Hamburger Menu Styles */
.hamburger-menu {
/* background: #A65D5D;*/
width: 25px; /* 25px; */
height: 18px; /* 18px; */
margin: 0 0 0 0;
padding: 0 0 0 0;
position: fixed;
top: 2vh;
left: 3vw;
display: flex;
flex-direction: column;
justify-content: space-between;
background: transparent;
border: none;
/* padding: 0;*/
z-index: 2000;
}
.hamburger-menu span {
/*background: #A65D5D;*/
width: 100%;
height: 2px;
background-color: #0078d7; /* Microsoft blue color */
transition: all 0.3s ease;
}
/*
.hamburger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger-menu.active span:nth-child(2) {
opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
*/