From 0d0adb1a7b2c2df5841d777d8b9c228d2b002b2b Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Fri, 6 Sep 2024 10:37:35 +0200 Subject: [PATCH 1/5] made the css dynamic WoW that's gonna get Patrick so many *female dogs* (#8) Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/pages/pulls/8 Reviewed-by: Patrick Co-authored-by: sageTheDM Co-committed-by: sageTheDM --- contact-form.js | 4 +- footer.js | 4 +- header.js | 4 +- styles.css | 254 +++++++++++++++++++----------------------------- 4 files changed, 106 insertions(+), 160 deletions(-) diff --git a/contact-form.js b/contact-form.js index ce8f879..e90a42e 100644 --- a/contact-form.js +++ b/contact-form.js @@ -1,8 +1,8 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 /* - * freeftf website - * Copyright (C) 2024 sageTheDM + * interstellar_development website + * Copyright (C) 2024 interstellar_development * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as diff --git a/footer.js b/footer.js index 15c3e5e..3c47f3f 100644 --- a/footer.js +++ b/footer.js @@ -1,8 +1,8 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 /* - * freeftf website - * Copyright (C) 2024 sageTheDM + * interstellar_development website + * Copyright (C) 2024 interstellar_development * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as diff --git a/header.js b/header.js index 0710c45..69321c0 100644 --- a/header.js +++ b/header.js @@ -1,8 +1,8 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 /* - * freeftf website - * Copyright (C) 2024 sageTheDM + * interstellar_development website + * Copyright (C) 2024 interstellar_development * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as diff --git a/styles.css b/styles.css index b70eb8b..0a47a02 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ /* - freeftf website - Copyright (C) 2024 sageTheDM + interstellar_development website + Copyright (C) 2024 interstellar_development This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as @@ -15,7 +15,26 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ -* { + +:root { + --background-color: #0b0c1d; + --text-color: #c7d5e0; + --accent-color: #ffdd55; + --accent-hover-color: #ffd700; + --dark-blue: rgba(31, 42, 64, 1); + --dark-blue-translucent: rgba(31, 42, 64, 0.9); + --light-blue: rgba(46, 58, 95, 0.8); + --border-radius: 8px; + --transition-speed: 0.3s; + --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); + --font-size-large: 2.5em; + --font-size-medium: 1.8em; +} + +/* Reset and normalize */ +*, +*::before, +*::after { box-sizing: border-box; margin: 0; padding: 0; @@ -23,27 +42,26 @@ /* Body styling */ body { - background-color: #0b0c1d; /* Deep space blue */ - color: #c7d5e0; /* Light gray-blue text for contrast */ + background-color: var(--background-color); + color: var(--text-color); font-family: "Arial", sans-serif; line-height: 1.6; padding: 0 20px; - background-image: url("images/star.jpg"); /* Starry, mystical background */ + background: url("images/star.jpg") no-repeat center center fixed; background-size: cover; - background-attachment: fixed; } /* Header styling */ header { - background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */ + background-color: var(--dark-blue); position: fixed; width: 100%; padding: 15px 20px; top: 0; left: 0; margin-bottom: 10em; - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */ - backdrop-filter: blur(5px); /* Blur effect for a mystical aura */ + box-shadow: var(--box-shadow); + backdrop-filter: blur(5px); z-index: 100; } @@ -59,34 +77,32 @@ header ul { gap: 20px; } -header ul li { - display: inline; -} - header ul li a { text-decoration: none; - color: #ffdd55; /* Warm star-like yellow */ + color: var(--accent-color); font-weight: bold; padding: 5px 10px; - transition: background-color 0.3s ease, color 0.3s ease; + border-radius: var(--border-radius); + transition: background-color var(--transition-speed), color var(--transition-speed); } header ul li a:hover { - background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */ + background-color: rgba(255, 221, 85, 0.3); color: #fff; - border-radius: 5px; - box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */ + box-shadow: 0 0 10px var(--accent-color); } +/* Old project name styling */ .project-name { font-size: 1.5em; - color: #ffdd55; /* Star yellow */ + color: var(--accent-color); text-decoration: none; + transition: color var(--transition-speed), text-shadow var(--transition-speed); } .project-name:hover { - color: #ffd700; /* Bright golden-yellow for hover effect */ - text-shadow: 0 0 10px #ffd700; /* Glowing text effect */ + color: var(--accent-hover-color); + text-shadow: 0 0 10px var(--accent-hover-color); } /* Article styling */ @@ -94,71 +110,68 @@ article { max-width: 800px; margin: 6.25em auto; padding: 20px; - background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */ - border-radius: 10px; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ - backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */ + background-color: var(--dark-blue-translucent); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + backdrop-filter: blur(5px); } article h1 { - font-size: 2.5em; + font-size: var(--font-size-large); margin-bottom: 20px; - color: #ffdd55; /* Star yellow */ - text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */ + color: var(--accent-color); + text-shadow: 0 0 15px var(--accent-color); } article p { - hyphens: auto; - color: #c7d5e0; /* Light gray-blue text for better readability */ + color: var(--text-color); margin-bottom: 20px; + hyphens: auto; } -/* Download list styling */ +/* Download list */ article h2 { - font-size: 1.8em; - color: #ffdd55; /* Star yellow */ - margin-top: 20px; - margin-bottom: 10px; - text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */ + font-size: var(--font-size-medium); + margin: 20px 0 10px; + color: var(--accent-color); + text-shadow: 0 0 10px var(--accent-color); } article ul { - list-style-type: none; /* Remove bullet points */ - padding-left: 0; + list-style-type: none; + padding: 0; } article ul li { - background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */ + background-color: var(--light-blue); margin-bottom: 10px; - border-radius: 5px; + border-radius: var(--border-radius); padding: 10px; - transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: background-color var(--transition-speed), box-shadow var(--transition-speed); +} + +article ul li:hover { + background-color: rgba(68, 80, 124, 0.9); + box-shadow: 0 0 10px var(--accent-color); } article ul li a { text-decoration: none; - color: #ffdd55; /* Warm yellow for links */ + color: var(--accent-color); font-weight: bold; - font-size: 1.1em; - display: block; -} - -article ul li:hover { - background-color: rgba(68, 80, 124, 0.9); /* Lighter blue on hover */ - box-shadow: 0 0 10px #ffdd55; /* Soft glow effect on hover */ } /* Footer styling */ footer { - background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */ + background-color: var(--dark-blue); padding: 10px 20px; - color: #c7d5e0; /* Light gray-blue text */ + color: var(--text-color); width: 100%; position: fixed; bottom: 0; left: 0; - box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */ - backdrop-filter: blur(5px); /* Mystical blur effect */ + box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); + backdrop-filter: blur(5px); } .footer-content { @@ -166,11 +179,7 @@ footer { font-size: 0.9em; } -footer p { - margin: 0; -} - -/* Card styles */ +/* Old card styles */ section .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -181,44 +190,44 @@ section .cards { section .card { text-align: center; list-style: none; - background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */ + background-color: rgba(46, 58, 95, 0.9); padding: 20px; border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ - border: 1px solid #3a4971; /* Slightly lighter border for card edges */ + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); + border: 1px solid #3a4971; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform var(--transition-speed), box-shadow var(--transition-speed); } section .card:hover { - transform: translateY(-5px); /* Slight lift effect */ - box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */ + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); } section .card img { - height: 80px; /* Image size */ + height: 80px; width: 80px; object-fit: cover; - border-radius: 50%; /* Circular image */ + border-radius: 50%; margin: 0 auto 15px; - box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */ + box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); } section .card h3 { margin: 10px 0; font-size: 1.2em; font-weight: bold; - color: #ffdd55; /* Star yellow for card titles */ - text-shadow: 0 0 10px #ffdd55; /* Glow effect */ + color: var(--accent-color); + text-shadow: 0 0 10px var(--accent-color); } section .card p { flex-grow: 1; - color: #c7d5e0; /* Light gray-blue for card content */ + color: var(--text-color); margin-bottom: 10px; } @@ -229,7 +238,7 @@ section .card::before { right: 10px; width: 24px; height: 24px; - background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */ + background: url("path-to-cosmic-icon.svg") no-repeat center; background-size: contain; } @@ -243,21 +252,24 @@ section .card .suit-icon { background-size: contain; } -/* Contact form styles */ +/* Form styling */ form { max-width: 600px; margin: 0 auto; - background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */ + background: var(--dark-blue-translucent); padding: 20px; - border-radius: 8px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */ - backdrop-filter: blur(5px); /* Mystical blur effect */ + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + backdrop-filter: blur(5px); } -form label { - display: block; - margin-bottom: 8px; - color: #ffdd55; /* Star yellow */ +form label, +form input, +form textarea { + color: var(--text-color); + background-color: var(--light-blue); + border: 1px solid #3a4971; + border-radius: 4px; } form input, @@ -265,106 +277,40 @@ form textarea { width: 100%; padding: 10px; margin-bottom: 15px; - border: 1px solid #3a4971; /* Slightly lighter border for input fields */ - border-radius: 4px; - background: rgba( - 46, - 58, - 95, - 0.7 - ); /* Slightly lighter background for inputs */ - color: #c7d5e0; /* Light gray-blue text for inputs */ } form button { - background-color: #ffdd55; /* Star yellow */ - color: #0b0c1d; /* Deep space blue for text */ + background-color: var(--accent-color); + color: var(--background-color); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color var(--transition-speed); } form button:hover { - background-color: #ffd700; /* Bright golden-yellow on hover */ + background-color: var(--accent-hover-color); } /* Responsive design */ @media (max-width: 768px) { - /* Header */ - .header-content { - flex-direction: column; - align-items: flex-start; - } - header ul { flex-direction: column; gap: 10px; - margin-top: 10px; - padding-left: 0; } - header ul li { - display: block; /* Ensure list items stack vertically */ - } - - header ul li a { - padding: 10px; - } - - /* Article */ article { margin: 12em 10px; padding: 15px; } - article h1 { - font-size: 1.8em; /* Adjust font size for smaller screens */ - } - - article h2 { - font-size: 1.5em; - margin-bottom: 15px; - } - - article ul { - padding-left: 0; - margin-left: 0; - } - - article ul li { - font-size: 1em; - padding: 8px; - margin-bottom: 10px; - } - - article ul li a { - font-size: 1em; /* Ensure links are readable */ - } - - /* Footer */ - footer { - padding: 10px 15px; /* Adjust padding for smaller screens */ - } - - .footer-content { - font-size: 0.9em; /* Ensure footer text is readable but not oversized */ - } - - /* Project Name */ - .project-name { - font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */ - margin-bottom: 10px; /* Adjust spacing below project name */ - } - section .card { - padding: 12px; /* Adjusted padding */ + padding: 12px; } section .card img { - height: 60px; /* Adjusted height */ - width: 60px; /* Adjusted width */ - border-radius: 8px; /* Adjusted border-radius */ + height: 60px; + width: 60px; } } From d01fc5dca57575df1b30f064db1f53b099685ec1 Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Mon, 9 Sep 2024 09:00:26 +0200 Subject: [PATCH 2/5] Fixed the
  • --- index.html | 10 +++++++++- styles.css | 7 +++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6236780..d81046c 100644 --- a/index.html +++ b/index.html @@ -35,12 +35,18 @@

    Our Games