diff options
author | saadnpq <saadnpq@localhost.localdomain> | 2020-04-11 14:28:48 +0300 |
---|---|---|
committer | saadnpq <saadnpq@localhost.localdomain> | 2020-04-11 14:28:48 +0300 |
commit | 1bff7cc487aa424fe69c22376ecb1da72d578f5e (patch) | |
tree | a03f0475074573f5bf3033ceb5df1d878ccbfa64 |
initial commit
-rw-r--r-- | content/contact.md | 4 | ||||
-rw-r--r-- | layouts/404.html | 3 | ||||
-rw-r--r-- | layouts/_default/baseof.html | 15 | ||||
-rw-r--r-- | layouts/_default/list.html | 24 | ||||
-rw-r--r-- | layouts/_default/single.html | 31 | ||||
-rw-r--r-- | layouts/index.html | 45 | ||||
-rw-r--r-- | layouts/partials/aside.html | 23 | ||||
-rw-r--r-- | layouts/partials/footer.html | 13 | ||||
-rw-r--r-- | layouts/partials/head.html | 17 | ||||
-rw-r--r-- | layouts/shortcodes/contact.html | 12 | ||||
-rw-r--r-- | static/css/style.css | 342 | ||||
-rw-r--r-- | static/css/syntax.css | 60 | ||||
-rw-r--r-- | static/js/navbutton.js | 25 |
13 files changed, 614 insertions, 0 deletions
diff --git a/content/contact.md b/content/contact.md new file mode 100644 index 0000000..7ba55b3 --- /dev/null +++ b/content/contact.md @@ -0,0 +1,4 @@ +--- +title: get in touch +--- +{{<contact>}}
\ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..2d8f3cc --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,3 @@ +{{define "main"}} +<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"><iframe src="https://giphy.com/embed/YyKPbc5OOTSQE" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div> +{{end}}
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..3159b79 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + {{- partial "head.html" . -}} + <body> + {{- partial "aside.html" . -}} + <main id="main"> + <a href="javascript:void(0)" id="closebtn" onclick="navToggle()"><i class="fas fa-bars fa-lg"></i></a> + <div class="content"> + {{- block "main" . }}{{- end }} + </div> + {{- partial "footer.html" . -}} + </main> + </body> + <script src="/js/navbutton.js"></script> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..9797c06 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,24 @@ +{{ define "main" }} + <div class="section"> + <dev class="section-title">{{.Section}}</dev> + {{range .Pages}} + <div class="list-item"> + <a class="entry-title" href="{{ .URL }}">{{ .Title }}</a> + {{$page := .}} + {{with .Description}} + <p>{{.}}</p> + {{end}} + <div class="meta"> + {{with .Date}} + <i class="far fa-calendar-alt"></i> {{.Format "Jan 2 2006"}} + {{end}} + <br> + {{with .Params.tags}} + <i class="fas fa-tags"></i> + Tags: {{ delimit . ", " }} + {{end}} + </div> + </div> + {{end}} + </div> +{{end}}
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..232df3c --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,31 @@ +{{ define "main" }} + {{with .Title}} + <h1 id="title">{{.}}</h1> + {{else}} + <div class="spacer"></div> + {{end}} + {{ with .Params.githubrepo}} + github repository : <a href="{{.}}">{{.}}</a> + {{end}} + {{.TableOfContents}} + {{.Content}} + {{if ne .Section ""}} + <div class="nav-next-prev"> + <div class="nav-prev"> + {{with .PrevInSection}} + <a href="{{.Permalink}}"><i class="fas fa-chevron-left"></i></a> + {{else}} + <a class="grayed-out" href="javascript:void()"><i class="fas fa-chevron-left"></i></a> + {{end}} + </div> + <a class="nav-top" href="#">top</i></a> + <div class="nav-next"> + {{with .NextInSection}} + <a href="{{.Permalink}}"><i class="fas fa-chevron-right"></i></a> + {{else}} + <a class="grayed-out" href="javascript:void()"><i class="fas fa-chevron-right"></i></a> + {{end}} + </div> + </div> + {{end}} +{{end}}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..1ac5c02 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,45 @@ +{{define "main"}} + {{if .Site.Params.displayRecent }} + <div class="section"> + <div class="section-title">recent</div> + {{range first .Site.Params.recentMax (where .Site.RegularPages "Section" "ne" "posts")}} + <div class="list-item"> + <a class="entry-title" href="{{ .URL }}">{{ .Title }}</a> + {{$page := .}} + {{with .Description}} + <p>{{.}}</p> + {{end}} + <div class="meta"> + {{with .Date}} + <i class="far fa-calendar-alt"></i> {{.Format "Jan 2 2006"}} + {{end}} + <br> + {{with .Params.tags}} + <i class="fas fa-tags"></i> + Tags: {{ delimit . ", " }} + {{end}} + </div> + </div> + {{end}} + </div> + {{end}} + + {{if .Site.Params.displayMicroBlog}} + <div class="section"> + <div class="section-title">μblog</div> + <div class="posts"> + {{ range where site.RegularPages "Type" "in" site.Params.microBlogSection}} + <div class="post"> + {{if ne .Params.pinned nil}} + <div class="meta pinned"> <i class="fas fa-thumbtack"></i> pinned </div> + {{end}} + <div class="post-content"> + {{.Content}} + </div> + <div class="meta post-footer"> <span>{{.Date.Format "Jan 2 2006 03:04 UTC-07"}}</span> <a href="{{.URL}}"><i class="fas fa-link"></i> link</a></div> + </div> + {{ end }} + </div> + </div> + {{end}} +{{end }}
\ No newline at end of file diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html new file mode 100644 index 0000000..8f5d674 --- /dev/null +++ b/layouts/partials/aside.html @@ -0,0 +1,23 @@ +<aside id="sidenav"> + <header> + <a href="{{ .Site.BaseURL }}"><img src="/avatar.png" alt="avatar"></a> + <a id="branding" href="{{ .Site.BaseURL }}">{{ .Site.Params.author | safeHTML }}</a> + </header> + + <nav> + {{ range .Site.Menus.main }} + {{ $url := urls.Parse .URL }} + <a href="{{ $url }}" + {{ if ne $url.Host ""}} + target="_blanck" + {{end}} + > + {{ .Pre }} + <span>{{ .Name }}</span> + </a> + {{end}} + <a href="/contact" > + <i class="far fa-envelope"></i> + <span>contact</span> + </a> +</aside> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..d8a3186 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,13 @@ +<footer> +<div class="contact-info"> + {{with .Site.Params.mail}} + <div class="footer-mail"> + <i class="far fa-envelope"></i> <a href="mailto:{{.}}">{{.}}</a> </div> + {{end}} + {{with .Site.Params.phone}} + <div class="footer-phone"> + <i class="fas fa-phone"></i> {{.}} + </div> + {{end}} +</div> +</footer>
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..f2485de --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,17 @@ +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + {{with .Site.Params.description -}} + <meta name="description" content="{{.}}"> + {{ end }} + {{- with .Site.Params.author -}} + <meta name="Author" content="{{.}}"> + {{ end }} + {{- with .Site.Params.keywords -}} + <meta name="keywords" content="{{.}}"> + {{ end -}} + <link rel="stylesheet" href="/css/syntax.css"> + <link rel="stylesheet" href="/css/style.css"> + <script src="https://kit.fontawesome.com/1b7478c139.js" crossorigin="anonymous"></script> + <title>{{ .Site.Title }}</title> + </head>
\ No newline at end of file diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html new file mode 100644 index 0000000..ade324c --- /dev/null +++ b/layouts/shortcodes/contact.html @@ -0,0 +1,12 @@ +{{with .Site.Params.formspreeID}} +<form class="contact-form" +action="https://formspree.io/{{.}}" +method="POST" +> + <input id="name" type="text" name="name" placeholder="Your Name"> + <input id="mail" type="text" name="_replyto" placeholder="Your Mail"> + <textarea id="message" name="message" placeholder="Your message"></textarea> + +<button class="reach-me-send" type="submit">Send</button> +{{end}} +</form>
\ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..32c4151 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,342 @@ +* { + scrollbar-color: #2a2c2e #1c1e1f; +} + +::-webkit-scrollbar { + background-color: #1C1E1F; +} + +::-webkit-scrollbar-thumb{ + background-color: #2A2C2E; +} + +::-webkit-scrollbar-corner { + background-color: rgb(24, 24, 24); +} + +html, body { + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; + font-size: 17px; + line-height: 1.6; + height: 100%; + margin: 0px; + background-color:#1A1C1D; + color : #D8D6D0; +} + +a { + text-decoration: none; + color: #389DFF; +} + +a:hover { + text-decoration: underline; +} + +aside { + background-color:rgb(45, 49, 51); + height: 100%; + width: 200px; + z-index: 1; + top: 0; + left: 0; + overflow-y: auto; + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + border-right: 1px solid #3D3D3D; + transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */ +} + +aside a { + color:rgb(238, 238, 238); +} + +aside i[class^="fa"]{ + padding: 0em 0.4em 0em 0em; +} + +aside header { + background-color:#23282E; + text-align: center; + display: flex; + align-items: center; + width: 100%; + flex-direction: column; + border-bottom: 1px solid #3D3D3D; +} + +aside header img{ + margin-top: 20px; + min-width: 150px; + max-width: 150px; + border-radius: 5px; + +} + +aside a:hover { + text-decoration: none; +} + +aside nav { + list-style: none; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0px 0px 0px; + margin: 0px; +} + +aside nav a { + padding: 10px 0%; + width: 100%; + min-height: 30px; + overflow-x: hidden; + overflow-y: auto; + white-space: nowrap; + text-align: center; + transition: 0.2s; +} + +aside nav a:hover { + background-color:rgb(48, 75, 102); +} + +#branding { + font-size: 32px; + margin-top: 10px; + margin-bottom: 20px; + color: #E8E8E8; +} + +#npq{ + color: #BFBFBF; +} + +#closebtn { + transition: 0.3s; + border-radius: 7px; + position: fixed; + left: 200px; + top: 0px; + padding: 10px; + color:rgba(238, 238, 238, 0.664); + background-color: rgba(61, 61, 61, 0.555); +} + +.list-item { + border: 1px solid #3D3D3D; + border-radius: 3px; + padding: 10px; + background-color:#181B1C; +} +.list-item+.list-item{ + margin-top: 10px; +} + +.entry-title { + font-size: large; + font-weight: bold; +} + +.list-item p { + margin: 5px 0px; +} + +.meta { + color: rgb(156, 151, 143); + font-size: small; +} + +main { + display: flex; + flex-direction: column; + margin-left: 200px; + padding: 0px; + height: 100%; + transition: 0.3s; +} + +#random-meme{ + font-size: 20px; +} + +button{ + padding: 15px 32px; + border: none; + margin: 5px; + font-size: 16px; + color: white; +} + +.button-red { + background-color: #AD1810; +} + +.button-green { + background-color: #206D38; +} + +.content { + width : 90%; + margin:0px auto auto auto; + word-break: break-word; +} + +h1, h2, h3 { + border-bottom: 1px solid #3D3D3D; +} +#title { + text-align: center; + margin: 20px; + padding-bottom: 5px; +} +.spacer{ + height: 50px; +} + +/* code */ +pre { + overflow: auto; + background-color: #2C2F30; + font-size: 16px; + padding: 5px; +} + +img { + max-width: 100%; +} + +blockquote { + border-left: 10px solid #2C2C2C; + padding-left: 10px; +} + +.pinned { + color: #EAD94C; +} + +.posts { + border: 1px solid #3D3D3D; +} + +.post { + padding: 10px; +} + +.post+.post { + border-top: 1px solid #3D3D3D; +} + + +.post p{ + margin:4px 0px; +} + +.post-footer{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.section{ + display:flex; + flex-direction: column; +} + +.section-title{ + margin: 20px; + font-size: 25px; + text-align: center; +} + +.nav-next-prev { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + font-size: 30px; + margin-top: 50px; + padding-top: 30px; + border-top: 1px solid #3D3D3D; +} +.nav-top:hover{ + text-decoration: none; +} + +.grayed-out { + color: rgb(70, 69, 69) ; +} + +footer{ + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 30px; + margin-top: 40px; + border-top: 1px solid #3D3D3D; + background-color:rgb(30, 34, 39) ; +} + +.contact-form { + display: flex; + flex-direction: column; + /* background-color:#1C1E1F; */ + align-items: flex-start; + border-radius: 3px; + padding: 10px; +} + +.contact-form input, .contact-form button, .contact-form textarea { + color : #D8D6D0; + background-color:#181A1B ; + border-radius: 3px; + border: 1px solid #3D3D3D; + padding: 10px; + margin: 10px; + height: 30px; + width: 50%; +} + +.contact-form textarea { + height: 200px; + width: 50%; +} + +.contact-form button{ + padding: 15px 32px; + height: auto; + width: auto; +} + +.contact-info { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +@media only screen and (max-width: 650px){ + #sidenav { + width: 0px; + } + #main { + margin-left: 0px; + } + #closebtn { + left:0px; + } + .content { + width : 95%; + margin:0px auto auto auto; + } +} + +@media only screen and (min-width: 1200px) { + .content { + width : 70%; + margin:0px auto auto auto; + } + +} diff --git a/static/css/syntax.css b/static/css/syntax.css new file mode 100644 index 0000000..7daa6d2 --- /dev/null +++ b/static/css/syntax.css @@ -0,0 +1,60 @@ +/* Background */ .chroma { color: #8a8a8a; background-color: #1c1c1c } +/* Other */ .chroma .x { color: #d75f00 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #454545 } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #454545 } +/* Keyword */ .chroma .k { color: #5f8700 } +/* KeywordConstant */ .chroma .kc { color: #d75f00 } +/* KeywordDeclaration */ .chroma .kd { color: #0087ff } +/* KeywordNamespace */ .chroma .kn { color: #d75f00 } +/* KeywordPseudo */ .chroma .kp { color: #5f8700 } +/* KeywordReserved */ .chroma .kr { color: #0087ff } +/* KeywordType */ .chroma .kt { color: #af0000 } +/* NameBuiltin */ .chroma .nb { color: #0087ff } +/* NameBuiltinPseudo */ .chroma .bp { color: #0087ff } +/* NameClass */ .chroma .nc { color: #0087ff } +/* NameConstant */ .chroma .no { color: #d75f00 } +/* NameDecorator */ .chroma .nd { color: #0087ff } +/* NameEntity */ .chroma .ni { color: #d75f00 } +/* NameException */ .chroma .ne { color: #af8700 } +/* NameFunction */ .chroma .nf { color: #0087ff } +/* NameTag */ .chroma .nt { color: #0087ff } +/* NameVariable */ .chroma .nv { color: #0087ff } +/* LiteralString */ .chroma .s { color: #00afaf } +/* LiteralStringAffix */ .chroma .sa { color: #00afaf } +/* LiteralStringBacktick */ .chroma .sb { color: #4e4e4e } +/* LiteralStringChar */ .chroma .sc { color: #00afaf } +/* LiteralStringDelimiter */ .chroma .dl { color: #00afaf } +/* LiteralStringDoc */ .chroma .sd { color: #00afaf } +/* LiteralStringDouble */ .chroma .s2 { color: #00afaf } +/* LiteralStringEscape */ .chroma .se { color: #af0000 } +/* LiteralStringHeredoc */ .chroma .sh { color: #00afaf } +/* LiteralStringInterpol */ .chroma .si { color: #00afaf } +/* LiteralStringOther */ .chroma .sx { color: #00afaf } +/* LiteralStringRegex */ .chroma .sr { color: #af0000 } +/* LiteralStringSingle */ .chroma .s1 { color: #00afaf } +/* LiteralStringSymbol */ .chroma .ss { color: #00afaf } +/* LiteralNumber */ .chroma .m { color: #00afaf } +/* LiteralNumberBin */ .chroma .mb { color: #00afaf } +/* LiteralNumberFloat */ .chroma .mf { color: #00afaf } +/* LiteralNumberHex */ .chroma .mh { color: #00afaf } +/* LiteralNumberInteger */ .chroma .mi { color: #00afaf } +/* LiteralNumberIntegerLong */ .chroma .il { color: #00afaf } +/* LiteralNumberOct */ .chroma .mo { color: #00afaf } +/* OperatorWord */ .chroma .ow { color: #5f8700 } +/* Comment */ .chroma .c { color: #4e4e4e } +/* CommentHashbang */ .chroma .ch { color: #4e4e4e } +/* CommentMultiline */ .chroma .cm { color: #4e4e4e } +/* CommentSingle */ .chroma .c1 { color: #4e4e4e } +/* CommentSpecial */ .chroma .cs { color: #5f8700 } +/* CommentPreproc */ .chroma .cp { color: #5f8700 } +/* CommentPreprocFile */ .chroma .cpf { color: #5f8700 } +/* GenericDeleted */ .chroma .gd { color: #af0000 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #af0000; font-weight: bold } +/* GenericHeading */ .chroma .gh { color: #d75f00 } +/* GenericInserted */ .chroma .gi { color: #5f8700 } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #0087ff } diff --git a/static/js/navbutton.js b/static/js/navbutton.js new file mode 100644 index 0000000..588b78c --- /dev/null +++ b/static/js/navbutton.js @@ -0,0 +1,25 @@ +function navToggle() { + isNavOpen() ? navClose() : navOpen(); + } + + /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ +function isNavOpen() { + navStyle = window.getComputedStyle(document.getElementById("sidenav")); + navWidth = navStyle.getPropertyValue('width') + return ( navWidth !== "0px" ) && (navWidth !== ""); +} + +function navOpen(){ + let navWidth = "200px" + document.getElementById("sidenav").style.width = navWidth; + document.getElementById("closebtn").style.left= navWidth; + if (! window.matchMedia("(max-width: 650px)").matches){ + document.getElementById("main").style.marginLeft = navWidth; + } +} + +function navClose(){ + document.getElementById("sidenav").style.width = "0px"; + document.getElementById("main").style.marginLeft = "0px"; + document.getElementById("closebtn").style.left= "0px"; +}
\ No newline at end of file |