log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add post styles, change highlighting style

Browse Source
This commit is contained in:
log101 2023-12-09 10:06:21 +00:00
parent 619d0c63ee
commit ac21193ded
9 changed files with 157 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
assets/scss/_posts.scss
View File

@ -34,6 +34,54 @@
} }
} }
#post-header {
padding-top: 10vh;
a {
text-decoration: none;
color: #656565;
&:hover {
text-decoration: underline;
color: #151515;
}
}
}
#post-title {
font-size: 2.5em;
font-weight: 400;
margin-bottom: 8px;
}
.post-meta {
font-size: 1.5em;
span {
color: #303030;
}
}
.post-tags {
margin: 10px 0;
display: flex;
gap: 6px;
.tag {
font-size: 0.9em;
padding: 3px 14px;
text-transform: lowercase;
border: 1px solid;
margin-bottom: 6px;
a {
outline: none;
text-decoration: none;
color: #5C5C5C;
font-weight: 500;
}
}
}
#posts-footer { #posts-footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -51,3 +99,34 @@
} }
} }
.post-content {
font-size: 1.3em;
color: $color-dark;
line-height: 1.4;
h2 {
border-bottom: 1px solid rgba(71, 61, 139, 0.500);
}
p {
text-align: justify;
a {
text-decoration-line: none;
text-decoration-style: solid;
text-decoration-color: darkslateblue;
outline-color: darkslateblue;
color: slateblue;
}
}
}
.post-to-top-link {
text-decoration: none;
color: #656565;
&:hover {
text-decoration: underline;
color: #151515;
}
}

130
assets/scss/_syntax.scss
View File

