create-fesd-app 1.0.36 → 1.0.37

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
   "bin": {
     "create-fesd-app": "bin/create-fesd-app.mjs"
   },
@@ -24,7 +19,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.10",
-    "@xwadex/fesd": "0.0.58",
+    "@xwadex/fesd": "0.0.60",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "clsx": "^2.1.1",
@@ -55,5 +50,10 @@
     "vite": "^5.4.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
-}
+}

package/src/assets/css/layouts/article4/_article4_2.0.sass

@@ -272,7 +272,7 @@
     ._wordCover
       margin: 0
     ._imgCover
-      margin-bottom: 0
+      margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
     &[img-merge="on"]
       &:not([img-swiper="on"])
         ._imgCover
@@ -1080,10 +1080,10 @@
   @extend %table
   &.overflow
     ._table
-      margin-top: $table-TB-gap
+      margin-top: $table-Tip-gap
       cursor: grab
       +rwdmax($basic_rwd)
-        margin-top: $table-TB-gap_rwd
+        margin-top: $table-Tip-gap_rwd
   ._wordCover
     margin-top: 0
     margin-bottom: $table-TB-gap
@@ -1119,7 +1119,7 @@
       width: var(--minWidth, #{$table-min-width})
       min-width: var(--minWidth, #{$table-min-width})
       vertical-align: middle
-      word-break: break-all
+      word-break: break-word
       padding: $table-padding
       +rwdmax($basic_rwd)
         padding: $table-padding_rwd

package/src/assets/css/layouts/article4/_article4_setting.sass

@@ -1,4 +1,5 @@
 // 最後修改時間 2023/02/09 eric
+@import ./_variable
 // RWD
 @mixin rwdmax($max)
   @media only screen and (max-width: $max + px)  
@@ -17,85 +18,6 @@
   @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none)
     @content
 
-// 需同步更改 article4.js $basic_rwd variable
-$basic_rwd: 900
-
-/////////////////////////////////////////////
-////////////////// [ 間距 ] /////////////////
-/////////////////////////////////////////////
-
-// 每個區塊之間的距離
-$article-gap: 100px
-$article-gap_rwd: 80px
-
-// ._H 與其他物件之間的距離
-$H-gap: 20px
-$H-gap_rwd: 15px
-
-// ._subH 與其他物件之間的距離
-$subH-gap: 15px
-$subH-gap_rwd: 15px
-
-// 文字左右間的距離 ( RWD 統一為 0 )
-$text-LR-gap: 40px
-
-// 文字 padding
-$text-padding: 20px
-$text-padding_rwd: 0px
-
-// 按鈕與其他物件之間的距離
-$button-cover-gap: 30px
-$button-cover-gap_rwd: 20px
-
-// 影像左右間的距離
-$cover-LR-gap: 12px
-$cover-LR-gap_rwd: 12px
-
-// 輪播左右間的距離
-$swiper-cover-LR-gap: 12px
-
-// 影像上下間的距離
-$cover-TB-gap: 30px
-$cover-TB-gap_rwd: 10px
-
-// 影像與其他物件左右間的距離
-$img-cover-LR-gap: 30px
-$img-cover-LR-gap_rwd: 0px
-
-// 影像與其他物件上下間的距離
-$img-cover-TB-gap: 30px
-$img-cover-TB-gap_rwd: 20px
-
-// 文繞圖修正
-$wrapping-gap: 50px
-
-// typeFull 段落 padding
-$typeFull-padding: 120px 40px 115px
-$typeFull-padding_rwd: 30px 20px
-
-// typeFull 段落內 ._contentWrap padding
-$typeFull-content-padding: 85px 75px 100px
-$typeFull-content-padding_rwd: 20px
-
-// 表格與其他物件上下間的距離
-$table-TB-gap: 20px
-$table-TB-gap_rwd: 20px
-
-// 表格最小寬度
-$table-min-width: 180px
-$freeze-table-height: 500px
-
-// 表格間距
-$table-padding: 15px 30px
-$table-padding_rwd: 10px 15px
-
-// 引言與其他物件上下間的距離
-$quote-TB-gap: 20px
-
-/////////////////////////////////////////////
-////////////////// [ 內容 ] /////////////////
-/////////////////////////////////////////////
-
 // 內容區塊
 %_contentWrap
   display: flex
@@ -199,23 +121,31 @@ $quote-TB-gap: 20px
     list-style: decimal !important
   ul
     list-style: disc !important
+  li
+    line-height: 1.2
+    &:not(:first-child)
+      margin-top: $li-TB-gap
   +rwdmax($basic_rwd)
     padding: 0 $text-padding_rwd
     // 以下可修改
     font-size: 14px
     line-height: 1.4
+    li
+      &:not(:first-child)
+        margin-top: $li-TB-gap_rwd
 
 // 圖片描述
 %_description
-  padding: 0 $text-padding
-  margin-top: 10px
+  padding: 0 $description-padding
+  margin-top: $description-TB-gap
   width: 100%
   // 以下可修改
   font-size: 14px
   font-weight: 400
   line-height: 1.5
   +rwdmax($basic_rwd)
-    padding: 0 $text-padding_rwd
+    padding: 0 $description-padding_rwd
+    margin-top: $description-TB-gap_rwd
     // 以下可修改
     font-size: 12px
 
@@ -234,6 +164,8 @@ $quote-TB-gap: 20px
   display: inline-block
   position: relative
   padding: 10px 20px
+  min-width: $button-minWidth
+  max-width: $button-maxWidth
   // 以下可修改
   background-color: #333
   color: #fff
@@ -256,13 +188,12 @@ $quote-TB-gap: 20px
   +rwdmax($basic_rwd)
     // 以下可修改
     font-size: 12px
+    min-width: $button-minWidth_rwd
+    max-width: $button-maxWidth_rwd
 
 // swiper 結構
 %swiper_pagination
-  // margin: calc(#{$pagination-TB-gap} - #{$cover-TB-gap}) 0 $pagination-TB-gap
-  // margin: 0 0 $pagination-TB-gap
-  margin: 0 0 $cover-TB-gap
-  // margin: $pagination-TB-gap 0 0 
+  margin: calc($pagination-TB-gap - $cover-TB-gap) 0 $cover-TB-gap
   display: block
   position: relative
   top: auto
@@ -270,7 +201,7 @@ $quote-TB-gap: 20px
   left: auto
   right: auto
   +rwdmax($basic_rwd)
-    margin: 0 0 $cover-TB-gap_rwd
+    margin: calc($pagination-TB-gap_rwd - $cover-TB-gap_rwd) 0 $cover-TB-gap_rwd
 
 %swiper_pagination_bullet
   margin: 0 10px
@@ -332,7 +263,7 @@ $quote-TB-gap: 20px
       margin-left: 10px
 
 %table
-  // @extend %table_solid_single
+  @extend %table_solid_single
   // @extend %table_solid_striped
   // @extend %table_border_rows
   // @extend %table_border_full
@@ -360,6 +291,10 @@ $quote-TB-gap: 20px
         font-weight: 600
     tbody
       td
+        &.lefthead
+          font-size: 16px
+          line-height: 1.2
+          font-weight: 600
         // 以下可修改
         font-size: 16px
         line-height: 1.2
@@ -415,36 +350,36 @@ $quote-TB-gap: 20px
 // 表格內框線樣式建議使用 偽元素製作以避免凍結合併時出錯
 %table_solid_single
   ._table
-    border-bottom: 5px solid #6AA8FF
+    border-bottom: 5px solid $table-theme-color
     &:not(:has(thead))
-      border-top: 5px solid #6AA8FF
+      border-top: 5px solid $table-theme-color
   table
     thead
       th
         color: #fff
-        background-color: #6AA8FF
+        background-color: $table-theme-color
     tbody
       tr
         td
+          // 側邊列樣式設定
           &.lefthead
-            color: #fff
-            background-color: #6AA8FF
+            background-color: $table-subTheme-color
       tr:nth-child(even)
         td
           &:not(.lefthead)
-            background-color: #F2F2F2
+            background-color: $table-grayTheme-color
 %table_solid_striped
   ._table
-    border-bottom: 5px solid #6AA8FF
+    border-bottom: 5px solid $table-theme-color
     &:not(:has(thead))
-      border-top: 5px solid #6AA8FF
+      border-top: 5px solid $table-theme-color
   table
     thead
-      color: #fff
       th:nth-child(odd)
-        background-color: #6AA8FF
+        color: #fff
+        background-color: $table-theme-color
       th:nth-child(even)
-        background-color: #3287FF
+        background-color: $table-subTheme-color
     tbody
       tr
         td
@@ -453,10 +388,10 @@ $quote-TB-gap: 20px
             &:nth-child(even)
               background-color: #3287FF
             &:nth-child(odd)
-              background-color: #6AA8FF
+              background-color: $table-theme-color
       tr:nth-child(even)
         td:not(.lefthead)
-          background-color: #F2F2F2
+          background-color: $table-grayTheme-color
 %table_border_rows
   ._table
     border-top: 2px solid #000
@@ -465,7 +400,7 @@ $quote-TB-gap: 20px
   table
     thead
       th
-        color: #00C5B1
+        color: $table-theme-color
         position: relative
         &::before
           content: ''
@@ -686,7 +621,9 @@ $quote-TB-gap: 20px
   li
     line-height: 1.2
     &:not(:first-child)
-      margin-top: 10px
+      margin-top: $li-TB-gap
+      +rwdmax($basic_rwd)
+        margin-top: $li-TB-gap_rwd
   em
     font-style: italic
   a

package/src/assets/css/layouts/article4/_variable.sass

@@ -0,0 +1,123 @@
+// 需同步更改 article4.js $basic_rwd variable
+$basic_rwd: 900
+
+/////////////////////////////////////////////
+////////////////// [ 間距 ] /////////////////
+/////////////////////////////////////////////
+
+// 段落間距
+// 每個區塊之間的距離
+$article-gap: 100px
+$article-gap_rwd: 80px
+
+// 標題 - 垂直內文
+// ._H 與其他物件之間的距離
+$H-gap: 20px
+$H-gap_rwd: 15px
+
+// 副標題 - 內文
+// ._subH 與其他物件之間的距離
+$subH-gap: 15px
+$subH-gap_rwd: 15px
+
+// 標題 - 水平內文
+// 文字左右間的距離 ( RWD 統一為 0 )
+$text-LR-gap: 40px
+
+// 段落 - 內推 
+// 文字 padding
+$text-padding: 20px
+$text-padding_rwd: 0px
+
+// 圖說 - 內推
+// 敘述 padding
+$description-padding: 20px
+$description-padding_rwd: 0px
+
+// 圖片 - 圖說
+$description-TB-gap: 10px
+$description-TB-gap_rwd: 10px
+
+// 段落 - 按鈕
+// 按鈕與其他物件之間的距離
+$button-cover-gap: 30px
+$button-cover-gap_rwd: 20px
+
+// 列點項目
+$li-TB-gap: 10px
+$li-TB-gap_rwd: 10px
+
+// 圖片間距 - 水平
+// 影像左右間的距離
+$cover-LR-gap: 12px
+$cover-LR-gap_rwd: 12px
+
+// 圖片間距 - 垂直
+// 影像上下間的距離
+$cover-TB-gap: 30px
+$cover-TB-gap_rwd: 10px
+
+// 輪播左右間的距離
+// 失效？ $swiper-cover-LR-gap: 12px
+
+// 圖片 - 水平段落
+// 影像與其他物件左右間的距離
+$img-cover-LR-gap: 30px
+$img-cover-LR-gap_rwd: 0px
+
+// 圖片 - 垂直段落
+// 影像與其他物件上下間的距離
+$img-cover-TB-gap: 30px
+$img-cover-TB-gap_rwd: 20px
+
+// 文繞圖修正
+$wrapping-gap: 50px
+
+// 滿版 - 上下左右間距
+// typeFull 段落 padding
+$typeFull-padding: 120px 40px 115px
+$typeFull-padding_rwd: 30px 20px
+
+// 滿版底色 - 上下左右間距
+// typeFull 段落內 ._contentWrap padding
+$typeFull-content-padding: 85px 75px 100px
+$typeFull-content-padding_rwd: 20px
+
+// 段落 - 表格 - 註解
+// 表格與其他物件上下間的距離
+$table-TB-gap: 20px
+$table-TB-gap_rwd: 20px
+
+// 拖拉提示 - 表格
+// 表格與拖拉提示的距離
+$table-Tip-gap: 20px
+$table-Tip-gap_rwd: 20px
+
+// 欄位 - 最小寬度
+// 表格最小寬度
+$table-min-width: 180px
+$freeze-table-height: 500px
+
+// 欄位 - 上下左右間距
+// 表格間距
+$table-padding: 15px 30px
+$table-padding_rwd: 10px 15px
+
+// 引言 - 內文
+// 引言與其他物件上下間的距離
+$quote-TB-gap: 20px
+
+// 圖片 - 輪播按鈕
+$pagination-TB-gap: 10px
+$pagination-TB-gap_rwd: 10px
+
+// 表格主題色
+$table-theme-color: #6AA8FF
+$table-subTheme-color: #CEE2FF
+$table-grayTheme-color: #f8f8f8
+
+// 按鈕寬度設定
+$button-minWidth: 200px
+$button-maxWidth: 350px
+$button-minWidth_rwd: 150px
+$button-maxWidth_rwd: 200px

package/src/assets/css/pages/play.sass

@@ -131,11 +131,14 @@
 		width: 100%
 		padding: 50px
 		display: flex
-		// flex-wrap: wrap
 		gap: 50px
+		+rwdmax(1200)
+			flex-direction: column
 	#previewWrap > div
 		flex: 1
 		width: calc((100% - 50px) /2)
+		+rwdmax(1200)
+			width: 100%
 	#preview, #htmlCode, #dataCode
 		margin-top: 20px
 		flex: 1 

package/src/pages/about.pug

@@ -473,11 +473,12 @@ block content
       },
       {
         title: 'videoDemo',
-        dep: `<div class="lightHigh">特別注意！ IG reels 使用 ajax 燈箱，請直接調整燈箱內嵌結構範例，複製時請移除最後的 script ，統一在 _template 中引用 API</div>`,
+        dep:`此範例搭配屬性<span class='code'>img-flex</span>`,
         data:{
           articleType: 'typeD',
           attributes: {
             'img-row':'x5',
+            'img-flex':'down',
           },
           H: 'This is the title of the Article, A satirical title generator for designers...',
           subH: 'Sub-Title of the Article, A satirical title generator for designers...',
@@ -888,8 +889,6 @@ block content
                     td(data-column="F" style='width:300px; min-width:300px;') 
                       span fff
 
-
-
   section.section2(data-noContent)
     .container
       p NO DATA