From 20b930b876dccb8ca709455feb94568349c60c3d Mon Sep 17 00:00:00 2001
From: spacedrone404 <81930707+spacedrone404@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:04:02 +0300
Subject: [PATCH] Fixed some mobile issues
---
README.md | 7 +++----
index.html | 49 ++++++++++++++++++++++++++++++++++---------------
years/1946.jpg | Bin 32842 -> 0 bytes
3 files changed, 37 insertions(+), 19 deletions(-)
delete mode 100644 years/1946.jpg
diff --git a/README.md b/README.md
index b3711fb..1778ca1 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,7 @@ Timeline slides can be changed using of multiple inputs:
* mouse wheel [up/down]
* touchscreen swipes
+Mobile layout styling is a bit hackerish right now.
+Non standard breapoints, negative margins/coordinate transformations doesn't look neat, got to fix that.
Extended animations are planned in the upcoming future.
-
-Some bugs are present in mobile layout got to fix that.
-
-More to come! Maybe.... if i have time.
+More to come! Maybe.... somebody give me an ability not to sleep!.
\ No newline at end of file
diff --git a/index.html b/index.html
index 3a6c016..66e4ddb 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,10 @@
box-sizing: border-box;
}
+ html {
+ overflow: hidden;
+ }
+
body {
font-family: Arial, sans-serif;
display: flex;
@@ -22,6 +26,7 @@
height: 100vh;
background-color: #f5f5f5;
padding: 10px;
+ overflow: hidden;
}
.chronology {
@@ -40,7 +45,7 @@
align-items: center;
justify-content: center;
padding-bottom: 40px;
- width: 1365px;
+
}
.info-image-container {
@@ -66,6 +71,8 @@
#event-text {
text-align: left;
+ width: 28ch;
+ height: 20px;
animation: event-text-movement linear 0.4s;
}
@@ -148,6 +155,7 @@
.event-image img {
width: clamp(200px, 50vw, 557px);
+ max-width: 100%;
height: auto;
border-radius: 7px;
transition: opacity 0.3s ease-in-out, width 0.4s ease-in-out;
@@ -265,12 +273,13 @@
border: none;
cursor: pointer;
padding: 5px;
+ padding-top: 6px;
border-radius: 50%;
transition: 0.4s ease-in-out;
}
.timeline-nav:hover {
- scale: 108%;
+ scale: 104%;
transition: 0.4s ease-in-out;
}
@@ -312,7 +321,7 @@
@media screen and (max-width: 1365px) {
.content-wrapper {
- outline: 2px purple solid;
+ outline: 2px rgb(0, 255, 140) solid;
margin: auto 50px;
}
@@ -351,7 +360,7 @@
}
}
- @media screen and (max-width: 800px) {
+ @media screen and (max-width: 820px) {
.content-wrapper {
outline: 2px orange solid;
margin: auto 30px;
@@ -373,6 +382,7 @@
font-size: 24px;
}
+
.event-image img {
width: 280px !important;
}
@@ -380,15 +390,20 @@
@media screen and (max-width: 768x) {
.content-wrapper {
- outline: 2px purple solid;
+ outline: 2px rgb(0, 229, 255) solid;
margin: auto 30px;
}
}
@media screen and (max-width: 725px) {
.content-wrapper {
- outline: 2px purple solid;
- margin: auto 30px;
+ outline: 2px red solid;
+ margin: auto 10px;
+ }
+
+ .event-image img {
+ width: 240px !important;
+ transform: translateX(-20px) !important;
}
.dot-wrapper {
@@ -396,15 +411,12 @@
}
}
- @media screen and (max-width: 480px) {
+ @media screen and (max-width: 520px) {
- body {
- overflow: hidden;
- }
.content-wrapper {
outline: 2px rgb(255, 196, 0) solid;
- margin: auto 20px;
+ /* margin: auto 20px; */
}
.chronology {
@@ -430,7 +442,7 @@
align-content: center;
margin: 0 auto;
position: absolute;
- width: 85%;
+ width: 100%;
transform: translateY(-110%);
height: 140px;
padding-bottom: 30px;
@@ -446,6 +458,7 @@
flex-direction: column;
gap: 30px;
height: 500px;
+
}
.dot-wrapper {
@@ -476,8 +489,14 @@
outline: 2px rgb(0, 247, 255) solid;
}
+ .chronology {
+ text-align: center;
+ }
+
+
.event-image img {
- width: 80% !important;
+ width: 85% !important;
+
}
}
@@ -535,7 +554,7 @@
kOPt^z4q@l!3M0`OB(DAu{ufkIf1Jzy{{DHne
za>8DgzmdGcz^`dcf3$_LtRES4mj6cVHjMe$mdzH$MttLx`v(vs*kxFI-CR}}s9V2S
z6AoTvP+-0_UdDQatX2euI1|xbGOhfQefWM>om~C~RRoY1AAdAyWdAhvqzid`t@DO-
zV;vLuAy*Y>lhFR5stFOiQUq1}d&}^sy^6Tc>QdPQpDpd}3jS9BOFy*0$6rvtH6Jxi
z9WB%Omeq$r9iLVA1L;1q{7oxp6-~C`jHY}1+>-->C+3`FehPESh}il$EJj1@%lf%w
zuS~)BQ{|@PHc=fjrL5iw)}DBKIiij$b``-f7oe7A5{b-%)*sE|VeeFv*6dMm*$;Wd
zb+}*>;nsRSa~#Ew44ohD^26U2AMn=DCm8)eT>k*G`@M(Szrt0|_I}pSjyTKp9tVB$
ze;NGV*!7q6aa4>1PXT4FV_5#E-9Opxsn5BS`NiuwbSZJ{XP8gd-{PxMCgfN<_Q{f@
zx#MKP@2Kv}CT}?eUV+q|^AXm1Rb-QKBk1z|HyyenUfowRQ(#V-W_B|m9jdq>hnKfo
z&Ggv$iK%SwiO*&~nn1mJ$En1P95_MJO(gsTj`@yicnoynpw_xXd?n1*wHWy#rpbCA
z?Wk|=pR4}>!ms>F*Khdxv*`UZW!|-WUythl0N*LaI5+5g7VVGReB^Ka5BryBd;CF<
zhVu)sK1Tdqqx*lzC|@0K#MN;n=lJDd5;*1>I8AevS&1Wg;^4!^DiVyDNOMidoMtP?
z0o%0*V0|`b85!w+;u@V8^w1|WLI!*L?OU2JNmO&1p)SyNZ(g#`;_aW!%*NX68%Odxr!q8sOeCsqSVv^s6JIa3R965zwl4
zk4&+wMDLrxda(=N258C?&Iot0oKx(>5_HM8Ge&V3m_lVB%RTx<5XW{D%xw&ibt+ZS
zsZ3nRm?@21?manS&e34j&I1N95?Bmn4?Z~H{8_}X#&VDEinl}?!KWGqs~o_6OVC}bq%2mP!VicFpy%(
zEU6&`QWB6@$Tn%bhI&TAWN7pqISK}yeL#51-*Km{Qw5*_K