Dev Notes: Hero Banner

Used the Rich Text Editor within Hero Banner to add the "CAMPUS" image. Setting the width at 30 gave me the approximate width of how the image displayed on the Drupal site.

Wrote "STYLE GUIDE" in the editor and set it as an H1 in the text dropdown the color to #241f21. Will need additional CSS to approximate Drupal and or revised methodology; i.e. a CSS rule for placing "Style Guide" as an h1:after.

Colors

Dev Notes: Headlines made with Headlines Component H1's

❗Following H1's were created using a Headline component within a Rich Text component. The component is set to left align, but that is getting overridden by the Global Foundation CSS. Uppercase is also coming from the Global CSS.

Headlines H1

Dev Notes: Headlines made with Headlines Component H2-H6

❗Here are H2-H6, made in the Headline component, using "Primary".

Headlines H2-H6

Dev Notes: Headlines made with Text dropdown in Rich Text editor

❗The following H1 - H6 were made using the Text dropdown within the Rich Text Editor.

Headlines made with Text Dropdown in Rich Text editor

H1 Page Title

H2 Section Heading

H3 Politicians and diapers must be changed often, and for the same reason.

H4 Politicians and diapers must be changed often, and for the same reason.

H5 Politicians and diapers must be changed often, and for the same reason.

H6 Politicians and diapers must be changed often, and for the same reason.

❗Below this, these H1 - H6 were made using the CSS dropdown within the Rich Text Editor.

H1 Page Title

H2 Section Heading

H3 Politicians and diapers must be changed often, and for the same reason.

H4 Politicians and diapers must be changed often, and for the same reason.

H5 Politicians and diapers must be changed often, and for the same reason.

H6 Politicians and diapers must be changed often, and for the same reason.

Dev Notes: Paragraph Text, in a Rich Text

Below is a collection of lorem ipsum text. Note: the default punctuation for an unordered list is a hyphen. On the page, it renders as bullets.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

2. Aliquam tincidunt mauris eu risus.

3. Vestibulum auctor dapibus neque.

4. Nunc dignissim risus id metus.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

• Aliquam tincidunt mauris eu risus.

• Vestibulum auctor dapibus neque.

• Nunc dignissim risus id metus.

Dev Notes: 66/33 Block

When using an image in the 66 block, make sure you've selected "Center" in the Vertical Alignment option to prevent a loss of image responsiveness.

Dev Notes: Past Awardees List Block

❗My first attempt was to use a Rich Text block with a Flex subcomponent. The problem with the solution is that you can't enter any other Flex properties. By default, each flex added has a align-items: center. In an ideal world, I could set a host of flex properties in the Flex component. By default, my flexbox items were set to align-items was set to center. 🤢

I was able to target the items with a CSS child selector, which takes some trial and error and isn't foolproof -- meaning some additional CSS editing/adding might be needed when copy pasted.

div > .RichTextBloks_richTextBlocks__aa0VW {     align-self: start; }

In order to get the student names and university names to have a tighter line break than the normal paragraphs, you must hold SHIFT when pressing ENTER on your keyboard. This worked on PC.

I think it's worth noting, however, that the resulting markup is relatively clean. So much so that I considered...

1. Copying the markup generated by Flex component solution

2. Adding the appropriate justify-content/align-content as inline styles (like all the other Flex properties are added)

3. Pasting it into an Embed block, then making font styles to match Drupal.

I did not do that, instead I made...

❗The second attempt. Used markup from the Drupal site and made custom flex style. Had some trouble with image responsiveness, which is why the image file is cropped to 250px. It's all in custom HTML/CSS.

Past Awardees List Block (Solution 1)

2024