website/src/Website/wwwroot/css/blog.scss

184 lines
3.3 KiB
SCSS

@import "colours.scss";
.blog-post {
&__image-container {
max-width: 100%;
padding: 10px;
background: $Grey-200;
display: inline-block;
margin: auto;
text-align: center;
border-radius: 4px;
&--container {
text-align: center;
}
&--image {
&-wrapper{
background-image: url('/images/loading.svg');
background-repeat: no-repeat;
background-position: center;
min-width: 200px;
min-height: 200px;
}
max-width: 100%;
}
&--tagline {
margin-top: 10px;
display: block;
}
}
:not(pre)>code {
padding: 2px;
background: $Grey-200;
border-radius: 2px;
border: 1px solid $Grey-400;
}
pre>code {
border-left: 4px solid $primary;
margin-bottom: 10px;
overflow: auto;
padding: 6px;
padding-left: 10px;
tab-size: 4;
-moz-tab-size: 4;
/**
* Obsidian style
* ported by Alexander Marenin (http://github.com/ioncreature)
*/
display: block;
overflow-x: auto;
background: #282b2e;
color: #e0e2e4;
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-selector-id {
color: #93c763;
}
.hljs-number {
color: #ffcd22;
}
.hljs-attribute {
color: #668bb0;
}
.hljs-code,
.hljs-class .hljs-title,
.hljs-section {
color: white;
}
.hljs-regexp,
.hljs-link {
color: #d39745;
}
.hljs-meta {
color: #557182;
}
.hljs-tag,
.hljs-name,
.hljs-bullet,
.hljs-subst,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #8cbbad;
}
.hljs-string,
.hljs-symbol {
color: #ec7600;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #818e96;
}
.hljs-selector-class {
color: #A082BD
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
}
}
.blog-navigation {
display: flex;
justify-content: space-between;
&__next {
margin-left: auto;
}
}
.edit-form {
display: flex;
flex-direction: column;
height: 100vh;
&__title {
display: flex;
&__label {
flex: 0 0 auto;
margin-right: 5px;
}
&__input {
flex: 1 1 auto;
}
}
.editor-toolbar{
a.fa[href^="http"]::after{
display: none; // Hide external link icon
}
}
.CodeMirror *{
transition: none; // Fix weird scroll issue as a result of site-wide transition.
}
}
.video-container {
position: relative;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}