Skip to content

Commit

Permalink
Removed ts-space in examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@YamiOdymel
YamiOdymel committed Apr 19, 2023
1 parent 3e46cf8 commit b4e4fdc
Show file tree
Hide file tree
Showing 22 changed files with 497 additions and 709 deletions.
69 changes: 34 additions & 35 deletions examples/blog-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,23 +46,28 @@
<div class="ts-header is-huge is-heavy">我的超級<br />神奇部落格</div>
<div class="ts-text is-description is-heavy">目前身份為 YAMI ODYMEL</div>
</div>

<div class="ts-app-sidebar">
<div class="header">帳號</div>
<a href="#!" class="item"> <span class="ts-icon is-users-icon"></span> 使用者 </a>
<a href="#!" class="item"><span class="ts-icon is-users-icon"></span>使用者</a>

<div class="header">內容</div>
<a href="#!" class="item is-active"> <span class="ts-icon is-newspaper-icon"></span> 文章 </a>
<a href="#!" class="item"> <span class="ts-icon is-tags-icon"></span> 分類 </a>
<a href="#!" class="item"> <span class="ts-icon is-photo-film-icon"></span> 多媒體 </a>
<a href="#!" class="item is-active"><span class="ts-icon is-newspaper-icon"></span>文章</a>
<a href="#!" class="item"><span class="ts-icon is-tags-icon"></span>分類</a>
<a href="#!" class="item"><span class="ts-icon is-photo-film-icon"></span>多媒體</a>

<div class="header">系統</div>
<a href="#!" class="item"> <span class="ts-icon is-gear-icon"></span> 偏好設定 </a>
<a href="#!" class="item"> <span class="ts-icon is-palette-icon"></span> 主題與外觀 </a>
<a href="#!" class="item"><span class="ts-icon is-gear-icon"></span>偏好設定</a>
<a href="#!" class="item"><span class="ts-icon is-palette-icon"></span>主題與外觀</a>
</div>

<div class="ts-content" style="margin-top: auto">
<button class="ts-button is-outlined is-fluid">登出</button>
</div>
</div>

<div class="cell is-fluid">
<textarea id="MyID" cols="30" rows="10">
<textarea id="MyID">
在 Unity 中，目前分為兩個撰寫遊戲的方式：[ECS](https://learn.unity.com/tutorial/entity-component-system)（Entity、Component、System）與傳統的 [MonoBehaviour](https://docs.unity3d.com/ScriptReference/MonoBehaviour.html)。

前者是 Unity 在 2018 年所推出的新程式結構撰寫理念，主要是為了解決多數的程式碼都在主執行緒上執行，而導致 CPU 分配率不彰、程式效率降低、執行緒鎖死的問題。但 ECS 基本上到年底，都還不是一個完善的狀態，更不是萬能仙丹；事實上，ECS 就算進入了正式版，也有可能是在下一個產物出來之前的過渡期設計。
Expand Down Expand Up @@ -125,57 +130,51 @@
雖然說 ECS 不完全僅是這樣的東西，但這卻是其中最重要的一環；而另一件事情不得不提到的就是 ECS 在多工上的優勢，同時也是最為麻煩與嚴謹的一部分，不過那又是另一個話題了。
</textarea>
</div>

<div class="cell" style="width: 290px">
<div class="ts-content">
<div class="ts-header is-heavy">文章資訊</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">標題</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">標題</div>
<div class="ts-input is-underlined u-top-spaced-small">
<input type="text" value="以有條理與 ECS 的思緒正確地撰寫 MonoBehavior 邏輯" />
</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">發佈時間</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-start-icon is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">發佈時間</div>
<div class="ts-input is-underlined is-start-icon u-top-spaced-small">
<span class="ts-icon is-calendar-icon"></span>
<input type="date" value="2018-01-29" />
</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-start-icon is-fluid">
<div class="ts-input is-underlined is-start-icon u-top-spaced-small">
<span class="ts-icon is-clock-icon"></span>
<input type="time" value="12:00" />
</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">標籤</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">標籤</div>
<div class="ts-input is-underlined u-top-spaced-small">
<input type="text" value="Unity, ECS, C#" />
</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">前言</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">前言</div>
<div class="ts-input is-underlined u-top-spaced-small">
<textarea rows="3">又有新的東西要學了，學不動了。</textarea>
</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">摘要</div>
<div class="ts-space is-small"></div>
<div class="ts-input is-underlined is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">摘要</div>
<div class="ts-input is-underlined u-top-spaced-small">
<textarea rows="5">
Unity 在 2018 年所推出的新程式結構撰寫理念，主要是為了解決多數的程式碼都在主執行緒上執行，而導致 CPU 分配率不彰、程式效率降低、執行緒鎖死的問題。</textarea
>
</div>
<div class="ts-space is-large"></div>
<div class="ts-text is-secondary">作者</div>
<div class="ts-space is-small"></div>
<div class="ts-select is-underlined is-fluid">

<div class="ts-text is-secondary u-top-spaced-large">作者</div>
<div class="ts-select is-underlined is-fluid u-top-spaced-small">
<select>
<option value="YamiOdymel">YamiOdymel</option>
</select>
</div>
<div class="ts-space is-large"></div>
<button class="ts-button is-fluid">發表文章</button>

<button class="ts-button is-fluid u-top-spaced-large">發表文章</button>
</div>
</div>
</div>
Expand Down
31 changes: 12 additions & 19 deletions examples/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<body>
<div class="ts-content is-vertically-padded">
<div class="ts-container">
<div class="ts-row is-middle-aligned">
<div class="ts-grid is-middle-aligned">
<div class="column">
<a class="ts-text is-undecorated is-secondary" href="#!">訂閱電子報</a>
</div>
Expand All @@ -22,7 +22,7 @@
</div>
</div>
<div class="ts-divider is-section"></div>
<div class="ts-row is-evenly-divided">
<div class="ts-grid is-evenly-divided">
<div class="column is-center-aligned">
<a class="ts-text is-undecorated is-secondary" href="#!">世界</a>
</div>
Expand Down Expand Up @@ -60,16 +60,14 @@
<a class="ts-text is-undecorated is-secondary" href="#!">旅遊</a>
</div>
</div>
<div class="ts-space is-large"></div>
<div class="ts-content is-rounded is-padded" style="background: var(--ts-gray-800); color: var(--ts-gray-50)">
<div class="ts-content is-rounded is-padded u-top-spaced-large" style="background: var(--ts-gray-800); color: var(--ts-gray-50)">
<div style="max-width: 300px">
<div class="ts-header is-huge is-heavy">數十年前被魚群圍毆的天才小釣手</div>
<p>你能夠想像一個試圖釣魚卻又被魚群圍毆的天才小釣手嗎？32 年前一個驚為天人的祕密，這史書尚未記載的故事將在此完全揭露。</p>
<a href="#!" class="ts-button is-outlined" style="color: var(--ts-gray-50)">繼續閱讀</a>
</div>
</div>
<div class="ts-space is-big"></div>
<div class="ts-row is-evenly-divided is-relaxed">
<div class="ts-grid is-evenly-divided is-relaxed u-top-spaced-big">
<div class="column">
<div class="ts-box is-horizontal">
<div class="ts-content">
Expand Down Expand Up @@ -97,13 +95,11 @@
</div>
</div>
</div>
<div class="ts-space is-big"></div>
<div class="ts-grid is-relaxed">
<div class="ts-grid is-relaxed u-top-spaced-big">
<div class="column is-11-wide">
<div class="ts-text is-big is-italic is-bold">最新消息</div>
<div class="ts-divider"></div>
<div class="ts-space"></div>
<div>
<div class="u-top-spaced">
<div class="ts-header is-huge is-heavy">範例文章第一篇</div>
<div class="ts-meta is-secondary">
<a href="#!" class="item">2022 年 7 月 13 日</a>
Expand All @@ -122,17 +118,16 @@
臺灣南北縱長約 395 公里，東西寬度最大約 144 公里，環島海岸線長約 1139 公里，含屬島面積約 35882.6258
平方公里，四面環海，島嶼整體形狀似長條蕃薯狀。臺灣四面環海，孕育了各種海岸地形。
</p>
<div class="ts-header is-big is-heavy">引用範例</div>
<div class="ts-quote">
<div class="ts-header is-large is-heavy">引用範例</div>
<div class="ts-quote u-top-spaced">
臺灣是由歐亞大陸板塊、沖繩板塊和菲律賓海板塊擠壓而隆起的島嶼。臺灣主要是由兩個板塊的聚合作用產生，分別歸屬於歐亞板塊以及菲律賓海板塊。
<div class="cite">維基百科</div>
</div>
<p>
由於最大分水嶺中央山脈分布位置偏東，使得主要的河川大多分布在西半部，包括長度最長位居中部地區的濁水溪，流域最廣位居南部地區的高屏溪，以及長度與流域面積均為第三而位居北部地區的淡水河。其他尚有頭前溪、後龍溪、大安溪、大甲溪、烏溪、曾文溪等；而東半部主要河川則有蘭陽溪、立霧溪、花蓮溪、秀姑巒溪、卑南溪等。臺灣的天然湖泊稀少，最大的是日月潭，可能經由隕石撞擊形成的嘉明湖等，其餘多是人工修築的埤塘、水庫居多。
</p>
</div>
<div class="ts-space is-big"></div>
<div>
<div class="u-top-spaced-big">
<div class="ts-header is-huge is-heavy">早安，世界！</div>
<div class="ts-meta is-secondary">
<a href="#!" class="item">2022 年 5 月 16 日</a>
Expand Down Expand Up @@ -165,15 +160,13 @@
>，在太平洋戰爭爆發後，臺灣因戰略地位被日本政府重新定位為南進基地，因此在臺灣南部的高雄一帶發展軍事工業。國民政府遷臺後，將臺灣視為武力反攻大陸的基地，奉行軍事優先和穩定農業的經濟政策。
</p>
</div>
<div class="ts-space is-big"></div>
<div class="ts-pagination is-secondary">
<div class="ts-pagination is-secondary u-vertically-spaced-big">
<a href="#!" class="item is-back">上一頁</a>
<a href="#!" class="item is-active">1</a>
<a href="#!" class="item">2</a>
<a href="#!" class="item">3</a>
<a href="#!" class="item is-next">下一頁</a>
</div>
<div class="ts-space is-big"></div>
</div>
<div class="column is-5-wide">
<div class="ts-wrap is-vertical" style="position: sticky; top: 1rem">
Expand All @@ -183,7 +176,7 @@
</div>
<div>
<div class="ts-header is-large is-heavy">彙整</div>
<div class="ts-list">
<div class="ts-list u-top-spaced-small">
<a href="#!" class="ts-text is-link is-undecorated item">2022 年 3 月</a>
<a href="#!" class="ts-text is-link is-undecorated item">2022 年 2 月</a>
<a href="#!" class="ts-text is-link is-undecorated item">2022 年 1 月</a>
Expand All @@ -195,7 +188,7 @@
</div>
<div>
<div class="ts-header is-large is-heavy">其他連結</div>
<div class="ts-list">
<div class="ts-list u-top-spaced-small">
<a href="#!" class="ts-text is-link is-undecorated item">Facebook</a>
<a href="#!" class="ts-text is-link is-undecorated item">Twitter</a>
<a href="#!" class="ts-text is-link is-undecorated item">GitHub</a>
Expand Down
Loading

0 comments on commit b4e4fdc

Please sign in to comment.