Skip to content
Permalink
Browse files

CSS rework

  • Loading branch information...
Depado committed Sep 4, 2019
1 parent af43b14 commit bdbbfa009e5d69b46e394db5c641f452a8405379
Showing with 87 additions and 88 deletions.
  1. +22 −51 assets/sass/_admonition.scss
  2. +35 −0 assets/sass/_theme.scss
  3. +28 −35 assets/sass/style.scss
  4. +1 −1 assets/style.min.css
  5. +1 −1 assets/style.min.css.map
@@ -1,103 +1,74 @@
$colors: (
"success": #64dd17,
"question": #00c853,
"note": #448aff,
"info": #00b8d4,
"warning": #ff9100,
"hint": #009688,
"danger": #ff1744
);

$icons: (
"note": "\f249",
"danger": "\f06a",
"question": "\f128",
"hint": "\f06d",
"success": "\f00c",
"warning": "\f071",
"important": "\f12a"
);
@import "theme";

@mixin admonition($color, $icon) {
$dark: rgba($color, 0.1);
border-left: 0.2rem solid $color;
border-left-color: $color;
> p.admonition-title {
background-color: $dark;
font-size: 0.75rem;
border-bottom-color: $dark;
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 0.4rem;
content: $icon;
color: rgba($color, 1);
color: $color;
}
}
}

.admonition {
// Default color when admonition is used without type
$color: map-get($colors, "note");
// Default color when admonition is used with an unknown type
$color: $color-note;
$dark: rgba($color, 0.1);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
position: relative;
margin: 1.5em 0;
padding: 0 0.6rem;
border-left: 0.2rem solid $color;
border-left-color: $color;
border-radius: 0.1rem;
font-size: 0.8rem;
overflow: auto;

code {
font-size: 0.75rem;
}

&-title {
margin: 0 -0.6rem;
padding: 0.4rem 0.6rem;
border-bottom: 0.05rem solid $dark;
background-color: $dark;
font-weight: 700;
}

> p.admonition-title {
font-size: 0.75rem;
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 0.4rem;
}
}
&.note {
@include admonition(map-get($colors, "note"), map-get($icons, "note"));
@include admonition($color-note, $icon-note);
}
&.info {
@include admonition(map-get($colors, "info"), map-get($icons, "note"));
@include admonition($color-info, $icon-note);
}
&.question {
@include admonition(
map-get($colors, "question"),
map-get($icons, "question")
);
@include admonition($color-question, $icon-question);
}
&.hint,
&.tip {
@include admonition(map-get($colors, "hint"), map-get($icons, "hint"));
@include admonition($color-hint, $icon-hint);
}
&.success {
@include admonition(
map-get($colors, "success"),
map-get($icons, "success")
);
@include admonition($color-success, $icon-success);
}
&.warning,
&.caution {
@include admonition(
map-get($colors, "warning"),
map-get($icons, "warning")
);
@include admonition($color-warning, $icon-warning);
}
&.danger,
&.error {
@include admonition(map-get($colors, "danger"), map-get($icons, "danger"));
@include admonition($color-danger, $icon-danger);
}
&.important {
@include admonition(
map-get($colors, "danger"),
map-get($icons, "important")
);
@include admonition($color-danger, $icon-important);
}
}
@@ -0,0 +1,35 @@
// Global colors
$color-text: #303030;
$color-grey: #4d4d4d;
$color-white: #fff;
$color-post-theme: #1565c0;

// Markdown colors
$color-link: #07a;
$color-quote: #747d88;
$color-quote-border: #d5d8db;

// Table colors
$color-table-even: #ddd;
$color-table-odd: #f2f2f2;

// Code colors
$color-code-background: #272822;

// Admonitions & Misc
$color-success: #64dd17;
$color-question: #00c853;
$color-note: #448aff;
$color-info: #00b8d4;
$color-warning: #ff9100;
$color-hint: #009688;
$color-danger: #ff1744;

// Icons
$icon-note: "\f249";
$icon-danger: "\f06a";
$icon-question: "\f128";
$icon-hint: "\f06d";
$icon-success: "\f00c";
$icon-warning: "\f071";
$icon-important: "\f12a";
@@ -1,8 +1,5 @@
@import "admonition";

$color-blue: #1565c0;
$color-grey: #4d4d4d;
$color-dark-grey: #303030;
@import "theme";

html,
button,
@@ -18,17 +15,17 @@ body {
text-align: justify;
line-height: 1.6;
font-size: 0;
color: $color-dark-grey;
color: $color-text;
padding: 0 10px;
background-color: #fff;
background-color: $color-white;
}
th,
td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $color-table-even;
padding: 15px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
background-color: $color-table-odd;
}
table {
border-collapse: collapse;
@@ -49,7 +46,7 @@ a {
text-decoration: none;
color: $color-grey;
&:hover {
color: $color-dark-grey;
color: $color-text;
}
&:active,
&:link {
@@ -59,15 +56,15 @@ a {

.md {
a {
color: #07a;
color: $color-link;
&:hover {
text-decoration: underline;
}
}
nav a {
color: grey;
color: $color-grey;
&:hover {
color: $color-dark-grey;
color: $color-text;
text-decoration: none;
}
}
@@ -81,10 +78,10 @@ a {
display: none;
font-weight: 700;
text-decoration: none;
color: grey;
color: $color-grey;
&:hover {
text-decoration: none;
color: $color-dark-grey;
color: $color-text;
}
}
}
@@ -107,15 +104,13 @@ h3 {
hr {
border: 0;
height: 1px;
background: grey;
background: $color-grey;
}
blockquote {
padding-left: 10px;
padding-bottom: 10px;
margin: 0;
border-left: 4px solid;
border-color: grey;
font-style: italic;
border-left: 4px solid $color-quote-border;
color: $color-quote;
overflow: auto;
> p {
padding-right: 10px;
@@ -154,7 +149,7 @@ summary {
pre {
font-family: "Roboto Mono";
font-size: 14px;
background: #272822;
background: $color-code-background;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
@@ -185,7 +180,7 @@ pre {
code {
font-family: "Roboto Mono";
background-color: rgba(0, 0, 0, 0.08);
padding: 0 .3rem 0 .3rem;
padding: 0 0.3rem 0 0.3rem;
border-radius: 0.3em;
font-size: 15px;

@@ -227,23 +222,23 @@ img + em {
}
.twitter {
background: #00aced;
color: #fff;
color: $color-white;
border-radius: 5%;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.tag {
border-radius: 16px;
border: solid grey 1px;
color: grey;
border: solid $color-grey 1px;
color: $color-grey;
&:hover {
background-color: grey;
color: white;
background-color: $color-grey;
color: $color-white;
}
}
.draftinfo {
background: map-get($colors, "warning");
color: #fff;
background: $color-warning;
color: $color-white;
border-radius: 5px;
float: right;
text-align: center;
@@ -279,10 +274,8 @@ img + em {
border-width: 1px;
}
span.draft {
color: white;
background-color: map-get($colors, "warning");
border-color: map-get($colors, "warning");
border-style: solid;
color: $color-white;
background-color: $color-warning;
border-width: 1px;
border-radius: 3px;
padding-left: 6px;
@@ -296,14 +289,14 @@ span.draft {
}

.post {
border-left: 0.25rem solid $color-blue;
border-left: 0.25rem solid $color-post-theme;
border-radius: 0.1rem;
padding-left: 0.5rem;
margin-bottom: 2rem;
p {
margin: 0;
&.description {
color: grey;
color: $color-grey;
font-size: 0.85rem;
margin: 0.5rem 0 0.5rem 0;
}
@@ -312,6 +305,6 @@ span.draft {
}
}
&.draft {
border-left: 0.2rem map-get($colors, "warning") solid;
border-left: 0.2rem $color-warning solid;
}
}

0 comments on commit bdbbfa0

Please sign in to comment.
You can’t perform that action at this time.