mirrors/Plume
1
0
Fork 0
mirror of https://git.joinplu.me/Plume/Plume.git synced 2024-11-25 21:11:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use soft tabs instead of hard tabs in SCSS files

Browse source
This commit is contained in:
Kitaiti Makoto 2021-01-17 22:33:29 +09:00
parent c253bdee54
commit 4a212e5f9e
5 changed files with 287 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/themes/blog-monospace/theme.scss
View file

@ -1,3 +1,3 @@
* { * {
font-family: monospace; font-family: monospace;
} }

176
assets/themes/default/_article.scss
View file

@ -64,37 +64,37 @@ main header.article {
} }
main .article-info { main .article-info {
margin: 0 auto 3em; margin: 0 auto 3em;
font-size: 0.95em; font-size: 0.95em;
font-weight: 400; font-weight: 400;
.author, .author a { .author, .author a {
font-weight: 600; font-weight: 600;
} }
} }
/* The article itself */ /* The article itself */
main article { main article {
max-width: $article-width; max-width: $article-width;
margin: 2.5em auto; margin: 2.5em auto;
font-family: $lora; font-family: $lora;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.7; line-height: 1.7;
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
img { img {
display: block; display: block;
margin: 3em auto; margin: 3em auto;
max-width: 100%; max-width: 100%;
} }
pre { pre {
padding: 1em; padding: 1em;
background: $gray; background: $gray;
overflow: auto; overflow: auto;
} }
blockquote { blockquote {
@ -126,7 +126,7 @@ main .article-meta {
> p { > p {
margin: 2em $horizontal-margin; margin: 2em $horizontal-margin;
font-size: 0.9em; font-size: 0.9em;
} }
/* Article Tags */ /* Article Tags */
@ -157,15 +157,15 @@ main .article-meta {
/* Likes & Boosts */ /* Likes & Boosts */
.actions { .actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
} }
.likes, .reshares { .likes, .reshares {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.5em 0; padding: 0.5em 0;
p { p {
font-size: 1.5em; font-size: 1.5em;
@ -175,34 +175,34 @@ main .article-meta {
.action { .action {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: none; background: none;
color: $text-color; color: $text-color;
border: none; border: none;
font-size: 1.1em; font-size: 1.1em;
cursor: pointer; cursor: pointer;
svg.feather { svg.feather {
transition: background 0.1s ease-in; transition: background 0.1s ease-in;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0.5em 0; margin: 0.5em 0;
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
border-radius: 50%; border-radius: 50%;
} }
&.reshared, &.liked { &.reshared, &.liked {
svg.feather { svg.feather {
color: $background; color: $background;
font-weight: 900; font-weight: 900;
} }
} }
} }
@ -213,14 +213,14 @@ main .article-meta {
.action svg.feather { .action svg.feather {
padding: 0.7em; padding: 0.7em;
box-sizing: border-box; box-sizing: border-box;
color: $red; color: $red;
fill: none; fill: none;
border: solid $red thin; border: solid $red thin;
} }
.action:hover svg.feather { .action:hover svg.feather {
background: transparentize($red, 0.85); background: transparentize($red, 0.85);
} }
.action.liked svg.feather { .action.liked svg.feather {
@ -238,22 +238,22 @@ main .article-meta {
.action svg.feather { .action svg.feather {
padding: 0.7em; padding: 0.7em;
box-sizing: border-box; box-sizing: border-box;
color: $primary; color: $primary;
border: solid $primary thin; border: solid $primary thin;
font-weight: 600; font-weight: 600;
} }
.action:hover svg.feather { .action:hover svg.feather {
background: transparentize($primary, 0.85); background: transparentize($primary, 0.85);
} }
.action.reshared svg.feather { .action.reshared svg.feather {
background: $primary; background: $primary;
} }
.action.reshared:hover svg.feather { .action.reshared:hover svg.feather {
background: transparentize($primary, 0.75) background: transparentize($primary, 0.75)
color: $primary; color: $primary;
} }
} }
@ -262,9 +262,9 @@ main .article-meta {
margin: 0 $horizontal-margin; margin: 0 $horizontal-margin;
h2 { h2 {
color: $primary; color: $primary;
font-size: 1.5em; font-size: 1.5em;
font-weight: 600; font-weight: 600;
} }
summary { summary {
@ -279,16 +279,16 @@ main .article-meta {
// Respond & delete comment buttons // Respond & delete comment buttons
a.button, form.inline, form.inline input { a.button, form.inline, form.inline input {
padding: 0; padding: 0;
background: none; background: none;
color: $text-color; color: $text-color;
margin-right: 2em; margin-right: 2em;
font-family: $route159; font-family: $route159;
font-weight: normal; font-weight: normal;
&::before { &::before {
color: $primary; color: $primary;
padding-right: 0.5em; padding-right: 0.5em;
} }
&:hover { color: $primary; } &:hover { color: $primary; }
@ -296,8 +296,8 @@ main .article-meta {
.comment { .comment {
margin: 1em 0; margin: 1em 0;
font-size: 1em; font-size: 1em;
border: none; border: none;
.content { .content {
background: $gray; background: $gray;
@ -328,36 +328,36 @@ main .article-meta {
color: transparentize($text-color, 0.6); color: transparentize($text-color, 0.6);
} }
.author { .author {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
align-content: center; align-content: center;
* { * {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
} }
.display-name { .display-name {
color: $text-color; color: $text-color;
} }
&:hover { &:hover {
.display-name { color: $primary; } .display-name { color: $primary; }
small { opacity: 1; } small { opacity: 1; }
} }
} }
& > .comment { & > .comment {
padding-left: 2em; padding-left: 2em;
} }
.text { .text {
padding: 1.25em 0; padding: 1.25em 0;
font-family: $lora; font-family: $lora;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4; line-height: 1.4;
text-align: left; text-align: left;
} }
} }
} }

96
assets/themes/default/_forms.scss
View file

@ -1,27 +1,27 @@
label { label {
display: block; display: block;
margin: 2em auto .5em; margin: 2em auto .5em;
font-size: 1.2em; font-size: 1.2em;
} }
input, textarea, select { input, textarea, select {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: block; display: block;
width: 100%; width: 100%;
margin: auto; margin: auto;
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: textarea; -webkit-appearance: textarea;
background: $form-input-background; background: $form-input-background;
color: $text-color; color: $text-color;
border: solid $form-input-border thin; border: solid $form-input-border thin;
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
&:focus { &:focus {
border-color: $primary; border-color: $primary;
} }
} }
form input[type="submit"] { form input[type="submit"] {
margin: 2em auto; margin: 2em auto;
@ -29,18 +29,18 @@ form input[type="submit"] {
} }
textarea { textarea {
resize: vertical; resize: vertical;
overflow-y: scroll; overflow-y: scroll;
font-family: $lora; font-family: $lora;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.5; line-height: 1.5;
} }
input[type="checkbox"] { input[type="checkbox"] {
display: inline; display: inline;
margin: initial; margin: initial;
min-width: initial; min-width: initial;
width: initial; width: initial;
-webkit-appearance: checkbox; -webkit-appearance: checkbox;
} }
@ -71,31 +71,31 @@ form.inline {
} }
.button, .button:visited, input[type="submit"], input[type="submit"].button { .button, .button:visited, input[type="submit"], input[type="submit"].button {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: inline-block; display: inline-block;
-webkit-appearance: none; -webkit-appearance: none;
margin: 0.5em auto; margin: 0.5em auto;
padding: 0.75em 1em; padding: 0.75em 1em;
background: $primary; background: $primary;
color: $primary-text-color; color: $primary-text-color;
font-weight: bold; font-weight: bold;
border: none; border: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: transparentize($primary, 0.1); background: transparentize($primary, 0.1);
} }
&.destructive { &.destructive {
background: $red; background: $red;
&:hover { &:hover {
background: transparentize($red, 0.1); background: transparentize($red, 0.1);
} }
} }
&.secondary { &.secondary {
background: $gray; background: $gray;
@ -115,20 +115,20 @@ input[type="submit"] {
form.new-post { form.new-post {
max-width: 60em; max-width: 60em;
.title { .title {
margin: 0 auto; margin: 0 auto;
padding: 0.75em 0; padding: 0.75em 0;
background: none; background: none;
border: none; border: none;
font-family: $playfair; font-family: $playfair;
font-size: 2em; font-size: 2em;
text-align: left; text-align: left;
} }
textarea { textarea {
min-height: 20em; min-height: 20em;
overflow-y: scroll; overflow-y: scroll;
resize: none; resize: none;
-webkit-appearance: textarea; -webkit-appearance: textarea;
} }
} }

178
assets/themes/default/_global.scss
View file

@ -6,43 +6,43 @@ html {
} }
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: $background; background: $background;
color: $text-color; color: $text-color;
font-family: $route159; font-family: $route159;
::selection { ::selection {
background: transparentize($primary, 0.7); background: transparentize($primary, 0.7);
} }
::-moz-selection { ::-moz-selection {
background: transparentize($primary, 0.7); background: transparentize($primary, 0.7);
} }
} }
a, a:visited { a, a:visited {
color: $primary; color: $primary;
text-decoration: none; text-decoration: none;
} }
a::selection { a::selection {
color: $background; color: $background;
} }
a::-moz-selection { a::-moz-selection {
color: $background; color: $background;
} }
small { small {
margin-left: 1em; margin-left: 1em;
color: transparentize($text-color, 0.6); color: transparentize($text-color, 0.6);
font-size: 0.75em; font-size: 0.75em;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
} }
.center { .center {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
opacity: 0.6; opacity: 0.6;
padding: 5em; padding: 5em;
} }
.right { .right {
@ -53,28 +53,28 @@ small {
} }
.spaced { .spaced {
margin: 4rem 0; margin: 4rem 0;
} }
.banner { .banner {
background: $gray; background: $gray;
padding-top: 2em; padding-top: 2em;
padding-bottom: 1em; padding-bottom: 1em;
margin: 3em 0px; margin: 3em 0px;
} }
.hidden { .hidden {
display: none; display: none;
appearance: none; appearance: none;
} }
/* Main */ /* Main */
body > main > *, .h-feed > * { body > main > *, .h-feed > * {
margin: 1em $horizontal-margin; margin: 1em $horizontal-margin;
} }
body > main > .h-entry, .h-feed { body > main > .h-entry, .h-feed {
margin: 0; margin: 0;
} }
body > main { body > main {
@ -98,18 +98,18 @@ main {
margin-top: 1em; margin-top: 1em;
&.article { &.article {
margin: 1em auto 0.5em; margin: 1em auto 0.5em;
font-family: $playfair; font-family: $playfair;
font-size: 2.5em; font-size: 2.5em;
font-weight: normal; font-weight: normal;
} }
} }
h2 { h2 {
font-size: 1.75em; font-size: 1.75em;
font-weight: 300; font-weight: 300;
&.article { &.article {
font-size: 1.25em; font-size: 1.25em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -139,15 +139,15 @@ main {
/* Errors */ /* Errors */
p.error { p.error {
color: $red; color: $red;
font-weight: bold; font-weight: bold;
} }
/* User page */ /* User page */
.user h1 { .user h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: 0px; margin: 0px;
} }
@ -156,14 +156,14 @@ p.error {
} }
.badge { .badge {
margin-right: 1em; margin-right: 1em;
padding: 0.35em 1em; padding: 0.35em 1em;
background: $background; background: $background;
color: $primary; color: $primary;
border: 1px solid $primary; border: 1px solid $primary;
font-size: 1rem; font-size: 1rem;
} }
.user-summary { .user-summary {
@ -172,25 +172,25 @@ p.error {
/* Cards */ /* Cards */
.cards { .cards {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 5%; padding: 0 5%;
margin: 1rem 0 5rem; margin: 1rem 0 5rem;
} }
.card { .card {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
min-width: 20em; min-width: 20em;
min-height: 20em; min-height: 20em;
margin: 1em; margin: 1em;
box-sizing: border-box; box-sizing: border-box;
background: $gray; background: $gray;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -215,11 +215,11 @@ p.error {
} }
> * { > * {
margin: 20px; margin: 20px;
} }
.cover { .cover {
min-height: 10em; min-height: 10em;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -227,19 +227,19 @@ p.error {
} }
h3 { h3 {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
font-family: $playfair; font-family: $playfair;
font-size: 1.75em; font-size: 1.75em;
font-weight: normal; font-weight: normal;
line-height: 1.75; line-height: 1.75;
a { a {
display: block; display: block;
transition: color 0.1s ease-in; transition: color 0.1s ease-in;
color: $text-color; color: $text-color;
&:hover { color: $primary; } &:hover { color: $primary; }
} }
} }
.controls { .controls {
@ -252,13 +252,13 @@ p.error {
} }
main { main {
flex: 1; flex: 1;
font-family: $lora; font-family: $lora;
font-size: 1em; font-size: 1em;
line-height: 1.25; line-height: 1.25;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
} }
} }
@ -300,15 +300,15 @@ p.error {
/* Stats */ /* Stats */
.stats { .stats {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 2em; margin: 2em;
> div { > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
p { p {

122
assets/themes/default/_header.scss
View file

@ -3,8 +3,8 @@ body > header {
#content { #content {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: space-between; justify-content: space-between;
} }
nav#menu { nav#menu {
@ -19,44 +19,44 @@ body > header {
a { a {
transform: skewX(15deg); transform: skewX(15deg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.4em; width: 1.4em;
height: 1.4em; height: 1.4em;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $gray; color: $gray;
font-size: 1.33em; font-size: 1.33em;
} }
} }
nav { nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
hr { hr {
height: 100%; height: 100%;
width: 0.2em; width: 0.2em;
background: $primary; background: $primary;
border: none; border: none;
transform: skewX(-15deg); transform: skewX(-15deg);
} }
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
align-self: stretch; align-self: stretch;
margin: 0; margin: 0;
padding: 0 2em; padding: 0 2em;
font-size: 1em; font-size: 1em;
i { font-size: 1.2em; } i { font-size: 1.2em; }
&.title { &.title {
margin: 0; margin: 0;
text-align: center; text-align: center;
padding: 0.5em 1em; padding: 0.5em 1em;
font-size: 1.75em; font-size: 1.75em;
@ -70,7 +70,7 @@ body > header {
margin: 0; margin: 0;
padding-left: 0.5em; padding-left: 0.5em;
} }
} }
} }
} }
} }
@ -205,36 +205,36 @@ body > header {
/* Only enable label animations on large screens */ /* Only enable label animations on large screens */
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
header nav a { header nav a {
i { i {
transition: all 0.2s ease; transition: all 0.2s ease;
margin: 0; margin: 0;
}
.mobile-label {
transition: all 0.2s ease;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
transform: translateZ(0);
-webkit-transform: none !important;
opacity: 0;
font-size: 0.9em;
white-space: nowrap;
}
img + .mobile-label { display: none; }
&:hover {
i { margin-bottom: 0.75em; }
.mobile-label {
opacity: 1;
transform: translate(-50%, 80%);
-webkit-transform: translate(-50%, 80%);
}
} }
}
.mobile-label {
transition: all 0.2s ease;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
transform: translateZ(0);
-webkit-transform: none !important;
opacity: 0;
font-size: 0.9em;
white-space: nowrap;
}
img + .mobile-label { display: none; }
&:hover {
i { margin-bottom: 0.75em; }
.mobile-label {
opacity: 1;
transform: translate(-50%, 80%);
-webkit-transform: translate(-50%, 80%);
}
}
}
} }
// Small screens // Small screens