Skip to content

Commit 765e192

Browse files
author
CCCStudioCoder
committed
styles remaking and search fundation
1 parent 26fbe05 commit 765e192

File tree

8 files changed

+333
-26
lines changed

8 files changed

+333
-26
lines changed

‎general.css‎

Lines changed: 98 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,102 @@
1-
nav a{margin: 6%; padding: 4px; font-size: 25px; color: rgb(220, 225, 245);
2-
border: solid black 3px; border-radius: 4px; text-decoration: none; font-weight: bold;}
3-
nav{text-align: center; background-image: linear-gradient(blue, darkblue);
4-
width: 93%; height: 60px; margin: 0%; left: 7%; top: 0%; position: fixed;
5-
border: solid darkblue 10px; border-radius: 8px; z-index: 5;}
6-
nav a:hover{padding: 6px;}
1+
nav a {
2+
font-size: 50px;
3+
color: rgb(220, 225, 245);
4+
text-transform: uppercase; /* Ensures text is in capital letters */
5+
text-decoration: none;
6+
font-weight: bold;
7+
margin-top: auto;
8+
display: inline-block;
9+
position: relative;
10+
margin-right: 5%;
11+
transition-duration: 0.1s;
12+
}
13+
nav a:hover {
14+
font-size: 60px;
15+
transition-duration: 0.2s;
16+
}
17+
18+
nav {
19+
text-align: center;
20+
background-image: linear-gradient(blue, darkblue);
21+
width: 100%;
22+
height: 80px;
23+
top: 0%;
24+
left: 0%;
25+
position: fixed;
26+
z-index: 5;
27+
}
28+
29+
#logo {
30+
position: fixed;
31+
width: 5%;
32+
height: auto;
33+
z-index: 7;
34+
margin-top: auto;
35+
}
36+
@media screen and (max-width: 865px) {
37+
nav a {
38+
display: block; /* Ensures links are stacked vertically */
39+
margin: 10px auto; /* Centers the links and adds spacing */
40+
padding: 4px;
41+
font-size: 25px;
42+
color: rgb(220, 225, 245);
43+
border: solid black 3px;
44+
border-radius: 4px;
45+
text-decoration: none;
46+
font-weight: bold;
47+
}
48+
nav {
49+
text-align: center;
50+
background-image: linear-gradient(blue, darkblue);
51+
width: 100%;
52+
height: auto; /* Adjust height to fit content */
53+
margin: 0%;
54+
left: 0; /* Align nav to the left */
55+
top: 0%;
56+
position: absolute;
57+
border: solid darkblue 10px;
58+
border-radius: 4px;
59+
padding-bottom: 20px; /* Adds space at the bottom */
60+
z-index: 20;
61+
}
62+
nav a:hover {
63+
font-size: 40px;
64+
}
65+
body > *:not(nav):not(nav *) {
66+
position: relative;
67+
top: 300px;
68+
}
69+
button{top: 330px; right: 50%;}
70+
div#results {
71+
position: relative; /* Change to relative to align it naturally in the flow */
72+
top: 0; /* Remove the absolute positioning offset */
73+
margin-top: 250px; /* Add spacing below the input and button */
74+
width: 80%;
75+
}
76+
#logo {visibility: hidden;}
77+
}
78+
779

880
h1{text-align: center; color: #040; font-size: 40px; margin-top: 0%; position: relative; top: 70px;}
9-
#logo{position: fixed; width: 5%; height: 10%;}
10-
img{width: 80%; height: auto; margin: auto;}
1181
.par{font-size: 20px; font-weight: 500; font-family: Verdana, sans-serif;}
1282
p.par{margin-top: 10%;}
13-
body{background-color: rgb(164, 209, 247);}
83+
body{background-color: rgb(164, 209, 247);}
84+
85+
/*Search page styles*/
86+
input{width: 80%; height: 8%; position: absolute; top: 20%;
87+
-webkit-box-align: center; font-size: 3em; border-color: blue;}
88+
button{width: 10; height: 8%; position: absolute; top: 20%; left: 85%; font-size: 3em;
89+
border-color: blue; border-radius: 12px; transition-duration: 0.4s;}
90+
button:hover{background-color: blue; color: white;}
91+
div#results{position: absolute; top: 30%; width: 80%;}
92+
div#results a{
93+
display: block;
94+
width: 100%;
95+
font-size: 35px;
96+
text-decoration: none;
97+
color: black;
98+
margin: 2%;
99+
padding: 5px;
100+
text-align: center;
101+
border: 5px solid black;
102+
}

‎images/daily-download.png‎

-18.2 KB
Loading

‎images/monthly-download.png‎

1.61 KB
Loading

‎images/total-download.png‎

123 Bytes
Loading

‎ore_pack/wikistyle.css‎

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,94 @@
11
/*Box on side styles*/
2-
.menu{border: 3px dashed turquoise; width: 17%;
2+
.menu{border: 3px dashed turquoise; width: 17%; height: 100%;
33
background-image: linear-gradient(to left, blue, darkblue); padding-left: 3%; padding-top: 2%;
4-
padding-bottom: 2%; float: left; position: fixed; top: 20%;}
4+
padding-bottom: 2%; float: left; position: fixed; top: 20%; margin-top: 0%;}
55
.menu a{font-size: 20px; text-align: left; color: black; text-decoration: none; padding: 1px;
66
text-decoration: none; font-weight: bold;}
77
.menu li:hover{list-style-image: url(favicon.ico);}
88

99
/*Box on top styles*/
10-
nav a{margin: 6%; padding: 4px; font-size: 25px; color: rgb(220, 225, 245);
11-
border: solid black 3px; border-radius: 4px; text-decoration: none; font-weight: bold;}
12-
nav{text-align: center; background-image: linear-gradient(blue, darkblue);
13-
width: 93%; height: 60px; margin: 0%; left: 7%; top: 0%; position: fixed;
14-
border: solid darkblue 10px; border-radius: 8px;}
15-
nav a:hover{padding: 6px;}
10+
nav a {
11+
font-size: 50px;
12+
color: rgb(220, 225, 245);
13+
text-transform: uppercase; /* Ensures text is in capital letters */
14+
text-decoration: none;
15+
font-weight: bold;
16+
margin-top: auto;
17+
display: inline-block;
18+
position: relative;
19+
margin-right: 5%;
20+
transition-duration: 0.1s;
21+
}
22+
nav a:hover {
23+
font-size: 60px;
24+
transition-duration: 0.2s;
25+
}
26+
27+
nav {
28+
text-align: center;
29+
background-image: linear-gradient(blue, darkblue);
30+
width: 100%;
31+
height: 80px;
32+
top: 0%;
33+
left: 0%;
34+
position: fixed;
35+
z-index: 5;
36+
}
37+
38+
/*For smaller screen*/
39+
@media screen and (max-width: 865px) {
40+
nav a {
41+
display: block; /* Ensures links are stacked vertically */
42+
margin: 10px auto; /* Centers the links and adds spacing */
43+
padding: 4px;
44+
font-size: 25px;
45+
color: rgb(220, 225, 245);
46+
border: solid black 3px;
47+
border-radius: 4px;
48+
text-decoration: none;
49+
font-weight: bold;
50+
}
51+
nav {
52+
text-align: center;
53+
background-image: linear-gradient(blue, darkblue);
54+
width: 100%;
55+
height: auto; /* Adjust height to fit content */
56+
margin: 0%;
57+
left: 0; /* Align nav to the left */
58+
top: 0%;
59+
position: absolute;
60+
border: solid darkblue 10px;
61+
border-radius: 4px;
62+
padding-bottom: 20px; /* Adds space at the bottom */
63+
z-index: 20;
64+
}
65+
nav a:hover {
66+
font-size: 40px;
67+
}
68+
body > *:not(nav):not(nav *) {
69+
position: relative;
70+
top: 300px;
71+
}
72+
.menu {
73+
border: 3px dashed turquoise;
74+
width: 17%;
75+
height: 100%;
76+
background-image: linear-gradient(to left, blue, darkblue);
77+
padding-left: 3%;
78+
padding-top: 2%;
79+
padding-bottom: 2%;
80+
float: left;
81+
position: fixed;
82+
top: 20%;
83+
margin-top: 0%;
84+
visibility: hidden; /* Initially hidden */
85+
}
86+
87+
.menu a{font-size: 20px; text-align: left; color: black; text-decoration: none; padding: 1px;
88+
text-decoration: none; font-weight: bold;}
89+
.menu li{list-style-type: none;}
90+
}
91+
1692

1793
/*General styles*/
1894
li{list-style-type: square;}

‎renewed_this/wikistyle.css‎

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,94 @@
11
/*Box on side styles*/
2-
.menu{border: 3px dashed turquoise; width: 17%;
2+
.menu{border: 3px dashed turquoise; width: 17%; height: 100%;
33
background-image: linear-gradient(to left, blue, darkblue); padding-left: 3%; padding-top: 2%;
4-
padding-bottom: 2%; float: left; position: fixed; top: 20%;}
4+
padding-bottom: 2%; float: left; position: fixed; top: 20%; margin-top: 0%;}
55
.menu a{font-size: 20px; text-align: left; color: black; text-decoration: none; padding: 1px;
66
text-decoration: none; font-weight: bold;}
77
.menu li:hover{list-style-image: url(favicon.ico);}
88

99
/*Box on top styles*/
10-
nav a{margin: 6%; padding: 4px; font-size: 25px; color: rgb(220, 225, 245);
11-
border: solid black 3px; border-radius: 4px; text-decoration: none; font-weight: bold;}
12-
nav{text-align: center; background-image: linear-gradient(blue, darkblue);
13-
width: 93%; height: 60px; margin: 0%; left: 7%; top: 0%; position: fixed;
14-
border: solid darkblue 10px; border-radius: 8px;}
15-
nav a:hover{padding: 6px;}
10+
nav a {
11+
font-size: 50px;
12+
color: rgb(220, 225, 245);
13+
text-transform: uppercase; /* Ensures text is in capital letters */
14+
text-decoration: none;
15+
font-weight: bold;
16+
margin-top: auto;
17+
display: inline-block;
18+
position: relative;
19+
margin-right: 5%;
20+
transition-duration: 0.1s;
21+
}
22+
nav a:hover {
23+
font-size: 60px;
24+
transition-duration: 0.2s;
25+
}
26+
27+
nav {
28+
text-align: center;
29+
background-image: linear-gradient(blue, darkblue);
30+
width: 100%;
31+
height: 80px;
32+
top: 0%;
33+
left: 0%;
34+
position: fixed;
35+
z-index: 5;
36+
}
37+
38+
39+
/*For smaller screen*/
40+
@media screen and (max-width: 865px) {
41+
nav a {
42+
display: block; /* Ensures links are stacked vertically */
43+
margin: 10px auto; /* Centers the links and adds spacing */
44+
padding: 4px;
45+
font-size: 25px;
46+
color: rgb(220, 225, 245);
47+
border: solid black 3px;
48+
border-radius: 4px;
49+
text-decoration: none;
50+
font-weight: bold;
51+
}
52+
nav {
53+
text-align: center;
54+
background-image: linear-gradient(blue, darkblue);
55+
width: 100%;
56+
height: auto; /* Adjust height to fit content */
57+
margin: 0%;
58+
left: 0; /* Align nav to the left */
59+
top: 0%;
60+
position: absolute;
61+
border: solid darkblue 10px;
62+
border-radius: 4px;
63+
padding-bottom: 20px; /* Adds space at the bottom */
64+
z-index: 20;
65+
}
66+
nav a:hover {
67+
font-size: 40px;
68+
}
69+
body > *:not(nav):not(nav *) {
70+
position: relative;
71+
top: 300px;
72+
}
73+
.menu {
74+
border: 3px dashed turquoise;
75+
width: 17%;
76+
height: 100%;
77+
background-image: linear-gradient(to left, blue, darkblue);
78+
padding-left: 3%;
79+
padding-top: 2%;
80+
padding-bottom: 2%;
81+
float: left;
82+
position: fixed;
83+
top: 20%;
84+
margin-top: 0%;
85+
visibility: hidden; /* Initially hidden */
86+
}
87+
88+
.menu a{font-size: 20px; text-align: left; color: black; text-decoration: none; padding: 1px;
89+
text-decoration: none; font-weight: bold;}
90+
.menu li{list-style-type: none;}
91+
}
1692

