CSS 个文件在 Jekyll 站点上无法正常工作

Question

我正在尝试创建一个托管在 GitHub 上的基于 Jekyll 的网站。我是 RoR 和 Jekyll 的初学者。实施的网站似乎存在一些 CSS 问题：在原始主题上，放大镜应该位于 post 图像上方。在我的实现中，放大镜分离并出现在 post 缩略图的左上角上方。此外，当您单击 post 时打开的模态对话框是不同的：它不是全屏的，右上角的十字也没有。

原主题：

演示：https://jeromelachaud.github.io/freelancer-theme/
来源：https://github.com/jeromelachaud/freelancer-theme/

我的实现：

演示：https://mrcsabatoth.github.io/
来源：https://github.com/MrCsabaToth/mrcsabatoth.github.io/

根据主题回购的指示，我从主题的主要分支开始。它具有所有配置 yaml 设置和适当的变量解析（站点基地址除外）。

我做错了什么？

Answer 1

您的演示缺少此 CSS 代码

#programs  .caption:hover {
  opacity: 1;
}
#programs  .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(24,188,156,.9);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  transition: all ease .5s;
}
#programs * {
  z-index: 2;
}
#programs  .program-link {
  display: block;
  position: relative;
  margin: 0 auto;
  max-width: 400px;
}
#programs .program-link .caption .caption-content {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}

此代码存在于负责在悬停时显示标题的原始演示中

但不同的是您使用 #programs 而在原始 css 中使用 #portfolio

CSS 个文件在 Jekyll 站点上无法正常工作

CSS files doesn't work as expected on a Jekyll site

css

ruby-on-rails

jekyll

github-pages