Skip to content

Commit 74b1a6d

Browse files
MattForMattFor
committed
mobile responsiveness
1 parent 3f98b33 commit 74b1a6d

3 files changed

Lines changed: 216 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,16 @@ <h3>Music</h3>
104104
<section id="join-support" class="support-section">
105105
<h2>Have questions, need assistance, or just want to hang out? Check out the support server!</h2>
106106
<a href="https://www.discord.gg/xRAGVePxk6" target="_blank" style="display: block; margin-bottom: 10px; font-size: 20px;">Join Relaxy's Requests!</a>
107-
<iframe class="widget-frame" src="https://discord.com/widget?id=1034514185922564106&theme=dark" width="550" height="500" allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
107+
<!-- <iframe class="widget-frame" src="https://discord.com/widget?id=1034514185922564106&theme=dark" width="550" height="500" allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
108+
<div class="widget-wrap" style="position:relative;">
109+
<iframe class="widget-frame"
110+
src="https://discord.com/widget?id=1034514185922564106&theme=dark"
111+
allowtransparency="true"
112+
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
113+
loading="lazy"
114+
referrerpolicy="no-referrer">
115+
</iframe>
116+
</div>
108117
</section>
109118
<section id="topgg" class="topgg-section">
110119
<a href="https://top.gg/bot/775358898088968202" target="_blank" class="topgg-link">

