Update styling for charlie's dumb way

508-dev · Dec 23, 2023 · e826980 · e826980
1 parent 0c9a455
commit e826980
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -13,57 +13,91 @@
   </head>
   <body>
     <header>
-      <img src="/stamp.svg" class="logo" alt="The 雞 Spot" />
+      <img src="/jispotlogo2.webp" class="logo" alt="The 雞 Spot" />
+      <h1>
+        The 雞 Spot
+      </h1>
       <h2>
-        The Best Chicken Biscuits in Taiwan
+        週一至週六 Mon-Sat from 11:00-15:00, 17:00-19:00
       </h2>
-      <nav>
-        <a href="/menu.html">Menu</a>
-      </nav>
     </header>
     <main>
-      <dl>
-        <dt>
-          地址:
-        </dt>
-        <dd>
-          110台北市信義區基隆路1段190巷7號
-        </dd>
 
-        <dt>
-          Address:
-        </dt>
-        <dd>
-          No. 7, Lane 190, Section 1, Jilong Rd, Xinyi District, Taipei City, Taiwan 110
-        </dd
-        <dt>
-          營業時間 / Hours:
-        </dt>
-        <dd>
-          <div class="hours-item"><span>星期一 / Monday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期二 / Tuesday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期三 / Wednesday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期四 / Thursday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期五 / Friday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期六 / Saturday:</span> <span>11:00 - 15:00, 17:00 - 19:00</span></div>
-          <div class="hours-item"><span>星期日 / Sunday:</span> <span>關閉 / Closed</span></span>
-        </dd>
+      <ul>
+        <li>
+          <a href="menu.jpg">
+            <div class="link-icon">
+              <img
+                src="menuicon.webp"
+                />
+            </div>
+            <div class="link-text">
+              菜單 Menu
+            </div>
 
+            <div class="secret">&nbsp;</div>
+          </a>
+        </li>
+        <li>
+          <a href="https://maps.app.goo.gl/6yBNKAkrxwccXiwn7">
+            <div class="link-icon">
+              <img
+                src="mapsicon.webp"
+              />
 
-      </dl>
+            </div>
+            <div class="link-text">
+              Google Maps
+            </div>
 
-      <ul>
-        <li>
-          <a href="https://order.thejispot.com">Order Online - 網上訂購</a>
+            <div class="secret">&nbsp;</div>
+          </a>
         </li>
         <li>
-          <a href="https://maps.app.goo.gl/6yBNKAkrxwccXiwn7">Google Maps</a>
+
+          <a href="https://instagram.com/the_ji_spot">
+            <div class="link-icon">
+              <img
+                src="instagramicon.webp"
+              />
+
+            </div>
+            <div class="link-text">
+              Instagram
+            </div>
+
+            <div class="secret">&nbsp;</div>
+          </a>
         </li>
         <li>
-          <a href="https://instagram.com/the_ji_spot">Instagram</a>
+          <a href="https://lin.ee/OlxeG5I">
+            <div class="link-icon">
+              <img
+                src="lineicon.webp"
+              />
+
+            </div>
+            <div class="link-text">
+              LINE Official
+            </div>
+
+            <div class="secret">&nbsp;</div>
+          </a>
         </li>
         <li>
-          <a href="https://links.thejispot.com">Linktree</a>
+          <a href="https://order.thejispot.com">
+            <div class="link-icon">
+              <img
+                src="orderonlineicon.webp"
+              />
+
+            </div>
+            <div class="link-text">
+
+              線上點餐 Order Online
+            </div>
+            <div class="secret">&nbsp;</div>
+          </a>
         </li>
       </ul>
     </main>

diff --git a/instagramicon.webp b/instagramicon.webp
diff --git a/jispotlogo2.webp b/jispotlogo2.webp
diff --git a/lineicon.webp b/lineicon.webp
diff --git a/mapsicon.webp b/mapsicon.webp
diff --git a/menuicon.webp b/menuicon.webp
diff --git a/orderonlineicon.webp b/orderonlineicon.webp
diff --git a/styles.css b/styles.css
@@ -1,7 +1,7 @@
 
 :root {
-    --color-buff: #ECBF83;
-    --color-red: #9A0002;
+    --color-buff: #ecbf83;
+    --color-red: #9a1d21;
     --color-linen: #FFF7ED;
     --color-blue: #6689A1;
     --color-cafe: #42280F;
@@ -49,37 +49,105 @@ html {
     background: var(--color-lightGrey);
 }
 a {
-    color: var(--color-red);
+    text-decoration: none;
+    color: white;
 }
 a:visited {
-    color: var(--color-cafe);
+    color: white;
+}
+
+ul {
+    width: 100%;
+    margin-inline-start: 0px;
+    padding-inline-start: 0px;
+    padding: 0px 16px;
 }
 ul li {
-    text-decoration: none;
     list-style-type: none;
+    background-color: var(--color-red);
+    transition: all .25s ease-out;
+    hyphens: auto;
+    white-space: normal;
+    transition: box-shadow 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, border-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, background-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    margin-bottom: 12px;
+    height: 58px;
+    padding: 0px 6px;
+    color: white;
+    bordre: 2px solid var(--color-buff);
+}
+ul li a {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+}
+
+ul li a:hover {
+    border: 0px;
+}
+
+.secret {
+    width: 46px;
+}
+
+.secret:hover {
+    border: 0px !important;
+}
+
+.link-icon img {
+    width: 46px;
+}
+
+
+.link-icon {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+ul li:hover {
+    background-color: var(--color-buff);
+    transition: box-shadow 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, border-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, background-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
+    border: 2px solid var(--color-red);
+    color: var(--color-red) !important;
+}
+
+ul li:hover div {
+    color: var(--color-red)
 }
 
 body {
-    background-color: var(--bg-primary);
+    background-color: var(--color-buff);
     line-height: 1.6;
     color: var(--font-color);
     font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
     font-family: var(--font-family-sans);
     padding: 0;
-    max-width: 72rem;
     font-size: 1.0rem;
+    width: 100%;
+    max-width: 680px;
+    margin-top: 69px;
 }
 
 header {
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
+    color: white;
+    text-shadow: 0px 0px 4px black;
+    padding: 0px 8px;
+    text-align: center;
+
 }
 header h1 {
     margin-block-start: 0;
     margin-block-end: 0;
-
     font-size: 3rem;
     margin-bottom: 6px;
     margin-top: 6px;
@@ -89,9 +157,10 @@ header h1 {
 header h2 {
     margin-block-start: 0;
     margin-block-end: 0;
-
     margin-bottom: 3px;
     margin-top: 6px;
+    font-size: 1.1rem;
+    text-shadow: 0px 0px 3px black;
 }
 header h3 {
     margin-block-start: 0;
@@ -109,6 +178,7 @@ main {
     flex-flow: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
 
 }
 
@@ -118,6 +188,13 @@ main {
 
 .logo {
     width: 7em;
+    border-radius: 50%;
+    width: 96px;
+    height: 96px;
+    display: block;
+    object-fit: contain;
+    object-position: initial;
+    filter: none;
 }
 
 .hours-item {