Damillora
/
Shian
mirror of https://github.com/Damillora/Shian.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add more components for blog

This commit is contained in:
Damillora 2021-04-14 15:22:03 +07:00
parent 2d2e4f3d95
commit ce335933c1
7 changed files with 319 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

4
src/sass/app.scss
View File

@ -12,6 +12,10 @@
@import './components/gallery';
@import './components/mediaitem';
@import './components/projectitem';
@import './components/postcard';
@import './components/postheader';
@import './components/postlist';
@import './components/postnavigator';
@import './components/gameitem';
@import './components/copyarea';
@import './components/floatingyuriko';

127
src/sass/components/_postcard.scss Normal file
View File

@ -0,0 +1,127 @@
.post-card {
position: relative;
width: 100%;
height: 100%;
padding: 1rem;
@include transition;
@include screen(md) {
display: flex;
flex-direction: row;
}
&__image {
position: relative;
width: 100%;
overflow: hidden;
@include screen(md) {
width: 35vw;
min-width: 300px;
max-width: 450px;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
&__image::after {
display: block;
content: '';
padding-bottom: 56.25%;
}
&__info {
@include screen(md) {
padding-left: 1rem;
}
}
&__tag-row {
padding-top: 1rem;
@include screen(md) {
padding-top: 0;
}
* {
display: inline-block;
padding-right: 0.25rem;
}
}
&__tag-color {
display: inline-block;
border-radius: 9999px;
vertical-align: text-bottom;
height: 1rem;
width: 1rem;
}
&__tag-name {
font-size: $text-xs;
&:hover {
text-decoration: underline;
}
}
&__paywall {
font-size: $text-xs;
&:hover {
text-decoration: underline;
}
color: var(--accent-color);
}
&__title {
@include transition;
color: var(--accent-color);
font-size: $text-xl;
font-weight: lighter;
@include screen(md) {
font-size: $text-2xl;
}
&:hover {
text-decoration: underline;
}
}
&__time {
font-size: $text-xs;
}
&__author-list {
font-size: $text-xs;
display: flex;
flex-direction: row;
justify-content: center;
@include my(0.5rem);
@include py(0.5rem);
}
&__author-images {
display: flex;
flex-direction: row;
}
&__author-image {
height: 2rem;
margin-left: 0.25rem;
margin-right: 0.75rem;
img {
border-radius: 9999px;
height: 100%;
}
}
&__author-names {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
a:hover {
text-decoration: underline;
}
}
&__excerpt {
margin-top: 0.5rem;
margin-bottom: 1rem;
font-size: $text-sm;
}
}

95
src/sass/components/_postheader.scss Normal file
View File

@ -0,0 +1,95 @@
.post-header {
h1,
h2,
h3,
h4,
h5,
h6,
p {
@include my(0.5rem);
}
&__tag-row {
padding-top: 1rem;
@include screen(md) {
padding-top: 0;
}
* {
display: inline-block;
padding-right: 0.25rem;
}
}
&__tag-heading {
display: flex;
flex-direction: row;
h1 {
margin-left: 0.5rem;
}
}
&__tag-heading-color {
display: inline-block;
border-radius: 9999px;
vertical-align: text-bottom;
height: 4rem;
width: 4rem;
}
&__tag-color {
display: inline-block;
border-radius: 9999px;
vertical-align: text-bottom;
height: 1rem;
width: 1rem;
}
&__tag-name {
font-size: $text-sm;
&:hover {
text-decoration: underline;
}
}
&__paywall {
font-size: $text-sm;
&:hover {
text-decoration: underline;
}
color: var(--accent-color);
}
&__time {
font-size: $text-sm;
}
&__author-list {
font-size: $text-sm;
display: flex;
flex-direction: row;
justify-content: center;
@include my(0.5rem);
@include py(0.5rem);
}
&__author-images {
display: flex;
flex-direction: row;
}
&__author-image {
height: 2rem;
margin-left: 0.25rem;
margin-right: 0.75rem;
img {
border-radius: 9999px;
height: 100%;
}
}
&__author-names {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
a:hover {
text-decoration: underline;
}
}
}

6
src/sass/components/_postlist.scss Normal file
View File

@ -0,0 +1,6 @@
.post-list {
@include my(2rem);
display: grid;
grid-template-columns: 1fr;
row-gap: 1rem;
}

84
src/sass/components/_postnavigator.scss Normal file
View File

@ -0,0 +1,84 @@
.post-navigator {
display: flex;
flex-direction: column;
justify-content: space-between;
@include screen(md) {
flex-direction: row;
}
a:hover {
color: var(--highlight-color);
text-decoration: none;
}
&__nav {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 1rem;
@include transition;
@include screen(md) {
width: 33.3333%;
}
&:hover {
background-color: var(--highlight-bg-color);
text-decoration: none;
}
&:hover &__icon {
color: var(--highlight-color);
}
&:hover &__nav-title {
color: var(--highlight-color);
}
&--previous-post {
justify-content: start;
@include screen(md) {
justify-content: flex-end;
}
}
&--next-post {
justify-content: flex-end;
@include screen(md) {
justify-content: start;
}
}
}
&__icon {
// mr-4 text-yuika-blue-700 text-2xl group-hover:text-white
margin-right: 1rem;
color: var(--accent-color);
font-size: $text-2xl;
}
&__nav-content {
display: flex;
flex-direction: column;
p {
margin: 0;
}
&--previous-post {
align-items: start;
@include screen(md) {
align-items: flex-end;
}
}
&--next-post {
align-items: flex-end;
@include screen(md) {
align-items: start;
}
}
}
&__nav-title {
font-size: $text-xl;
color: var(--accent-color);
}
}

2
src/sass/utilities/_spacing.scss
View File

@ -20,6 +20,8 @@
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
@include screen(sm) {
max-width: 640px;
}