@ -1,86 +1,86 @@
/* Background */ .bg { background-color: #f8f8f8; } /* Background */ .bg { background-color: #ffffff; }
/* PreWrapper */ .chroma { background-color: #f8f8f8; padding: 16px; border-radius: 4px; border: 1px dashed grey;} /* PreWrapper */ .chroma { background-color: #ffffff; padding: 16px; border-radius: 4px; border: 1px dashed grey; }
/* Other */ .chroma .x { } /* Other */ .chroma .x { }
/* Error */ .chroma .err { } /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
/* CodeLine */ .chroma .cl { } /* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #dfdfdf } /* LineHighlight */ .chroma .hl { background-color: #e5e5e5 }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; } /* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #aa22ff; font-weight: bold } /* Keyword */ .chroma .k { color: #000000; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #aa22ff; font-weight: bold } /* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #aa22ff; font-weight: bold } /* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #aa22ff; font-weight: bold } /* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #aa22ff } /* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
/* KeywordReserved */ .chroma .kr { color: #aa22ff; font-weight: bold } /* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #00bb00; font-weight: bold } /* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
/* Name */ .chroma .n { } /* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #bb4444 } /* NameAttribute */ .chroma .na { color: #008080 }
/* NameBuiltin */ .chroma .nb { color: #aa22ff } /* NameBuiltin */ .chroma .nb { color: #0086b3 }
/* NameBuiltinPseudo */ .chroma .bp { } /* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
/* NameClass */ .chroma .nc { color: #0000ff } /* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
/* NameConstant */ .chroma .no { color: #880000 } /* NameConstant */ .chroma .no { color: #008080 }
/* NameDecorator */ .chroma .nd { color: #aa22ff } /* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #999999; font-weight: bold } /* NameEntity */ .chroma .ni { color: #800080 }
/* NameException */ .chroma .ne { color: #d2413a; font-weight: bold } /* NameException */ .chroma .ne { color: #990000; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #00a000 } /* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { } /* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #a0a000 } /* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #0000ff; font-weight: bold } /* NameNamespace */ .chroma .nn { color: #555555 }
/* NameOther */ .chroma .nx { } /* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { } /* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #008000; font-weight: bold } /* NameTag */ .chroma .nt { color: #000080 }
/* NameVariable */ .chroma .nv { color: #b8860b } /* NameVariable */ .chroma .nv { color: #008080 }
/* NameVariableClass */ .chroma .vc { } /* NameVariableClass */ .chroma .vc { color: #008080 }
/* NameVariableGlobal */ .chroma .vg { } /* NameVariableGlobal */ .chroma .vg { color: #008080 }
/* NameVariableInstance */ .chroma .vi { } /* NameVariableInstance */ .chroma .vi { color: #008080 }
/* NameVariableMagic */ .chroma .vm { } /* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { } /* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { } /* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #bb4444 } /* LiteralString */ .chroma .s { color: #dd1144 }
/* LiteralStringAffix */ .chroma .sa { color: #bb4444 } /* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
/* LiteralStringBacktick */ .chroma .sb { color: #bb4444 } /* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
/* LiteralStringChar */ .chroma .sc { color: #bb4444 } /* LiteralStringChar */ .chroma .sc { color: #dd1144 }
/* LiteralStringDelimiter */ .chroma .dl { color: #bb4444 } /* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
/* LiteralStringDoc */ .chroma .sd { color: #bb4444; font-style: italic } /* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
/* LiteralStringDouble */ .chroma .s2 { color: #bb4444 } /* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
/* LiteralStringEscape */ .chroma .se { color: #bb6622; font-weight: bold } /* LiteralStringEscape */ .chroma .se { color: #dd1144 }
/* LiteralStringHeredoc */ .chroma .sh { color: #bb4444 } /* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
/* LiteralStringInterpol */ .chroma .si { color: #bb6688; font-weight: bold } /* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
/* LiteralStringOther */ .chroma .sx { color: #008000 } /* LiteralStringOther */ .chroma .sx { color: #dd1144 }
/* LiteralStringRegex */ .chroma .sr { color: #bb6688 } /* LiteralStringRegex */ .chroma .sr { color: #009926 }
/* LiteralStringSingle */ .chroma .s1 { color: #bb4444 } /* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
/* LiteralStringSymbol */ .chroma .ss { color: #b8860b } /* LiteralStringSymbol */ .chroma .ss { color: #990073 }
/* LiteralNumber */ .chroma .m { color: #666666 } /* LiteralNumber */ .chroma .m { color: #009999 }
/* LiteralNumberBin */ .chroma .mb { color: #666666 } /* LiteralNumberBin */ .chroma .mb { color: #009999 }
/* LiteralNumberFloat */ .chroma .mf { color: #666666 } /* LiteralNumberFloat */ .chroma .mf { color: #009999 }
/* LiteralNumberHex */ .chroma .mh { color: #666666 } /* LiteralNumberHex */ .chroma .mh { color: #009999 }
/* LiteralNumberInteger */ .chroma .mi { color: #666666 } /* LiteralNumberInteger */ .chroma .mi { color: #009999 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #666666 } /* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
/* LiteralNumberOct */ .chroma .mo { color: #666666 } /* LiteralNumberOct */ .chroma .mo { color: #009999 }
/* Operator */ .chroma .o { color: #666666 } /* Operator */ .chroma .o { color: #000000; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #aa22ff; font-weight: bold } /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
/* Punctuation */ .chroma .p { } /* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #008800; font-style: italic } /* Comment */ .chroma .c { color: #999988; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #008800; font-style: italic } /* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #008800; font-style: italic } /* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #008800; font-style: italic } /* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #008800; font-weight: bold } /* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #008800 } /* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #008800 } /* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { } /* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #a00000 } /* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
/* GenericEmph */ .chroma .ge { font-style: italic } /* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
/* GenericError */ .chroma .gr { color: #ff0000 } /* GenericError */ .chroma .gr { color: #aa0000 }
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } /* GenericHeading */ .chroma .gh { color: #999999 }
/* GenericInserted */ .chroma .gi { color: #00a000 } /* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
/* GenericOutput */ .chroma .go { color: #888888 } /* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #000080; font-weight: bold } /* GenericPrompt */ .chroma .gp { color: #555555 }
/* GenericStrong */ .chroma .gs { font-weight: bold } /* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } /* GenericSubheading */ .chroma .gu { color: #aaaaaa }
/* GenericTraceback */ .chroma .gt { color: #0044dd } /* GenericTraceback */ .chroma .gt { color: #aa0000 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline } /* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb } /* TextWhitespace */ .chroma .w { color: #bbbbbb }

33
assets/scss/style.scss
View File

@ -22,33 +22,6 @@ body {
margin-bottom: 40px; margin-bottom: 40px;
} }
.post-meta {
margin-top: .5em;
span {
color: #303030;
}
}
.post-tags {
margin: 10px 0;
display: flex;
gap: 6px;
.tag {
font-size: .7em;
padding: 3px 14px;
text-transform: lowercase;
border: 1px solid;
margin-bottom: 6px;
a {
outline: none;
text-decoration: none;
color: #5C5C5C;
}
}
}
#site-footer { #site-footer {
width: 100%; width: 100%;
@ -130,9 +103,3 @@ body {
} }
} }
} }
.content {
max-width: 720px;
font-size: 1em;
color: #303030;
}

2
config.toml
View File

@ -23,7 +23,7 @@ paginate = 5
lineNos = false lineNos = false
lineNumbersInTable = true lineNumbersInTable = true
noClasses = true noClasses = true
style = 'emacs' style = 'github'
tabWidth = 4 tabWidth = 4
[languages] [languages]

5
layouts/partials/post/header.html Normal file
View File

@ -0,0 +1,5 @@
<header id="post-header">
<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
<h1 id="post-title">{{ .Title }}</h1>
<div class="post-meta"><span>{{ time.Format .Site.Params.dateform .Date }}</span></div>
</header>

14
layouts/partials/posts/header.html
View File

@ -1,14 +0,0 @@
<header id="site-header" class="animated slideInUp">
<div>
<div class="back-title">
<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
<h1 id="post-title">{{ .Title }}</h1>
<div class="post-meta"><span>{{ time.Format .Site.Params.dateform .Date }}</span></div>
</div>
<div>
{{ if (or .Params.images .Params.featuredImg) -}}
<button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
{{- end }}
</div>
</div>
</header>

40
layouts/posts/single.html
View File

@ -9,7 +9,7 @@
{{ end }} {{ end }}
{{ define "header" }} {{ define "header" }}
{{ partial "posts/header.html" . }} {{ partial "post/header.html" . }}
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
@ -22,50 +22,20 @@
{{- with .Params.tags }} {{- with .Params.tags }}
<div class="post-tags"> <div class="post-tags">
{{- range . -}} {{- range . -}}
<span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{.}}</a></span> <span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a></span>
{{- end }} {{- end }}
</div> </div>
{{- end }} {{- end }}
</header> </header>
<div class="content"> <div class="post-content">
{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }} {{ .Content | safeHTML }}
</div> </div>
{{- if .Site.Params.relatedPosts }} {{- if .Site.Params.relatedPosts }}
{{- partial "related-posts.html" . -}} {{- partial "related-posts.html" . -}}
{{- end }} {{- end }}
<hr class="post-end"> <hr class="post-end">
<footer class="post-info"> <a class="post-to-top-link" href="#">⮝ Başa dön</a>
{{- with $.Param "author" }}
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>{{ . }}</p>
{{- end }}
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>{{ i18n "wordCount" . }}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}</p>
{{- if and .GitInfo .Site.Params.gitUrl }}
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}</p>
{{- end }}
</footer>
</article> </article>
{{- if .Params.toc }}
<aside id="toc">
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
{{ .TableOfContents }}
</aside>
{{- end }}
<div class="post-nav thin">
{{- with .NextInSection }}
<a class="next-post" href="{{ .Permalink }}">
<span class="post-nav-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>&nbsp;{{ i18n "newer" }}</span><br><span>{{ .Title }}</span>
</a>
{{- end }}
{{- with .PrevInSection }}
<a class="prev-post" href="{{ .Permalink }}">
<span class="post-nav-label">{{ i18n "older" }}&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span><br><span>{{ .Title }}</span>
</a>
{{- end }}
</div>
<div id="comments" class="thin">
{{- partial "comments.html" . -}}
</div>
</main> </main>
{{ end }} {{ end }}

2
resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content
View File

File diff suppressed because one or more lines are too long

2
resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json
View File

@ -1 +1 @@
{"Target":"css/style.min.0e5975da349a2b0c34c63798172e6004b9a596854c2bdeaaafe8a6ce263da499.css","MediaType":"text/css","Data":{"Integrity":"sha256-Dll12jSaKww0xjeYFy5gBLmlloVMK96qr+imziY9pJk="}} {"Target":"css/style.min.709a2ebf07dce3f8b5106058034b134c0f8e343dd9241f6182a31ba387131b72.css","MediaType":"text/css","Data":{"Integrity":"sha256-cJouvwfc4/i1EGBYA0sTTA+OND3ZJB9hgqMbo4cTG3I="}}