From 1bff7cc487aa424fe69c22376ecb1da72d578f5e Mon Sep 17 00:00:00 2001
From: saadnpq <saadnpq@localhost.localdomain>
Date: Sat, 11 Apr 2020 13:28:48 +0200
Subject: [PATCH] initial commit

---
 content/contact.md              |   4 +
 layouts/404.html                |   3 +
 layouts/_default/baseof.html    |  15 ++
 layouts/_default/list.html      |  24 +++
 layouts/_default/single.html    |  31 +++
 layouts/index.html              |  45 +++++
 layouts/partials/aside.html     |  23 +++
 layouts/partials/footer.html    |  13 ++
 layouts/partials/head.html      |  17 ++
 layouts/shortcodes/contact.html |  12 ++
 static/css/style.css            | 342 ++++++++++++++++++++++++++++++++
 static/css/syntax.css           |  60 ++++++
 static/js/navbutton.js          |  25 +++
 13 files changed, 614 insertions(+)
 create mode 100644 content/contact.md
 create mode 100644 layouts/404.html
 create mode 100644 layouts/_default/baseof.html
 create mode 100644 layouts/_default/list.html
 create mode 100644 layouts/_default/single.html
 create mode 100644 layouts/index.html
 create mode 100644 layouts/partials/aside.html
 create mode 100644 layouts/partials/footer.html
 create mode 100644 layouts/partials/head.html
 create mode 100644 layouts/shortcodes/contact.html
 create mode 100644 static/css/style.css
 create mode 100644 static/css/syntax.css
 create mode 100644 static/js/navbutton.js
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
