diff --git a/index.html b/index.html index 1c37165..7289671 100644 --- a/index.html +++ b/index.html @@ -13,67 +13,91 @@
- + +

+ The 雞 Spot +

- The Best Chicken Biscuits in Taiwan + 週一至週六 Mon-Sat from 11:00-15:00, 17:00-19:00

-
-
-
- 地址: -
-
- 110台北市信義區基隆路1段190巷7號 -
-
- Address: -
-
- No. 7, Lane 190, Section 1, Jilong Rd, Xinyi District, Taipei City, Taiwan 110 -
-

- The 雞 Spot will be closed on Dec 25, 2023. We will also be only open for lunch, 11:00 - 15:00, on December 26 2023 - December 30, 2023. -

-

- The 雞 Spot hours on Dec 31st, 2023, to January 1st, 2024, are 20:00 to 3:00. Come party with us into the New Year! - We will be closed during the daytime of January 1st, 2024. -

-

- The 雞 Spot will have normal opening hours during Lunar New Year. -

-
- 營業時間 / Hours: -
-
-
星期一 / Monday: 11:00 - 15:00, 17:00 - 19:00
-
星期二 / Tuesday: 11:00 - 15:00, 17:00 - 19:00
-
星期三 / Wednesday: 11:00 - 15:00, 17:00 - 19:00
-
星期四 / Thursday: 11:00 - 15:00, 17:00 - 19:00
-
星期五 / Friday: 11:00 - 15:00, 17:00 - 19:00
-
星期六 / Saturday: 11:00 - 15:00, 17:00 - 19:00
-
星期日 / Sunday: 關閉 / Closed -
+
+ + -
diff --git a/instagramicon.webp b/instagramicon.webp new file mode 100644 index 0000000..c4c5e6f Binary files /dev/null and b/instagramicon.webp differ diff --git a/jispotlogo2.webp b/jispotlogo2.webp new file mode 100644 index 0000000..fa060e7 Binary files /dev/null and b/jispotlogo2.webp differ diff --git a/lineicon.webp b/lineicon.webp new file mode 100644 index 0000000..55db9f0 Binary files /dev/null and b/lineicon.webp differ diff --git a/mapsicon.webp b/mapsicon.webp new file mode 100644 index 0000000..6db379b Binary files /dev/null and b/mapsicon.webp differ diff --git a/menuicon.webp b/menuicon.webp new file mode 100644 index 0000000..5b816cc Binary files /dev/null and b/menuicon.webp differ diff --git a/orderonlineicon.webp b/orderonlineicon.webp new file mode 100644 index 0000000..8730e2b Binary files /dev/null and b/orderonlineicon.webp differ diff --git a/styles.css b/styles.css index 24fbf7d..3c9b9d3 100644 --- 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,25 +49,89 @@ 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 { @@ -75,11 +139,15 @@ header { 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 {