這是前端挑戰(zhàn)賽 - 12 月版的提交，Glam Up My Markup：冬至

我建造了什麼

網(wǎng)站已上線：https://plutium-239.github.io/dev.to-frontend-challenge/
我的目標(biāo)是讓給定的純 HTML 更具互動性？ 、美觀？有用嗎？我透過為所有部分添加一致的樣式，突出顯示重要術(shù)語以更快地掌握內(nèi)容，同時添加更多對比度來做到這一點(diǎn)。我還針對行動佈局優(yōu)化了該網(wǎng)站，雖然其互動較少，但該網(wǎng)站同樣主題鮮明且實(shí)用。

示範(fàn)

原始碼可在 https://github.com/plutium-239/dev.to-frontend-challenge 公開取得

旅行

主題/CSS

我想選擇夜空主題，因?yàn)槎潦贡卑肭蚪?jīng)歷一年中最短的白天。於是，我想起了我們的老朋友particles.js。但現(xiàn)在它已經(jīng)轉(zhuǎn)變?yōu)?tsParticles，並進(jìn)行了一系列內(nèi)存洩漏修復(fù)、優(yōu)化和打字稿重寫。這形成了頁面的背景。我將其配置為不分散注意力，同時看起來活潑且美觀。進(jìn)行此設(shè)定是我沒有預(yù)料到的痛苦。最新版本有一個 tsarticles.bundle.js，它應(yīng)該是您需要的一切，並導(dǎo)出全局變量，以便您可以在一行中開始，但事實(shí)並非如此。我嘗試在使用 tsarticles.engine.js 時手動調(diào)用它的設(shè)置，但無濟(jì)於事。這是由於缺乏有用的文件。我還嘗試了 slim 版本，其中有一個範(fàn)例用法，但它不起作用。我嘗試用??舊版本替換該版本（因?yàn)槲倚枰闹饕腔拘袨?，而不是新功能），並用 1.43.1 獲得了成功。您可能希望按照自述文件中的說明進(jìn)行操作，但事實(shí)並非如此。

選擇配色方案是一個有趣的巧合。我看過一張 tumblr 貼文/迷因的螢?zāi)唤貓D，非常喜歡其中的顏色。我確實(shí)透過谷歌鏡頭搜尋了更高解析度的圖像並提取了它的顏色。這為我提供了 3 種基色（表面色、原色、活性色）。對於其他顏色，我希望其中一種是紅粉色，另一種是綠色/綠松石色。我選擇了這個範(fàn)圍內(nèi)的一些顏色並匹配了陰影，使其與當(dāng)前的調(diào)色板保持一致。我了解了 Colormind 等很棒的工具來嘗試替代調(diào)色板。

說到排版，我已經(jīng)了解 Readex Pro 字體有一段時間了，而且我真的很喜歡它。它既可以用作標(biāo)題的顯示字體，也可以用作普通文字的基本字體。我確實(shí)嘗試了其他幾個（Noto、Raleway），但最終選擇了 Readex Pro。我還考慮過為所有文字使用等寬字體，但此頁面上的內(nèi)容與該樣式不相容。

接下來是滾動驅(qū)動的動畫！我想在真實(shí)的網(wǎng)站中使用這些已經(jīng)有一段時間了，我將它們包含在目錄和標(biāo)題中。 Firefox （仍然） 存在一些問題，不支援動畫範(fàn)圍（預(yù)設(shè)情況下，滾動驅(qū)動的動畫本身在標(biāo)誌¹ 後面被禁用），所以我必須實(shí)現(xiàn)一個hack -ish修復(fù)（但您仍然需要啟用該標(biāo)誌）。

內(nèi)容/HTML（透過JS）/CSS

說到內(nèi)容，我透過兩種方式做到了這一點(diǎn)：

1. 透過JS為文字加上高亮 - 本質(zhì)上需要替換innerHTML，這感覺很糟糕，但無法修改HTML是相當(dāng)有限的。 我還使用 JS 透過插入元素在簡介中添加了圖像。我這樣做是因?yàn)槲蚁霝槠涮砑右稽c(diǎn)淡入效果。最初，我透過該部分的::after 上的CSS 背景來完成此操作，但在各種桌面尺寸和行動裝置上使淡入淡出保持一致（即影像的頂部邊緣不明顯銳利）事實(shí)證明這是不可能的。因此，我必須在該部分中添加一個新元素，然後將 ::after 偽元素的樣式限制為圖像本身 - 這效果非常好。
2. 透過 CSS 添加圖像到慶?；顒?/strong> - 對於四個慶?；顒又械拿恳粋€，我透過各種來源找到了合適的圖片（來源），並透過偽元素添加了這些圖片。我給了他們一個漂亮的視差風(fēng)格，並在懸?；訒r添加了顯示全圖像。由於影像的多樣性，我盡力找到高解析度的影像，然後使用 ImageMagick 將它們調(diào)整為統(tǒng)一寬度 800px。我以一種巧妙的方式實(shí)現(xiàn)了這一點(diǎn)，利用 .celebration 類別來定義框架，並為每個特定的慶?；顒邮褂?CSS 變數(shù)來定義圖像 URL（和製作人員名單文字）。