‎main.css‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,3 +406,208 @@ body.light-mode .footer {
406406
flex-direction: column;
407407
}
408408
}
409+
410+
411+
:root{
412+
--bg: #0f1720;
413+
--card: #0b1220;
414+
--accent: #ff69b4;
415+
--text: #e6eef8;
416+
--muted: #9fb0c8;
417+
--max-width: 1200px;
418+
--gutter: 1rem;
419+
--container-padding: 1rem;
420+
}
421+
422+
html{
423+
box-sizing: border-box;
424+
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
425+
font-size: 16px;
426+
-webkit-font-smoothing: antialiased;
427+
-moz-osx-font-smoothing: grayscale;
428+
}
429+
430+
*,*::before,*::after{box-sizing:inherit;}
431+
432+
body.dark-mode{
433+
background: linear-gradient(180deg,var(--bg), #07101a);
434+
color:var(--text);
435+
margin:0;
436+
line-height:1.45;
437+
padding:0;
438+
}
439+
440+
main{max-width:var(--max-width);margin:0 auto;padding: clamp(0.75rem, 2vw, 1.5rem);}
441+
442+
/* Header */
443+
.header{
444+
display:flex;
445+
align-items:center;
446+
justify-content:space-between;
447+
gap:1rem;
448+
padding: clamp(0.5rem, 1.6vw, 1rem);
449+
background: rgba(255,255,255,0.02);
450+
border-bottom: 1px solid rgba(255,255,255,0.03);
451+
position: sticky;
452+
top:0;
453+
z-index:20;
454+
}
455+
456+
.header-content{
457+
display:flex;
458+
gap:0.75rem;
459+
align-items:center;
460+
min-width:0;
461+
}
462+
463+
/* Logo */
464+
.header-logo{
465+
width: clamp(48px, 10vw, 72px);
466+
height: clamp(48px,10vw,72px);
467+
object-fit:cover;
468+
border-radius:10px;
469+
flex-shrink:0;
470+
image-rendering:auto;
471+
}
472+
473+
/* Title */
474+
.header-title h1{
475+
font-size: clamp(1.0rem, 3.2vw, 1.5rem);
476+
margin:0;
477+
line-height:1.05;
478+
letter-spacing: -0.01em;
479+
}
480+
.header-title p{margin:0;font-size:0.85rem;color:var(--muted)}
481+
482+
/* Theme button */
483+
.theme-button{
484+
border:0;
485+
background:transparent;
486+
color:var(--text);
487+
padding:0.5rem 0.75rem;
488+
border-radius:8px;
489+
font-weight:600;
490+
cursor:pointer;
491+
transition: transform .12s ease;
492+
}
493+
.theme-button:active{transform:scale(.98)}
494+
495+
/* Invite button container */
496+
.invite-link{display:flex;justify-content:center;margin:0.75rem 0}
497+
.invite-button{
498+
display:inline-block;
499+
text-decoration:none;
500+
background:linear-gradient(90deg,var(--accent), #ff8acb);
501+
color:#111;
502+
padding:0.8rem 1rem;
503+
border-radius:12px;
504+
font-weight:700;
505+
font-size:clamp(0.9rem, 2.6vw, 1.05rem);
506+
box-shadow:0 6px 18px rgba(255,105,180,0.12);
507+
width:100%;
508+
max-width:420px;
509+
text-align:center;
510+
}
511+
512+
/* Main sections: use grid with responsive fallback */
513+
.left-right-sections{
514+
display:grid;
515+
grid-template-columns: 1fr;
516+
gap: 1rem;
517+
align-items:start;
518+
}
519+
520+
/* Sections style */
521+
.section, .patreon-section, .command-section{
522+
background: rgba(255,255,255,0.02);
523+
padding: clamp(0.8rem, 2.6vw, 1.1rem);
524+
border-radius: 12px;
525+
border: 1px solid rgba(255,255,255,0.02);
526+
}
527+
528+
/* Patreon images row */
529+
.patreon-section{
530+
display:flex;
531+
gap:0.75rem;
532+
align-items:center;
533+
flex-wrap:wrap;
534+
}
535+
.patreon-image{
536+
width: clamp(64px, 20vw, 160px);
537+
height: auto;
538+
border-radius:12px;
539+
aspect-ratio: 1/1;
540+
object-fit:cover;
541+
flex-shrink:0;
542+
}
543+
544+
/* Commands: make them wrap nicely */
545+
.command-section p{white-space:normal;word-break:break-word;font-size:clamp(0.9rem,2.3vw,1rem);color:var(--muted)}
546+
.command-section h3{margin-top:0.6rem}
547+
548+
/* Support + top.gg container */
549+
.support-topgg-container{
550+
display:grid;
551+
grid-template-columns: 1fr;
552+
gap:1rem;
553+
margin-top:1rem;
554+
}
555+
556+
/* Make the Discord widget responsive */
557+
.widget-wrap{
558+
width:100%;
559+
border-radius:10px;
560+
overflow:hidden;
561+
background: #071018;
562+
border:1px solid rgba(255,255,255,0.02);
563+
}
564+
565+
/* Responsive iframe: preserve aspect ratio */
566+
.widget-wrap::before{
567+
content:"";
568+
display:block;
569+
padding-top: min(80%, 500px); /* allows aspect flexibility — smaller screens get taller box */
570+
}
571+
.widget-frame{
572+
position:absolute;
573+
inset:0;
574+
width:100%;
575+
height:100%;
576+
border:0;
577+
}
578+
579+
/* top.gg image */
580+
.topgg-image{max-width:160px;width:100%;height:auto;display:block;margin:0.25rem 0}
581+
582+
/* Footer */
583+
.footer{padding:1rem;text-align:center;color:var(--muted);font-size:0.9rem;margin-top:1.5rem}
584+
585+
/* Make layout two-column on larger screens */
586+
@media (min-width: 880px){
587+
.left-right-sections{
588+
grid-template-columns: 1fr 380px;
589+
align-items:start;
590+
}
591+
.support-topgg-container{
592+
grid-template-columns: 1fr 320px;
593+
align-items:start;
594+
}
595+
.widget-wrap::before{padding-top:calc(500px / 1); /* desktop height */
596+
}
597+
}
598+
599+
/* Small screen polish */
600+
@media (max-width: 520px){
601+
.header{padding:0.6rem}
602+
.header-content{flex-direction:row;align-items:center}
603+
.header-title h1{font-size:1.05rem}
604+
.patreon-section{justify-content:center}
605+
.patreon-content{text-align:center}
606+
.theme-button{font-size:0.85rem;padding:0.4rem 0.6rem}
607+
.invite-button{padding:0.75rem;font-size:1rem}
608+
/* stack support/topgg sections for narrow screens */
609+
.support-topgg-container{grid-template-columns:1fr}
610+
}
611+
612+
/* Accessibility focus outlines */
613+
a:focus, button:focus {outline:3px solid rgba(255,105,180,0.18);outline-offset:3px}

‎subpages/credits.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h2>MattFor's Information</h2>
9797
<p><a href="https://github.com/MattFor/Relaxy-public-showcase" target="_blank" style="color: white;">Relaxy!'s GitHub Repo (Public Showcase)</a></p>
9898
<p style="color: white;">Note: Full version is closed source.</p>
9999

100-
<p><a href="https://steamcommunity.com/id/MattFor/" target="_blank" style="color: white;">My's Steam Profile</a></p>
100+
<p><a href="https://steamcommunity.com/id/MattFor/" target="_blank" style="color: white;">My Steam Profile</a></p>
101101
<address>
102102
My email is: <a href="mailto:mattfor@relaxy.xyz">mattfor@relaxy.xyz</a>
103103
</address>

0 commit comments

Comments
 (0)