- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经成功下载并设置了带有 minima
主题的 Jekyll,以便在我的博客中记录我的每日任务更新。目前它看起来像下面
我想让可编辑的内容全屏显示,这样我就有更多的空间来写很长的博文。我找到文件 _site/assets/main.css
并尝试修改容器
文件内容如下。我不是 SaaS 和页面样式方面的专家,但我尝试修改 .container
属性以增加 .padding
和 .margin
到随机的高值,然后做了一个 jekyll build
并且仍然加载页面,它没有反射(reflect)所做的更改。
那么如何制作此页面以最大限度地利用屏幕空间?
/**
* Reset some basic elements
*/
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0; }
/**
* Basic styling
*/
body {
font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #111;
background-color: #fdfdfd;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal;
display: flex;
min-height: 100vh;
flex-direction: column; }
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
.highlight {
margin-bottom: 15px; }
/**
* `main` element
*/
main {
display: block;
/* Default value of `display` of `main` element is 'inline' in IE 11. */ }
/**
* Images
*/
img {
max-width: 100%;
vertical-align: middle; }
/**
* Figures
*/
figure > img {
display: block; }
figcaption {
font-size: 14px; }
/**
* Lists
*/
ul, ol {
margin-left: 30px; }
li > ul,
li > ol {
margin-bottom: 0; }
/**
* Headings
*/
h1, h2, h3, h4, h5, h6 {
font-weight: 400; }
/**
* Links
*/
a {
color: #2a7ae2;
text-decoration: none; }
a:visited {
color: #1756a9; }
a:hover {
color: #111;
text-decoration: underline; }
.social-media-list a:hover {
text-decoration: none; }
.social-media-list a:hover .username {
text-decoration: underline; }
/**
* Blockquotes
*/
blockquote {
color: #828282;
border-left: 4px solid #e8e8e8;
padding-left: 15px;
font-size: 18px;
letter-spacing: -1px;
font-style: italic; }
blockquote > :last-child {
margin-bottom: 0; }
/**
* Code formatting
*/
pre,
code {
font-size: 15px;
border: 1px solid #e8e8e8;
border-radius: 3px;
background-color: #eef; }
code {
padding: 1px 5px; }
pre {
padding: 8px 12px;
overflow-x: auto; }
pre > code {
border: 0;
padding-right: 0;
padding-left: 0; }
/**
* Wrapper
*/
.wrapper {
max-width: -webkit-calc(800px - (30px * 2));
max-width: calc(800px - (30px * 2));
margin-right: auto;
margin-left: auto;
padding-right: 30px;
padding-left: 30px; }
@media screen and (max-width: 800px) {
.wrapper {
max-width: -webkit-calc(800px - (30px));
max-width: calc(800px - (30px));
padding-right: 15px;
padding-left: 15px; } }
/**
* Clearfix
*/
.wrapper:after, .footer-col-wrapper:after {
content: "";
display: table;
clear: both; }
/**
* Icons
*/
.svg-icon {
width: 16px;
height: 16px;
display: inline-block;
fill: #828282;
padding-right: 5px;
vertical-align: text-top; }
.social-media-list li + li {
padding-top: 5px; }
/**
* Tables
*/
table {
margin-bottom: 30px;
width: 100%;
text-align: left;
color: #3f3f3f;
border-collapse: collapse;
border: 1px solid #e8e8e8; }
table tr:nth-child(even) {
background-color: #f7f7f7; }
table th, table td {
padding: 10px 15px; }
table th {
background-color: #f0f0f0;
border: 1px solid #dedede;
border-bottom-color: #c9c9c9; }
table td {
border: 1px solid #e8e8e8; }
/**
* Site header
*/
.site-header {
border-top: 5px solid #424242;
border-bottom: 1px solid #e8e8e8;
min-height: 55.95px;
position: relative; }
.site-title {
font-size: 26px;
font-weight: 300;
line-height: 54px;
letter-spacing: -1px;
margin-bottom: 0;
float: left; }
.site-title, .site-title:visited {
color: #424242; }
.site-nav {
float: right;
line-height: 54px; }
.site-nav .nav-trigger {
display: none; }
.site-nav .menu-icon {
display: none; }
.site-nav .page-link {
color: #111;
line-height: 1.5; }
.site-nav .page-link:not(:last-child) {
margin-right: 20px; }
@media screen and (max-width: 600px) {
.site-nav {
position: absolute;
top: 9px;
right: 15px;
background-color: #fdfdfd;
border: 1px solid #e8e8e8;
border-radius: 5px;
text-align: right; }
.site-nav label[for="nav-trigger"] {
display: block;
float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer; }
.site-nav .menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center; }
.site-nav .menu-icon > svg {
fill: #424242; }
.site-nav input ~ .trigger {
clear: both;
display: none; }
.site-nav input:checked ~ .trigger {
display: block;
padding-bottom: 5px; }
.site-nav .page-link {
display: block;
padding: 5px 10px;
margin-left: 20px; }
.site-nav .page-link:not(:last-child) {
margin-right: 0; } }
/**
* Site footer
*/
.site-footer {
border-top: 1px solid #e8e8e8;
padding: 30px 0; }
.footer-heading {
font-size: 18px;
margin-bottom: 15px; }
.contact-list,
.social-media-list {
list-style: none;
margin-left: 0; }
.footer-col-wrapper {
font-size: 15px;
color: #828282;
margin-left: -15px; }
.footer-col {
float: left;
margin-bottom: 15px;
padding-left: 15px; }
.footer-col-1 {
width: -webkit-calc(35% - (30px / 2));
width: calc(35% - (30px / 2)); }
.footer-col-2 {
width: -webkit-calc(20% - (30px / 2));
width: calc(20% - (30px / 2)); }
.footer-col-3 {
width: -webkit-calc(45% - (30px / 2));
width: calc(45% - (30px / 2)); }
@media screen and (max-width: 800px) {
.footer-col-1,
.footer-col-2 {
width: -webkit-calc(50% - (30px / 2));
width: calc(50% - (30px / 2)); }
.footer-col-3 {
width: -webkit-calc(100% - (30px / 2));
width: calc(100% - (30px / 2)); } }
@media screen and (max-width: 600px) {
.footer-col {
float: none;
width: -webkit-calc(100% - (30px / 2));
width: calc(100% - (30px / 2)); } }
/**
* Page content
*/
.page-content {
padding: 30px 0;
flex: 1; }
.page-heading {
font-size: 32px; }
.post-list-heading {
font-size: 28px; }
.post-list {
margin-left: 0;
list-style: none; }
.post-list > li {
margin-bottom: 30px; }
.post-meta {
font-size: 14px;
color: #828282; }
.post-link {
display: block;
font-size: 24px; }
/**
* Posts
*/
.post-header {
margin-bottom: 30px; }
.post-title {
font-size: 42px;
letter-spacing: -1px;
line-height: 1; }
@media screen and (max-width: 800px) {
.post-title {
font-size: 36px; } }
.post-content {
margin-bottom: 30px; }
.post-content h2 {
font-size: 32px; }
@media screen and (max-width: 800px) {
.post-content h2 {
font-size: 28px; } }
.post-content h3 {
font-size: 26px; }
@media screen and (max-width: 800px) {
.post-content h3 {
font-size: 22px; } }
.post-content h4 {
font-size: 20px; }
@media screen and (max-width: 800px) {
.post-content h4 {
font-size: 18px; } }
/**
* Syntax highlighting styles
*/
.highlight {
background: #fff; }
.highlighter-rouge .highlight {
background: #eef; }
.highlight .c {
color: #998;
font-style: italic; }
.highlight .err {
color: #a61717;
background-color: #e3d2d2; }
.highlight .k {
font-weight: bold; }
.highlight .o {
font-weight: bold; }
.highlight .cm {
color: #998;
font-style: italic; }
.highlight .cp {
color: #999;
font-weight: bold; }
.highlight .c1 {
color: #998;
font-style: italic; }
.highlight .cs {
color: #999;
font-weight: bold;
font-style: italic; }
.highlight .gd {
color: #000;
background-color: #fdd; }
.highlight .gd .x {
color: #000;
background-color: #faa; }
.highlight .ge {
font-style: italic; }
.highlight .gr {
color: #a00; }
.highlight .gh {
color: #999; }
.highlight .gi {
color: #000;
background-color: #dfd; }
.highlight .gi .x {
color: #000;
background-color: #afa; }
.highlight .go {
color: #888; }
.highlight .gp {
color: #555; }
.highlight .gs {
font-weight: bold; }
.highlight .gu {
color: #aaa; }
.highlight .gt {
color: #a00; }
.highlight .kc {
font-weight: bold; }
.highlight .kd {
font-weight: bold; }
.highlight .kp {
font-weight: bold; }
.highlight .kr {
font-weight: bold; }
.highlight .kt {
color: #458;
font-weight: bold; }
.highlight .m {
color: #099; }
.highlight .s {
color: #d14; }
.highlight .na {
color: #008080; }
.highlight .nb {
color: #0086B3; }
.highlight .nc {
color: #458;
font-weight: bold; }
.highlight .no {
color: #008080; }
.highlight .ni {
color: #800080; }
.highlight .ne {
color: #900;
font-weight: bold; }
.highlight .nf {
color: #900;
font-weight: bold; }
.highlight .nn {
color: #555; }
.highlight .nt {
color: #000080; }
.highlight .nv {
color: #008080; }
.highlight .ow {
font-weight: bold; }
.highlight .w {
color: #bbb; }
.highlight .mf {
color: #099; }
.highlight .mh {
color: #099; }
.highlight .mi {
color: #099; }
.highlight .mo {
color: #099; }
.highlight .sb {
color: #d14; }
.highlight .sc {
color: #d14; }
.highlight .sd {
color: #d14; }
.highlight .s2 {
color: #d14; }
.highlight .se {
color: #d14; }
.highlight .sh {
color: #d14; }
.highlight .si {
color: #d14; }
.highlight .sx {
color: #d14; }
.highlight .sr {
color: #009926; }
.highlight .s1 {
color: #d14; }
.highlight .ss {
color: #990073; }
.highlight .bp {
color: #999; }
.highlight .vc {
color: #008080; }
.highlight .vg {
color: #008080; }
.highlight .vi {
color: #008080; }
.highlight .il {
color: #099; }
最佳答案
在 _site 文件夹中编辑不是正确的选择。这是 Jekyll 生成的代码,每次您执行 jekyll build
或 jekyll serve
时它都会被覆盖。
为了方便初学者工作,jekyll 巧妙地将 _layouts、_includes、_sass 和 assets 隐藏在主题的 gem 文件中。
但是它们藏在哪里呢?只需执行 bundle show minima
即可获得类似于 ~/.rbenv/versions/2.4.3/lib/ruby/gems/2.4.0/gems/minima-2.5.0 的路径/ Assets 。
如果您想更改这些文件中的某些内容,只需将它们复制到您的站点根目录,然后将使用这些副本而不是 gem 文件。
在您的情况下,您只需将/path/to/gem/assets/main.scss 复制到 assets/main.scss 并像这样编辑它:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
$content-width: 100%;
@import "minima";
您的网站现在是全宽的(有边距,但可读性更好)。
如果你想更进一步,你可以看看_sass文件夹。
是的,jekyll's themes是 interwoo 的痛苦。
关于jekyll - 如何最大限度地利用 Jekyll 生成的网页中的屏幕空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53874469/
在后台开启了“URL Rewrite”,看起来一切正常,可是点击某一栏目的时候却怎么都进不去,显示的依然是论坛的首页。看了一下论坛目录下,原来这下面并没有自己的.htaccess文件,所以默认使用的
本文实例为大家分享了.net发送邮件的实现代码,供大家参考,具体内容如下 关键代码: 需要引用命名空间: using System.Net.Mail; using System.Net;
今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接。 以下是我自己做的代码: 复制代
我有以下内容 static const unsigned int chromosome = 6; double bestFitness[chromosomes]; for(int i = 0; i
关于附图,我需要一个计算算法来将 A 轴向下移动 n 英寸,将 B 轴从左向右移动 m 英寸,以便组件圆 D 遵循抛物线的曲线;圆 D 并不总是 10 英寸,可以更小。我不是数学专业的,所以这对我来说
我正在尝试利用我的格式字符串错误,它存在于这个程序中: #include #include #include #include #include void foo(char* tmp, ch
用Matplotlib和Seaborn这类Python库可以画出很好看的图,但是这些图只是静态的,难以动态且美观地呈现数值变化。要是在你下次的演示、视频、社交媒体Po文里能用短视频呈现数据变化,是不
1、进程介绍 进程:正在执行的程序,由程序、数据和进程控制块组成,是正在执行的程序,程序的一次执行过程,是资源调度的基本单位。 程序:没有执行的代码,是一个静态的。 2、线程
1、前言 在开发过程中,有时会遇到需要控制任务并发执行数量的需求。 例如一个爬虫程序,可以通过限制其并发任务数量来降低请求频率,从而避免由于请求过于频繁被封禁问题的发生。 接下来
Opera 管理着一个漏洞赏金计划,研究人员可以在该计划中报告 Opera 软件中的漏洞并获得奖励。 这篇文章就是我发现的一个漏洞——网页可能会从用户那里检索本地文件的屏幕截图。 考虑到 O
C++ 文件查找 在C++中我们要如何查找文件呢?我们需要一个结构体和几个大家可能不太熟悉的函数。这些函数和结构体在的头文件中,结构体为struct _finddata_t ,函数为_findfi
1、前言 本文利用 fsockopen() 函数,编写一个功能简单的端口扫描器。 2、关键技术 本实例的端口号是固定的,通过对数组的遍历,利用 fsockopen() 函数连接,如果连接成功,
最近在将一些项目的rest api迁移到.net core中,最开始是用的Nginx做反向代理,将已经完成切换的部分切入系统,如下图所示: 由于迁移过程中也在进行代码重构,需要经常比较频繁的测
前言 最近学习了python,感觉挺多地方能用到它的。打包 测试 上传 爬电影....而且代码量是真少。人生苦短,我用python。而今天写的这个是因为下载电影时总会发现除了视频还会有这两个文件,
1、Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕、滑动Trackball、按键等操作来对设备上的程序进行压力测试,检测程序
一直想写一套生成静态页面的文章系统 但面对生成静态后的一些复杂数据库交互问题。又望而却步! 于是就想 有没有 在不耽误数据交互的情况下,而又能降低服务器负
Qt 利用大量第 3 方库进行图像编码、压缩、加密、音频和视频编解码器支持等。 从历史上看,当我想使用它们时,我总是必须将它们作为附加依赖项包含在内。我一直想知道是否有一种方法可以简单地重用 Qt 已
我想知道是否可以使用属性将功能“混合”到类/方法/属性中。 就像是: [TrackChanges] public Foo { get; set; } 如果可能的话,有谁会如何实现? 最佳答
有些站点位于共享主机(Windows 2003 Server)上,因此我无法访问服务器配置。 我到处都读到关于杠杆浏览器缓存的信息,特别是静态文件(jpg,css,js等)的信息,但是...在我的情况
我想在我的项目中使用 Julia 的主要原因之一是它的速度,尤其是在计算积分方面。 我想在某个区间 [a,b] 上积分一维函数 f(x)。一般来说,Julia 的 quadgk 函数将是一个快速而准确
我是一名优秀的程序员,十分优秀!