Implement gallery
20
app.js
@ -1073,24 +1073,24 @@ imports.wbg.__wbindgen_memory = function() {
|
||||
const ret = wasm.memory;
|
||||
return addHeapObject(ret);
|
||||
};
|
||||
imports.wbg.__wbindgen_closure_wrapper18879 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1168, __wbg_adapter_34);
|
||||
imports.wbg.__wbindgen_closure_wrapper19265 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1249, __wbg_adapter_34);
|
||||
return addHeapObject(ret);
|
||||
}, arguments) };
|
||||
imports.wbg.__wbindgen_closure_wrapper25551 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1759, __wbg_adapter_37);
|
||||
imports.wbg.__wbindgen_closure_wrapper25937 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1840, __wbg_adapter_37);
|
||||
return addHeapObject(ret);
|
||||
}, arguments) };
|
||||
imports.wbg.__wbindgen_closure_wrapper25718 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1776, __wbg_adapter_40);
|
||||
imports.wbg.__wbindgen_closure_wrapper26104 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1857, __wbg_adapter_40);
|
||||
return addHeapObject(ret);
|
||||
}, arguments) };
|
||||
imports.wbg.__wbindgen_closure_wrapper26035 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1809, __wbg_adapter_43);
|
||||
imports.wbg.__wbindgen_closure_wrapper26421 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1890, __wbg_adapter_43);
|
||||
return addHeapObject(ret);
|
||||
}, arguments) };
|
||||
imports.wbg.__wbindgen_closure_wrapper26671 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1847, __wbg_adapter_46);
|
||||
imports.wbg.__wbindgen_closure_wrapper27057 = function() { return logError(function (arg0, arg1, arg2) {
|
||||
const ret = makeMutClosure(arg0, arg1, 1928, __wbg_adapter_46);
|
||||
return addHeapObject(ret);
|
||||
}, arguments) };
|
||||
|
||||
|
||||
BIN
img/gallery-1.jpg
Normal file
|
After Width: | Height: | Size: 298 KiB |
BIN
img/gallery-10.jpg
Normal file
|
After Width: | Height: | Size: 393 KiB |
BIN
img/gallery-11.jpg
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
img/gallery-12.jpg
Normal file
|
After Width: | Height: | Size: 513 KiB |
BIN
img/gallery-13.jpg
Normal file
|
After Width: | Height: | Size: 149 KiB |
BIN
img/gallery-2.jpg
Normal file
|
After Width: | Height: | Size: 311 KiB |
BIN
img/gallery-3.jpg
Normal file
|
After Width: | Height: | Size: 254 KiB |
BIN
img/gallery-4.jpg
Normal file
|
After Width: | Height: | Size: 291 KiB |
BIN
img/gallery-5.jpg
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
img/gallery-6.jpg
Normal file
|
After Width: | Height: | Size: 4.8 MiB |
BIN
img/gallery-7.jpg
Normal file
|
After Width: | Height: | Size: 6.5 MiB |
BIN
img/gallery-8.jpg
Normal file
|
After Width: | Height: | Size: 4.2 MiB |
BIN
img/gallery-9.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gabriel Tofvesson</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
|
||||
<script type="text/javascript">
|
||||
|
||||
140
styles.css
@ -1,11 +1,45 @@
|
||||
:root {
|
||||
--bg-color: #f5f8fa;
|
||||
--gallery-scale: 95vmin;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--bg-color: #182026;
|
||||
--bg-color: #00251a;
|
||||
--color-primary: #004d40;
|
||||
--color-accent: #39796b;
|
||||
}
|
||||
|
||||
:root[data-theme='mauve'] {
|
||||
--bg-color: #560027;
|
||||
--color-primary: #880e4f;
|
||||
--color-accent: #bc477b;
|
||||
}
|
||||
|
||||
:root[data-theme='gray'] {
|
||||
--bg-color: #455A64;
|
||||
--color-primary: #607D8B;
|
||||
--color-accent: #212121;
|
||||
}
|
||||
|
||||
:root[data-theme='purple'] {
|
||||
--bg-color: #512DA8;
|
||||
--color-primary: #673AB7;
|
||||
--color-accent: #009688;
|
||||
}
|
||||
|
||||
.bp3-card.bp3-dark, .bp3-dark .bp3-card {
|
||||
background-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.bp3-dark .bp3-button:not([class*="bp3-intent-"]):active, .bp3-dark .bp3-button:not([class*="bp3-intent-"]).bp3-active {
|
||||
background-color: var(--color-accent) !important;
|
||||
}
|
||||
|
||||
.bp3-dark .bp3-button:not([class*="bp3-intent-"]) {
|
||||
background-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
|
||||
button:focus, input[type=button]:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -121,21 +155,46 @@ body {
|
||||
}
|
||||
|
||||
.gallery {
|
||||
width: var(--gallery-scale);
|
||||
height: var(--gallery-scale);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 33vw;
|
||||
height: auto;
|
||||
.gallery > div:nth-of-type(1) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery > div:nth-of-type(2) {
|
||||
transform: translate(calc(calc(var(--gallery-scale) / 2) - 50%), 0);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery > div:nth-of-type(2) > img {
|
||||
float: left;
|
||||
max-width: var(--gallery-scale);
|
||||
max-height: var(--gallery-scale);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery > div:nth-of-type(2) > div {
|
||||
bottom: 0;
|
||||
padding: 60px 10px 10px 10px;
|
||||
width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
background: linear-gradient(to top, rgba(0, 75, 196, 0.699), rgba(133, 180, 255, 0));
|
||||
}
|
||||
|
||||
/* Gallery overlay transition properties */
|
||||
.gallery-image-description,
|
||||
.gallery > div:nth-of-type(2) > div,
|
||||
.gallery-next,
|
||||
.gallery-prev {
|
||||
position: absolute;
|
||||
@ -144,19 +203,12 @@ body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gallery-image-description {
|
||||
width: 33vw;
|
||||
transform: translate(0px, calc(-100% - 4px));
|
||||
background: linear-gradient(to top, rgba(0, 75, 196, 0.699), rgba(133, 180, 255, 0));
|
||||
padding: 60px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* Gallery overlay button positioning */
|
||||
.gallery-next,
|
||||
.gallery-prev {
|
||||
top: 50%;
|
||||
height: max(calc(100% - 4px), 10px);
|
||||
width: 7.5%;
|
||||
width: 12.5%;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
@ -165,17 +217,19 @@ body {
|
||||
left: 100%;
|
||||
transform: translate(-100%, -50%);
|
||||
padding-right: 2.5%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.gallery-prev {
|
||||
left: 0%;
|
||||
transform: translate(-0%, -50%);
|
||||
padding-left: 2.5%;
|
||||
padding-right: 5%;;
|
||||
}
|
||||
|
||||
.gallery:hover > .gallery-image-description,
|
||||
.gallery:hover > .gallery-next,
|
||||
.gallery:hover > .gallery-prev {
|
||||
.gallery > div:nth-of-type(2):hover > div,
|
||||
.gallery:hover .gallery-next,
|
||||
.gallery:hover .gallery-prev {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -183,3 +237,53 @@ body {
|
||||
.gallery-prev:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
line-height: 0;
|
||||
column-count: 5;
|
||||
column-gap: 5px;
|
||||
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0);
|
||||
}
|
||||
|
||||
.image-gallery div {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.image-gallery div img {
|
||||
width: 98% !important;
|
||||
height: auto !important;
|
||||
filter: grayscale(var(--grayscale,100%)) /*blur(var(--blur,1px))*/;
|
||||
transition: 250ms all;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.image-gallery div:hover {
|
||||
--grayscale: 0%;
|
||||
--blur: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.image-gallery {
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.image-gallery {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.image-gallery {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.image-gallery {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||