From 75db6f71f2a4a5ab1bba7160c62dcaa5d7c3f85c Mon Sep 17 00:00:00 2001 From: dChiamp Date: Wed, 22 Jul 2020 14:13:04 -0700 Subject: [PATCH 1/7] adds basic structure --- .../SectionPress/SectionPress.stories.js | 43 ++++++++++++ src/components/SectionPress/SectionPress.vue | 69 +++++++++++++++++++ src/components/global/SplitText.vue | 51 ++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 src/components/SectionPress/SectionPress.stories.js create mode 100644 src/components/SectionPress/SectionPress.vue create mode 100644 src/components/global/SplitText.vue diff --git a/src/components/SectionPress/SectionPress.stories.js b/src/components/SectionPress/SectionPress.stories.js new file mode 100644 index 0000000..fe82b32 --- /dev/null +++ b/src/components/SectionPress/SectionPress.stories.js @@ -0,0 +1,43 @@ +import SectionPress from "./SectionPress" +import API from "@/static/db.json" + +const Items = [ + { + title: + "AdWeek - Beats by Dre Brings in an A-List of Athletes for An Ad You Can’t Take Your Eyes Off Of" + }, + { + title: "Vice - The Poetic Work of Filmmaker Savanah Leaf" + }, + { + title: + "Far & Wide - TIFF 2018: Interview With EXIT Director Claire Edmondson" + }, + { + title: + "The New York Times - Hiro Murai Doesn’t Want to Get on a Soapbox" + }, + { + title: + "Little Black Book: The Story Behind Donald Glover and Hiro Murai’s Creative Love Affair" + }, + { + title: + "The Ringer - The Vimeo Blog: Introducing: music video exec. Mama Doom Danielle Hinde" + } +] + +export default { + title: "@dchiamp / SectionPress" +} + +export const Default = () => ({ + components: { SectionPress }, + data() { + return { + api: API, + items: [...Items, ...Items] + } + }, + template: `` +}) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue new file mode 100644 index 0000000..1c2cb37 --- /dev/null +++ b/src/components/SectionPress/SectionPress.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/global/SplitText.vue b/src/components/global/SplitText.vue new file mode 100644 index 0000000..57aba89 --- /dev/null +++ b/src/components/global/SplitText.vue @@ -0,0 +1,51 @@ + + + From 5c563eda0695f0df614096e9036c44b33ba42ff4 Mon Sep 17 00:00:00 2001 From: dChiamp Date: Wed, 22 Jul 2020 17:00:50 -0700 Subject: [PATCH 2/7] adds responsive, svgs --- .../svgs/illustrations/childish-gambino.svg | 502 +++++++ src/assets/svgs/illustrations/fire-lady.svg | 1253 ++++++++++++++++ src/assets/svgs/illustrations/roller-gal.svg | 1334 +++++++++++++++++ .../SectionPress/SectionPress.stories.js | 14 +- src/components/SectionPress/SectionPress.vue | 102 +- 5 files changed, 3193 insertions(+), 12 deletions(-) create mode 100644 src/assets/svgs/illustrations/childish-gambino.svg create mode 100644 src/assets/svgs/illustrations/fire-lady.svg create mode 100644 src/assets/svgs/illustrations/roller-gal.svg diff --git a/src/assets/svgs/illustrations/childish-gambino.svg b/src/assets/svgs/illustrations/childish-gambino.svg new file mode 100644 index 0000000..67397d5 --- /dev/null +++ b/src/assets/svgs/illustrations/childish-gambino.svg @@ -0,0 +1,502 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/illustrations/fire-lady.svg b/src/assets/svgs/illustrations/fire-lady.svg new file mode 100644 index 0000000..36c83a8 --- /dev/null +++ b/src/assets/svgs/illustrations/fire-lady.svg @@ -0,0 +1,1253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/illustrations/roller-gal.svg b/src/assets/svgs/illustrations/roller-gal.svg new file mode 100644 index 0000000..1be3ebd --- /dev/null +++ b/src/assets/svgs/illustrations/roller-gal.svg @@ -0,0 +1,1334 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/SectionPress/SectionPress.stories.js b/src/components/SectionPress/SectionPress.stories.js index fe82b32..dcb21ef 100644 --- a/src/components/SectionPress/SectionPress.stories.js +++ b/src/components/SectionPress/SectionPress.stories.js @@ -1,29 +1,28 @@ import SectionPress from "./SectionPress" -import API from "@/static/db.json" const Items = [ { title: - "AdWeek - Beats by Dre Brings in an A-List of Athletes for An Ad You Can’t Take Your Eyes Off Of" + "AdWeek – Beats by Dre Brings in an A-List of Athletes for An Ad You Can’t Take Your Eyes Off Of" }, { - title: "Vice - The Poetic Work of Filmmaker Savanah Leaf" + title: "Vice – The Poetic Work of Filmmaker Savanah Leaf" }, { title: - "Far & Wide - TIFF 2018: Interview With EXIT Director Claire Edmondson" + "Far & Wide – TIFF 2018: Interview With EXIT Director Claire Edmondson" }, { title: - "The New York Times - Hiro Murai Doesn’t Want to Get on a Soapbox" + "The New York Times – Hiro Murai Doesn’t Want to Get on a Soapbox" }, { title: - "Little Black Book: The Story Behind Donald Glover and Hiro Murai’s Creative Love Affair" + "Little Black Book – The Story Behind Donald Glover and Hiro Murai’s Creative Love Affair" }, { title: - "The Ringer - The Vimeo Blog: Introducing: music video exec. Mama Doom Danielle Hinde" + "The Ringer – The Vimeo Blog: Introducing: music video exec. Mama Doom Danielle Hinde" } ] @@ -35,7 +34,6 @@ export const Default = () => ({ components: { SectionPress }, data() { return { - api: API, items: [...Items, ...Items] } }, diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index 1c2cb37..a2505d3 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -3,20 +3,34 @@

    -
  • -

    +

  • + + +
@@ -43,6 +80,7 @@ export default { font-weight: 500; text-transform: uppercase; color: var(--color-black); + white-space: nowrap; -webkit-text-stroke: 1.5px var(--color-pink); margin: 0; position: absolute; @@ -55,14 +93,70 @@ export default { list-style: none; margin: 0; padding: 0; - + text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; + position: relative; .item { font-size: 20px; + font-weight: 500; + } + + .line { + display: block; + margin: 10px 0; + } + .line-1 { + font-weight: 500; + } + .line-2 { + font-weight: 400; + } + } + + // Breakpoints + // only position absolute svgs gt-tablet + @media #{"only screen and (min-width: 1024px)"} { + .SvgFireLady, + .svg-fire-lady { + position: absolute; + right: -40px; + top: 40px; + } + + .SvgRollerGal, + .SvgRollerGal { + position: absolute; + bottom: 0; + right: 0; + } + + .SvgChildishGambino, + .svg-childish-gambino { + position: absolute; + top: 50%; + left: 40px; + transform: translateY(-50%); + } + } + + @media #{$lt-phone} { + padding: 60px 20px; + .title { + top: -25px; + font-size: 30px; + } + + .press { + .line-1 { + font-size: 18px; + } + .line-2 { + font-size: 16px; + } } } } From ffb99cf123d1731ad9bf9569768cbee00f629d05 Mon Sep 17 00:00:00 2001 From: dChiamp Date: Wed, 22 Jul 2020 17:11:13 -0700 Subject: [PATCH 3/7] mobile adjustments --- src/components/SectionPress/SectionPress.vue | 22 +++++++++----------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index a2505d3..a86fe97 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -51,16 +51,12 @@ export default { AddSvgsToItems() { // gets middle index const middleIndex = Math.floor(this.items.length / 2) - console.log("middleIndex", middleIndex) - // // adds to middle + // adds to middle this.allItems.splice(middleIndex, 0, { svg: "SvgChildishGambino" }) - // adds to start this.allItems.unshift({ svg: "SvgFireLady" }) - // adds to end this.allItems.push({ svg: "SvgRollerGal" }) - console.log("items", this.allItems) return this.allItems } @@ -99,12 +95,11 @@ export default { align-items: center; justify-content: center; position: relative; - - .item { - font-size: 20px; - font-weight: 500; - } - + } + .item { + font-size: 20px; + font-weight: 500; + padding: 0; .line { display: block; margin: 10px 0; @@ -150,7 +145,10 @@ export default { font-size: 30px; } - .press { + .item { + p { + margin: 10px 0; + } .line-1 { font-size: 18px; } From 207a38251209fa64b883cfc8f184a8e8c4cc267c Mon Sep 17 00:00:00 2001 From: dChiamp Date: Thu, 23 Jul 2020 10:21:34 -0700 Subject: [PATCH 4/7] refactors svg array logic --- src/components/SectionPress/SectionPress.vue | 32 +++++++++----------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index a86fe97..90138eb 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -3,14 +3,13 @@

    -
  • +
  • -
@@ -42,23 +41,25 @@ export default { default: () => [] } }, - data() { - return { - allItems: this.items - } + mounted() { + // avoids using data() and computed + this.AddSvgsToItems() }, - computed: { + methods: { + kebabClass(name) { + return _kebabCase(name) + }, AddSvgsToItems() { // gets middle index const middleIndex = Math.floor(this.items.length / 2) // adds to middle - this.allItems.splice(middleIndex, 0, { svg: "SvgChildishGambino" }) + this.items.splice(middleIndex, 0, { svg: "SvgChildishGambino" }) // adds to start - this.allItems.unshift({ svg: "SvgFireLady" }) + this.items.unshift({ svg: "SvgFireLady" }) // adds to end - this.allItems.push({ svg: "SvgRollerGal" }) + this.items.push({ svg: "SvgRollerGal" }) - return this.allItems + return this.items } } } @@ -115,21 +116,18 @@ export default { // Breakpoints // only position absolute svgs gt-tablet @media #{"only screen and (min-width: 1024px)"} { - .SvgFireLady, .svg-fire-lady { position: absolute; right: -40px; - top: 40px; + top: 30px; } - .SvgRollerGal, - .SvgRollerGal { + .svg-roller-gal { position: absolute; bottom: 0; right: 0; } - .SvgChildishGambino, .svg-childish-gambino { position: absolute; top: 50%; From bd4070c58ec2ec80be0d7f3b735e85dc041fe041 Mon Sep 17 00:00:00 2001 From: dChiamp Date: Thu, 23 Jul 2020 15:22:55 -0700 Subject: [PATCH 5/7] updates fonts --- src/components/SectionPress/SectionPress.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index 90138eb..60e127c 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -73,6 +73,7 @@ export default { padding: 60px 50px; box-sizing: border-box; .title { + font-family: var(--font-secondary); font-size: 75px; font-weight: 500; text-transform: uppercase; @@ -81,7 +82,7 @@ export default { -webkit-text-stroke: 1.5px var(--color-pink); margin: 0; position: absolute; - top: -40px; + top: -50px; left: 50%; transform: translate(-50%); } @@ -107,6 +108,7 @@ export default { } .line-1 { font-weight: 500; + font-family: var(--font-secondary); } .line-2 { font-weight: 400; @@ -139,7 +141,7 @@ export default { @media #{$lt-phone} { padding: 60px 20px; .title { - top: -25px; + top: -27px; font-size: 30px; } From b7204e91294d9b4df554e0263ab2d5d1827ff192 Mon Sep 17 00:00:00 2001 From: dChiamp Date: Fri, 24 Jul 2020 11:49:33 -0700 Subject: [PATCH 6/7] refactors svg array. respoosnsive styles --- src/components/SectionPress/SectionPress.vue | 63 +++++++++++--------- 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index 60e127c..dafa031 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -3,12 +3,12 @@

    -
  • +
@@ -41,15 +41,8 @@ export default { default: () => [] } }, - mounted() { - // avoids using data() and computed - this.AddSvgsToItems() - }, - methods: { - kebabClass(name) { - return _kebabCase(name) - }, - AddSvgsToItems() { + computed: { + svgItems() { // gets middle index const middleIndex = Math.floor(this.items.length / 2) // adds to middle @@ -61,6 +54,11 @@ export default { return this.items } + }, + methods: { + kebabClass(name) { + return _kebabCase(name) + } } } @@ -114,27 +112,30 @@ export default { font-weight: 400; } } + // Svg Positions + .svg { + position: absolute; + } + .svg-fire-lady { + right: -40px; + top: 30px; + } + .svg-roller-gal { + bottom: 0; + right: 0; + } + .svg-childish-gambino { + top: 50%; + left: 40px; + transform: translateY(-50%); + } // Breakpoints // only position absolute svgs gt-tablet - @media #{"only screen and (min-width: 1024px)"} { - .svg-fire-lady { - position: absolute; - right: -40px; - top: 30px; - } - - .svg-roller-gal { - position: absolute; - bottom: 0; - right: 0; - } - - .svg-childish-gambino { - position: absolute; - top: 50%; - left: 40px; - transform: translateY(-50%); + @media #{$lt-tablet} { + .svg { + position: static; + transform: none; } } @@ -156,6 +157,10 @@ export default { font-size: 16px; } } + .svg { + max-width: 310px; + height: auto; + } } } From c330972c86b1a5f84b2bbfefc4b4785e93cbe602 Mon Sep 17 00:00:00 2001 From: dChiamp Date: Fri, 24 Jul 2020 11:50:41 -0700 Subject: [PATCH 7/7] cleans up notes --- src/components/SectionPress/SectionPress.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SectionPress/SectionPress.vue b/src/components/SectionPress/SectionPress.vue index dafa031..e1bf734 100644 --- a/src/components/SectionPress/SectionPress.vue +++ b/src/components/SectionPress/SectionPress.vue @@ -112,7 +112,7 @@ export default { font-weight: 400; } } - // Svg Positions + // Svgs .svg { position: absolute; } @@ -131,7 +131,6 @@ export default { } // Breakpoints - // only position absolute svgs gt-tablet @media #{$lt-tablet} { .svg { position: static;