Skip to content

Commit 8744887

Browse files
zesamerizesameri
committed
update theme color across multiple HTML files to #111; add video background feature with associated styles and JavaScript functionality; introduce manifest.json for video metadata
1 parent 830b574 commit 8744887

File tree

10 files changed

+153
-8
lines changed

10 files changed

+153
-8
lines changed

‎alhambra.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1414
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
1515
<meta name="author" content="kvitka">
16-
<meta name="theme-color" content="#222">
16+
<meta name="theme-color" content="#111">
1717
<!-- Styles -->
1818
<link href="./css/main.css" rel="stylesheet">
1919
<link href="./css/crumple.css" rel="stylesheet">

‎assets/videos/super 8.mp4‎

14 MB
Binary file not shown.

‎css/crumple.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@
345345
display: block;
346346
width: 100%;
347347
height: 100%;
348-
background-color: #222;
348+
background-color: #111;
349349
z-index: 1;
350350
}
351351

‎css/main.css‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/*
22
Main.css
33
Color Profile:
4-
dark: #222, #131314
4+
dark: #111, #131314
55
grey: #a6a9ac, #dcdcde
66
light: #f8f8f6, #efeff2
77
*/
88

99
/* Base Layout */
1010
body {
1111
margin: 0;
12-
background-color: #222;
12+
background-color: #111;
1313
-webkit-font-smoothing: antialiased;
1414
-moz-osx-font-smoothing: grayscale;
1515
display: block;
@@ -110,3 +110,27 @@ a {
110110
position: relative;
111111
}
112112

113+
/* Video Background */
114+
.video-background {
115+
position: fixed;
116+
top: 0;
117+
left: 0;
118+
width: 100%;
119+
height: 100%;
120+
object-fit: cover;
121+
z-index: 0;
122+
opacity: 0.3; /* Adjust this to control video visibility (0.2-0.5 works well) */
123+
}
124+
125+
/* Optional: Add overlay for better text readability */
126+
.video-background::after {
127+
content: '';
128+
position: absolute;
129+
top: 0;
130+
left: 0;
131+
width: 100%;
132+
height: 100%;
133+
background: rgba(34, 34, 34, 0.5); /* Matches your #111 background with transparency */
134+
z-index: 1;
135+
}
136+

‎index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<meta property="og:description" content="It's whatever you want to make of it.">
1919
<meta property="og:url" content="http://zesameri.github.io">
2020
<meta property="og:type" content="website">
21-
<meta name="theme-color" content="#222">
21+
<meta name="theme-color" content="#111">
2222
<!-- Styles -->
2323
<link href="./css/main.css" rel="stylesheet">
2424
<link href="./css/crumple.css" rel="stylesheet">
@@ -34,8 +34,19 @@
3434

3535
<!-- Footer Link Delay Script -->
3636
<script src="./js/footer-delay.js"></script>
37+
<script>
38+
document.addEventListener('DOMContentLoaded', function() {
39+
const video = document.querySelector('.video-background');
40+
if (video) {
41+
video.playbackRate = 0.25;
42+
}
43+
});
44+
</script>
3745
</head>
3846
<body>
47+
<video autoplay muted loop playsinline class="video-background">
48+
<source src="./assets/videos/super 8.mp4" type="video/mp4">
49+
</video>
3950
<div class="content-wrapper">
4051
<section class="hero">
4152
<div class="top-bar">

‎js/video-background.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const video = document.querySelector('.video-background');
3+
if (video) {
4+
video.playbackRate = 0.5; // Adjust this value to your preference
5+
}
6+
});

