initial commit
This commit is contained in:
saadnpq
commit
1bff7cc487
13 changed files with 614 additions and 0 deletions
4
content/contact.md
Normal file
4
content/contact.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: get in touch
|
||||
---
|
||||
{{<contact>}}
|
||||
3
layouts/404.html
Normal file
3
layouts/404.html
Normal 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}}
|
||||
15
layouts/_default/baseof.html
Normal file
15
layouts/_default/baseof.html
Normal 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>
|
||||
24
layouts/_default/list.html
Normal file
24
layouts/_default/list.html
Normal 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}}
|
||||
31
layouts/_default/single.html
Normal file
31
layouts/_default/single.html
Normal 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
45
layouts/index.html
Normal 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 }}
|
||||
23
layouts/partials/aside.html
Normal file
23
layouts/partials/aside.html
Normal 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>
|
||||
13
layouts/partials/footer.html
Normal file
13
layouts/partials/footer.html
Normal 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>
|
||||
17
layouts/partials/head.html
Normal file
17
layouts/partials/head.html
Normal 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>
|
||||
12
layouts/shortcodes/contact.html
Normal file
12
layouts/shortcodes/contact.html
Normal 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
342
static/css/style.css
Normal 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
60
static/css/syntax.css
Normal 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
25
static/js/navbutton.js
Normal 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";
|
||||
}
|
||||
Loading…
Reference in a new issue