GabrielTofvesson/GabrielTofvesson.pages.gitea.tofvesson.se
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement gallery

Browse Source
This commit is contained in:
Gabriel Tofvesson 2023-01-11 05:27:12 +01:00
parent f88b2b56bf
commit 02baa7800d
17 changed files with 133 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app.js
View File

@ -1073,24 +1073,24 @@ imports.wbg.__wbindgen_memory = function() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper18879 = function() { return logError(function (arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper19265 = function() { return logError(function (arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 1168, __wbg_adapter_34); const ret = makeMutClosure(arg0, arg1, 1249, __wbg_adapter_34);
return addHeapObject(ret); return addHeapObject(ret);
}, arguments) }; }, arguments) };
imports.wbg.__wbindgen_closure_wrapper25551 = function() { return logError(function (arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper25937 = function() { return logError(function (arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 1759, __wbg_adapter_37); const ret = makeMutClosure(arg0, arg1, 1840, __wbg_adapter_37);
return addHeapObject(ret); return addHeapObject(ret);
}, arguments) }; }, arguments) };
imports.wbg.__wbindgen_closure_wrapper25718 = function() { return logError(function (arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper26104 = function() { return logError(function (arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 1776, __wbg_adapter_40); const ret = makeMutClosure(arg0, arg1, 1857, __wbg_adapter_40);
return addHeapObject(ret); return addHeapObject(ret);
}, arguments) }; }, arguments) };
imports.wbg.__wbindgen_closure_wrapper26035 = function() { return logError(function (arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper26421 = function() { return logError(function (arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 1809, __wbg_adapter_43); const ret = makeMutClosure(arg0, arg1, 1890, __wbg_adapter_43);
return addHeapObject(ret); return addHeapObject(ret);
}, arguments) }; }, arguments) };
imports.wbg.__wbindgen_closure_wrapper26671 = function() { return logError(function (arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper27057 = function() { return logError(function (arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 1847, __wbg_adapter_46); const ret = makeMutClosure(arg0, arg1, 1928, __wbg_adapter_46);
return addHeapObject(ret); return addHeapObject(ret);
}, arguments) }; }, arguments) };

BIN
app.wasm
View File

Binary file not shown.

BIN
img/gallery-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

BIN
img/gallery-10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 393 KiB

BIN
img/gallery-11.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
img/gallery-12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

BIN
img/gallery-13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
img/gallery-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
img/gallery-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 KiB

BIN
img/gallery-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 291 KiB

BIN
img/gallery-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
img/gallery-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
img/gallery-7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 MiB

BIN
img/gallery-8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
img/gallery-9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

1
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Gabriel Tofvesson</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
<script type="text/javascript"> <script type="text/javascript">

140
styles.css
View File

@ -1,11 +1,45 @@
:root { :root {
--bg-color: #f5f8fa; --bg-color: #f5f8fa;
--gallery-scale: 95vmin;
} }
:root[data-theme='dark'] { :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 { button:focus, input[type=button]:focus {
border: none; border: none;
outline: none; outline: none;
@ -121,21 +155,46 @@ body {
} }
.gallery { .gallery {
width: var(--gallery-scale);
height: var(--gallery-scale);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
overflow: hidden; display: flex;
border-radius: 20px; align-items: center;
} }
.gallery-image { .gallery > div:nth-of-type(1) {
width: 33vw; position: absolute;
height: auto; 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 overlay transition properties */
.gallery-image-description, .gallery > div:nth-of-type(2) > div,
.gallery-next, .gallery-next,
.gallery-prev { .gallery-prev {
position: absolute; position: absolute;
@ -144,19 +203,12 @@ body {
opacity: 0; 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 overlay button positioning */
.gallery-next, .gallery-next,
.gallery-prev { .gallery-prev {
top: 50%; top: 50%;
height: max(calc(100% - 4px), 10px); height: max(calc(100% - 4px), 10px);
width: 7.5%; width: 12.5%;
display: flex !important; display: flex !important;
align-items: center; align-items: center;
} }
@ -165,21 +217,73 @@ body {
left: 100%; left: 100%;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
padding-right: 2.5%; padding-right: 2.5%;
padding-left: 5%;
} }
.gallery-prev { .gallery-prev {
left: 0%; left: 0%;
transform: translate(-0%, -50%); transform: translate(-0%, -50%);
padding-left: 2.5%; padding-left: 2.5%;
padding-right: 5%;;
} }
.gallery:hover > .gallery-image-description, .gallery > div:nth-of-type(2):hover > div,
.gallery:hover > .gallery-next, .gallery:hover .gallery-next,
.gallery:hover > .gallery-prev { .gallery:hover .gallery-prev {
opacity: 1; opacity: 1;
} }
.gallery-next:hover, .gallery-next:hover,
.gallery-prev:hover { .gallery-prev:hover {
cursor: pointer; 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;
}
} }