mirror of
https://git.joinplu.me/Plume/Plume.git
synced 2024-11-26 05:21:00 +00:00
Make the comment syntax consistent across all CSS (#707)
* Update _article.scss * Update _dark_variables.scss * Update _forms.scss * Update _global.scss * Update _header.scss * Update _variables.scss
This commit is contained in:
parent
a9441a8804
commit
9ede06e7a3
6 changed files with 27 additions and 27 deletions
|
@ -1,4 +1,4 @@
|
||||||
// Heading
|
/* Heading */
|
||||||
main header.article {
|
main header.article {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: $background;
|
background: $background;
|
||||||
|
@ -73,7 +73,7 @@ main .article-info {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
||||||
|
@ -104,7 +104,7 @@ main article {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Metadata under the article
|
/* Metadata under the article */
|
||||||
main .article-meta, main .article-meta button {
|
main .article-meta, main .article-meta button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
@ -129,7 +129,7 @@ main .article-meta {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Article Tags
|
/* Article Tags */
|
||||||
.tags {
|
.tags {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
@ -154,7 +154,7 @@ main .article-meta {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Likes & Boosts
|
/* Likes & Boosts */
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -257,7 +257,7 @@ main .article-meta {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Comments
|
/* Comments */
|
||||||
.comments {
|
.comments {
|
||||||
margin: 0 $horizontal-margin;
|
margin: 0 $horizontal-margin;
|
||||||
|
|
||||||
|
@ -271,7 +271,7 @@ main .article-meta {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// New comment form
|
/* New comment form */
|
||||||
> form input[type="submit"] {
|
> form input[type="submit"] {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
@ -421,7 +421,7 @@ main .article-meta {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// content warning
|
/* Content warning */
|
||||||
.cw-container {
|
.cw-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -459,7 +459,7 @@ input:checked ~ .cw-container > .cw-text {
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bottom action bar
|
/* Bottom action bar */
|
||||||
|
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
@ -482,11 +482,11 @@ input:checked ~ .cw-container > .cw-text {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Footnote related styles
|
/* Footnote related styles */
|
||||||
.footnote-definition {
|
.footnote-definition {
|
||||||
p {
|
p {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
// Make sur the definition is inline with the label-definition
|
/* Make sure the definition is inline with the label-definition */
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import '_variables';
|
@import '_variables';
|
||||||
|
|
||||||
// Color Scheme
|
/* Color Scheme */
|
||||||
$gray: #1a3854;
|
$gray: #1a3854;
|
||||||
$black: #102e4a;
|
$black: #102e4a;
|
||||||
$white: #F8F8F8;
|
$white: #F8F8F8;
|
||||||
|
|
|
@ -44,7 +44,7 @@ input[type="checkbox"] {
|
||||||
-webkit-appearance: checkbox;
|
-webkit-appearance: checkbox;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Inline forms (containing only CSRF token and a <submit>, for protected links) **/
|
/* Inline forms (containing only CSRF token and a <submit>, for protected links) */
|
||||||
|
|
||||||
form.inline {
|
form.inline {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
@ -111,7 +111,7 @@ input[type="submit"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Writing page
|
/* The writing page */
|
||||||
form.new-post {
|
form.new-post {
|
||||||
max-width: 60em;
|
max-width: 60em;
|
||||||
.title {
|
.title {
|
||||||
|
|
|
@ -68,7 +68,7 @@ small {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Main
|
/* Main */
|
||||||
body > main > *, .h-feed > * {
|
body > main > *, .h-feed > * {
|
||||||
margin: 1em $horizontal-margin;
|
margin: 1em $horizontal-margin;
|
||||||
}
|
}
|
||||||
|
@ -137,13 +137,13 @@ 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;
|
||||||
|
@ -170,7 +170,7 @@ p.error {
|
||||||
margin: 2em 0px;
|
margin: 2em 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Cards
|
/* Cards */
|
||||||
.cards {
|
.cards {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -249,7 +249,7 @@ p.error {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Instance presentation
|
/* Instance presentation */
|
||||||
.presentation {
|
.presentation {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
|
|
||||||
|
@ -263,7 +263,7 @@ p.error {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Stats
|
/* Stats */
|
||||||
.stats {
|
.stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
@ -287,7 +287,7 @@ p.error {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Pagination
|
/* Pagination */
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
@ -297,7 +297,7 @@ p.error {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Flex boxes
|
/* Flex boxes */
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -332,7 +332,7 @@ p.error {
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Footer
|
/* Footer */
|
||||||
body > footer {
|
body > footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
|
|
@ -101,7 +101,7 @@ body > header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only enable label animations on normal 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 {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// Color Scheme
|
/* Color Scheme */
|
||||||
$gray: #F3F3F3;
|
$gray: #F3F3F3;
|
||||||
$black: #242424;
|
$black: #242424;
|
||||||
$white: #F8F8F8;
|
$white: #F8F8F8;
|
||||||
|
@ -16,13 +16,13 @@ $primary: $purple;
|
||||||
$primary-text-color: $white; // text color on primary background (buttons for instance)
|
$primary-text-color: $white; // text color on primary background (buttons for instance)
|
||||||
$success-color: $green;
|
$success-color: $green;
|
||||||
|
|
||||||
// Dimensions
|
/* Dimensions */
|
||||||
|
|
||||||
$article-width: 70ch;
|
$article-width: 70ch;
|
||||||
$horizontal-margin: 20%;
|
$horizontal-margin: 20%;
|
||||||
$margin: 0 $horizontal-margin;
|
$margin: 0 $horizontal-margin;
|
||||||
|
|
||||||
// Fonts
|
/* Fonts */
|
||||||
|
|
||||||
$route159: "Route159", serif;
|
$route159: "Route159", serif;
|
||||||
$playfair: "Playfair Display", serif;
|
$playfair: "Playfair Display", serif;
|
||||||
|
|
Loading…
Reference in a new issue