#1 Pomodoro Timer (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/1-pomodoro-timer Live Demo: 01 - Pomodoro || Advent of JavaScript Preview: Requirements: We’re creating a Pomodoro timer. Start the timer by clicking on the start link/button. Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop. Click on the gear icon to change the length (minutes and seconds) of the timer....

2021-12-30 · 9 min

将Hugo Stack主题友情链接改为双列显示

续:为Hugo Stack主题添加友情链接页面 不太喜欢原页面的排版,遂修改CSS样式,让友情链接列表在≥1024px时显示为两列。 首先,添加@media,然后将links container的display改为grid,并设置grid-template-columns为两列(1fr 1fr): @media (min-width: 1024px) { .article-list--compact.links { display: grid; grid-template-columns: 1fr 1fr; } 接着修改container和单一link(即article)的CSS样式,主要是将原本container的background和box-shadow移到article上: .article-list--compact.links { background: none; box-shadow: none; article { background: var(--card-background); box-shadow: var(--shadow-l1); } } 最后,设置article的样式。为了保持整齐,去掉原本的border,下方添加margin,并且只有当article位于第一列时,右侧才添加margin: article { border: none; margin-bottom: 8px; &:nth-child(odd) { margin-right: 8px; } } 完整代码: @media (min-width: 1024px) { .article-list--compact.links { display: grid; grid-template-columns: 1fr 1fr; background: none; box-shadow: none; article { background: var(--card-background); border: none; box-shadow: var(--shadow-l1); margin-bottom: 8px; &:nth-child(odd) { margin-right: 8px; } } } }

2021-12-08 · 1 min