https://github.com/akira02/tokyono-sora

Plurk.com UI Redesign project
https://github.com/akira02/tokyono-sora

css redesign

Last synced: 3 months ago
JSON representation

Plurk.com UI Redesign project

• Host: GitHub
• URL: https://github.com/akira02/tokyono-sora
• Owner: akira02
• License: apache-2.0
• Created: 2020-10-28T03:45:38.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-06T09:12:40.000Z (10 months ago)
• Last Synced: 2024-05-06T10:31:32.147Z (10 months ago)
• Topics: css, redesign
• Language: CSS
• Homepage:
• Size: 1.28 MB
• Stars: 26
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tokyono Sora 東京乃空 - Plurk UI

### Redesigned Plurk UI 

![image](https://images.plurk.com/3Lhkj9gwd4SEWocsJgFaVm.png)

 

這是 [千秋稻荷社](https://plurk.com/akira02) 重新設計的噗浪 UI，免費且自由使用的噗浪 CSS 佈景！

![image](https://images.plurk.com/51F0ghyRPLXSwrIkM81MBB.jpg)

![image](https://images.plurk.com/3JD6vO5tC3YkhNwANnJStQ.png)

### 安裝

複製本體 CSS，貼到 `自訂佈景` -> `自訂佈景風格` 欄位

[本體 CSS](https://github.com/akira02/Tokyono-Sora/blob/main/TokynoSora.css) 

[附加自訂 CSS](https://github.com/akira02/Tokyono-Sora/blob/main/custom.css) 

備註：Firefox 需啟用 has-selector 才能正常使用：

- 在網址列輸入 `about:config` 

- `layout.css.has-selector.enabled` 設定為`true` 

### 產生器

這個佈景主題是即時產生模糊半透明效果的，若您的電腦不支援硬體加速，使用此佈景主題可能會有河道捲動不順暢的狀況。 

這時候可以使用靜態模糊圖片產生器，預先產生模糊圖片： 

https://chiaki.uk/Tokyono-Sora 

產生後的 CSS 直接貼到 Tokyono-Sora 的 CSS 後面，接在原本的 CSS 下面即可改用靜態模糊背景。

## 特色

### 調整過的排版

調整了行距、暱稱與大頭貼位置、配色、背景與字體、噗浪的寬度，讓噗浪使用起來更簡潔舒適

![image](https://images.plurk.com/5Jx1pGYR6lNc5eTrwJp84e.jpg)

### RWD 設計

適用各種不同的螢幕寬高，也適用直向螢幕！



### 可愛的載入動畫

自家製可愛旋轉狐狸

![Oct-28-2020 16-13-49](https://user-images.githubusercontent.com/4176802/97418922-62bdab80-1944-11eb-8a07-475ed7cfe95a.gif)

### 數字管風格卡馬字體

自家製數字管字體



### 個人簡介顯示動畫

![Oct-28-2020 17-19-53](https://user-images.githubusercontent.com/4176802/97416800-e033ec80-1941-11eb-8fe4-4de3d1f7d073.gif)

### 支援瀏覽器縮放

如果覺得字體太小，可以直接用瀏覽器的縮放功能放大而不會跑版～

```

Chrome：

放大網頁：按下 Ctrl 和加號鍵 。

縮小網頁：按下 Ctrl 和減號鍵 。

重設縮放等級：按下 Ctrl + 0 鍵。

```

### 背景圖上傳

可以直接使用噗浪的背景圖上傳功能跟佈景配色



## 使用展示

### 一般卡馬值



### 世界線變動率風格卡馬值

![](https://user-images.githubusercontent.com/4176802/97410919-9c89b480-193a-11eb-9338-97c72bf28b1b.png)

![](https://user-images.githubusercontent.com/4176802/97410939-a1e6ff00-193a-11eb-9ced-935328081383.png)

### 噗文







## FAQ

### 要怎麼換成跟展示一樣的世界線變動率風格卡馬值？

複製[附加自訂 CSS](https://github.com/akira02/Tokyono-Sora/blob/main/custom.css)裡面的`改成世界線變動率風格卡馬值`區塊，貼到`自訂佈景`->`自訂佈景風格`欄位中的最下面，要貼在最後面才會啟用喔！

### 使用之後捲動河道好像卡卡的，有時候 CPU 使用率會衝很高？

這個佈景主題是即時產生模糊半透明效果的，若您的電腦不支援硬體加速，使用此佈景主題可能會有河道捲動不順暢的狀況。

這時候可以使用靜態模糊圖片產生器，預先產生模糊圖片：

https://chiaki.uk/Tokyono-Sora

產生後的 CSS，貼到`自訂佈景`->`自訂佈景風格`欄位的最下面即可，要貼在原本的 CSS 最後面才會啟用喔！

## 作者

設計與製作：[千秋](https://plurk.com/akira02)

發明可以控制頂端列與跳出窗 CSS 的黑魔法：[欸個](https://www.plurk.com/egg820)