Use soft tabs instead of hard tabs in SCSS files

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

View File

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

View File

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

View File

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

View File

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

View File

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