diff options
| author | sillylaird <sillyfanboy@gmail.com> | 2026-09-03 00:33:59 +0000 |
|---|---|---|
| committer | sillylaird <sillyfanboy@gmail.com> | 2026-09-03 00:33:59 +0000 |
| commit | 898b52edcb47bcb3e9d6106e74ca73e74ea01e70 (patch) | |
| tree | 85c6ee5ad58b860144551184d4cf86b560c62b91 /gaming/specialforce/style.css | |
| download | www-898b52edcb47bcb3e9d6106e74ca73e74ea01e70.tar.gz www-898b52edcb47bcb3e9d6106e74ca73e74ea01e70.zip | |
Diffstat (limited to '')
| -rw-r--r-- | gaming/specialforce/style.css | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/gaming/specialforce/style.css b/gaming/specialforce/style.css new file mode 100644 index 0000000..27758e1 --- /dev/null +++ b/gaming/specialforce/style.css @@ -0,0 +1,174 @@ +/* --- RESET & BASICS --------------------------------------------------- */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: system-ui, Helvetica, Arial, sans-serif;
+ line-height: 1.4;
+ background: #000;
+ color: var(--ink, #8b0000);
+}
+
+body {
+ text-align: left;
+}
+
+/* --- LAYOUT ----------------------------------------------------------- */
+header {
+ padding: 1rem 1.5rem;
+ background: #000;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ border-bottom: 1px solid #2a1010;
+}
+
+main {
+ padding: 1.5rem;
+ margin: 0 1.5rem;
+ max-width: none;
+}
+
+/* --- LINKS ------------------------------------------------------------ */
+a {
+ text-decoration: none;
+ border-radius: 4px;
+ padding: 2px 4px;
+ transition: background .2s, color .2s;
+ color: var(--ink, #8b0000);
+}
+
+a:hover {
+ background: red;
+ color: #000;
+}
+
+a.no-hover-box:hover {
+ background: transparent;
+ color: red;
+}
+
+/* --- SIDEBAR ---------------------------------------------------------- */
+#mobile-sidebar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 250px;
+ max-height: 100vh;
+ overflow-y: auto;
+ background: #000;
+ transform: translateX(100%);
+ transition: transform .3s ease-in-out;
+ padding: 1rem;
+ box-shadow: -4px 0 8px rgba(0, 0, 0, .5);
+ z-index: 9000;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ border-left: 1px solid #2a1010;
+}
+
+#mobile-sidebar.visible {
+ transform: translateX(0);
+}
+
+#mobile-sidebar::-webkit-scrollbar {
+ display: none;
+}
+
+#menu-toggle {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ z-index: 9100;
+ padding: .5rem 1rem;
+ border: 1px solid #2a1010;
+ background: #000;
+ color: var(--ink, #8b0000);
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+#menu-toggle:hover {
+ background: #2a1010;
+ color: red;
+}
+
+/* --- LOGO ------------------------------------------------------------- */
+.logo {
+ width: 100px;
+ display: block;
+ margin-bottom: 1rem;
+}
+
+/* --- BUTTON ----------------------------------------------------------- */
+.button {
+ background-color: black;
+ color: white;
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 1em;
+ margin: 20px 0;
+ cursor: pointer;
+ border-radius: 8px;
+ transition: background 0.3s, transform 0.3s;
+ border: 1px solid #2a1010;
+}
+
+.button:hover {
+ background-color: red;
+ transform: translateY(-2px);
+}
+
+/* --- FOOTER ----------------------------------------------------------- */
+.footer {
+ background-color: #111;
+ color: #8b0000;
+ padding: 30px 20px;
+ text-align: center;
+ font-size: 0.9em;
+ border-top: 1px solid #2a1010;
+ margin-top: 20px;
+}
+
+.footer a {
+ color: var(--ink, #8b0000);
+ text-decoration: none;
+}
+
+.footer a:hover {
+ text-decoration: underline;
+}
+
+/* --- MEDIA QUERIES --------------------------------------------------- */
+@media (max-width: 768px) {
+ body {
+ flex-direction: column;
+ font-size: 14px;
+ }
+
+ .sidebar {
+ width: 100%;
+ min-height: auto;
+ box-shadow: none;
+ }
+
+ main {
+ width: 100%;
+ }
+
+ h1 {
+ font-size: 2em;
+ }
+
+ .button {
+ font-size: 0.9em;
+ }
+}
\ No newline at end of file |