ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement new css.Build.

Browse source
This commit is contained in:
Fredrik Jonsson 2026-04-08 11:17:24 +02:00
commit d984bcaf5d
1 changed files with 1681 additions and 1695 deletions
Download patch file Download diff file Expand all files Collapse all files

36
assets/css/components/_responsive-video.css
View file

@ -7,26 +7,24 @@ intrinsic aspect ratio is preserved at any screen width. The
.responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
default 16:9 one. */
@layer components {
.responsive-video {
--aspect-ratio: 9 / 16; /* 16:9 aspect ratio */
.responsive-video {
--aspect-ratio: 9 / 16; /* 16:9 aspect ratio */
position: relative;
padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */
padding-block-start: 25px; /* Height of video controls */
height: 0;
position: relative;
padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */
padding-block-start: 25px; /* Height of video controls */
height: 0;
iframe,
.responsive-video__embed {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
}
}
.responsive-video--4-3 {
--aspect-ratio: 3 / 4; /* 4:3 aspect ratio */
iframe,
.responsive-video__embed {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
}
}
.responsive-video--4-3 {
--aspect-ratio: 3 / 4; /* 4:3 aspect ratio */
}