WIP: story share portal

[maebeale]

• This work Closes [link an issue]

What is the goal of this PR and why is this important?

• Draft the story share portal microsite

How did you approach the change?

Anything else to add?

[maebeale]

@copilot please change this code so the share_portal page looks just like this photo. we're using tailwind, so prefer that over manual css, but, add whatever css is needed.

[Copilot]

@maebeale I've opened a new pull request, #903, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot please change the story_share layout to match this image.

1. nav/header
   it has three "rows" of nav at the top, that disappear as you scroll down the page. and, it has another font. please find that "familytelefon_boldregular" font for the titles and include it in the project. the regular text should be Roboto, sans-serif.

2. 3 column sector sections
   make the headers match the colors
   add the overlay of title and organization over the images
   make sure the other stories in those sectors have links below

3. what others are reading
   match the colors and little box overlay

4. get involved
   make the buttons purple

[Copilot]

@maebeale I've opened a new pull request, #904, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot make story_share look like the screenshot attached.

1. apply telefon font to the nav items.
2. center the various nav items so they match the picture
3. add icons in the nav for lock, search, and exit, after the donate button
4. add dropdowns with sample content to the top-level nav items
5. 2nd and 3rd row nav items should go a lighter shade on hover
6. add the sector as a blue box on top left over the hero image (see pic)
7. add the black transparent overlay with title as a bar over the bottom of the hero image
8. domestic violence, social justice, and facilitator spotlights sections should be in one row
9. add 4 linked stories below each domestic violence, social justice, and facilitator spotlights sections.
10. add "More Facilitator Spotlights Stories..." link to bottom of spotlight section
11. change "what others are reading" sections so they're right next to each other with no horizontal padding. stretch them so they're taller. make the sector names square boxes (same style as the blue box over hero) with title below, both in the middle of each of these sections.
12. the hero image is actually a carousel that autoscrolls itself.

with all of the above, refer to this image for reference. we want this page to match the screenshot, including in style and color.

[maebeale]

@copilot write a PR to make story_share look exactly like the screenshot attached.

1. apply telefon font to the nav items.
2. center the various nav items so they match the picture
3. add icons in the nav for lock, search, and exit, after the donate button
4. add dropdowns with sample content to the top-level nav items
5. 2nd and 3rd row nav items should go a lighter shade on hover
6. add the sector as a blue box on top left over the hero image (see pic)
7. add the black transparent overlay with title as a bar over the bottom of the hero image
8. domestic violence, social justice, and facilitator spotlights sections should be in one row
9. add 4 linked stories below each domestic violence, social justice, and facilitator spotlights sections.
10. add "More Facilitator Spotlights Stories..." link to bottom of spotlight section
11. change "what others are reading" sections so they're right next to each other with no horizontal padding. stretch them so they're taller. make the sector names square boxes (same style as the blue box over hero) with title below, both in the middle of each of these sections.
12. the hero image is actually a carousel that autoscrolls itself.

with all of the above, refer to this image for reference. we want this page to match the screenshot, including in style and color

[Copilot]

@maebeale I've opened a new pull request, #905, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot create a PR to:

1. move 3rd row of nav (text and search box) to be centered below 2nd row
2. change the logo to be logo-with-tagline
3. make overlay on hero image semi-transparent
4. What Others Are Reading section: add colored translucent overlay to each of the 4 sections, using the color from this photo.
5. What Others Are Reading section: make sector names all in the same row, regardless of height of story title
6. What Others Are Reading section: have the primary asset of the story behind the colored translucent overlay

[Copilot]

@maebeale I've opened a new pull request, #911, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot

1. change the What Others Are Reading background colors and colors of sector name to match this photo
2. change the What Others Are Reading colors of sector name to match this photo

3. top align sector name boxes to some height below top of the section, rather than centering vertically. i want titles to be below boxes, and not to affect box alignment. look at the issue in pick below:

[Copilot]

@maebeale I've opened a new pull request, #912, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot change height of hero image to have a max height so it looks like this pic. the area shouldn't grow based on image size -- the image should shrink to fit.

[Copilot]

@maebeale I've opened a new pull request, #913, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot update show_share_portal page using this new layout and nav for share_portal. adapt the show page code to make it look like this photo.

[Copilot]

@maebeale I've opened a new pull request, #915, to work on those changes. Once the pull request is ready, I'll request review from you.

[maebeale]

@copilot move this story share code into a new controller, called StoryMicrositeController (unless you have a better name)

[Copilot]

@maebeale I've opened a new pull request, #916, to work on those changes. Once the pull request is ready, I'll request review from you.