From ac70ccb9ab9ba75f1a35e065d2ac6fa3d506af12 Mon Sep 17 00:00:00 2001 From: thijs Date: Fri, 3 Nov 2023 16:07:16 +0100 Subject: [PATCH] hacker --- includes/styles.css | 132 ++++++++++++-------------------------------- 1 file changed, 35 insertions(+), 97 deletions(-) diff --git a/includes/styles.css b/includes/styles.css index fd91304..88705b7 100644 --- a/includes/styles.css +++ b/includes/styles.css @@ -1,29 +1,31 @@ -/* Add Google Fonts */ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); + +/* Change to a monospaced font and update colors for the retro look */ +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;700&display=swap'); /* Reset some default styles */ -body, h1, h2, p, ul, li, a { +body, h1, h2, h3, h4, h5, h6, p, ul, li, a, button, input, textarea, table { margin: 0; padding: 0; text-decoration: none; + font-family: 'Source Code Pro', monospace; + color: #33ff33; /* Classic green text color */ + background-color: black; /* Black background */ + border: none; } -body { - font-family: 'Roboto', sans-serif; - background: linear-gradient(to right, #0f2027, #203a43, #2c5364); - color: white; +/* Specific container or section styles can go here */ +.container, .section { + padding: 20px; } - +/* Navigation Styles */ 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: #1a1a1a; /* Dark background for nav */ + box-shadow: none; /* No shadow for a flat look */ } nav ul { list-style-type: none; - padding: 0; text-align: center; /* Center the navigation items */ } @@ -33,111 +35,47 @@ nav li { } 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: 0; /* No rounded edges for a flat look */ + transition: background-color 0.3s, color 0.3s; /* Transition for color changes */ } -nav a:hover { - background: rgba(255, 255, 255, 0.1); /* Slight White Background on Hover */ - transform: translateY(-2px); /* Slight Lift on Hover */ +/* Button Styles */ +button, input[type="submit"], input[type="button"], .button { + background-color: #262626; /* Darker background for buttons */ + color: #33ff33; + padding: 10px 15px; + border: 1px solid #33ff33; /* Green border */ + transition: background-color 0.3s, color 0.3s; } -nav a:active { - transform: translateY(1px); /* Slight Pressed-In effect on Click */ -} - -header, main, footer { - max-width: 800px; - margin: 20px auto; - padding: 20px; - border: 1px solid white; - border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -} - -header h1, section h2 { - border-bottom: 1px solid white; - margin-bottom: 10px; - padding-bottom: 5px; -} - -footer { - text-align: center; -} - -@media (max-width: 600px) { - nav li { - display: block; - margin-right: 0; - } +button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover { + background-color: #33ff33; /* Green background on hover */ + color: black; /* Text color changes on hover */ } +/* Table Styles */ table { width: 100%; border-collapse: collapse; - margin-top: 20px; -} - -table, th, td { - border: 1px solid white; - border-radius: 5px; } th, td { padding: 10px; - text-align: left; + border: 1px solid #33ff33; /* Green border for cells */ } th { - background-color: #555; + background-color: #1a1a1a; /* Dark background for table headers */ } -tr:hover { - background-color: #444; +td { + background-color: #000; /* Black background for table cells */ } -.discord-logo { - width: 50px; - height: auto; - margin-top: 10px; - cursor: pointer; - transition: opacity 0.3s, transform 0.3s; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - border-radius: 5px; -} +/* Scrollbars */ +/* Add custom scrollbar styles if needed */ -.discord-logo:hover { - transform: scale(1.05); - opacity: 0.8; -} +/* Media Queries for responsiveness */ +/* Custom media queries can go here */ -/* Fancy Button Styles */ - -.btn { - display: inline-block; - font-size: 16px; - padding: 12px 20px; - border: none; - border-radius: 25px; /* Rounded Edges */ - background: linear-gradient(to right, #FF416C, #FF4B2B); /* Gradient Background */ - color: white; - cursor: pointer; - transition: transform 0.3s, box-shadow 0.3s; /* Smooth Transition for Hover Effect */ - text-align: center; - text-decoration: none; /* In case you use it on anchor tags */ - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); /* Slight Shadow */ - margin: 10px 0; /* Some Margin for Space */ -} - -.btn:hover { - transform: translateY(-3px); /* Slight Lift on Hover */ - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); /* Increased Shadow on Hover */ -} - -.btn:active { - transform: translateY(1px); /* Slight Pressed-In effect on Click */ -}