Fix URL overflow on mobile in notes page

astronomersiva · Aug 23, 2021 · ab2713a · ab2713a
1 parent f0f0680
commit ab2713a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/pages/notes.html b/pages/notes.html
@@ -28,7 +28,7 @@ <h3>{{ note.content }}</h3>
 
                 {% if note.link %}
                   <p>
-                    <a href="{{ note.link }}" target="_blank" rel="noopener">
+                    <a href="{{ note.link }}" target="_blank" rel="noopener" class="note-link">
                       <svg title="Link" class="icon icon-link">
                         <use xlink:href="#icon-link"></use>
                       </svg>

diff --git a/static/css/styles.css b/static/css/styles.css
@@ -1243,6 +1243,13 @@ ul.notes-list {
   display: inline;
 }
 
+a.note-link {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 a.skip-main {
   left: -999px;
   position: absolute;
@@ -1581,6 +1588,7 @@ svg.icon-moon {
 @media screen and (max-width: 799px) {
   .dark-mode-star {
     opacity: 0;
+    margin: 0;
   }
 }
 
@@ -1623,6 +1631,7 @@ svg.icon-moon {
   .dark-mode-star {
     opacity: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 
   .enable-animations .dark-mode-star {
@@ -1637,10 +1646,10 @@ svg.icon-moon {
 
   @keyframes twinkle {
     0% {
-      transform: scale(.8) translateX(2px);
+      transform: scale(.85);
     }
     100% {
-      transform: scale(1) translateX(0px);
+      transform: scale(1);
     }
   }
 }