added syntax highlighting; modified nav and article fonts; …

This commit is contained in:
Vrifox 2020-10-05 20:34:39 +02:00
parent bdb3d45d0e
commit a4e8d08579
6 changed files with 303 additions and 17 deletions

View file

@ -36,7 +36,7 @@ header {
padding: 20px;
transition: background .2s;
&:hover {
background: rgb(70, 70, 105);
background: rgb(70, 70, 105);
}
img {
background: rgb(80, 80, 120);
@ -48,6 +48,8 @@ header {
order: -1;
}
h1 {
font-size: 1.2em;
font-weight: 400;
margin-top: 0px;
}
a {
@ -57,6 +59,7 @@ header {
}
}
.meta {
font-size: .8em;
margin: 0;
}
.author {

View file

@ -1,5 +1,6 @@
@import '../partials/main';
@import '../partials/nav';
@import '../partials/syntax';
.section-article {
article {

View file

@ -44,10 +44,8 @@ header {
border: 1px solid rgb(60, 60, 90);
border-radius: 5px;
color: rgb(255, 255, 255);
display: grid;
grid-template-areas: "img h1"
"img p";
grid-template-columns: 120px 1fr;
display: flex;
flex-flow: column;
height: max-content;
padding: 20px;
transition: background .2s;
@ -55,20 +53,21 @@ header {
background: rgb(70, 70, 105);
}
img {
border: 0px solid rgb(40, 40, 60);
border-radius: 5px 0px 0px 5px;
grid-area: img;
height: 180px;
margin: -20px;
background: rgb(80, 80, 120);
border-radius: 5px 5px 0px 0px;
margin: -20px -20px 10px -20px;
max-height: 250px;
max-width: calc(100% + 40px);
object-fit: cover;
width: 120px;
order: -1;
}
h1 {
grid-area: h1;
margin: 0px;
font-size: 20px;
font-weight: 400;
margin: 0;
}
.meta {
grid-area: p;
font-size: 15px;
margin: 0;
}
.author {
@ -108,20 +107,23 @@ header {
img {
background: rgb(80, 80, 120);
border-radius: 5px 5px 0px 0px;
margin: -20px -20px 20px -20px;
margin: -20px -20px 10px -20px;
max-height: 170px;
max-width: calc(100% + 40px);
object-fit: cover;
order: -1;
}
h1 {
margin-top: 0;
font-size: 20px;
font-weight: 400;
margin: 0;
}
.meta {
font-size: 15px;
margin: 0;
}
.status {
color: rgb(200, 200, 230);
color: rgb(215, 215, 225);
font-style: italic;
}
}

View file

@ -2,6 +2,8 @@ nav {
background: rgb(60, 60, 90);
overflow-x: auto;
overflow-y: hidden;
position: sticky;
top: 0;
white-space: nowrap;
.container {
align-items: center;

View file

@ -0,0 +1,270 @@
.chroma { // background
background: rgb(30, 30, 45);
border-radius: 5px;
color: rgb(245, 245, 255);
.x { // other
}
.err { // error
}
.lntd { // lineTableTD
border: 0;
margin: 0;
padding: 0 0 0 20px;
vertical-align: top;
}
.lntable { // lineTable
border: 0;
border-spacing: 0;
display: block;
margin: 0;
overflow: auto;
padding: 0;
width: auto;
}
.hl { // lineHighlight
background: #ffffcc;
display: block;
width: 100%;
}
.lnt { // lineNumbersTable
color: rgb(215, 215, 225);
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
.ln { // lineNumbers
color: rgb(215, 215, 225);
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
.k { // keyword
color: #ff79c6;
}
.kc { // keywordConstant
color: #ff79c6;
}
.kd { // keywordDeclaration
color: #8be9fd;
font-style: italic;
}
.kn { // keywordNamespace
color: #ff79c6;
}
.kp { // keywordPseudo
color: #ff79c6;
}
.kr { // keywordReserved
color: #ff79c6;
}
.kt { // keywordType
color: #8be9fd;
}
.n { // name
}
.na { // nameAttribute
color: #50fa7b;
}
.nb { // nameBuiltin
color: #8be9fd;
font-style: italic
}
.bp { // nameBuiltinPseudo
}
.nc { // nameClass
color: #50fa7b;
}
.no { // nameConstant
}
.nd { // nameDecorator
}
.ni { // nameEntity
}
.ne { // nameException
}
.nf { // nameFunction
color: #50fa7b;
}
.fm { // nameFunctionMagic
}
.nl { // nameLabel
color: #8be9fd;
font-style: italic;
}
.nn { // nameNamespace
}
.nx { // nameOther
}
.py { // nameProperty
}
.nt { // nameTag
color: rgb(255, 255, 255);
}
.nv { // nameVariable
color: #8be9fd;
font-style: italic;
}
.vc { // nameVariableClass
color: #8be9fd;
font-style: italic;
}
.vg { // nameVariableGlobal
color: #8be9fd;
font-style: italic;
}
.vi { // nameVariableInstance
color: #8be9fd;
font-style: italic;
}
.vm { // nameVariableMagic
}
.l { // literal
}
.ld { // literalDate
}
.s { // literalString
color: #f1fa8c;
}
.sa { // literalStringAffix
color: #f1fa8c;
}
.sb { // literalStringBacktick
color: #f1fa8c;
}
.sc { // literalStringChar
color: #f1fa8c;
}
.dl { // literalStringDelimiter
color: #f1fa8c;
}
.sd { // literalStringDoc
color: #f1fa8c;
}
.s2 { // literalStringDouble
color: #f1fa8c;
}
.se { // literalStringEscape
color: #f1fa8c;
}
.sh { // literalStringHeredoc
color: #f1fa8c;
}
.si { // literalStringInterpol
color: #f1fa8c;
}
.sx { // literalStringOther
color: #f1fa8c;
}
.sr { // literalStringRegex
color: #f1fa8c;
}
.s1 { // literalStringSingle
color: #f1fa8c;
}
.ss { // literalStringSymbol
color: #f1fa8c;
}
.m { // literalNumber
color: #bd93f9;
}
.mb { // literalNumberBin
color: #bd93f9;
}
.mf { // literalNumberFloat
color: #bd93f9;
}
.mh { // literalNumberHex
color: #bd93f9;
}
.mi { // literalNumberInteger
color: #bd93f9;
}
.il { // literalNumberIntegerLong
color: #bd93f9;
}
.mo { // literalNumberOct
color: #bd93f9;
}
.o { // operator
color: #ff79c6;
}
.ow { // operatorWord
color: #ff79c6;
}
.p { // punctuation
}
.c { // comment
color: #6272a4;
}
.ch { // commentHashbang
color: #6272a4;
}
.cm { // commentMultiline
color: #6272a4;
}
.c1 { // commentSingle
color: #6272a4;
}
.cs { // commentSpecial
color: #6272a4;
}
.cp { // commentPreproc
color: #ff79c6;
}
.cpf { // commentPreprocFile
color: #ff79c6;
}
.g { // generic
}
.gd { // genericDeleted
color: #8b080b;
}
.ge { // genericEmph
text-decoration: underline;
}
.gr { // genericError
}
.gh { // genericHeading
font-weight: bold;
}
.gi { // genericInserted
font-weight: bold;
}
.go { // genericOutput
color: #44475a;
}
.gp { // genericPrompt
}
.gs { // genericStrong
}
.gu { // genericSubheading
font-weight: bold;
}
.gt { // genericTraceback
}
.gl { // genericUnderline
text-decoration: underline;
}
.w { // textWhitespace
}
}

View file

@ -49,3 +49,11 @@ menu:
title: source code
url: https://git.vrifox.cc/vrifox/vrifox.cc
weight: 3
markup:
highlight:
anchorLineNos: true
lineNos: true
lineNumbersInTable: true
noClasses: false
style: dracula
tabWidth: 2