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:
parent
38eb9c4eaf
commit
d5268a41e0
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
@ -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 -}}
|
Loading…
Reference in New Issue
Block a user