‎manifest.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"video": "super 8.mp4",
3+
"fps_estimate": 25.0,
4+
"duration_seconds_estimate": 15.12,
5+
"sampled_frames": 12,
6+
"frames": [
7+
{
8+
"seq_index": 0,
9+
"source_frame_index": 0,
10+
"timestamp_seconds": 0.0,
11+
"file": "frames/frame_0000.jpg",
12+
"width": 640,
13+
"height": 360
14+
},
15+
{
16+
"seq_index": 1,
17+
"source_frame_index": 1,
18+
"timestamp_seconds": 0.04,
19+
"file": "frames/frame_0001.jpg",
20+
"width": 640,
21+
"height": 360
22+
},
23+
{
24+
"seq_index": 2,
25+
"source_frame_index": 2,
26+
"timestamp_seconds": 0.08,
27+
"file": "frames/frame_0002.jpg",
28+
"width": 640,
29+
"height": 360
30+
},
31+
{
32+
"seq_index": 3,
33+
"source_frame_index": 3,
34+
"timestamp_seconds": 0.12,
35+
"file": "frames/frame_0003.jpg",
36+
"width": 640,
37+
"height": 360
38+
},
39+
{
40+
"seq_index": 4,
41+
"source_frame_index": 4,
42+
"timestamp_seconds": 0.16,
43+
"file": "frames/frame_0004.jpg",
44+
"width": 640,
45+
"height": 360
46+
},
47+
{
48+
"seq_index": 5,
49+
"source_frame_index": 5,
50+
"timestamp_seconds": 0.2,
51+
"file": "frames/frame_0005.jpg",
52+
"width": 640,
53+
"height": 360
54+
},
55+
{
56+
"seq_index": 6,
57+
"source_frame_index": 6,
58+
"timestamp_seconds": 0.24,
59+
"file": "frames/frame_0006.jpg",
60+
"width": 640,
61+
"height": 360
62+
},
63+
{
64+
"seq_index": 7,
65+
"source_frame_index": 7,
66+
"timestamp_seconds": 0.28,
67+
"file": "frames/frame_0007.jpg",
68+
"width": 640,
69+
"height": 360
70+
},
71+
{
72+
"seq_index": 8,
73+
"source_frame_index": 8,
74+
"timestamp_seconds": 0.32,
75+
"file": "frames/frame_0008.jpg",
76+
"width": 640,
77+
"height": 360
78+
},
79+
{
80+
"seq_index": 9,
81+
"source_frame_index": 9,
82+
"timestamp_seconds": 0.36,
83+
"file": "frames/frame_0009.jpg",
84+
"width": 640,
85+
"height": 360
86+
},
87+
{
88+
"seq_index": 10,
89+
"source_frame_index": 10,
90+
"timestamp_seconds": 0.4,
91+
"file": "frames/frame_0010.jpg",
92+
"width": 640,
93+
"height": 360
94+
},
95+
{
96+
"seq_index": 11,
97+
"source_frame_index": 11,
98+
"timestamp_seconds": 0.44,
99+
"file": "frames/frame_0011.jpg",
100+
"width": 640,
101+
"height": 360
102+
}
103+
]
104+
}

‎poems.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<meta name="og:description" content="It's whatever you want to make of it.">
2121
<meta name="og:url" content="http://zesameri.github.io">
2222
<meta name="og:type" content="website">
23-
<meta name="theme-color" content="#222">
23+
<meta name="theme-color" content="#111">
2424
<!-- Styles -->
2525
<link href="./css/main.css" rel="stylesheet">
2626
<link href="./css/crumple.css" rel="stylesheet">

‎trash.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<meta name="og:description" content="It's whatever you want to make of it.">
2121
<meta name="og:url" content="http://zesameri.github.io">
2222
<meta name="og:type" content="website">
23-
<meta name="theme-color" content="#222">
23+
<meta name="theme-color" content="111">
2424
<!-- Styles -->
2525
<link href="./css/main.css" rel="stylesheet">
2626
<link href="./css/crumple.css" rel="stylesheet">

‎writings.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<meta name="og:description" content="It's whatever you want to make of it.">
2121
<meta name="og:url" content="http://zesameri.github.io">
2222
<meta name="og:type" content="website">
23-
<meta name="theme-color" content="#222">
23+
<meta name="theme-color" content="#111">
2424
<!-- Styles -->
2525
<link href="./css/main.css" rel="stylesheet">
2626
<link href="./css/crumple.css" rel="stylesheet">

0 commit comments

Comments
 (0)