From 8fbccd6b605a75cc78103f236b4011059063e577 Mon Sep 17 00:00:00 2001 From: Damillora Date: Wed, 14 Apr 2021 16:40:15 +0700 Subject: [PATCH] Update content padding --- gulpfile.js | 2 +- package.json | 2 +- src/sass/common/_base.scss | 200 +++++++++++++++-------------- src/sass/components/_gameitem.scss | 1 + src/sass/components/_postcard.scss | 2 +- src/sass/ghost.scss | 133 +++++++++++++++++++ 6 files changed, 243 insertions(+), 97 deletions(-) create mode 100644 src/sass/ghost.scss diff --git a/gulpfile.js b/gulpfile.js index b46f16f..489edea 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -14,7 +14,7 @@ function serve(done) { function css () { - return src('src/sass/app.scss') + return src('src/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(cleancss({compatibility: 'ie8'})) .pipe(dest('dist/')) diff --git a/package.json b/package.json index cbecd34..4c7d757 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@damillora/shian", "description": "Common component library for nanao.moe", - "version": "0.3.1", + "version": "0.4.0", "license": "MIT", "author": { "email": "developer@damillora.com" diff --git a/src/sass/common/_base.scss b/src/sass/common/_base.scss index 2810c8b..1a99400 100644 --- a/src/sass/common/_base.scss +++ b/src/sass/common/_base.scss @@ -1,122 +1,134 @@ - - html { - font-family: 'Exo 2',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - + font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } -:root, [data-theme="light"] { - --text-color: #{$text-light}; - --bg-color: #{$bg-light}; - --accent-color: #{$accent-light}; - --accent-bg-color: #{$accent-bg-light}; - --highlight-color: #{$highlight-light}; - --highlight-bg-color: #{$highlight-bg-light}; +:root, +[data-theme='light'] { + --text-color: #{$text-light}; + --bg-color: #{$bg-light}; + --accent-color: #{$accent-light}; + --accent-bg-color: #{$accent-bg-light}; + --highlight-color: #{$highlight-light}; + --highlight-bg-color: #{$highlight-bg-light}; } -[data-theme="dark"] { +[data-theme='dark'] { + --text-color: #{$text-dark}; + --bg-color: #{$bg-dark}; + --accent-color: #{$accent-dark}; + --accent-bg-color: #{$accent-bg-dark}; + --highlight-color: #{$highlight-dark}; + --highlight-bg-color: #{$highlight-bg-dark}; +} + +@media (prefers-color-schme: dark) { + :root:not[data-theme='light'] { --text-color: #{$text-dark}; --bg-color: #{$bg-dark}; --accent-color: #{$accent-dark}; --accent-bg-color: #{$accent-bg-dark}; --highlight-color: #{$highlight-dark}; --highlight-bg-color: #{$highlight-bg-dark}; -} - -@media (prefers-color-schme: dark) { - :root:not[data-theme="light"] { - --text-color: #{$text-dark}; - --bg-color: #{$bg-dark}; - --accent-color: #{$accent-dark}; - --accent-bg-color: #{$accent-bg-dark}; - --highlight-color: #{$highlight-dark}; - --highlight-bg-color: #{$highlight-bg-dark}; - } + } } body { - color: var(--text-color); - background-color: var(--bg-color); + color: var(--text-color); + background-color: var(--bg-color); } .main { - padding: 1rem; - @include screen(md) { - @include px(2rem); - } - @include screen(lg) { - @include px(4rem); - } - @include screen(xl) { - @include px(4rem); - } + padding: 1rem; + @include screen(sm) { + @include px(2rem); + } + @include screen(md) { + @include px(4rem); + } + @include screen(lg) { + @include px(8rem); + } + @include screen(xl) { + @include px(16rem); + } } .page { - width: 100%; + width: 100%; } .main { - margin-left: auto; - margin-right: auto; - + margin-left: auto; + margin-right: auto; - p, h1, h2, h3, h4, h5, h6 { - @include my(1rem); - } - h1, h2, h3, h4, h5, h6 { - font-weight: 300; - } - h1 { - font-size: $text-4xl; - } - h2 { - font-size: $text-3xl; - } - h3 { - font-size: $text-2xl; - } - h4 { - font-size: $text-xl; - } - h5 { - font-size: $text-lg; - } - h6 { - font-size: $text-base; - } + p, + h1, + h2, + h3, + h4, + h5, + h6 { + @include my(1rem); + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 300; + } + h1 { + font-size: $text-4xl; + } + h2 { + font-size: $text-3xl; + } + h3 { + font-size: $text-2xl; + } + h4 { + font-size: $text-xl; + } + h5 { + font-size: $text-lg; + } + h6 { + font-size: $text-base; + } - a { - color: var(--accent-color); - &:hover { - text-decoration: underline; - } + a { + color: var(--accent-color); + &:hover { + text-decoration: underline; } - ul { - list-style-type: disc; - li p { - @include my(0rem); - } - } - ol { - list-style-type: decimal; - } - code { - background-color: var(--accent-bg-color); - color: var(--accent-color); - white-space: pre-wrap; - } - blockquote { - border-left: 0.5rem solid var(--accent-color); - @include my(2rem); - padding: 0.5rem 0 0.5rem 2rem; - } - pre { - background: var(--accent-bg-color); - color: var(--accent-color); - padding: 0.5rem; - border: 1px solid var(--accent-color); + } + ul { + list-style-type: disc; + li p { + @include my(0rem); } + } + ol { + list-style-type: decimal; + } + code { + background-color: var(--accent-bg-color); + color: var(--accent-color); + white-space: pre-wrap; + } + blockquote { + border-left: 0.5rem solid var(--accent-color); + @include my(2rem); + padding: 0.5rem 0 0.5rem 2rem; + } + pre { + background: var(--accent-bg-color); + color: var(--accent-color); + padding: 0.5rem; + border: 1px solid var(--accent-color); + } } .card-list { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } diff --git a/src/sass/components/_gameitem.scss b/src/sass/components/_gameitem.scss index 195744c..e7c08e1 100644 --- a/src/sass/components/_gameitem.scss +++ b/src/sass/components/_gameitem.scss @@ -26,6 +26,7 @@ p { @include my(0.25rem); + white-space: nowrap; text-align: right; } flex-shrink: 1; diff --git a/src/sass/components/_postcard.scss b/src/sass/components/_postcard.scss index 051075c..c1cc519 100644 --- a/src/sass/components/_postcard.scss +++ b/src/sass/components/_postcard.scss @@ -73,7 +73,7 @@ @include transition; color: var(--accent-color); font-size: $text-xl; - font-weight: lighter; + font-weight: 300; @include screen(md) { font-size: $text-2xl; diff --git a/src/sass/ghost.scss b/src/sass/ghost.scss new file mode 100644 index 0000000..6629ac8 --- /dev/null +++ b/src/sass/ghost.scss @@ -0,0 +1,133 @@ +@import './utilities/normalize'; +@import './utilities/responsive'; +@import './utilities/transition'; +@import './utilities/spacing'; + +@import './common/theme'; + +.main { + .kg-card { + @include py(1rem); + @include my(2rem); + @include mx(0); + display: flex; + flex-direction: column; + align-items: center; + object-fit: contain; + .kg-image { + width: 100%; + } + } + .kg-width-wide .kg-image { + min-width: 100vw; + @include screen(md) { + min-width: 115%; + } + @include screen(lg) { + min-width: 125%; + } + @include screen(xl) { + min-width: 140%; + } + } + + .kg-width-full .kg-image { + min-width: 100vw; + } + .kg-card figcaption { + font-size: $text-sm; + color: var(--highlight-color); + margin-top: 0.5rem; + } + + .kg-gallery-container { + min-width: 100vw; + @include screen(md) { + min-width: 115%; + } + @include screen(lg) { + min-width: 125%; + } + @include screen(xl) { + min-width: 140%; + } + } + + .kg-gallery-row { + display: flex; + flex-direction: row; + } + .kg-gallery-image { + @include mx(0.25rem); + flex: 1 1 0%; + } + + .kg-bookmark-card { + color: var(--text-color); + } + + .kg-bookmark-container { + @include transition; + display: flex; + flex-direction: row; + justify-content: space-between; + color: var(--text-color); + border-left: 1rem solid var(--accent-color); + background-color: var(--bg-color); + &:hover { + @include transition; + background-color: var(--highlight-bg-color); + } + } + .kg-bookmark-content { + width: 66.6667%; + padding: 1rem; + } + .kg-bookmark-thumbnail { + position: relative; + max-height: 100%; + min-width: 33.3333%; + } + .kg-bookmark-thumbnail img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + .kg-bookmark-title { + font-weight: 500; + } + .kg-bookmark-description { + font-weight: 300; + font-size: $text-sm; + @include my(0.5rem); + } + .kg-bookmark-metadata { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-end; + height: 1.5rem; + @include my(1rem); + } + .kg-bookmark-icon { + @include mx(0.5rem); + height: 100%; + } + .kg-bookmark-author { + font-size: $text-sm; + color: var(--accent-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .kg-bookmark-publisher { + font-size: $text-sm; + color: var(--accent-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +}