diff --git a/.eleventy.js b/.eleventy.js index 1d2e23b..9b4c14e 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -6,7 +6,6 @@ const i18n = require('eleventy-plugin-i18n'); const translations = require('./src/_data/i18n'); module.exports = function (eleventyConfig) { - // PLUGINS ************************************************************** eleventyConfig.addPlugin(syntaxHighlight); @@ -26,11 +25,10 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(i18n, { translations, fallbackLocales: { - '*': 'en-US' - } + '*': 'en-US', + }, }); - eleventyConfig.setEjsOptions({ rmWhitespace: true, context: { @@ -59,12 +57,12 @@ module.exports = function (eleventyConfig) { // } // }); - eleventyConfig.addPassthroughCopy("styles/fonts"); - eleventyConfig.addPassthroughCopy("src/assets/images/**/*.png"); - eleventyConfig.addPassthroughCopy("src/assets/images/**/*.svg"); - eleventyConfig.addPassthroughCopy("src/assets/images/**/*.jpg"); - eleventyConfig.addPassthroughCopy("node_modules/@glidejs/glide/dist"); - eleventyConfig.addPassthroughCopy("node_modules/blueimp-md5/js"); + eleventyConfig.addPassthroughCopy('styles/fonts'); + eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png'); + eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg'); + eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg'); + eleventyConfig.addPassthroughCopy('node_modules/@glidejs/glide/dist'); + eleventyConfig.addPassthroughCopy('node_modules/blueimp-md5/js'); eleventyConfig.addTransform('htmlmin', (content, outputPath) => { if (outputPath.endsWith('.html')) { @@ -84,15 +82,25 @@ module.exports = function (eleventyConfig) { const fg = require('fast-glob'); // Run search for images in /screenshots - const galleryImages = fg.sync(['**/images/screenshots/*resized*', '!**/_site']); + const galleryThumbnails = fg.sync(['**/images/screenshots/*resized*', '!**/_site']); + const galleryImagesAll = fg.sync(['**/images/screenshots/*', '!**/_site']); //Create collection of screenshots - eleventyConfig.addCollection('screenshots', function (collection) { - return galleryImages.map(url => { + eleventyConfig.addCollection('screenshotThumbnails', function (collection) { + return galleryThumbnails.map((url) => { return url.replace('src/', ''); }); }); + //Create collection of screenshots + eleventyConfig.addCollection('screenshotHires', function (collection) { + return galleryImagesAll + .filter((url) => !url.includes('resized')) + .map((url) => { + return url.replace('src/', ''); + }); + }); + return { passthroughFileCopy: true, dir: { input: 'src', output: '_site', data: '_data' }, diff --git a/package.json b/package.json index 4c31aa3..677d6d9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "my-blog", - "version": "1.0.0", - "description": "My blog", + "name": "visual-anatomy-3d", + "version": "1.0.4", + "description": "Visual Anatomy 3D", "scripts": { "build-dev:webpack": "webpack", "watch:webpack": "webpack --watch", diff --git a/src/_includes/blurb.ejs b/src/_includes/blurb.ejs index 1ebac85..30f7728 100644 --- a/src/_includes/blurb.ejs +++ b/src/_includes/blurb.ejs @@ -13,33 +13,31 @@
- +
\ No newline at end of file + .before-and-after .foreground-img { + background-image: url('./assets/images/slider-2.png'); + background-position-x: -1px; + width: 59%; + } + diff --git a/src/_includes/footer.ejs b/src/_includes/footer.ejs index 9cc7aba..dc7f1f6 100644 --- a/src/_includes/footer.ejs +++ b/src/_includes/footer.ejs @@ -4,7 +4,7 @@ GraphicViZion
- © 2021 by GraphicViZion + © <%= new Date().getFullYear() %> by GraphicViZion
this site was hand-crafted by Spencer Flagg @@ -12,6 +12,17 @@
- \ No newline at end of file + diff --git a/src/_includes/hero.ejs b/src/_includes/hero.ejs index 336e726..815146c 100644 --- a/src/_includes/hero.ejs +++ b/src/_includes/hero.ejs @@ -1,4 +1,4 @@ -
+
<% include /nav %> + + + + + + + + <%= site.title %> @@ -86,30 +118,16 @@
- - + - + + + + diff --git a/src/_includes/store-icons/android.svg b/src/_includes/store-icons/android.svg index 0308660..e95dfe6 100644 --- a/src/_includes/store-icons/android.svg +++ b/src/_includes/store-icons/android.svg @@ -1,3 +1,3 @@ - + diff --git a/src/_includes/store-icons/ios.svg b/src/_includes/store-icons/ios.svg index f3e47b4..df76132 100644 --- a/src/_includes/store-icons/ios.svg +++ b/src/_includes/store-icons/ios.svg @@ -1,3 +1,3 @@ - + diff --git a/src/_includes/store-icons/macos.svg b/src/_includes/store-icons/macos.svg index f7520a2..c00c75b 100644 --- a/src/_includes/store-icons/macos.svg +++ b/src/_includes/store-icons/macos.svg @@ -1,3 +1,3 @@ - + diff --git a/src/_includes/store-icons/windows.svg b/src/_includes/store-icons/windows.svg index 83cac81..4e3448a 100644 --- a/src/_includes/store-icons/windows.svg +++ b/src/_includes/store-icons/windows.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/systems/icons/circulatory.png b/src/assets/images/systems/icons/circulatory.png deleted file mode 100644 index 39ca532..0000000 Binary files a/src/assets/images/systems/icons/circulatory.png and /dev/null differ diff --git a/src/assets/images/systems/icons/digestive.png b/src/assets/images/systems/icons/digestive.png deleted file mode 100644 index 400dadf..0000000 Binary files a/src/assets/images/systems/icons/digestive.png and /dev/null differ diff --git a/src/assets/images/systems/icons/endocrine.png b/src/assets/images/systems/icons/endocrine.png deleted file mode 100644 index 81a4c8e..0000000 Binary files a/src/assets/images/systems/icons/endocrine.png and /dev/null differ diff --git a/src/assets/images/systems/icons/integumentary.png b/src/assets/images/systems/icons/integumentary.png deleted file mode 100644 index 846a2ca..0000000 Binary files a/src/assets/images/systems/icons/integumentary.png and /dev/null differ diff --git a/src/assets/images/systems/icons/ligamentous.png b/src/assets/images/systems/icons/ligamentous.png deleted file mode 100644 index 0ac0682..0000000 Binary files a/src/assets/images/systems/icons/ligamentous.png and /dev/null differ diff --git a/src/assets/images/systems/icons/lymphatic.png b/src/assets/images/systems/icons/lymphatic.png deleted file mode 100644 index ee23d90..0000000 Binary files a/src/assets/images/systems/icons/lymphatic.png and /dev/null differ diff --git a/src/assets/images/systems/icons/muscular.png b/src/assets/images/systems/icons/muscular.png deleted file mode 100644 index 6ed4074..0000000 Binary files a/src/assets/images/systems/icons/muscular.png and /dev/null differ diff --git a/src/assets/images/systems/icons/nervous.png b/src/assets/images/systems/icons/nervous.png deleted file mode 100644 index d397c91..0000000 Binary files a/src/assets/images/systems/icons/nervous.png and /dev/null differ diff --git a/src/assets/images/systems/icons/respiratory.png b/src/assets/images/systems/icons/respiratory.png deleted file mode 100644 index 011a21a..0000000 Binary files a/src/assets/images/systems/icons/respiratory.png and /dev/null differ diff --git a/src/assets/images/systems/icons/skeletal.png b/src/assets/images/systems/icons/skeletal.png deleted file mode 100644 index 44170df..0000000 Binary files a/src/assets/images/systems/icons/skeletal.png and /dev/null differ diff --git a/src/assets/images/systems/icons/urogenital.png b/src/assets/images/systems/icons/urogenital.png deleted file mode 100644 index c2d7466..0000000 Binary files a/src/assets/images/systems/icons/urogenital.png and /dev/null differ diff --git a/src/assets/styles/_blurb.css b/src/assets/styles/_blurb.css index 3bacfb3..89b78c0 100644 --- a/src/assets/styles/_blurb.css +++ b/src/assets/styles/_blurb.css @@ -101,7 +101,7 @@ article.blurb__wrapper { height: 30px; border-radius: 50%; background-color: white; - left: calc(50% - 18px); + left: calc(59% - 18px); top: calc(50% - 18px); display: flex; justify-content: center; @@ -125,4 +125,4 @@ article.blurb__wrapper { border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(135deg); -} \ No newline at end of file +} diff --git a/src/assets/styles/_footer.css b/src/assets/styles/_footer.css index 0bef799..353e3de 100644 --- a/src/assets/styles/_footer.css +++ b/src/assets/styles/_footer.css @@ -35,7 +35,7 @@ footer ul { display: flex; flex-direction: column; flex-wrap: wrap; - max-height: 8.5rem; + max-height: 15.5rem; row-gap: 0.5rem; column-gap: 3rem; } @@ -80,7 +80,7 @@ footer li a:hover svg { } .copywrite { - margin-bottom: 3rem; + margin-bottom: 9rem; } .credit { @@ -94,4 +94,4 @@ footer li a:hover svg { .credit a:hover { text-decoration: underline; -} \ No newline at end of file +} diff --git a/src/assets/styles/_hero.css b/src/assets/styles/_hero.css index 436a324..bae0571 100644 --- a/src/assets/styles/_hero.css +++ b/src/assets/styles/_hero.css @@ -79,7 +79,8 @@ text-transform: uppercase; font-size: 1.5rem; background: var(--c-3); border-radius: 999px; -padding: 1.5rem 2rem; +padding: 1.9rem 2rem; +line-height: 1; color: black; } diff --git a/src/assets/styles/_nav.css b/src/assets/styles/_nav.css index 682a966..1942121 100644 --- a/src/assets/styles/_nav.css +++ b/src/assets/styles/_nav.css @@ -52,10 +52,10 @@ content: ""; position: absolute; width: 100%; - height: 1px; + height: 2px; bottom: 0; left: 0; - background-color: var(--c-1); + background-color: var(--c-3); visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); diff --git a/src/assets/styles/_screenshots.css b/src/assets/styles/_screenshots.css index af2f0e5..b07a50a 100644 --- a/src/assets/styles/_screenshots.css +++ b/src/assets/styles/_screenshots.css @@ -38,7 +38,44 @@ max-width: 12rem; } +.glide__slide img[src*='landscape'] { + max-width: 37.8rem; + /* height: 100%; */ + width: unset; + aspect-ratio: 428 / 241; +} + .glide__slide img { border-radius: 2rem; + /* pointer-events: none; */ + cursor:pointer; +} + +.hires-details { + display: flex; pointer-events: none; -} \ No newline at end of file + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + align-items: center; + justify-content: center; + background: white; + padding: 2rem; + z-index: 2; + opacity: 0; + transition: opacity 0.1s ease-in; +} + +.hires-details img{ + max-height: 100%; + max-width: 100%; + width: auto; +} + +.hires-details.hires-details--selected { + opacity: 1; + pointer-events: all; + cursor:pointer; +} diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index 5b0009a..2c0c2bf 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -108,13 +108,13 @@ a:hover { unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } */ -@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); +/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); -@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); +@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); */ -@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); +@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); html { font-size: 2vmin; @@ -151,6 +151,67 @@ body{ --viewportWidth: calc(100vw - var(--scrollbarWidth)); } +@keyframes pageload { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +body { + animation: pageload 1.5s 1; +} + +.site-logo { + height: 5rem; + width: 5rem; + transform: rotateZ(0deg) translateY(0.4rem); + transition: 0.2s all; + border: 3px solid var(--c-1); + border-radius: 1rem; +} + +.site-logo:hover { + transform: rotateZ(4deg) translateY(0.4rem) scale(1.1); +} + +.site-header { + display: flex; + justify-content: center; + align-items: baseline; + gap: 1rem; +} + +.no-flexbox-gap .site-header>*:not(:last-child) { + margin-right: 1rem; +} + +.site-title { + font-family: Bebas Neue; + font-style: normal; + font-weight: normal; + font-size: 3rem; + line-height: 1; + letter-spacing: 0.24em; + text-transform: uppercase; + width: auto; + margin: 3rem 0 0 0; +} + +#page { + display: flex; + flex-direction: column; + align-items: center; +} + +.page-content { + display: flex; + flex-direction: column; + align-items: center; +} + .btn { transition: all 0.2s; font-family: Nunito, sans-serif; @@ -267,4 +328,4 @@ h2 { @import '_contact.css'; -@import '_footer.css'; \ No newline at end of file +@import '_footer.css';