initial commit

This commit is contained in:
saadnpq 2020-04-11 13:28:48 +02:00
commit 1bff7cc487
13 changed files with 614 additions and 0 deletions

4
content/contact.md Normal file
View file

@ -0,0 +1,4 @@
---
title: get in touch
---
{{<contact>}}

3
layouts/404.html Normal file
View file

@ -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}}

View file

@ -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>

View file

@ -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}}

View file

@ -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}}

45
layouts/index.html Normal file
View file

@ -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 }}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

342
static/css/style.css Normal file
View file

@ -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;
}
}

60
static/css/syntax.css Normal file
View file

@ -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 }

25
static/js/navbutton.js Normal file
View file

@ -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";
}