From cce2ff6cfc5c828655a942fdd2f9311693db9540 Mon Sep 17 00:00:00 2001
From: guams <guams@duck.com>
Date: Fri, 13 Jun 2025 21:09:30 +0200
Subject: [PATCH] added some responsive

---
 index.html         |  14 ++++++-------
 src/img/button.png | Bin 0 -> 3459 bytes
 src/style.css      |  48 ++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 src/img/button.png

diff --git a/index.html b/index.html
index a3b607a..2b0909e 100644
--- a/index.html
+++ b/index.html
@@ -12,20 +12,20 @@
     <div class="title-bar window-border">
         <div class="title-bar-text">Guams - Home</div>
         <div class="title-bar-controls">
-            <button class="title-bar-button">
+            <button class="title-bar-button minimize-button">
                 <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
             </button>
-            <button class="title-bar-button">
+            <button class="title-bar-button maximize-button">
                 <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
             </button>
-            <button class="title-bar-button">
+            <button class="title-bar-button close-button">
                 <img alt="close button" src="/src/img/close.svg" aria-hidden="true">
             </button>
         </div>
     </div>
     <div class="window-border">
         <div class="banner-div window-border">
-            <img src="/src/img/banner_about.png">
+            <img id="banner" alt="profile banner" src="/src/img/banner_about.png">
         </div>
     </div>
     <div class="content window-border">
@@ -40,14 +40,14 @@
                 <div class="title-bar window-border">
                     <div class="title-bar-text">Changelog</div>
                     <div class="title-bar-controls">
-                        <button class="title-bar-button">
+                        <button class="title-bar-button minimize-button">
                             <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
                         </button>
-                        <button class="title-bar-button">
+                        <button class="title-bar-button maximize-button">
                             <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
                         </button>
                         <button class="title-bar-button">
-                            <img alt="close button" src="/src/img/close.svg" aria-hidden="true">
+                            <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
                         </button>
                     </div>
                 </div>
