Skip to content

Commit 5d0eaf3

Browse files
ashra-mainashra-main
authored
navigation links added
1 parent 32ca48f commit 5d0eaf3

File tree

2 files changed

+152
-88
lines changed

2 files changed

+152
-88
lines changed

‎_static/css/style.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2+
3+
body{
4+
background-color: black;
5+
font-family: "Inter";
6+
}
7+
.container-with-sidebar {
8+
position: relative;
9+
}
10+
.container-content {
11+
left: 250px;
12+
position: absolute;
13+
top: 0;
14+
height: 100vh;
15+
width: calc(100% - 250px);
16+
}
17+
.links-list {
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
width: 250px;
22+
color: white;
23+
}
24+
.navigation-title{
25+
padding: 10px 15px;
26+
color: rgb(225, 225, 225);
27+
font-size: 20px;
28+
}
29+
.links-list a{
30+
text-decoration: none;
31+
}
32+
.links-list a:hover .link-text{
33+
background-color: rgb(42, 42, 42);
34+
}
35+
.links-list a .link-text {
36+
padding: 8px 15px;
37+
color: white;
38+
}

‎index.html

Lines changed: 114 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<title>The Extent of The Problem &#8212; Road to Rigor (LM Version)</title>
1212

13-
13+
<link rel="stylesheet" href="./_static/css/style.css">
1414

1515
<script data-cfasync="false">
1616
document.documentElement.dataset.mode = localStorage.getItem("mode") || "";
@@ -25,96 +25,122 @@
2525

