adam/ipfs-blog
1
0
Fork 0
mirror of https://github.com/ipfs/ipfs-blog.git synced 2026-08-07 09:22:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #150 from ipfs/fix/iframe-styles

Browse Source 
Video embeds and code blocks break layout by adding horizontal scroll to window on smaller devices
This commit is contained in:
Zé Bateira
2021-04-16 15:43:16 +01:00
committed by GitHub
parent 34820159a1 edca539b87
commit ef6a1f60e1
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/.vuepress/theme/layouts/BlogPost.vue
+19
View File
@@ -76,4 +76,23 @@ export default {
padding-bottom: 0.5rem;
border-bottom: 2px solid #d1d1d663;
}
.blog > iframe {
@apply mx-auto;
}
.blog > iframe[src*='youtube'],
.blog > iframe[src*='vimeo'] {
@apply max-w-full;
height: auto;
aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 1 / 1) {
.blog > iframe[src*='youtube'],
.blog > iframe[src*='vimeo'] {
@apply h-52;
@apply sm:h-80;
}
}
</style>
src/.vuepress/theme/styles/index.css
+13 -10
View File
@@ -9,16 +9,7 @@ pre {
padding: 1.25rem 1.5rem;
background-color: #0e2333;
border-radius: 6px;
}
pre > code {
padding: 0;
background-color: transparent;
border-radius: 0;
color: #fff;
font-size: 0.85em;
white-space: pre-wrap;
word-break: break-all;
overflow-x: auto;
}
code {
@@ -28,4 +19,16 @@ code {
border-radius: 3px;
color: rgba(51, 51, 51, 0.8);
font-size: 0.85em;
white-space: pre-wrap;
word-break: break-all;
}
pre > code {
padding: 0;
background-color: transparent;
border-radius: 0;
color: #fff;
font-size: 0.85em;
white-space: unset;
word-break: unset;
}