Skip to content
Snippets Groups Projects
Commit 762915f8 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update 3 files 

- /wiki/pages/attributions.html
- /wiki/pages/description.html
- /wiki/pages/education.html
parent 2b2b55dd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
wiki/pages/attributions.html
+ 2
− 53
View file @ 762915f8
......@@ -16,40 +16,14 @@
max-width: 800px;
margin: 0 auto;
}
h2 {
scroll-margin-top: 60px;
}
.row.mt-4 {
margin-left: 130px;
}
.progress-container {
position: fixed;
left: 20px;
bottom: 80px;
width: 60px;
height: 60px;
z-index: 1000;
}
.progress-bar-circle {
transform: rotate(-90deg);
}
.progress-circle {
stroke: hsl(17, 100%, 50%);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: hsl(17, 100%, 50%);
}
</style>
</head>
<body>
......@@ -134,31 +108,6 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
var winScroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
}
window.addEventListener('scroll', handleScroll);
});
</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
wiki/pages/description.html
+ 1
− 76
View file @ 762915f8
......@@ -16,31 +16,7 @@
max-width: 800px;
margin: 0 auto;
}
.sidebar {
position: fixed;
left: 0;
top: 280px;
width: 160px;
height: 40%;
background-color: #ffffff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
border-radius: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li a {
display: block;
padding: 10px;
color: hsl(17, 100%, 50%);
text-decoration: none;
}
.sidebar ul li a:hover {
background-color: #e9ecef;
border-radius: 20px;
}
h2 {
scroll-margin-top: 60px;
}
......@@ -48,32 +24,6 @@
margin-left: 130px;
}
.progress-container {
position: fixed;
left: 20px;
bottom: 80px;
width: 60px;
height: 60px;
z-index: 1000;
}
.progress-bar-circle {
transform: rotate(-90deg);
}
.progress-circle {
stroke: hsl(17, 100%, 50%);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: hsl(17, 100%, 50%);
}
</style>
</head>
<body>
......@@ -157,31 +107,6 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
var winScroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
}
window.addEventListener('scroll', handleScroll);
});
</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
wiki/pages/education.html
+ 1
− 76
View file @ 762915f8
......@@ -16,31 +16,7 @@
max-width: 800px;
margin: 0 auto;
}
.sidebar {
position: fixed;
left: 0;
top: 280px;
width: 160px;
height: 40%;
background-color: #ffffff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
border-radius: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li a {
display: block;
padding: 10px;
color: hsl(17, 100%, 50%);
text-decoration: none;
}
.sidebar ul li a:hover {
background-color: #e9ecef;
border-radius: 20px;
}
h2 {
scroll-margin-top: 60px;
}
......@@ -48,32 +24,6 @@
margin-left: 130px;
}
.progress-container {
position: fixed;
left: 20px;
bottom: 80px;
width: 60px;
height: 60px;
z-index: 1000;
}
.progress-bar-circle {
transform: rotate(-90deg);
}
.progress-circle {
stroke: hsl(17, 100%, 50%);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: hsl(17, 100%, 50%);
}
</style>
</head>
<body>
......@@ -157,31 +107,6 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
var winScroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
}
window.addEventListener('scroll', handleScroll);
});
</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment