summaryrefslogtreecommitdiffstats
path: root/assets/scss/_fuji-style
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/_fuji-style')
-rw-r--r--assets/scss/_fuji-style/_components.scss35
-rw-r--r--assets/scss/_fuji-style/_content.scss161
-rw-r--r--assets/scss/_fuji-style/_footer.scss10
-rw-r--r--assets/scss/_fuji-style/_header.scss25
-rw-r--r--assets/scss/_fuji-style/_sidebar.scss69
5 files changed, 300 insertions, 0 deletions
diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss
new file mode 100644
index 0000000..429d869
--- /dev/null
+++ b/assets/scss/_fuji-style/_components.scss
@@ -0,0 +1,35 @@
+.btn {
+ position: fixed;
+ right: 1.5rem;
+ bottom: 1.5rem;
+ width: 2.5rem;
+ height: 5rem;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+ div {
+ flex: 0 1 auto;
+ width: 2.5rem;
+ height: 2.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &:first-child {
+ border-radius: 0.25rem 0.25rem 0 0;
+ font-size: 1.25rem;
+ }
+
+ &:last-child {
+ border-radius: 0 0 0.25rem 0.25rem;
+ font-size: 1.3rem;
+ }
+ }
+}
+
+#post-aplayer {
+ margin: 0 0.125rem 1.25rem 0.125rem;
+ font-family: inherit;
+}
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
new file mode 100644
index 0000000..fcb4f3b
--- /dev/null
+++ b/assets/scss/_fuji-style/_content.scss
@@ -0,0 +1,161 @@
+.content {
+ padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar
+}
+
+.post {
+ // paddings between posts
+ &:not(:first-child) {
+ padding: 1.5rem 0;
+ }
+
+ &:first-child {
+ padding: 0 0 1.5rem 0;
+ }
+}
+
+.post-title {
+ font-size: $font-size-1;
+}
+
+.post-meta {
+ margin: 0.5rem 0.25rem 1rem 0.25rem; // little space
+ white-space: nowrap;
+ overflow-x: scroll;
+
+ time,
+ span:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+
+ i {
+ font-size: 0.875rem;
+ }
+}
+
+.post-summary {
+ margin: 0 0.1rem; // little space
+
+ p:last-child {
+ margin-bottom: 0; // remove margin-bottom of last para in summary
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ display: none; // hide h1-h6 in post summary
+ }
+}
+
+.post-meta-archive {
+ margin: 0.5rem 0.25rem 0 0.25rem; // little space
+ white-space: nowrap;
+ overflow-x: scroll;
+
+ time,
+ span:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+}
+
+.pagination {
+ text-align: center;
+ padding: 1rem 0;
+ font-size: 1.125rem;
+
+ & > div {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+
+ &.pag-item {
+ padding: 0 0.25rem;
+
+ a {
+ vertical-align: middle;
+ }
+ }
+ }
+
+ i {
+ padding: 0 0.25rem;
+ vertical-align: middle;
+ }
+}
+
+.page-info {
+ padding: 0 0.1rem 1.5rem 0.1rem;
+}
+
+// single page part
+article {
+ padding-bottom: 1.5rem;
+
+ .post-content {
+ margin: 1.25rem 0.1rem 0 0.1rem;
+ }
+}
+
+.license {
+ margin-bottom: 1.5rem;
+}
+
+.post-loading {
+ margin: 0 0 1.5rem 0;
+ padding-top: 1.5rem;
+ text-align: center;
+
+ i {
+ font-size: 1.25rem;
+ }
+
+ p {
+ margin: 0.5rem 0 0 0;
+ }
+}
+
+.markdown-body {
+ h1 {
+ font-size: $font-size-1;
+ margin-top: 1.5rem;
+ }
+
+ h2 {
+ font-size: $font-size-2;
+ margin-top: 1.375rem;
+ }
+
+ h3 {
+ font-size: $font-size-3;
+ margin-top: 1.25rem;
+ }
+
+ h4 {
+ margin-top: 1.25rem;
+ }
+
+ ul {
+ list-style-type: circle;
+ }
+
+ img {
+ max-width: 98%;
+ margin: 0 0.25rem 0.5rem 0.25rem;
+ }
+}
diff --git a/assets/scss/_fuji-style/_footer.scss b/assets/scss/_fuji-style/_footer.scss
new file mode 100644
index 0000000..ab1bde1
--- /dev/null
+++ b/assets/scss/_fuji-style/_footer.scss
@@ -0,0 +1,10 @@
+footer {
+ .footer {
+ padding: 2rem 1.5rem;
+ text-align: center;
+
+ i {
+ font-size: 0.875rem;
+ }
+ }
+}
diff --git a/assets/scss/_fuji-style/_header.scss b/assets/scss/_fuji-style/_header.scss
new file mode 100644
index 0000000..29afe07
--- /dev/null
+++ b/assets/scss/_fuji-style/_header.scss
@@ -0,0 +1,25 @@
+header {
+ .header {
+ padding: 1.75rem 1.5rem 2rem 1.5rem;
+ }
+
+ .title-main {
+ font-size: 2.5rem;
+ font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, monospace;
+ font-weight: 700;
+ white-space: nowrap;
+ }
+
+ .title-sub {
+ margin: 0 0.1rem;
+ display: block;
+ white-space: nowrap;
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+ }
+}
diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss
new file mode 100644
index 0000000..132a22f
--- /dev/null
+++ b/assets/scss/_fuji-style/_sidebar.scss
@@ -0,0 +1,69 @@
+.sidebar {
+ padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen
+}
+
+.sidebar-item {
+ &:not(:last-child) {
+ margin-bottom: 1rem; // space betreen sidebar items
+ }
+
+ h3 {
+ margin-bottom: 0.25rem; // space betreen head3 & lists
+ }
+
+ ul {
+ list-style-type: none;
+ margin: 0 0.1rem; // little space
+ }
+
+ & > div,
+ & > nav {
+ margin: 0 0.1rem; // little space
+ }
+
+ & > img {
+ margin: 0.5rem 0.25rem 0 0.25rem;
+ width: 100%;
+ border-radius: 2px;
+ }
+}
+
+@media screen and (max-width: $width-md) {
+ .sidebar {
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ }
+
+ .sidebar-item {
+ width: 40%; // max 2 modules per line
+
+ // space only at first 2 modules
+ .sidebar-pages,
+ .sidebar-tags {
+ margin-bottom: 1rem;
+ }
+
+ .sidebar-links,
+ .sidebar-bgm {
+ margin-bottom: 0;
+ }
+
+ & > img {
+ margin: 0.5rem 0.25rem 0 0.25rem;
+ width: 75%;
+ border-radius: 0.25rem;
+ }
+ }
+}
+
+// single page part
+.sidebar-toc {
+ ul ul {
+ font-size: 0.875rem;
+ padding-left: 0.5rem;
+ margin-bottom: 0.25rem;
+ }
+}