refactor(article): add default padding (#166)

* refactor(article): add default padding

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/165

* fix(article): video iframe margin

* fix: remove youtube iframe border
This commit is contained in:
Jimmy Cai 2021-03-07 12:51:47 +01:00 committed by GitHub
parent 38eb9c4eaf
commit d5268a41e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 22 deletions

View file

@ -187,12 +187,11 @@
.article-content { .article-content {
font-family: var(--article-font-family); font-family: var(--article-font-family);
font-size: var(--article-font-size); font-size: var(--article-font-size);
padding: 0 var(--card-padding);
line-height: var(--article-line-height); line-height: var(--article-line-height);
& > p, & > p {
& > div {
margin: 1.5em 0; margin: 1.5em 0;
padding: 0 var(--card-padding);
} }
h1, h1,
@ -201,12 +200,12 @@
h4, h4,
h5, h5,
h6 { h6 {
padding: 0 calc(var(--card-padding) - var(--heading-border-size)); margin-left: calc((var(--card-padding)) * -1);
padding-left: calc(var(--card-padding) - var(--heading-border-size));
border-left: var(--heading-border-size) solid var(--accent-color); border-left: var(--heading-border-size) solid var(--accent-color);
} }
figure { figure {
margin: 0 auto;
text-align: center; text-align: center;
figcaption { figcaption {
@ -217,17 +216,12 @@
blockquote { blockquote {
position: relative; position: relative;
margin: 10px 0; margin: 1.5em 0;
border-left: var(--blockquote-border-size) solid var(--card-separator-color); border-left: var(--blockquote-border-size) solid var(--card-separator-color);
padding: 15px calc(var(--card-padding) - var(--blockquote-border-size)); padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
background-color: var(--blockquote-background-color); background-color: var(--blockquote-background-color);
} }
& > ul,
& > ol {
margin: 1em var(--card-padding);
}
hr { hr {
width: 100px; width: 100px;
margin: 40px auto; margin: 40px auto;
@ -250,7 +244,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin: 20px 0; margin: 1.5em 0;
figure { figure {
margin: 0; margin: 0;
@ -280,9 +274,7 @@
} }
table { table {
margin: 0 var(--card-padding);
width: 100%; width: 100%;
max-width: calc(100% - var(--card-padding) * 2);
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -307,4 +299,33 @@
.twitter-tweet { .twitter-tweet {
color: var(--card-text-color-main); color: var(--card-text-color-main);
} }
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
& > iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0;
}
}
/// Negative margins
blockquote,
figure,
.gallery,
pre,
.video-wrapper,
.s_video_simple {
margin-left: calc((var(--card-padding)) * -1);
margin-right: calc((var(--card-padding)) * -1);
width: calc(100% + var(--card-padding) * 2);
}
} }

View file

@ -12,13 +12,12 @@
<p>当前视频av或BV号{{ $vid }}视频分P{{ $videopage }}</p> <p>当前视频av或BV号{{ $vid }}视频分P{{ $videopage }}</p>
{{ end }} {{ end }}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"> <div class="video-wrapper">
<iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}" <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
scrolling="no" scrolling="no"
frameborder="no" frameborder="no"
framespacing="0" framespacing="0"
allowfullscreen="true" allowfullscreen="true"
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
> >
</iframe> </iframe>
</div> </div>

View file

@ -1,10 +1,10 @@
{{ $vid := .Get 0 }} {{ $vid := .Get 0 }}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"> <div class="video-wrapper">
<iframe src="http://v.qq.com/txp/iframe/player.html?vid={{ $vid }}&auto=0" <iframe src="http://v.qq.com/txp/iframe/player.html?vid={{ $vid }}&auto=0"
scrolling="no" scrolling="no"
frameborder="no" frameborder="no"
framespacing="0" framespacing="0"
allowfullscreen="true" allowfullscreen="true"
style="position: absolute; width: 100%; height: 100%;"> >
</iframe> </iframe>
</div> </div>

View file

@ -2,8 +2,12 @@
{{- if not $pc.Disable -}} {{- if not $pc.Disable -}}
{{- $ytHost := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}} {{- $ytHost := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}} {{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) }} <div class="video-wrapper">
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}> <iframe loading="lazy"
<iframe loading="lazy" src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="YouTube Video"></iframe> src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}"
allowfullscreen
title="YouTube Video"
>
</iframe>
</div> </div>
{{ end -}} {{ end -}}