diff --git a/package-lock.json b/package-lock.json index 6cd3906..79be68f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "source-map-loader": "^0.2.4", "typescript": "^3.9.7", "webpack": "^5.66.0", - "webpack-cli": "^4.9.1", + "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.7.3" } }, @@ -464,9 +464,9 @@ } }, "node_modules/@webpack-cli/configtest": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz", - "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz", + "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==", "dev": true, "peerDependencies": { "webpack": "4.x.x || 5.x.x", @@ -474,9 +474,9 @@ } }, "node_modules/@webpack-cli/info": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz", - "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz", + "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==", "dev": true, "dependencies": { "envinfo": "^7.7.3" @@ -486,9 +486,9 @@ } }, "node_modules/@webpack-cli/serve": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz", - "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz", + "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==", "dev": true, "peerDependencies": { "webpack-cli": "4.x.x" @@ -5708,18 +5708,18 @@ } }, "node_modules/webpack-cli": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz", - "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz", + "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^1.1.0", - "@webpack-cli/info": "^1.4.0", - "@webpack-cli/serve": "^1.6.0", + "@webpack-cli/configtest": "^1.2.0", + "@webpack-cli/info": "^1.5.0", + "@webpack-cli/serve": "^1.7.0", "colorette": "^2.0.14", "commander": "^7.0.0", - "execa": "^5.0.0", + "cross-spawn": "^7.0.3", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", "interpret": "^2.2.0", @@ -5732,6 +5732,10 @@ "engines": { "node": ">=10.13.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, "peerDependencies": { "webpack": "4.x.x || 5.x.x" }, @@ -6499,25 +6503,25 @@ } }, "@webpack-cli/configtest": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz", - "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz", + "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==", "dev": true, "requires": {} }, "@webpack-cli/info": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz", - "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz", + "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==", "dev": true, "requires": { "envinfo": "^7.7.3" } }, "@webpack-cli/serve": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz", - "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz", + "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==", "dev": true, "requires": {} }, @@ -10536,18 +10540,18 @@ } }, "webpack-cli": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz", - "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz", + "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==", "dev": true, "requires": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^1.1.0", - "@webpack-cli/info": "^1.4.0", - "@webpack-cli/serve": "^1.6.0", + "@webpack-cli/configtest": "^1.2.0", + "@webpack-cli/info": "^1.5.0", + "@webpack-cli/serve": "^1.7.0", "colorette": "^2.0.14", "commander": "^7.0.0", - "execa": "^5.0.0", + "cross-spawn": "^7.0.3", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", "interpret": "^2.2.0", diff --git a/package.json b/package.json index 3b39a1e..73837c8 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "source-map-loader": "^0.2.4", "typescript": "^3.9.7", "webpack": "^5.66.0", - "webpack-cli": "^4.9.1", + "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.7.3" } } diff --git a/site.css b/site.css index fe707b2..07054eb 100644 --- a/site.css +++ b/site.css @@ -1,147 +1,165 @@ html, body { - background-color: #fff; - color: #335; - font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif; - margin: 0; - padding: 0; + background-color: #fff; + color: #335; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif; + margin: 0; + padding: 0; } body { - overflow-x: hidden; + overflow-x: hidden; } body.no-scroll { - overflow: hidden; + overflow: hidden; } div { - box-sizing: border-box; + box-sizing: border-box; } h1 { - color: #69c; - cursor: pointer; - font-size: 45px; - font-weight: lighter; - line-height: 60px; - margin-bottom: 0; - margin-left: 30px; - margin-right: 30px; - margin-top: 30px; + color: #69c; + cursor: pointer; + font-size: 45px; + font-weight: lighter; + line-height: 60px; + margin-bottom: 0; + margin-left: 30px; + margin-right: 30px; + margin-top: 30px; } h2 { - color: #666; - font-size: 20px; - font-weight: normal; - line-height: 30px; - margin-bottom: 30px; - margin-left: 30px; - margin-right: 30px; - margin-top: 0px; + color: #666; + font-size: 20px; + font-weight: normal; + line-height: 30px; + margin-bottom: 30px; + margin-left: 30px; + margin-right: 30px; + margin-top: 0px; +} + +a { + color: #69c; + font-size: 18px; + text-decoration: none; +} + +a:hover { + text-decoration: underline; } .ImageSet h2 { - border-bottom: 1px solid #eef; + border-bottom: 1px solid #eef; } .Root-setCovers { - display: grid; - gap: 30px; + display: grid; + gap: 30px; + margin-top: 30px; } .SetCover { - align-items: center; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: end; - overflow: hidden; + align-items: center; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: end; + overflow: hidden; } .ImageSet-location, .ImageSet-description, .SetCover-location, .SetCover-description { - white-space: nowrap; + white-space: nowrap; } .ImageSet-location:after, .SetCover-location:after { - content: " · "; - white-space: break-spaces; + content: " · "; + white-space: break-spaces; } +.ImageSet-navigation { + display: flex; + justify-content: center; + margin: 30px 0; +} + + .Grid { - margin-bottom: 45px; + margin-bottom: 45px; } .Grid-row { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .Grid img { - cursor: pointer; + cursor: pointer; } .BigPicture { - align-items: center; - background-color: rgba(0, 0, 0, 0.6); - bottom: 0; - display: flex; - flex-direction: column; - justify-content: space-evenly; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 100; + align-items: center; + background-color: rgba(0, 0, 0, 0.6); + bottom: 0; + display: flex; + flex-direction: column; + justify-content: space-evenly; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 100; } .BigPicture-footer { - align-self: center; - display: flex; - flex: 0 0 auto; - justify-content: space-between; - max-width: 200px; - width: 100%; + align-self: center; + display: flex; + flex: 0 0 auto; + justify-content: space-between; + max-width: 200px; + width: 100%; } .BigPicture-footerLink { - color: #69c; - cursor: pointer; - font-size: 18px; - text-decoration: none; - text-shadow: 0 0 18px rgba(0, 0, 0, .7); + color: #69c; + cursor: pointer; + font-size: 18px; + text-decoration: none; + text-shadow: 0 0 18px rgba(0, 0, 0, .7); } .BigPicture-footerLink:hover { - text-decoration: underline; + text-decoration: underline; } @media (prefers-color-scheme: dark) { - html, - body { - background-color: #111; - color: #ccf; - } + html, + body { + background-color: #111; + color: #ccf; + } - .ImageSet h2 { - border-color: #335; - color: #bbb; - } + .ImageSet h2 { + border-color: #335; + color: #bbb; + } } @media (min-width: 900px) { - .Root-setCovers { - grid-template-columns: 1fr 1fr; - } + .Root-setCovers { + grid-template-columns: 1fr 1fr; + } } @media (min-width: 1400px) { - .Root-setCovers { - grid-template-columns: 1fr 1fr 1fr; - } + .Root-setCovers { + grid-template-columns: 1fr 1fr 1fr; + } } diff --git a/src/components/image_set.tsx b/src/components/image_set.tsx index e522eb5..26b769e 100644 --- a/src/components/image_set.tsx +++ b/src/components/image_set.tsx @@ -6,6 +6,7 @@ import * as React from "react"; export interface Props { imageSet: Model.ImageSet; onImageSelected: (img: Model.Image) => void; + onShowHome: () => void; setGridHeight: (height: number) => void; pageBottom: number; width: number; @@ -35,6 +36,9 @@ export class ImageSet extends React.PureComponent { width={this.props.width} height={this.props.height} /> +
+ Back +
); } diff --git a/src/components/root.tsx b/src/components/root.tsx index 59e2245..a68a616 100644 --- a/src/components/root.tsx +++ b/src/components/root.tsx @@ -75,6 +75,7 @@ export class Root extends React.PureComponent { pageBottom={this.state.pageBottom} setGridHeight={this._setGridHeight(0)} onImageSelected={this._onImageSelected} + onShowHome={this._onHomeSelected} width={this.state.width} height={this.state.height} />