Redesign

nelsonjchen · May 29, 2024 · edc77be · edc77be
1 parent 6fc32bf
commit edc77be
Showing 1 changed file with 38 additions and 45 deletions.
diff --git a/templates/mirror.html b/templates/mirror.html
@@ -35,7 +35,7 @@
 
         #header_button p {
             margin-bottom: 0;
-            margin-top: 0;
+            margin-top: 10px;
         }
 
         #header_info {
@@ -124,39 +124,28 @@
             display: none;
         }
 
-        a.visit_url_button {
-            display: inline-block;
-            padding: 0.4em 0.4em;
-            margin: 0em 0.3em 0.3em 0;
-            border-radius: 01.15em;
-            box-sizing: border-box;
-            text-decoration: none;
-            font-family: sans-serif;
-            text-transform: uppercase;
-            font-size: 1.7em;
-            font-weight: 800;
-            color: #FFFFFF;
-            background-color: #3369ff;
-            box-shadow: inset 0 -0.6em 0 -0.3em rgba(0, 0, 0, 0.17);
-            text-align: center;
-            /* position: relative; */
-            width: 100%;
-        }
-
-        a.visit_url_button:active {
-            top: 0.1em;
-        }
-
-        a.visit_url_button:hover {
-            background-color: #678ffd;
-            /* border-color: rgba(255, 255, 255, 1); */
+        a.visit_url_original {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 1.2em; /* adjust as needed */
+            max-height: 1.2em; /* should match line-height */
+            display: block;
         }
 
-        @media all and (max-width:30em) {
-            a.visit_url_button {
-                display: block;
-                margin: 0.4em auto;
-            }
+        /* White background for span */
+        /* Rounded corners */
+        /* Black border */
+        .visit_url_pillbar {
+            background-color: white;
+            border-radius: 10px;
+            padding: 5px;
+            margin: 5px;
+            display: block;
+            border: 1px solid black;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         /* Broken Images */
@@ -188,6 +177,13 @@
             font-size: xx-large;
         }
 
+        .why_exist {
+            position: relative;
+            text-align: center;
+            /* italics */
+            font-style: italic;
+        }
+
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Not used, did not want to risk non-indexing. -->
@@ -201,17 +197,18 @@
 <body>
     <div id="main">
         <nav id="header_button">
-            <p>⚠️ The <a href="https://en.wiktionary.org/wiki/indexable">indexable</a> preview below may have
-                <em>rendering errors</em>, <em>broken links</em>, and <em>missing images</em>. <a
-                    href="{{ original_url }}"> Please view the original page on GitHub.com and not this indexable
-                    preview if you intend to <em>use</em> this content. </a></p>
+            <p>Content mirrored for search engine indexing from:</p>
+            <div>
+                <span class="visit_url_pillbar">
+                    <a href="{{ original_url }}" class="visit_url_original">{{ original_url }}</a>
+                </span>
+
+            </div>
+            <div class="why_exist">
+                <a href="/">Why does this service exist?</a>
+            </div>
         </nav>
         <aside id="header_info">
-            <a href="{{ original_url }}" class="visit_url_button">Click / TAP HERE TO View Page on GitHub.com ➡️</a>
-            <p>📄 URL: <a href="{{ original_url }}" class="visit_url_link">{{ original_url }}</a>
-            </p>
-            <p>There are <em>no ads</em> in this search engine enabler service. The button and/or link above will take
-                you <em>directly</em> to GitHub.</p>
             <!-- Last Modified Date added around here from redirect checker-->
         </aside>
         <article id="content">
@@ -221,10 +218,6 @@ <h1>{{ original_title }}</h1>
         <nav id="index">
             <a href="{{ index_url }}">🗂️ Page Index for this GitHub Wiki</a>
         </nav>
-        <aside id="footer_info">
-            <p><a href="/"><span class="emoji">ℹ️</span>About GitHub Wiki SEE, a search engine enabler for GitHub Wikis
-                    as <span class="blocks">GitHub blocks most GitHub Wikis from search engines.</span></a></p>
-        </aside>
     </div>
 </body>