Hugo Academic: Adapting old hero widget CSS custom code

Using Themes
1

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:

The content is here:

I wanted to customise my fonts, padding betweens 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. 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. The image below shows what I would like the image to look like (top bit), and part below is the actual webpage (sorry, I I had to concatenate the images together because I can only post one image as this is my very first post on this forum):

Screen Shot 2021-03-07 at 9.00.17 am
Screen Shot 2021-03-07 at 9.00.17 am4202×2660 1.85 MB

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

2

I recommend moving this to the dedicated Wowchemy Discussions and also consider joining the Wowchemy Discord server.

Thanks!

3

Thanks for the suggestion! In case someone finds this in the future and is interested in following through, I have copied this post across to the Wowchemy Discussions as suggested:

Best wishes,
D

2 Likes
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.