Merge pull request #7 from stifskere/dev

fix: gist responsiveness
stifskere · May 12, 2024 · 17f51bd · 17f51bd
2 parents eade627 + dcda737
commit 17f51bd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/components/content-loader/index.css b/src/components/content-loader/index.css
@@ -17,13 +17,21 @@
     text-align: center;
 
     padding: 0 30px;
+
+    @media (orientation: portrait) {
+        width: 75vw;
+    }
 }
 
 .no-content-info > h1,
 .no-content-info > svg {
     font-size: 2.3em;
+
+    @media (orientation: portrait) {
+        font-size: 1.9em;
+    }
 }
 
 .no-content-info > p {
-    font-size: 1.3em;
+    font-size: 0.9em;
 }
diff --git a/src/components/gist/index.css b/src/components/gist/index.css
@@ -42,8 +42,34 @@
     height: 40px;
 
     padding: 0 20px;
+}
 
+.gist-header > div:first-child {
     font-weight: bold;
+
+    overflow: hidden;
+    text-wrap: nowrap;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.gist-header > div:first-child > *:first-child {
+    @media (orientation: portrait) {
+        font-size: 0.85em;
+    }
+}
+
+.gist-header > div:last-child {
+    background-color: black;
+
+    padding: 0 0 0 10px;
+
+    @media (orientation: portrait) {
+        font-size: 0.8em;
+    }
 }
 
 .gist-header > div {
@@ -66,10 +92,6 @@
     align-self: flex-end;
 }
 
-.gist-content {
-    transition: filter 0.5s;
-}
-
 .gist-content {
     padding: 0 0 10px 0;
 
@@ -80,6 +102,10 @@
     overflow: hidden;
 }
 
+.gist-content > pre {
+    overflow: hidden;
+}
+
 .gist:hover > .gist-content {
     max-height: 600px;
 }