v1.0.4 - updates to bring in sync with Acupunture improvements
This commit is contained in:
Spencer Flagg
parent
a68f2645a9
commit
e9cd5c734e
28 changed files with 289 additions and 94 deletions
34
.eleventy.js
34
.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,11 +82,21 @@ 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/', '');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -13,33 +13,31 @@
|
|||
<div class="before-and-after">
|
||||
<div class='img background-img'></div>
|
||||
<div class='img foreground-img'></div>
|
||||
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="before-and-after__slider">
|
||||
<input type="range" min="1" max="100" value="59" class="slider" name='slider' id="before-and-after__slider">
|
||||
<div class='slider-button'></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelector("#before-and-after__slider").addEventListener("input", (e) => {
|
||||
document.querySelector('#before-and-after__slider').addEventListener('input', (e) => {
|
||||
const sliderPos = e.target.value;
|
||||
// Update the width of the foreground image
|
||||
document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
|
||||
// Update the position of the slider button
|
||||
document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.before-and-after .background-img {
|
||||
background-image: url("./assets/images/slider-1.png");
|
||||
background-image: url('./assets/images/slider-1.png');
|
||||
background-position-x: -1px;
|
||||
}
|
||||
|
||||
.before-and-after .foreground-img {
|
||||
background-image: url("./assets/images/slider-2.png");
|
||||
background-image: url('./assets/images/slider-2.png');
|
||||
background-position-x: -1px;
|
||||
width: 50%;
|
||||
width: 59%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<a href="https://www.graphicvizion.com/" target="_blank">GraphicViZion</a>
|
||||
</h3>
|
||||
<div class="copywrite">
|
||||
© 2021 by GraphicViZion
|
||||
© <%= new Date().getFullYear() %> by GraphicViZion
|
||||
</div>
|
||||
<div class="credit">
|
||||
this site was hand-crafted by <a href="https://spencerflagg.com" target="_blank">Spencer Flagg</a>
|
||||
|
|
@ -12,6 +12,17 @@
|
|||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/graphic_vizion/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
|
||||
</svg>
|
||||
@graphic_vizion
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/graphicvizion" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter"
|
||||
|
|
@ -24,6 +35,28 @@
|
|||
@graphicvizion
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/GraphicViZion/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
|
||||
</svg>
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/company/graphicvizion/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-linkedin" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
||||
<line x1="8" y1="11" x2="8" y2="16" />
|
||||
<line x1="8" y1="8" x2="8" y2="8.01" />
|
||||
<line x1="12" y1="16" x2="12" y2="11" />
|
||||
<path d="M16 16v-3a2 2 0 0 0 -4 0" />
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/user/GraphicVizion" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="hero__wrapper">
|
||||
<article class="hero__wrapper">
|
||||
<% include /nav %>
|
||||
<!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
|
||||
<!-- <video autoplay loop muted class="hero__video">
|
||||
|
|
@ -27,4 +27,4 @@
|
|||
</svg>
|
||||
<h1 class="h1--hero">Interactive human anatomy in real-time 3D</h1>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<html lang="en" dir="ltr" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -9,12 +9,44 @@
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
||||
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet"> -->
|
||||
|
||||
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
|
||||
<link href="https://api.fonts.coollabs.io/css2?family=Bebas+Neue&family=Nunito&family=DM+Serif+Display&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Required Core Stylesheet -->
|
||||
<!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css"> -->
|
||||
|
||||
<!-- Optional Theme Stylesheet -->
|
||||
<!-- <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css"> -->
|
||||
|
||||
<script>
|
||||
|
||||
window.onload = setScrollbarVariable;
|
||||
document.onload = setScrollbarVariable;
|
||||
window.onresize = setScrollbarVariable;
|
||||
|
||||
function setScrollbarVariable() {
|
||||
//alert(window.innerWidth + " - " + document.body.clientWidth);
|
||||
//const scrollbarWidth = window.innerWidth - document.body.clientWidth;
|
||||
|
||||
const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;
|
||||
|
||||
//console.log(screen.width + " " + window.innerWidth);
|
||||
const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
|
||||
document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>
|
||||
<%= site.title %>
|
||||
</title>
|
||||
|
|
@ -86,30 +118,16 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
window.onload = setScrollbarVariable;
|
||||
document.onload = setScrollbarVariable;
|
||||
window.onresize = setScrollbarVariable;
|
||||
|
||||
function setScrollbarVariable() {
|
||||
//alert(window.innerWidth + " - " + document.body.clientWidth);
|
||||
//const scrollbarWidth = window.innerWidth - document.body.clientWidth;
|
||||
|
||||
const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;
|
||||
|
||||
//console.log(screen.width + " " + window.innerWidth);
|
||||
const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
|
||||
document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- <script src="https://unpkg.com/@glidejs/glide@3.3.0/dist/glide.js"></script> -->
|
||||
<script src="/node_modules/@glidejs/glide/dist/glide.min.js"></script>
|
||||
|
||||
<!-- <script src="/node_modules/@glidejs/glide/dist/glide.modular.esm.js"></script> -->
|
||||
<!-- <script src="/js/eleventy.js" type="module" async></script> -->
|
||||
<script src="/node_modules/blueimp-md5/js/md5.min.js"></script>
|
||||
|
||||
<!-- this below were the last ones that i used -->
|
||||
<!-- <script src="./node_modules/@glidejs/glide/dist/glide.min.js"></script> -->
|
||||
<!-- <script src="./node_modules/blueimp-md5/js/md5.min.js"></script> -->
|
||||
|
||||
<script>
|
||||
// new Glide('.glide').mount({
|
||||
|
|
@ -264,7 +282,7 @@
|
|||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
<!-- <style>
|
||||
.site-logo {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
|
|
@ -312,4 +330,4 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
|
@ -12,15 +12,54 @@
|
|||
<div class="glide">
|
||||
<div data-glide-el="track" class="glide__track">
|
||||
<ul class="glide__slides">
|
||||
<% collections.screenshots.forEach((screenshot, index)=> { %>
|
||||
<% collections.screenshotThumbnails.forEach((screenshot, index)=> { %>
|
||||
<% if (screenshot.includes('--en')) { %>
|
||||
<li class="glide__slide">
|
||||
<img src="<%= screenshot %>" alt="">
|
||||
<img src="<%= screenshot %>" alt="" onclick="zoomScreenshot('<%= screenshot %>')" />
|
||||
</li>
|
||||
<% } %>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hires">
|
||||
<% collections.screenshotHires.forEach((screenshot, index)=> { %>
|
||||
<% if (screenshot.includes('--en')) { %>
|
||||
<div class="hires-details" data="<%= screenshot %>" onclick="clearScreenshotSelection()">
|
||||
<img src="<%= screenshot %>" alt="" />
|
||||
<caption></caption>
|
||||
</div>
|
||||
<% } %>
|
||||
<% }) %>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
function zoomScreenshot(slug) {
|
||||
|
||||
let thisImage = document.querySelector('[data="' + slug.replace('resized.','') + '"]');
|
||||
|
||||
thisImage.classList.add('hires-details--selected');
|
||||
|
||||
let allIconImages = document.querySelectorAll('.hires-details');
|
||||
|
||||
for (let elem of allIconImages) {
|
||||
if (elem !== thisImage) {
|
||||
elem.classList.remove('hires-details--selected')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function clearScreenshotSelection() {
|
||||
let allIconImages = document.querySelectorAll('.hires-details');
|
||||
|
||||
for (let elem of allIconImages) {
|
||||
elem.classList.remove('hires-details--selected')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="88" height="97" viewBox="0 0 88 97" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M47.9932 46.3913L63.8426 30.4439L12.6495 1.49383C9.25667 -0.350607 6.07821 -0.609474 3.29102 1.40754L47.9932 46.3913ZM66.544 65.0621L83.0206 55.7375C86.2366 53.9254 88 51.3583 88 48.5108C88 45.6686 86.2366 43.0961 83.0259 41.284L68.1092 32.8546L51.3164 49.7458L66.544 65.0621ZM0.535997 5.32831C0.192958 6.39075 0 7.57723 0 8.87696V88.1823C0 90.2371 0.450238 92.006 1.26495 93.4136L44.6646 49.7404L0.535997 5.32831ZM47.9932 53.0841L4.83469 96.5146C5.66013 96.8328 6.54988 97 7.48788 97C9.16019 97 10.9022 96.5038 12.6763 95.5115L62.2829 67.4836L47.9932 53.0841Z" fill="#00C2FF"/>
|
||||
<path d="M47.9932 46.3913L63.8426 30.4439L12.6495 1.49383C9.25667 -0.350607 6.07821 -0.609474 3.29102 1.40754L47.9932 46.3913ZM66.544 65.0621L83.0206 55.7375C86.2366 53.9254 88 51.3583 88 48.5108C88 45.6686 86.2366 43.0961 83.0259 41.284L68.1092 32.8546L51.3164 49.7458L66.544 65.0621ZM0.535997 5.32831C0.192958 6.39075 0 7.57723 0 8.87696V88.1823C0 90.2371 0.450238 92.006 1.26495 93.4136L44.6646 49.7404L0.535997 5.32831ZM47.9932 53.0841L4.83469 96.5146C5.66013 96.8328 6.54988 97 7.48788 97C9.16019 97 10.9022 96.5038 12.6763 95.5115L62.2829 67.4836L47.9932 53.0841Z" fill="var(--c-3)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 691 B After Width: | Height: | Size: 694 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="109" height="108" viewBox="0 0 109 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M54.5 0C84.6003 0 109 24.1758 109 54C109 83.8242 84.6003 108 54.5 108C24.3997 108 0 83.8242 0 54C0 24.1758 24.3997 0 54.5 0ZM37.1853 72.0522C35.0326 69.4764 32.3566 68.5584 29.1248 69.3036L28.3073 69.525L25.0918 75.0114C24.4854 75.9896 24.2845 77.1624 24.5313 78.284C24.7781 79.4057 25.4533 80.3892 26.4156 81.0286C27.3779 81.668 28.5526 81.9136 29.6936 81.714C30.8346 81.5144 31.8534 80.885 32.5365 79.9578L32.8744 79.4556L37.1799 72.0522H37.1853ZM61.0945 35.964C58.4349 38.1456 55.7535 44.5878 59.514 51.0138L76.082 79.4502C76.6557 80.4163 77.5763 81.1322 78.6597 81.4548C79.7431 81.7775 80.9095 81.6832 81.9257 81.1906C82.9419 80.6981 83.7331 79.8437 84.1411 78.7982C84.549 77.7527 84.5437 76.5932 84.1262 75.5514L83.8591 75.0114L79.4882 67.4946H85.9737C86.5629 67.496 87.1466 67.382 87.6911 67.1591C88.2356 66.9362 88.7303 66.6088 89.1467 66.1958C89.563 65.7827 89.8928 65.2922 90.1171 64.7524C90.3414 64.2126 90.4558 63.6342 90.4536 63.0504C90.4565 61.9676 90.0588 60.9212 89.3357 60.1093C88.6126 59.2973 87.6144 58.7761 86.5296 58.644L85.9683 58.6116H74.3053L62.348 38.1078L61.0945 35.9694V35.964ZM62.6096 19.5264C61.6684 18.9908 60.5635 18.8105 59.4987 19.0189C58.4339 19.2274 57.4811 19.8104 56.8162 20.6604L56.4783 21.1572L54.4782 24.5754L52.5216 21.1572C51.9479 20.1911 51.0273 19.4752 49.9439 19.1526C48.8605 18.8299 47.6941 18.9243 46.6779 19.4168C45.6617 19.9093 44.8705 20.7637 44.4626 21.8092C44.0546 22.8547 44.0599 24.0142 44.4775 25.056L44.7445 25.596L49.3116 33.4638L34.6783 58.59H23.2497C22.661 58.5886 22.0778 58.7024 21.5336 58.925C20.9894 59.1476 20.495 59.4745 20.0787 59.8869C19.6624 60.2994 19.3325 60.7893 19.1079 61.3285C18.8833 61.8676 18.7684 62.4455 18.7698 63.0288C18.7698 65.3022 20.4702 67.1652 22.6884 67.4406L23.2497 67.473H64.0157C65.8687 64.017 63.6887 59.1084 59.6012 58.6278L58.9417 58.59H45.0279L64.2555 25.596C64.8495 24.5749 65.0099 23.3617 64.7012 22.2235C64.3925 21.0852 63.6402 20.115 62.6096 19.5264Z" fill="#00C2FF"/>
|
||||
<path d="M54.5 0C84.6003 0 109 24.1758 109 54C109 83.8242 84.6003 108 54.5 108C24.3997 108 0 83.8242 0 54C0 24.1758 24.3997 0 54.5 0ZM37.1853 72.0522C35.0326 69.4764 32.3566 68.5584 29.1248 69.3036L28.3073 69.525L25.0918 75.0114C24.4854 75.9896 24.2845 77.1624 24.5313 78.284C24.7781 79.4057 25.4533 80.3892 26.4156 81.0286C27.3779 81.668 28.5526 81.9136 29.6936 81.714C30.8346 81.5144 31.8534 80.885 32.5365 79.9578L32.8744 79.4556L37.1799 72.0522H37.1853ZM61.0945 35.964C58.4349 38.1456 55.7535 44.5878 59.514 51.0138L76.082 79.4502C76.6557 80.4163 77.5763 81.1322 78.6597 81.4548C79.7431 81.7775 80.9095 81.6832 81.9257 81.1906C82.9419 80.6981 83.7331 79.8437 84.1411 78.7982C84.549 77.7527 84.5437 76.5932 84.1262 75.5514L83.8591 75.0114L79.4882 67.4946H85.9737C86.5629 67.496 87.1466 67.382 87.6911 67.1591C88.2356 66.9362 88.7303 66.6088 89.1467 66.1958C89.563 65.7827 89.8928 65.2922 90.1171 64.7524C90.3414 64.2126 90.4558 63.6342 90.4536 63.0504C90.4565 61.9676 90.0588 60.9212 89.3357 60.1093C88.6126 59.2973 87.6144 58.7761 86.5296 58.644L85.9683 58.6116H74.3053L62.348 38.1078L61.0945 35.9694V35.964ZM62.6096 19.5264C61.6684 18.9908 60.5635 18.8105 59.4987 19.0189C58.4339 19.2274 57.4811 19.8104 56.8162 20.6604L56.4783 21.1572L54.4782 24.5754L52.5216 21.1572C51.9479 20.1911 51.0273 19.4752 49.9439 19.1526C48.8605 18.8299 47.6941 18.9243 46.6779 19.4168C45.6617 19.9093 44.8705 20.7637 44.4626 21.8092C44.0546 22.8547 44.0599 24.0142 44.4775 25.056L44.7445 25.596L49.3116 33.4638L34.6783 58.59H23.2497C22.661 58.5886 22.0778 58.7024 21.5336 58.925C20.9894 59.1476 20.495 59.4745 20.0787 59.8869C19.6624 60.2994 19.3325 60.7893 19.1079 61.3285C18.8833 61.8676 18.7684 62.4455 18.7698 63.0288C18.7698 65.3022 20.4702 67.1652 22.6884 67.4406L23.2497 67.473H64.0157C65.8687 64.017 63.6887 59.1084 59.6012 58.6278L58.9417 58.59H45.0279L64.2555 25.596C64.8495 24.5749 65.0099 23.3617 64.7012 22.2235C64.3925 21.0852 63.6402 20.115 62.6096 19.5264Z" fill="var(--c-3)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="100" height="116" viewBox="0 0 100 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 85.1098C97.2652 91.1454 95.9573 93.8441 92.4451 99.1777C87.5381 106.627 80.6098 115.922 72.0443 115.985C64.4254 116.049 62.4589 111.03 52.119 111.112C41.7791 111.162 39.6251 116.077 31.9971 115.999C23.4316 115.922 16.8737 107.547 11.9621 100.112C-1.77107 79.2565 -3.22076 54.8131 5.26702 41.8073C11.2716 32.5851 20.7746 27.1695 29.6968 27.1695C38.7837 27.1695 44.4956 32.1475 52.0093 32.1475C59.2989 32.1475 63.7394 27.1558 74.2485 27.1558C82.1967 27.1558 90.6021 31.4728 96.6067 38.9216C76.9604 49.6527 80.1525 77.6245 100 85.1098ZM66.2729 18.8317C70.0961 13.9403 72.9955 7.03854 71.9436 0C65.7059 0.423953 58.4117 4.39453 54.1495 9.53667C50.2898 14.2184 47.0885 21.1749 48.337 27.9034C55.1419 28.1222 62.1845 24.0787 66.2729 18.8317Z" fill="#00C2FF"/>
|
||||
<path d="M100 85.1098C97.2652 91.1454 95.9573 93.8441 92.4451 99.1777C87.5381 106.627 80.6098 115.922 72.0443 115.985C64.4254 116.049 62.4589 111.03 52.119 111.112C41.7791 111.162 39.6251 116.077 31.9971 115.999C23.4316 115.922 16.8737 107.547 11.9621 100.112C-1.77107 79.2565 -3.22076 54.8131 5.26702 41.8073C11.2716 32.5851 20.7746 27.1695 29.6968 27.1695C38.7837 27.1695 44.4956 32.1475 52.0093 32.1475C59.2989 32.1475 63.7394 27.1558 74.2485 27.1558C82.1967 27.1558 90.6021 31.4728 96.6067 38.9216C76.9604 49.6527 80.1525 77.6245 100 85.1098ZM66.2729 18.8317C70.0961 13.9403 72.9955 7.03854 71.9436 0C65.7059 0.423953 58.4117 4.39453 54.1495 9.53667C50.2898 14.2184 47.0885 21.1749 48.337 27.9034C55.1419 28.1222 62.1845 24.0787 66.2729 18.8317Z" fill="var(--c-3)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 875 B After Width: | Height: | Size: 878 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M42.5745 8.93049L0 14.5291V49.9263H42.5745V8.93049ZM0 89.5972L42.5745 95.6569V53.9921H0V89.5972ZM47.2704 54.5247L47.4392 95.9492L103.919 103.918V54.5247H47.2704ZM103.919 0L47.6081 8.07966V49.738H103.919V0Z" fill="#00C2FF"/>
|
||||
<path d="M42.5745 8.93049L0 14.5291V49.9263H42.5745V8.93049ZM0 89.5972L42.5745 95.6569V53.9921H0V89.5972ZM47.2704 54.5247L47.4392 95.9492L103.919 103.918V54.5247H47.2704ZM103.919 0L47.6081 8.07966V49.738H103.919V0Z" fill="var(--c-3)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 340 B After Width: | Height: | Size: 343 B |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
/* pointer-events: none; */
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.hires-details {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue