final save before rewriting gallery again
This commit is contained in:
Nye Evans
parent
a69bd66d73
commit
e60442936c
3 changed files with 112 additions and 268 deletions
|
|
@ -28,7 +28,7 @@ button:focus {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
a:link, a:visited{
|
||||
a:link:not(.galleryLink), a:visited:not(.galleryLink){
|
||||
color: #ffd256;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
|
|
@ -94,92 +94,74 @@ h1{
|
|||
font-size: clamp(1rem, 1.2vw, 3rem);
|
||||
}
|
||||
|
||||
.programGallery{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
.gallery{
|
||||
display: flex;
|
||||
margin-left: 10vw;
|
||||
margin-right: 10vw;
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
height: 70vh;
|
||||
width: 70vw;
|
||||
|
||||
min-width: 800px;
|
||||
min-height: 500px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10vh;
|
||||
.galleryItem{
|
||||
margin-left: 4vw;
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
|
||||
.galleryImage{ /*all images should be 700x700*/
|
||||
grid-column: 2/8;
|
||||
grid-row: 2/12;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 2px solid #ffd256;
|
||||
border-bottom-left-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 5px;
|
||||
.galleryItem:hover + .galleryPopup{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryLink{
|
||||
grid-column: 2/8;
|
||||
grid-row: 2/12;
|
||||
|
||||
object-fit: cover;
|
||||
.popupImage:hover, .galleryPopup{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryPopup a{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.galleryTitle{
|
||||
grid-column: 2/12;
|
||||
grid-row: 1;
|
||||
.galleryPopup{
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: clamp(1rem, 3vw, 3rem);
|
||||
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
border: 2px solid #ffd256;
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
background-color: #ffd256;
|
||||
border-radius: 2px;
|
||||
color: #181818;
|
||||
width: 67.5vw;
|
||||
height: 15vw;
|
||||
margin-left: 4vw;
|
||||
text-decoration: none;
|
||||
transition: visibility 0.3s, opacity 0.5s;
|
||||
}
|
||||
|
||||
.galleryCaption{
|
||||
grid-column: 8/12;
|
||||
grid-row: 2/12;
|
||||
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
border: 2px solid #ffd256;
|
||||
border-left: none;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: clamp(1rem, 1.2vw, 3rem)
|
||||
.popupImage{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.galleryLeftArrow{
|
||||
grid-column: 1;
|
||||
grid-row: 5/6;
|
||||
|
||||
font-size: 7vw;
|
||||
.popupTextContainer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.galleryRightArrow{
|
||||
grid-column: 12;
|
||||
grid-row: 5/6;
|
||||
|
||||
font-size: 7vw;
|
||||
.galleryImage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.galleryImageContainer{
|
||||
height: 13.5vw;
|
||||
width: 13.5vw;
|
||||
}
|
||||
|
||||
.galleryTitle{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#outroText{
|
||||
|
|
@ -198,155 +180,3 @@ h1{
|
|||
|
||||
|
||||
|
||||
|
||||
@media (orientation:portrait){
|
||||
|
||||
body{
|
||||
/*
|
||||
touch-action: none;
|
||||
touch-action: pan-y;
|
||||
as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
|
||||
*/
|
||||
touch-action: manipulation; /*stops double tap zoom*/
|
||||
|
||||
-webkit-text-size-adjust: none; /*stops browsers messing with text size*/
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 10vw;
|
||||
|
||||
margin-left: 0vw;
|
||||
margin-right: 0vw;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 85vh;
|
||||
|
||||
padding-top: 0.5vh;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
height: 10vh;
|
||||
|
||||
}
|
||||
|
||||
.textBox{
|
||||
padding: 0;
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 3vh;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
|
||||
min-width: inherit;
|
||||
max-width: inherit;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-align: left;
|
||||
font-size: clamp(25px, 3.6vw, 50px);
|
||||
}
|
||||
|
||||
.profileImage{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.orangeBorder{
|
||||
border: 5px solid #ffd256;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#galleryHeader{
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
font-size: clamp(2rem, 4vw, 5rem);
|
||||
}
|
||||
|
||||
.programGallery{
|
||||
width: 92vw;
|
||||
|
||||
margin-left: 4vw;
|
||||
margin-right: 4vw;
|
||||
|
||||
border: 5px solid #ffd256;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.galleryImage{ /*all images should be 700x700*/
|
||||
grid-column: 1/13;
|
||||
grid-row: 2/7;
|
||||
|
||||
border-radius: 0;
|
||||
border: 5px solid #ffd256;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.galleryLink{
|
||||
grid-column: 1/13;
|
||||
grid-row: 2/7;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.galleryTitle{
|
||||
grid-column: 1/13;
|
||||
grid-row: 1;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
font-size: clamp(5px, 4vw, 50px);
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.galleryCaption{
|
||||
grid-column: 1/13;
|
||||
grid-row: 7/12;
|
||||
|
||||
font-size: clamp(5px, 3vw, 50px);
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.galleryLeftArrow{
|
||||
grid-column: 1;
|
||||
grid-row: 12;
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.galleryRightArrow{
|
||||
grid-column: 12;
|
||||
grid-row: 12;
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#outroText{
|
||||
margin-top: 20vh;
|
||||
margin-bottom: 20vh;
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
#socialBar{
|
||||
justify-content: center;
|
||||
font-size: 5vw;
|
||||
margin-bottom: 0.8vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue