diff --git a/includes/head.php b/includes/head.php
index e5122ea..099a14f 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -5,7 +5,7 @@
DTCH - PUBG Clan
-
+
diff --git a/includes/styles.css b/includes/styles.css
index 888d02c..8809dfa 100644
--- a/includes/styles.css
+++ b/includes/styles.css
@@ -1,7 +1,7 @@
-/* Add Google Fonts */
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
-/* Reset some default styles */
+
body, h1, h2, p, ul, li, a {
margin: 0;
padding: 0;
@@ -10,68 +10,64 @@ body, h1, h2, p, ul, li, a {
body {
font-family: 'Roboto', sans-serif;
- /*background: linear-gradient(to right, #0f2027, #203a43, #2c5364);*/
color: white;
- background: url(../images/bck.jpg) no-repeat center center fixed;
+ background: url(../images/bck.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
-
nav {
- background: linear-gradient(to right, #FF416C, #FF4B2B); /* Gradient Background */
- box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); /* Slight Shadow for Depth */
- padding: 10px 0; /* Vertical Padding */
+ background: linear-gradient(to right, #FF416C, #FF4B2B);
+ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
+ padding: 10px 0;
min-width: 800px;
}
nav ul {
list-style-type: none;
padding: 0;
- text-align: center; /* Center the navigation items */
+ text-align: center;
}
nav li {
display: inline-block;
- margin: 0 15px; /* Spacing between items */
+ margin: 0 15px;
}
nav a {
color: white;
padding: 10px 20px;
- border-radius: 25px; /* Rounded Edges */
- transition: background-color 0.3s, transform 0.3s; /* Smooth Transition for Hover Effect */
- font-weight: 600; /* Slightly Bold */
- font-size: 16px; /* Adjust as needed */
+ border-radius: 25px;
+ transition: background-color 0.3s, transform 0.3s;
+ font-weight: 600;
+ font-size: 16px;
}
nav a:hover {
- background: rgba(255, 255, 255, 0.1); /* Slight White Background on Hover */
- transform: translateY(-2px); /* Slight Lift on Hover */
+ background: rgba(255, 255, 255, 0.1);
+ transform: translateY(-2px);
}
nav a:active {
- transform: translateY(1px); /* Slight Pressed-In effect on Click */
+ transform: translateY(1px);
}
header .banner {
- max-width: 100%; /* Ensures the image is never larger than its container */
- max-height: 200px; /* Maximum height for the image */
- display: block; /* Prevents inline default spacing */
- margin: 40px auto 0px auto; /* Centers the image within the header */
- width: auto; /* Adjusts the width to maintain the aspect ratio */
+ max-width: 100%;
+ max-height: 200px;
+ display: block;
+ margin: 40px auto 0px auto;
+ width: auto;
border-radius: 10px;
}
-
header, main, footer {
max-width: 1200px;
min-width: 800px;
margin: 5px auto;
padding: 10px;
- /*border: 1px solid rgb(255, 255, 255);*/
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@@ -81,7 +77,7 @@ header h1 {
margin-bottom: 10px;
padding-bottom: 5px;
font-family: 'Bungee Spice';
- text-align: center; /* Centers the text horizontally */
+ text-align: center;
margin-left: auto;
margin-right: auto;
}
@@ -90,62 +86,17 @@ section h2 {
margin-bottom: 10px;
padding-bottom: 5px;
font-family: 'Bungee Spice';
- text-align: center; /* Centers the text horizontally */
+ text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
-
-
footer {
text-align: center;
}
-@media (max-width: 600px) {
-
- th:nth-child(4), td:nth-child(4),
- th:nth-child(9), td:nth-child(9) {
- display: none;
- }
-
- header .banner {
- max-height: 100px; /* Resize the maximum height for mobile */
- width: 100%; /* Take full width of the container */
- }
-
- /* You may also want to adjust other elements to fit mobile layout better */
- header, main, footer {
- min-width: 0; /* Allow the width to shrink below 800px */
- padding: 5px; /* Reduce padding for mobile devices */
- margin: 5px 5px; /* Less margin for tighter mobile layout */
- max-width: 800px;
- min-width: 200px;
- }
-
- nav {
- min-width: 0; /* Allow the nav to be responsive below 800px */
- }
-
- nav ul {
- text-align: left; /* Align nav items to the left on mobile for better spacing */
- }
- th, td {
- padding: 0px; /* Reduce padding */
- margin: 0px;
- font-size: 10px; /* Reduce font size */
- letter-spacing: -0.5px; /* Reduce space between letters */
- }
- /* Other styles can be added here as needed for mobile optimization */
- table {
- font-size: 12px; /* Decrease font size for the whole table */
- margin-top: 5px;
- border-spacing: 0;
- border-collapse: collapse;
- }
-}
-
table {
width: 100%;
border-collapse: collapse;
@@ -194,33 +145,20 @@ tr:hover {
opacity: 0.8;
}
-
-/* Ensure elements scale well on mobile */
-@media (max-width: 768px) {
- body {
- font-size: 14px; /* Adjust font size for mobile readability */
- }
- /* Add additional mobile scaling styles as needed */
-}
-
-/* Override other elements as needed for the hacker theme */
nav {
- background: #121212; /* Dark background for navigation */
- /* border-bottom: 1px solid #e69109; Bright green border for accent */
+ background: #121212;
}
-/* Ensure links stand out */
a {
- color: #e69109; /* Blue color for links */
- text-decoration: none; /* Underline links for better visibility */
+ color: #e69109;
+ text-decoration: none;
}
-/* Specific button styles for .btn class to match the hacker theme */
.btn {
font-family: 'Roboto', monospace;
- background: #222; /* Dark background for buttons */
- color: #e69109; /* Bright green text */
- border: 1px solid #e69109; /* Border to match text color */
+ background: #222;
+ color: #e69109;
+ border: 1px solid #e69109;
padding: 10px 20px;
text-transform: uppercase;
transition: background-color 0.3s ease, color 0.3s ease;
@@ -228,46 +166,72 @@ a {
}
.btn:hover {
- background: #e69109; /* Bright green background on hover */
- color: #000; /* Dark text on hover */
+ background: #e69109;
+ color: #000;
cursor: pointer;
}
-/* Responsive button sizing for mobile for .btn class*/
-@media (max-width: 768px) {
- .btn {
- padding: 8px 16px;
- font-size: 14px; /* Adjust font size for mobile readability */
- }
-}
.btn:active {
- transform: translateY(1px); /* Slight Pressed-In effect on Click */
-}
-/* Container for tables to manage overflow */
-.table-container {
- overflow-x: auto;
- margin: 0 auto; /* Center the table container if necessary */
+ transform: translateY(1px);
}
-/* Styles for the table */
+
+.table-container {
+ overflow-x: auto;
+ margin: 0 auto;
+}
+
+
table {
width: 100%;
max-width: 100%;
- table-layout: auto; /* Let the table layout be automatic */
+ table-layout: auto;
}
-/* Ensure table cells do not cause overflow */
td, th {
word-wrap: break-word;
overflow-wrap: break-word;
}
-
-/* Responsive table adjustments */
-@media (max-width: 768px) {
- table {
- font-size: 14px; /* Adjust font size for smaller screens */
- }
- td, th {
- padding: 8px; /* Adjust cell padding for smaller screens */
- }
+.topnav {
+ overflow: hidden;
+ background-color: #0f0f0f;
+ position: relative;
+ max-width: 1200px;
+ min-width: 800px;
+ margin: 5px auto 5px auto;
+ padding: 10px;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+.topnav #myLinks {
+ display: none;
+}
+.topnav a {
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+ display: block;
+ border-radius: 10px;
+}
+
+.topnav a.icon {
+ color: #e69109;
+ background: black;
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin-top: 10px;
+ margin-right: 10px;
+ border-radius: 10px;
+}
+
+.topnav a:hover {
+ background-color: #494949;
+ color: #ffffff;
+}
+
+.active {
+ background-color: #0f0f0f;
+ color: #e69109;
}
diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css
new file mode 100644
index 0000000..ca2c63e
--- /dev/null
+++ b/includes/styles_mobile.css
@@ -0,0 +1,75 @@
+table {
+ font-size: 14px;
+}
+
+td, th {
+ padding: 8px;
+}
+
+.topnav {
+ overflow: hidden;
+ background-color: #0f0f0f;
+ position: relative;
+ min-width: 300px;
+ max-width: 500px;
+ margin: 5px;
+ padding: 10px;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn {
+ padding: 5px 10px;
+ font-size: 10px;
+ margin: 0px 3px 0px 0px;
+}
+
+body {
+ font-size: 14px;
+}
+
+th:nth-child(4), td:nth-child(4), th:nth-child(9), td:nth-child(9) {
+ display: none;
+}
+
+header .banner {
+ max-height: 100px;
+ width: 100%;
+ margin: 10px auto 0px auto;
+}
+
+
+header, main, footer {
+ min-width: 0;
+ padding: 5px;
+ margin: 5px 5px;
+ max-width: 800px;
+ min-width: 200px;
+}
+
+nav {
+ min-width: 0;
+}
+
+nav ul {
+ text-align: left;
+}
+
+th, td {
+ padding: 0px;
+ margin: 0px;
+ font-size: 10px;
+ letter-spacing: -0.5px;
+}
+
+table {
+ font-size: 12px;
+ margin-top: 5px;
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+section h2 {
+ margin-top: 10px;
+
+}
\ No newline at end of file
diff --git a/includes/topnav.css b/includes/topnav.css
deleted file mode 100644
index 7ad4424..0000000
--- a/includes/topnav.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* Style the navigation menu */
-.topnav {
- overflow: hidden;
- background-color: #0f0f0f;
- position: relative;
- max-width: 1200px;
- min-width: 800px;
- margin: 5px auto 5px auto;
- padding: 10px;
- border-radius: 10px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
- }
-
- /* Hide the links inside the navigation menu (except for logo/home) */
- .topnav #myLinks {
- display: none;
- }
-
- /* Style navigation menu links */
- .topnav a {
- padding: 14px 16px;
- text-decoration: none;
- font-size: 17px;
- display: block;
- border-radius: 10px;
- }
-
- /* Style the hamburger menu */
- .topnav a.icon {
- color: #e69109;
- background: black;
- display: block;
- position: absolute;
- right: 0;
- top: 0;
- margin-top: 10px;
- margin-right: 10px;
- border-radius: 10px;
- }
-
- /* Add a grey background color on mouse-over */
- .topnav a:hover {
- background-color: #494949;
- color: #ffffff;
- }
-
- /* Style the active link (or home/logo) */
- .active {
- background-color: #0f0f0f;
- color: #e69109;
- }
-
-@media (max-width: 768px) {
- .topnav {
- overflow: hidden;
- background-color: #0f0f0f;
- position: relative;
- min-width: 300px;
- max-width: 500px;
- margin: 5px;
- padding: 10px;
- border-radius: 10px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
- }
-}