Minor responsive improvement

tka-andrew · Jul 23, 2023 · 1ca5cd3 · 1ca5cd3
1 parent 90d1225
commit 1ca5cd3
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/src/app/main-contents/achievements/achievements.component.html b/src/app/main-contents/achievements/achievements.component.html
@@ -1,6 +1,6 @@
 
 <div class="flexContainer" fxLayout="column" style="height:100%; background-color: lightblue;" style="background-image: url('assets/images/lubo-minar-B-gb_8fgmz8-unsplash.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; overflow: auto;" appBackgroundImageLoaded (imageLoaded)="loaded()">
- <div [ngStyle.lt-md]="{visibility: 'hidden'}" class="vertical"></div>
+ <!-- <div [ngStyle.lt-md]="{visibility: 'hidden'}" class="vertical"></div> -->
  <mgl-timeline style="height:100%; padding: 30px 0px 0px" [alternate]="true" side="right" [mobileWidthThreshold]=959>
  <mgl-timeline-entry>
  <mgl-timeline-entry-header id="entry0"><h3>My first time with robotics</h3></mgl-timeline-entry-header>

diff --git a/src/app/main-contents/technical-notes/technical-notes-content.scss b/src/app/main-contents/technical-notes/technical-notes-content.scss
@@ -50,10 +50,12 @@ p {
  padding-bottom: 5px;
 }
 
-.listItem:hover {
- background-color: $hoverBackgroundColor;
- color: $hoverTextColor;
- font-style: italic;
+@media (hover: hover) and (pointer: fine) {
+ .listItem:hover {
+ background-color: $hoverBackgroundColor;
+ color: $hoverTextColor;
+ font-style: italic;
+ }
 }
 
 mat-drawer {

diff --git a/...main-contents/technical-notes/webDevelopment/html-css-notes/html-css-notes.component.html b/...main-contents/technical-notes/webDevelopment/html-css-notes/html-css-notes.component.html
@@ -968,6 +968,13 @@ <h2>Transformation, Transition & Animation</h2>
  background-color: burlywood;
  animation: example01 8s linear 0s infinite normal;
 }
+
+@media screen and (max-width: 600px) &#123;
+ #animation-demo &#123;
+ width: 40px;
+ height: 40px;
+ } 
+}
  </code>
  </pre>
  <div style="display: flex; justify-content:center; align-items: center; width: 100%; height: 300px; border: black solid 2px;">

diff --git a/...main-contents/technical-notes/webDevelopment/html-css-notes/html-css-notes.component.scss b/...main-contents/technical-notes/webDevelopment/html-css-notes/html-css-notes.component.scss
@@ -4,7 +4,8 @@
  align-items: center;
  text-align: center;
  width: 500px;
- height: 50px;
+ height: fit-content;
+ max-width: 100%;
  background-color: cadetblue;
 }
 
@@ -95,4 +96,11 @@
  height: 200px;
  background-color: burlywood;
  animation: example01 4s linear 0s infinite normal;
-}
+}
+
+@media screen and (max-width: 600px) {
+ #animation-demo {
+ width: 40px;
+ height: 40px;
+ } 
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -21,12 +21,20 @@ $flexRemainingSpace: 1 1 1e-9px;
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
+ul, ol {
+ max-width: 100%;
+}
+
+pre, ul, ol {
+ overflow: auto;
+}
+
 pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 5px;
- overflow: auto;
+ width: fit-content;
 }
 
 .lightThemeRouterLinkActive{