2626
<article>
2727
<!-- Data widget here -->
28-
<iframe id="cliprepoif" src="./clip-repo/index.html" width="100%" frameborder="0"></iframe>
29-
30-
<script>
31-
// Script to dynamically adjust the height of the iframe
32-
document.addEventListener('DOMContentLoaded', function () {
33-
var iframe = document.getElementById('cliprepoif');
34-
// Function to update the height
35-
function updateIframeHeight() {
36-
try {
37-
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
38-
iframe.style.height = iframeContent + 'px';
39-
} catch (e) {
40-
console.error('Error adjusting iframe height:', e);
41-
}
42-
}
43-
// Event listener for the iframe load
44-
iframe.addEventListener('load', function () {
45-
updateIframeHeight();
46-
// Set up a MutationObserver to listen for changes in the iframe content
47-
var observer = new MutationObserver(updateIframeHeight);
48-
observer.observe(iframe.contentWindow.document.body, {
49-
attributes: true,
50-
childList: true,
51-
subtree: true
28+
<div class="container-with-sidebar">
29+
<div class="links-list">
30+
<div class="navigation-title">Navigation Links</div>
31+
<div>
32+
<a href="#cliprepoif">
33+
<div class="link-text">clip-repo</div>
34+
</a>
35+
</div>
36+
<div>
37+
<a href="#r2r_lm_final_commitment">
38+
<div class="link-text">r2r_lm_final_commitment</div>
39+
</a>
40+
</div>
41+
<div>
42+
<a href="#r2r_python_ide">
43+
<div class="link-text">r2r_python_ide</div>
44+
</a>
45+
</div>
46+
</div>
47+
<div class="container-content">
48+
<!-- Clip Repo here -->
49+
<iframe id="cliprepoif" src="./clip-repo/index.html" width="100%" frameborder="0"></iframe>
50+
51+
<script>
52+
// Script to dynamically adjust the height of the iframe
53+
document.addEventListener('DOMContentLoaded', function () {
54+
var iframe = document.getElementById('cliprepoif');
55+
// Function to update the height
56+
function updateIframeHeight() {
57+
try {
58+
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
59+
iframe.style.height = iframeContent + 'px';
60+
} catch (e) {
61+
console.error('Error adjusting iframe height:', e);
62+
}
63+
}
64+
// Event listener for the iframe load
65+
iframe.addEventListener('load', function () {
66+
updateIframeHeight();
67+
// Set up a MutationObserver to listen for changes in the iframe content
68+
var observer = new MutationObserver(updateIframeHeight);
69+
observer.observe(iframe.contentWindow.document.body, {
70+
attributes: true,
71+
childList: true,
72+
subtree: true
73+
});
74+
});
5275
});
53-
});
54-
});
55-
</script>
56-
57-
58-
<!-- Data widget here -->
59-
<iframe id="r2r_lm_final_commitment" src="./r2r_lm_final_commitment/index.html" width="100%"
60-
frameborder="0"></iframe>
61-
62-
<script>
63-
// Script to dynamically adjust the height of the iframe
64-
document.addEventListener('DOMContentLoaded', function () {
65-
var iframe = document.getElementById('r2r_lm_final_commitment');
66-
// Function to update the height
67-
function updateIframeHeight() {
68-
try {
69-
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
70-
iframe.style.height = iframeContent + 'px';
71-
} catch (e) {
72-
console.error('Error adjusting iframe height:', e);
73-
}
74-
}
75-
// Event listener for the iframe load
76-
iframe.addEventListener('load', function () {
77-
updateIframeHeight();
78-
// Set up a MutationObserver to listen for changes in the iframe content
79-
var observer = new MutationObserver(updateIframeHeight);
80-
observer.observe(iframe.contentWindow.document.body, {
81-
attributes: true,
82-
childList: true,
83-
subtree: true
76+
</script>
77+
78+
79+
<!-- Data widget here -->
80+
<!-- Final commitment here -->
81+
<iframe id="r2r_lm_final_commitment" src="./r2r_lm_final_commitment/index.html" width="100%"
82+
frameborder="0"></iframe>
83+
84+
<script>
85+
// Script to dynamically adjust the height of the iframe
86+
document.addEventListener('DOMContentLoaded', function () {
87+
var iframe = document.getElementById('r2r_lm_final_commitment');
88+
// Function to update the height
89+
function updateIframeHeight() {
90+
try {
91+
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
92+
iframe.style.height = iframeContent + 'px';
93+
} catch (e) {
94+
console.error('Error adjusting iframe height:', e);
95+
}
96+
}
97+
// Event listener for the iframe load
98+
iframe.addEventListener('load', function () {
99+
updateIframeHeight();
100+
// Set up a MutationObserver to listen for changes in the iframe content
101+
var observer = new MutationObserver(updateIframeHeight);
102+
observer.observe(iframe.contentWindow.document.body, {
103+
attributes: true,
104+
childList: true,
105+
subtree: true
106+
});
107+
});
84108
});
85-
});
86-
});
87-
</script>
88-
89-
<!-- Data widget here -->
90-
<iframe id="r2r_python_ide" src="./r2r_python_ide/index.html" width="100%" frameborder="0"></iframe>
91-
92-
<script>
93-
// Script to dynamically adjust the height of the iframe
94-
document.addEventListener('DOMContentLoaded', function () {
95-
var iframe = document.getElementById('r2r_python_ide');
96-
// Function to update the height
97-
function updateIframeHeight() {
98-
try {
99-
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
100-
iframe.style.height = iframeContent + 'px';
101-
} catch (e) {
102-
console.error('Error adjusting iframe height:', e);
103-
}
104-
}
105-
// Event listener for the iframe load
106-
iframe.addEventListener('load', function () {
107-
updateIframeHeight();
108-
// Set up a MutationObserver to listen for changes in the iframe content
109-
var observer = new MutationObserver(updateIframeHeight);
110-
observer.observe(iframe.contentWindow.document.body, {
111-
attributes: true,
112-
childList: true,
113-
subtree: true
109+
</script>
110+
111+
<!-- Data widget here -->
112+
<!-- Python IDE here -->
113+
<iframe id="r2r_python_ide" src="./r2r_python_ide/index.html" width="100%" frameborder="0"></iframe>
114+
115+
<script>
116+
// Script to dynamically adjust the height of the iframe
117+
document.addEventListener('DOMContentLoaded', function () {
118+
var iframe = document.getElementById('r2r_python_ide');
119+
// Function to update the height
120+
function updateIframeHeight() {
121+
try {
122+
var iframeContent = iframe.contentWindow.document.body.scrollHeight;
123+
iframe.style.height = iframeContent + 'px';
124+
} catch (e) {
125+
console.error('Error adjusting iframe height:', e);
126+
}
127+
}
128+
// Event listener for the iframe load
129+
iframe.addEventListener('load', function () {
130+
updateIframeHeight();
131+
// Set up a MutationObserver to listen for changes in the iframe content
132+
var observer = new MutationObserver(updateIframeHeight);
133+
observer.observe(iframe.contentWindow.document.body, {
134+
attributes: true,
135+
childList: true,
136+
subtree: true
137+
});
138+
});
114139
});
115-
});
116-
});
117-
</script>
140+
</script>
141+
</div>
142+
</div>
143+
118144

119145
</article>
120146

0 commit comments

Comments
 (0)