diff --git a/app/app.vue b/app/app.vue index 081a11b..d6790e8 100644 --- a/app/app.vue +++ b/app/app.vue @@ -11,8 +11,7 @@ } html, body, p, a, address, h2 { - font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', sans-serif; + font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } a { diff --git a/app/assets/icons/times-bazaar-white.svg b/app/assets/icons/times-bazaar-white.svg new file mode 100644 index 0000000..8992ee7 --- /dev/null +++ b/app/assets/icons/times-bazaar-white.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/components/VProject.vue b/app/components/VProject.vue index 1ef8e2e..5da4976 100644 --- a/app/components/VProject.vue +++ b/app/components/VProject.vue @@ -7,11 +7,20 @@ const props = defineProps<{ const isMediumScreen = useMediaQuery('(min-width: 768px)') const descToggled = ref(false) +const popupImageToggled = ref(false) const hasDescription = computed(() => { return props.project.description && props.project.description.length > 0 }) +const hasExternalLink = computed(() => { + return Boolean(props.project.toggleUrl) +}) + +const hasExtraImage = computed(() => { + return Boolean(props.project.popupImage) +}) + function handleToggle() { descToggled.value = !descToggled.value } @@ -34,8 +43,18 @@ function handleToggle() {

{{ project.description }}

{{ project.shortDescription }}

+ + {{ project.toggleText }} + + + - +
+ + +
@@ -54,6 +73,17 @@ h2 { align-items: center; } +.image-wrap { + position: relative; +} + +.image-wrap img:nth-child(2) { + position: absolute; + top: 0; + left: 0; + z-index: 10; +} + h2 button { margin-left: auto; background: transparent; @@ -64,7 +94,7 @@ h2 button img { width: 12px; } -article > img { +.image-wrap > img { width: 100%; margin-bottom: 1rem; } @@ -72,4 +102,31 @@ article > img { article header > div { padding-left: 1.25rem; } + +header { + display: flex; + flex-direction: column; +} + +.popup-close, +.trigger-additional { + cursor: pointer; + align-self: flex-end; +} + +.popup-close { + width: 28px; +} + +.trigger-additional { + font-family: 'Bazaar', sans-serif; + background: transparent; + color: #FFFFFF; + border-radius: 10px; + border: 2px solid var(--primary-color); + padding: 0.25rem 0.5rem; + font-size: 1rem; + margin-top: 0.5rem; + transform: rotate(-2.6deg); +} \ No newline at end of file diff --git a/content/projects/abbiocco.md b/content/projects/abbiocco.md index 15d22e4..a675dcd 100644 --- a/content/projects/abbiocco.md +++ b/content/projects/abbiocco.md @@ -3,5 +3,4 @@ order: 2 title: Abbiocco shortDescription: Humanist sans serif typeface family. Soon available. image: /images/projects/abbiocco.svg -toggleUrl: https://lettersfromsweden.se/font/bazaar --- \ No newline at end of file diff --git a/content/projects/bazaar.md b/content/projects/bazaar.md index 15a14bb..2e9e6a1 100644 --- a/content/projects/bazaar.md +++ b/content/projects/bazaar.md @@ -4,4 +4,6 @@ title: BAZAAR shortDescription: Gestural and spirited script typeface, inspired by street writing. Available at Letters from Sweden. description: Gestural and spirited script typeface, inspired by street writing. Available at Letters from Sweden. Letterforms are spaced extremely tightly, vary in height and balance themselves around a center line rather than sitting still on the baseline. Uppercase and lowercase follow peculiar strokes’ path, inspired by unique letterforms found in graffiti and street writing. This contributes to a very wild and fierce rhythm within words, especially in all-caps settings. Drawing BAZAAR required to question some of the most common features of a good typeface – balance and harmony. It is an ode to disorder and a tribute to those who challenge the rules. The typeface family comes in five weights, from Light to Black, and offers extensive language support along with contextual alternates and a set of icons. image: /images/projects/bazaar.svg +toggleUrl: https://lettersfromsweden.se/font/bazaar +toggleText: See the font ! --- \ No newline at end of file diff --git a/public/fonts/bazaar.woff2 b/public/fonts/bazaar.woff2 new file mode 100644 index 0000000..d0c9645 Binary files /dev/null and b/public/fonts/bazaar.woff2 differ diff --git a/public/images/projects/grenette-popup.svg b/public/images/projects/grenette-popup.svg new file mode 100644 index 0000000..fe016ba --- /dev/null +++ b/public/images/projects/grenette-popup.svg @@ -0,0 +1,9 @@ + + + + + + + + +