diff --git a/public/fonts/balsamiq.woff2 b/public/fonts/balsamiq.woff2 new file mode 100644 index 000000000..f33cdb733 Binary files /dev/null and b/public/fonts/balsamiq.woff2 differ diff --git a/src/components/Icon.astro b/src/components/Icon.astro index 5e537c0bb..1315be5c3 100644 --- a/src/components/Icon.astro +++ b/src/components/Icon.astro @@ -7,9 +7,6 @@ export interface Props { async function getSVG(name: string) { const filepath = `/src/icons/${name}.svg`; - const iconFiles = await Astro.glob("../icons/**/*.svg"); - - console.log(iconFiles[0]); const files = import.meta.glob('/src/icons/**/*.svg', { eager: true, diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro new file mode 100644 index 000000000..bfb661dde --- /dev/null +++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro @@ -0,0 +1,11 @@ +--- +import "./InteractiveRoadmap.css"; + +export interface Props { + jsonUrl: string; +} + +const { jsonUrl } = Astro.props; +--- + + \ No newline at end of file diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.css b/src/components/InteractiveRoadmap/InteractiveRoadmap.css new file mode 100644 index 000000000..419486adc --- /dev/null +++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.css @@ -0,0 +1,86 @@ +svg text tspan { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeSpeed; + } + + code { + background: #1e1e3f; + color: #9efeff; + padding: 3px 5px; + font-size: 14px; + border-radius: 3px; + } + + svg .clickable-group { + cursor: pointer; + } + + svg .clickable-group:hover > [fill='rgb(65,53,214)'] { + fill: #232381; + stroke: #232381; + } + + svg .clickable-group:hover > [fill='rgb(255,255,0)'] { + fill: #d6d700; + } + + svg .clickable-group:hover > [fill='rgb(255,229,153)'] { + fill: #f3c950; + } + + svg .clickable-group:hover > [fill='rgb(153,153,153)'] { + fill: #646464; + } + + svg .clickable-group:hover > [fill='rgb(255,255,255)'] { + fill: #d7d7d7; + } + + svg .clickable-group:hover > [fill='rgb(255,255,221)'] { + fill: #e5e5be; + } + + svg .clickable-group:hover > [fill='rgb(255,217,102)'] { + fill: #d9b443; + } + + svg .done rect { + fill: #cbcbcb !important; + } + + svg .done text { + text-decoration: line-through; + } + + /************************************ + Aspect ratio implementation + *************************************/ + [style*="--aspect-ratio"] > :first-child { + width: 100%; + } + + [style*="--aspect-ratio"] > img { + height: auto; + } + + @supports (--custom:property) { + [style*="--aspect-ratio"] { + position: relative; + } + + [style*="--aspect-ratio"]::before { + content: ""; + display: block; + /*noinspection CssUnresolvedCustomProperty*/ + padding-bottom: calc(100% / (var(--aspect-ratio))); + } + + [style*="--aspect-ratio"] > :first-child { + position: absolute; + top: 0; + left: 0; + height: 100%; + } + } + \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/BaseLayout.astro similarity index 94% rename from src/layouts/Layout.astro rename to src/layouts/BaseLayout.astro index 077a95c77..d060a362a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/BaseLayout.astro @@ -16,10 +16,14 @@ const { title } = Astro.props; {title} + + + +