Adding the coding blocks (items) in featured projects as well

[dmb4086]

I tried adding the list of items (coding languages) that you have in the 'other projects' section to featured projects in my forked version of your website but couldn't figure it out for the life of me.

I tired just styling the SCSS instead of populating it from an external file but yeah it didn't work for me

any help is appreciated

[bchiang7]

Could you provide some more detail? I'm assuming you're talking about this block of code? https://github.com/bchiang7/v3/blob/master/_includes/other-projects.html#L10-L13

[dmb4086]

Right! I'm talking about that piece of code that iterates through the list of Items in your datafile (otherprojects.yml)

What I'm trying to achieve is adding the styling (the blue border box) to a div which will have a p or a ul tag where I can write my technologies for FeaturedProjects (in the same style as other projects)

Does that make sense ?

[bchiang7]

Each of these items has these styles https://github.com/bchiang7/v3/blob/225a1726af9efa9f991f4ff3298bf570e667e3a5/_scss/partials/_other-projects.scss#L13

[dmb4086]

Right! I saw that code and tried to apply it in the SCSS file for Featured but it just didn’t work no matter what I tried! Maybe I’m doing something dumb but I tried putting it under captions and added the class in HTML but it wouldn’t work

[bchiang7]

It's hard for me to tell what's going on without seeing the code -- maybe the BEM syntax is tripping you up? Make sure the CSS selector is correct -- i.e. .project__used__item

[dmb4086]

Yeah my bad I should've linked, I pushed my test code so you can see what's going on in those 2 files,

The featured Project HTML file: https://github.com/dmb4086/dmb4086.github.io/blob/6394b0b9ac950f6074b595fce9aca410269d1c8b/_includes/featured-projects.html#L18-L21

The SCSS file: https://github.com/dmb4086/dmb4086.github.io/blob/6394b0b9ac950f6074b595fce9aca410269d1c8b/_scss/partials/_featured-projects.scss#L12-L29

The resulting output : https://dmb4086.github.io

[bchiang7]

Ah the problem here is the CSS selector -- if you change it to &__used__item instead of nesting the selectors it should work.

&__used {
  &__item {

☝️ That is nested, so it expects an HTML structure like this:

<div class="project__used">
  <span class="project__used__item">Python</span>
  <span class="project__used__item">Selenium</span>
</div>

(in projects, the .project__used__item span is a child of .project__used)

[dmb4086]

I'm pretty sure I tried doing that before opening the issue and it didn't work but I did it again, and pushed the code so I can link it for you

still no luck :(

The featured Project HTML file: https://github.com/dmb4086/dmb4086.github.io/blob/148b7049830bbda828d84ee8e7951bd71998262c/_includes/featured-projects.html#L18-L26

The SCSS file: https://github.com/dmb4086/dmb4086.github.io/blob/148b7049830bbda828d84ee8e7951bd71998262c/_scss/partials/_featured-projects.scss#L12-L29

The resulting output : https://dmb4086.github.io

[bchiang7]

Seems to be working for me when I cloned your repo -- maybe clear your cache? Not sure what the .jekyll-cache directory is for

[dmb4086]

Thats really weird, the Jekyll-cache is made automatically when I run the Jekyll --serve command to test the site locally

It should appear on https://dmb4086.github.io as well right if its working for you as I pushed the code ?

I deleted the .jekyll-cache directory but I still didn't see the changes :(

[bchiang7]

Not sure what's going on, but I would make sure the CSS you're expecting gets compiled into /_site/css/main.css

[dmb4086]

Yes I checked that and made sure the code was present and was getting complied anyways! thank you so much for trying to help me