Damillora/Shian
1
0
Fork 0
mirror of https://github.com/Damillora/Shian.git synced 2024-11-22 01:17:32 +00:00
Code Issues Projects Releases Wiki Activity

Update content padding

Browse Source
This commit is contained in:
Damillora 2021-04-14 16:40:15 +07:00
parent d603adde26
commit 8fbccd6b60
6 changed files with 243 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@ -14,7 +14,7 @@ function serve(done) {
function css () { function css () {
return src('src/sass/app.scss') return src('src/sass/*.scss')
.pipe(sass().on('error', sass.logError)) .pipe(sass().on('error', sass.logError))
.pipe(cleancss({compatibility: 'ie8'})) .pipe(cleancss({compatibility: 'ie8'}))
.pipe(dest('dist/')) .pipe(dest('dist/'))

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "@damillora/shian", "name": "@damillora/shian",
"description": "Common component library for nanao.moe", "description": "Common component library for nanao.moe",
"version": "0.3.1", "version": "0.4.0",
"license": "MIT", "license": "MIT",
"author": { "author": {
"email": "developer@damillora.com" "email": "developer@damillora.com"

200
src/sass/common/_base.scss
View File

@ -1,122 +1,134 @@
html { 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"] { :root,
--text-color: #{$text-light}; [data-theme='light'] {
--bg-color: #{$bg-light}; --text-color: #{$text-light};
--accent-color: #{$accent-light}; --bg-color: #{$bg-light};
--accent-bg-color: #{$accent-bg-light}; --accent-color: #{$accent-light};
--highlight-color: #{$highlight-light}; --accent-bg-color: #{$accent-bg-light};
--highlight-bg-color: #{$highlight-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}; --text-color: #{$text-dark};
--bg-color: #{$bg-dark}; --bg-color: #{$bg-dark};
--accent-color: #{$accent-dark}; --accent-color: #{$accent-dark};
--accent-bg-color: #{$accent-bg-dark}; --accent-bg-color: #{$accent-bg-dark};
--highlight-color: #{$highlight-dark}; --highlight-color: #{$highlight-dark};
--highlight-bg-color: #{$highlight-bg-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 { body {
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color); background-color: var(--bg-color);
} }
.main { .main {
padding: 1rem; padding: 1rem;
@include screen(md) { @include screen(sm) {
@include px(2rem); @include px(2rem);
} }
@include screen(lg) { @include screen(md) {
@include px(4rem); @include px(4rem);
} }
@include screen(xl) { @include screen(lg) {
@include px(4rem); @include px(8rem);
} }
@include screen(xl) {
@include px(16rem);
}
} }
.page { .page {
width: 100%; width: 100%;
} }
.main { .main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
p, h1, h2, h3, h4, h5, h6 { p,
@include my(1rem); h1,
} h2,
h1, h2, h3, h4, h5, h6 { h3,
font-weight: 300; h4,
} h5,
h1 { h6 {
font-size: $text-4xl; @include my(1rem);
} }
h2 { h1,
font-size: $text-3xl; h2,
} h3,
h3 { h4,
font-size: $text-2xl; h5,
} h6 {
h4 { font-weight: 300;
font-size: $text-xl; }
} h1 {
h5 { font-size: $text-4xl;
font-size: $text-lg; }
} h2 {
h6 { font-size: $text-3xl;
font-size: $text-base; }
} h3 {
font-size: $text-2xl;
}
h4 {
font-size: $text-xl;
}
h5 {
font-size: $text-lg;
}
h6 {
font-size: $text-base;
}
a { a {
color: var(--accent-color); color: var(--accent-color);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
} }
ul { }
list-style-type: disc; ul {
li p { list-style-type: disc;
@include my(0rem); 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);
} }
}
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 { .card-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

1
src/sass/components/_gameitem.scss
View File

@ -26,6 +26,7 @@
p { p {
@include my(0.25rem); @include my(0.25rem);
white-space: nowrap;
text-align: right; text-align: right;
} }
flex-shrink: 1; flex-shrink: 1;

2
src/sass/components/_postcard.scss
View File

@ -73,7 +73,7 @@
@include transition; @include transition;
color: var(--accent-color); color: var(--accent-color);
font-size: $text-xl; font-size: $text-xl;
font-weight: lighter; font-weight: 300;
@include screen(md) { @include screen(md) {
font-size: $text-2xl; font-size: $text-2xl;

133
src/sass/ghost.scss Normal file
View File

@ -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;
}
}