diff --git a/src/img/button.png b/src/img/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..96952c095c8a811776d06e412cfbbd2ba7feda4a
GIT binary patch
literal 3459
zcmV-}4Se#6P)<h;3K|Lk000e1NJLTq003A30018d1^@s6W5^2N000e2Nkl<ZXhZE<
z2UL_-7XGHu8OqQ_KoM)OMFATwO4Jw^6HCMzH>Rm;)>vZ7$!>NNU9rZpYE)D-*rIOK
zM6qPo9u)$pNJJqjNbfK(Ok?)GH!#eM;BazsjwI_l2hPm=@Bi<6-@EU--@We_96a=0
zrnjdw5YO7Lia=peb&kx{DN1nh;zixL3t1>Ato~IE{9YcWR#&55t1+66fPdC#G_ZGY
zYj&DaM{A58)eUmFGK2$s>P!aq9Y}>wJ6DvI%28BYiTZk-MT~?(0ldAOVQXtm3sixc
znmXt#+~(|L_nWZeXmb^|))MII>p}kr3-$*H1bTpl^rsVuP$sX2Kr+Gvw-J$@G3V_;
zsH&<BGXR{JT!`pb2jbG@J4iT{in=<rMSyK=BpCN{2-^F);n=rHxO*=jTCIK{Ewz6A
z0^7Wu2Y2>EB&a7RW8e~$^qDpGUnpeIHZ?)L00OZXGT*TV+?oaWT4FxNj|;^QSMTBM
z_cu)d4)AwJ`}Q*2zh8vB{BnbLThj_hjd>ov?PNHSkc`Z%LJn}(F74pzYLAS&c_=HZ
zA+K(7>%M(Dv}rrzUQnZ^wg%NzRnS38^U-op*&hR(eP>?G<|L6wpw+Os3E=1FheM}?
z9Jgixj^CdGFWT-E<uxcNCEhWjh?hq9MdYwx949ZmbR`2Sm7bFrMR<5Pfq8OqQ59-y
zl{6?|#`JJ>@8*m6y_b;w(<2kFmP&2gteq)i7=Rimly$V_EA(zk-pjxg5{OeKjK{Xv
z9k6nCftV($cN_sZpD$kwk<bczkLwHo*Vd|=C}Q*0D=lv8{<N)o_X@zZ#Cu3j&n1G_
zK9L57M?6PH-Ei*wZDi+^w2IH!1E02?LA`SzY@h=M9`jTiTU*rC)MC=aXoU6)hFBoP
zyNlmPtwIB9TM6&Od6`iOwI9*~Fg&7D0|&PfV0$}j*wLSyf|x>~vdGPjj<&F}5~I3W
zVeoc~H&KVDX{Tq`3`nhQ^?XZ?Ib-TH#K-T&go&?WYwR{`-?$!P5r~_q3sJ+|`HL}U
z&OB`1ve`g^j6#%J9b`Tu9}jX*^5E8h^IPu|(mR`JFIb7hq=@qI;Rhd}rm7l41`R~w
z^(6G|*ApV5&En!h$UHo-eARj^Uc3Mc7QRm&%+^Hj!4&i0;1>A|U~`8U&?}n<Fo{rv
z8B?NhEa7|HO3#3sn-jLI{TvbkkbzgP)<7r{A?a=oV*a@X)2Byc^zdO=xM%^CY86q6
z6>McMv<xs)25fuR)v2IXKhCvcv5<nA73X1dDJPMLU`Gbn@5+Wi*pg?rH9Nh6GHFg~
z=xE$`vmU_1+Z)!_);zfF+Om?6)sReUkZ8oWug!j!+*VA~E5ePN$%q&b1~mmpu~-5-
z_u(xA%w$xjKrbXFWn%W*BN0BNn+Zk|BBB~n3-5pU6_Qi#bB_Ib-vTb<*uvycQ2XT5
z1K76Z9RoLo4gUBsoKurlkj!BVspgB7on3;7lh+vf`BKuecJ)kj4)W%GjIS?V5QW!g
zMxaiqMixoK3DK)fo<DtRIOfhC$$w)C$JkEjppQ)YGCLt5K`4B1n1Znu<D*_dJKq2-
zU9p@Jg(?p6p6zR3-JpLN$hvwVX3kxRs)|ZDIk{lc<Y*i@7*7e84VQEF9xvdXHwTy|
z8jT!0_K*D#N(MzDA%dUtLrDKl$jd9IsHx-wW1h!?K+LLdaO`*z{jS2*OH28pu$G%!
zh9w`z<Evfs3=?tlo@MwvdQ=|-cJ##GKA8v&Y37203dm#*C?~zVE%q!f|B%5Ku19xY
z?A$&F9XojPd)XM+b=JbeyCY&~5B@pp=Rz2R#=s4u@lT?pshlLIQl*A1?YL@r9h9^n
z<^VH0uTB_<)5mFX$wAjGUyAcrQ?PyK9z1%OjQ~F%>>v*oQr6bk1mwXZ#!ZF2y*-?z
zE{IthgU>%&!YM>V^x@z>5^uKzFw?Joer_fJ{r$7Av0+mJf4--u6M6>wqo}BoYg|Sn
z#sD*L=FN}A<@2963vgWQTrgeDT0VjM;+Um4d|(j*1NA^Q+G2KgZJ*1f+mo6(z{X?w
z?nE*<!cjh-w6tuKB&qS4jq{NgAE%${u{vfstO)45qH^@<6N*_gCSm#VPiZ&mQ)JeJ
z<Y0-ZY54X;0!k{Yuztm7_{+k@bb%;?P<HehiP>)rY~F*}HWw2OWM^$MJdjPgqOz86
zJEr+^b4w9DZJj}a8BZ$VbSnPz#wO%vZ?y<8+xoeAW$^KKq3va50x;V_Y%xZS?EOT5
zGqVa{OhM)zTvjgUQU2WdbWUsLjoGob7Nd9POp;(aeEh+OkU87y*_JdflWk&B52T7|
zN0ifUa{;RcFmDx5azQyBuT{)@Zz1X>c3clLig>IRVJ_23@?%W^W?$I0X3cz3=3evK
ztbf7yeq)L-_Tc7_Gu|zh`ZhNf_S?KUqYPthw86ZYjjOrVF;EIG$27uHhh9B{@%r>h
zycW^e2zMra303+)*{e>c<p7he;9c1DxeG|HNv!#IJGT*S1K`GmGG3sT05)D!V*t$;
zyEy<`TI|NY{sB_>y4>cqhP;AY9NHZRF{m8SzzU3W_wGJ`VZnW&l-FR>k$qV9MGQpb
zxeWX3*HW<S@L>X))hu+a1DJVFmo7d$cqRS#GY@)wdQ-Z5{T|Y8=U~Z4@rJpqTt1yr
zX@9!jfk*W_8M&Ni+2k`a@=QF(*eja@c<s9Hux{fCUixGl+{o9gZ}_mk!PUhcuTB30
z7B7ryb~nW=n+h*aXA_*w$0DUnlVzKgRkhsCum~^ImM1}2uSQWx8Et%E=jIJ?py0?N
zx|kd_H#r>=orvg0h$4*w-9vkEhdy)RGPdrFgQo`td0w~B!jXcUMT%e}Y;KEww(Kz0
zZ8%{v0bgHNEc?e~jDArcyq>fzEdhM?`&(GC`Y3KuP})vX&lq4P$3{f<;(>4C_yNrV
zY`hy<8q0vN&gl1iATD3I!|n9#>kNT1g#gxYfOP~S^GyLs(0Oy-LioTi*ph?A$L+<K
zabu|lVS~ivn^?J#D2FJxo?P9LY8DO-4qTcxWpb^oMMMq{M)=@vIDO^@t|w+eMcIsT
z>)62q<6a3xAr;+^{QElB$-ksMEj!-cHt><%;T~L4Rsl7yk~Jk2Q6nPZF0~<9sl}t5
z9P|$j!OAZ-K`XJ*moCZYWlmBq4p?(^*9W;)SJT+3g(sCISuNPSl*u0G;9vtks-Cgz
zk0k_5-~N*JH0=zeN}5imA!#LtLain)6?0BLm2d_-Hg7}+Z+1MSFHbT}p%Xhpu2Nys
zmzyx^#ZfqW@+914&LkoPu$K+T+;;{yFVlVrFu#X;2KIiyy|JF;L2+p*oSfYdzi%Js
z+1i2}Bwf8^a+;BxejlL&hQdMWfYe(zaBzPdJlx$Wp^?MOKk9J~-Vv7wM*a%Q*w_}g
zbhc(^XGNKe4Fw4$zsI~k3yQ3`&I<QcRSHAe%re2YXeYGSLr|H8#z~4{{~_{XjbY69
zZzsb`=0w#t9g<U1SSN_2UKkQFoEL~#8yPv2&KkW?SW=3hZZA`!5n<}V=Po=1<G>p?
zAL8n@dlu`sp_D?0QLwm5sv<f0=f?^|Zf=e|Nni`W&iESZ$lbcOYm;_@yJVoUw1jFZ
ze%QGu9vZ4QG`2c<1&WUx<yl%zNilrfJP|l^YE$utI-Wgq8oOe@q@$*4_y<Me&vV9@
z0{ml2A*MtR#)V5i;pE8_C@dU$GVoYk;pC|l{O7;7d7f|Fe0*F;P7USW8@J~?9bwn;
z%OU*(+pL|bp*Glj>>$3_ND@uzZkP_Ej{C83^qmeuNgJnCmLqEZdxq<bnafK`sB}3Q
z9x``0dkw?vH_c9!4;{IMj#PvxEUZM%qf(2f!|kXF)!tWzN0c__Qz1rccFfNxB&d@&
z-wBzS1yDB}Gr5yzw?#YC#`?i3^CBupf@R6evG3q94xlYn$CN|~N7t=Fu!D>M79i-2
zX@n1H;)bxtV&9&%Yw-1%1a$Xlk2<FTt<%B3hv3!PIh=eim~uBYNi;EbpG$yWk6<kM
z>nAA4$%EA0lYmv@?yj#OB47h%MN`%$g1V>}>(_3;(p53ILf7W6kHOFmol(&4*@=b;
z?&DwTfLTFw9>++a;rK^HZmCcyaJ^cNnTr;2dbqiJ9|{$<h<xh}RORNQeL#EM*dEKd
zStHca@=)Q3ym`Ydjj0Exq~_vbb_E<M>MLqhq#`W8p~D8ls#K1ofyMOV1v?N`6CGH3
zAIOGOL|e1tDpbObs)%gMv)VB`5~@?G8cxpzAPvOJI!?~c$fZOhuxnS8WM{*MPBSEQ
zAFBkalp1~yYdVn{Lq><`gIwJ1Z<GQ4u2$?FhiC2ALm(}^0Dits{RJB~92j3O&`G5B
z?1d01Dl6+yQeH_U-eioes*M$`DrIU4RnrBQ7_vh_TY5jBxVQ>6be%POdKNhWy-%Qm
l%J@Na?f=P6&mNxN{0}-Q5x9yOYKi~=002ovPDHLkV1hAch!g+-

literal 0
HcmV?d00001

diff --git a/src/style.css b/src/style.css
index 25c5be9..e53cfbe 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,7 @@
 * {
     font-family: 'M PLUS 1p', sans-serif;
     /*font-family: ms ui gothic, sans-serif;*/
+    text-align: justify;
     margin: 0;
     font-size: 16px;
 }
@@ -12,6 +13,10 @@
     inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
 }
 
+h1 {
+    text-align: center;
+}
+
 .left-panel {
     width: 100%;
     display: flex;
@@ -165,5 +170,46 @@ h1 {
     width: 80%;
     padding: 7px;
     min-width: 70%;
-    text-align: center;
+}
+
+/* Responsive */
+
+@media (max-width: 850px) {
+    * {
+        font-size: 12px;
+    }
+
+    .presentation {
+        word-break: break-word;
+        padding: 0;
+    }
+
+    .minimize-button {
+        width: 0;
+        height: 0;
+        visibility: hidden;
+    }
+
+    .maximize-button {
+        height: 0;
+        width: 0;
+        visibility: hidden;
+    }
+
+    #banner {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+    }
+
+    main {
+        width:100%;
+    }
+
+    .banner-div {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        background: rgba(0, 0, 0, 0.5);
+    }
 }
\ No newline at end of file