diff --git a/README.md b/README.md new file mode 100644 index 0000000..870fc3e --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ + + +## 使用 Webpack 5 打包 + +#### 初始專案(沒有 node_modules 資料夾) + +``` +❯ yarn install +``` + +#### 開發專案 + +``` +❯ yarn watch +``` + +or + +``` +❯ yarn build:dev +``` + + +## 編譯 sass/scss 檔案 + +``` +❯ yarn compile:sass +``` diff --git a/package.json b/package.json index 04e399b..b62b092 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "scripts": { - "compile:sass": "node-sass src/scss/custom.scss css/style.css", - "build": "webpack --mode development" + "compile:sass": "node-sass src/scss/argon-theme.scss css/argon.css", + "build:dev": "webpack --mode=development", + "watch": "webpack --mode=development --watch" }, "dependencies": { "bootstrap": "^4.5.3" diff --git a/src/index.html b/src/index.html index c92e0a4..ec3f604 100644 --- a/src/index.html +++ b/src/index.html @@ -5,15 +5,47 @@ Document - +
-

Hello

-

World

+
+ + + + + + + +
- +
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+

Last updated 3 mins ago

+
+
+
diff --git a/src/main.js b/src/main.js index fa91f38..3cfe192 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1 @@ -import './scss/all.scss'; +import './scss/argon.scss'; diff --git a/src/scss/argon-theme.scss b/src/scss/argon-theme.scss new file mode 100644 index 0000000..a3323de --- /dev/null +++ b/src/scss/argon-theme.scss @@ -0,0 +1,27 @@ + +// Bootstrap functions +@import '../../node_modules/bootstrap/scss/functions'; + +// Argon varialbes +@import "../../node_modules/bootstrap/scss/variables"; +// @import "argon/variables"; +@import "argon/argon_variables"; + +// Argon mixins +// @import "argon/mixins"; +@import "../../node_modules/bootstrap/scss/mixins"; + +// Bootstrap components +@import "../../node_modules/bootstrap/scss/root"; +@import "../../node_modules/bootstrap/scss/reboot"; +@import "../../node_modules/bootstrap/scss/type"; +@import "../../node_modules/bootstrap/scss/images"; +@import "../../node_modules/bootstrap/scss/grid"; +@import "../../node_modules/bootstrap/scss/buttons"; +@import "../../node_modules/bootstrap/scss/card"; +@import "../../node_modules/bootstrap/scss/utilities"; + +// Argon components +@import 'argon/custom/buttons'; +@import 'argon/custom/cards'; + diff --git a/src/scss/argon.scss b/src/scss/argon.scss new file mode 100644 index 0000000..de1f5a9 --- /dev/null +++ b/src/scss/argon.scss @@ -0,0 +1,25 @@ + +// Bootstrap functions +@import '~bootstrap/scss/functions'; + +// Argon varialbes +@import "argon/variables"; +@import "~bootstrap/scss/variables"; + +// Argon mixins +// @import "argon/mixins"; +@import "~bootstrap/scss/mixins"; + +// Bootstrap components +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +@import "~bootstrap/scss/images"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/utilities"; + +// Argon components +@import 'argon/custom/buttons'; +@import 'argon/custom/cards'; diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss new file mode 100644 index 0000000..139f5d7 --- /dev/null +++ b/src/scss/argon/_variables.scss @@ -0,0 +1,60 @@ + +// Color system + +$white: #fff; +$gray-100: #f6f9fc; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #8898aa; // Line footer color +$gray-700: #525f7f; // Line p color +$gray-800: #32325d; // Line heading color +$gray-900: #212529; +$black: #000; + +$blue: #5e72e4; +$indigo: #5603ad; +$purple: #8965e0; +$pink: #f3a4b5; +$red: #f5365c; +$orange: #fb6340; +$yellow: #ffd600; +$green: #2dce89; +$teal: #11cdef; +$cyan: #2bffc6; + + +// Options + +$enable-shadows: true; /// Adjust + + +// Components + +$border-radius: .25rem; /// Adjust +$border-radius-xl: .35rem; /// New +$border-radius-lg: .3rem; /// Adjust +$border-radius-sm: .2rem; /// Adjust + +$box-shadow: 0 .5rem 1rem rgba($black, .15); +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); +$box-shadow-lg: 0 1rem 3rem rgba($black, .175); + +$transition-base: all .15s ease; /// Adjust + + +// Buttons + +$btn-text-transform: none; /// New +$btn-letter-spacing: .025em; /// New +$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); +$btn-focus-box-shadow: $btn-hover-box-shadow; + + +/// Cards + +$card-spacer-y: 1.25rem; /// Adjust +$card-spacer-x: 1.5rem; /// Adjust + +$card-box-shadow: $box-shadow; /// New diff --git a/src/scss/argon/custom/_buttons.scss b/src/scss/argon/custom/_buttons.scss new file mode 100644 index 0000000..f50fa12 --- /dev/null +++ b/src/scss/argon/custom/_buttons.scss @@ -0,0 +1,28 @@ +// General +.btn { + position: relative; + text-transform: $btn-text-transform; + transition: $transition-base; + will-change: transform; + letter-spacing: $btn-letter-spacing; + font-size: $input-btn-font-size; + + &:hover { + @include box-shadow($btn-hover-box-shadow); + transform: translateY(-1px); + } + + &:disabled { + cursor: not-allowed; + } + + &:not(:last-child) { + margin-right: .5rem; + } +} + + +// Fix +.btn-outline-secondary { + color: darken(theme-color("secondary"), 50%); +} diff --git a/src/scss/argon/custom/_cards.scss b/src/scss/argon/custom/_cards.scss new file mode 100644 index 0000000..be8e066 --- /dev/null +++ b/src/scss/argon/custom/_cards.scss @@ -0,0 +1,28 @@ + +.card { + margin-bottom: $grid-gutter-width; + + @if $enable-shadows { + box-shadow: $card-box-shadow; + border: 0; + } +} + +// Animated cards +.card-lift--hover { + cursor: pointer; + + &:hover { + transform: translateY(-8px); + @include transition($transition-base); + } +} + + +// Card with shdadow + +.card { + &.shadow { + border: 0 !important; + } +}