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
GitHub
parent
38eb9c4eaf
commit
d5268a41e0
4 changed files with 46 additions and 22 deletions
|
|
@ -187,12 +187,11 @@
|
|||
.article-content {
|
||||
font-family: var(--article-font-family);
|
||||
font-size: var(--article-font-size);
|
||||
padding: 0 var(--card-padding);
|
||||
line-height: var(--article-line-height);
|
||||
|
||||
& > p,
|
||||
& > div {
|
||||
& > p {
|
||||
margin: 1.5em 0;
|
||||
padding: 0 var(--card-padding);
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -201,12 +200,12 @@
|
|||
h4,
|
||||
h5,
|
||||
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);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
figcaption {
|
||||
|
|
@ -217,17 +216,12 @@
|
|||
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
margin: 1.5em 0;
|
||||
border-left: var(--blockquote-border-size) solid var(--card-separator-color);
|
||||
padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
|
||||
background-color: var(--blockquote-background-color);
|
||||
}
|
||||
|
||||
& > ul,
|
||||
& > ol {
|
||||
margin: 1em var(--card-padding);
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100px;
|
||||
margin: 40px auto;
|
||||
|
|
@ -250,7 +244,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
margin: 1.5em 0;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
|
|
@ -280,9 +274,7 @@
|
|||
}
|
||||
|
||||
table {
|
||||
margin: 0 var(--card-padding);
|
||||
width: 100%;
|
||||
max-width: calc(100% - var(--card-padding) * 2);
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5em;
|
||||
|
|
@ -307,4 +299,33 @@
|
|||
.twitter-tweet {
|
||||
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>
|
||||
{{ 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 }}"
|
||||
scrolling="no"
|
||||
frameborder="no"
|
||||
framespacing="0"
|
||||
allowfullscreen="true"
|
||||
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{{ $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"
|
||||
scrolling="no"
|
||||
frameborder="no"
|
||||
framespacing="0"
|
||||
allowfullscreen="true"
|
||||
style="position: absolute; width: 100%; height: 100%;">
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
|
|
@ -2,8 +2,12 @@
|
|||
{{- if not $pc.Disable -}}
|
||||
{{- $ytHost := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}}
|
||||
{{- $id := .Get "id" | default (.Get 0) -}}
|
||||
{{- $class := .Get "class" | default (.Get 1) }}
|
||||
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
|
||||
<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>
|
||||
<div class="video-wrapper">
|
||||
<iframe loading="lazy"
|
||||
src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}"
|
||||
allowfullscreen
|
||||
title="YouTube Video"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
{{ end -}}
|
||||
Loading…
Reference in a new issue