1793
/*General styles*/
1894
li{list-style-type: square;}

‎search.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Search | CCCStudio website</title>
6+
<link rel="stylesheet" href="general.css">
7+
</head>
8+
<body>
9+
<img src="favicon.ico" id="logo"/>
10+
<nav><ol>
11+
<a href="projects.html">Projects</a>
12+
<a href="stats.html">Statistics</a>
13+
<a href="about.html">About</a>
14+
<a href="sustain.html">Sustain</a>
15+
</ol></nav>
16+
<h1>Search</h1>
17+
<input type="text" id="search" placeholder="Search..." autofocus="autofocus">
18+
<button id="searchButton" onclick="search()">Search</button>
19+
<script>
20+
function search() {
21+
const oldResults = document.getElementById('results');
22+
if (oldResults) {
23+
oldResults.remove();
24+
}
25+
const query = document.getElementById('search').value.toLowerCase();
26+
const pages = [
27+
{ title: 'advancements', url: 'ore_pack/advancements.html' },
28+
{ title: 'bronze', url: 'ore_pack/bronze.html' },
29+
{ title: 'ore pack', url: 'ore_pack/index.html' },
30+
{ title: 'manganese', url: 'ore_pack/manganese.html' },
31+
{ title: 'new tools', url: 'ore_pack/new_tools.html' },
32+
{ title: 'nickel', url: 'ore_pack/nickel.html' },
33+
{ title: 'ore pack recipes', url: 'ore_pack/recipes.html' },
34+
{ title: 'silver clock', url: 'ore_pack/silver_clock.html' },
35+
{ title: 'silver', url: 'ore_pack/silver.html' },
36+
{ title: 'titanium', url: 'ore_pack/titanium.html' },
37+
{ title: 'ore pack trades', url: 'ore_pack/trades.html' },
38+
];
39+
const results = [];
40+
if (query) {
41+
pages.forEach(page => {
42+
if (page.title.toLowerCase().includes(query)) {
43+
results.push(page);
44+
}
45+
});
46+
if (results.length > 0) {
47+
const resultsContainer = document.createElement('div');
48+
resultsContainer.id = 'results';
49+
results.forEach(result => {
50+
const link = document.createElement('a');
51+
link.href = result.url;
52+
link.textContent = result.title.toUpperCase();
53+
link.style.display = 'block';
54+
resultsContainer.appendChild(link);
55+
});
56+
document.body.appendChild(resultsContainer);
57+
alert('Search results found!');
58+
} else {
59+
alert('No results found.');
60+
}
61+
} else {
62+
alert('Please enter a search term.');
63+
}
64+
}
65+
</script>
66+
</body>

‎stats.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="general.css">
88
<style>
99
#centerimg{margin-left: 20%; margin-top: 10%;}
10-
#centerimg img{margin-bottom: 5%;}
10+
#centerimg img{margin-bottom: 5%; width: 70%; height: auto;}
1111
</style>
1212
</head>
1313
<body>

0 commit comments

Comments
 (0)