Hugo Academic: Adapting old hero widget CSS custom code

[dbarneche]

Hello,

I hadn't updated my website in a long time (at least 3 yrs), and a few weeks ago I decided to upgrade everything, Hugo and the Hugo Academic theme:
https://www.diegobarneche.com/

The content is here:
https://github.com/dbarneche/academic

I wanted to customise my fonts, padding between sections, and hero widget in the same manner as I had before. So I literally copied my entire customised CSS code which used to be placed under static/css/academic.css (I was using the Academic template from Nov 2017) to the new assets/scss/custom.scss:

While in doing so the font and padding are now working, I can't figure out how to customise the hero widget whatsoever. Probably there is a lot of older CSS there that doesn't even work anymore, but I have no idea what to keep and what to remove. I suspect that some of the classes for the widget have changed?! For instance, my original hero.md had something like:

[header]
  overlay_color = "#666"  # An HTML color value.
  overlay_img = "front.jpg"  # path relative to `static/img/` folder.
  overlay_filter = 0.4  # Darken the image. Value in range 0-1.

And I could customise it in static/css/academic.css with:

.hero-overlay {
  position: relative;
  padding: 0em 0;
  clear: both;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: intro 0.3s both;
  animation-delay: 0s;
  animation-delay: 0.25s;
}

.hero-title {
  font-size: 2rem;
  margin-top: 0;
  line-height: 1;
}

.hero-lead {
  max-width: 768px;
  font-size: 0.5rem;
}

.hero-overlay .hero-title,
.hero-overlay .hero-lead,
.hero-overlay .btn {
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-overlay a {
  color: #fff;
}

.hero-overlay .hero-lead a {
  color: #fff;
  text-decoration-line: underline;
}

.hero-overlay .btn-large {
  font-size: 1.1rem;
}

But now the equivalent bits in hero.md are structured like:

[design.background]
  color = "#666"
  image = "front.jpg"  # path relative to `static/img/` folder.
  image_darken = 0.4  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
  image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.

And it seems that apart from:

.hero-title {
  font-size: 2rem;
  margin-top: 0;
  line-height: 1;
}

.hero-lead {
  max-width: 768px;
  font-size: 0.5rem;
}

the rest of the CSS code in assets/scss/custom.scss does not effect change on the widget any more.

I am useless when it comes to to CSS btw, so I have been operating on a trial-an-error basis because unfortunately I do not have the time to learn it properly. Basically, I would like to have my hero front image (under static/media/front.jpg) fully displayed, but for some reason the configs are blowing it out of proportion on the webpage. This is what I would like the image to look like:

This is the actual webpage:

Ideally I would only have it proportionally stretched or shrunk if the size of the screen changed relative to the image size (e.g. massive screen or a smart phone). I would really appreciate it if someone could point me in the right direction on how to update my CSS code pertaining to the hero widget under assets/scss/custom.scss so that I can have the photo properly displayed on the hero widget.

Thanks in advance for your guidance!
Best wishes,
Diego

[rodrigoalcarazdelaosa]

Have you tried using a blank widget with that image as its background image? Might be easier than customizing the hero widget

[dbarneche]

Thanks very much @rodrigoalcarazdelaosa ! Apologies for the horribly delayed response, I only managed to get back to this now after so many months. All the best

[henrykironde]

@dbarneche were you able to get your old repo to the current structure. I am facing the same and would appreciate any feedback towards the way forward.

[dbarneche]

Hey @henrykironde , yep, I did using the blank widget trick instead of the hero.