updated blog with new layout

This commit is contained in:
Jacob 2021-03-09 21:10:26 +01:00
parent addaa17a98
commit 7d230eb7d5
4 changed files with 74 additions and 32 deletions

View File

@ -11,7 +11,9 @@ html, body {
} }
.title { .title {
padding: 20px; //padding: 20px;
justify-content: flex-end;
color: #ff8f00;
} }
.title:hover { .title:hover {
@ -57,10 +59,12 @@ article {
h1 { h1 {
letter-spacing: 5px; letter-spacing: 5px;
margin-right: -5px;
font-size: 40px; font-size: 40px;
//color: #97c5e0; //color: #97c5e0;
color: #506692; color: #506692;
text-align: center; text-align: right;
justify-content: flex-end;
padding-top: 30px; padding-top: 30px;
} }
@ -104,13 +108,20 @@ ul {
//color: #97c5e0; //color: #97c5e0;
} }
.menu{ .section{
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: 20px; padding-bottom: 20px;
color: #35465D; color: #35465D;
} }
.menu{
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
color: #35465D;
}
.menuselect{ .menuselect{
color: #529ecc; color: #529ecc;
} }
@ -118,6 +129,7 @@ ul {
.menuElement{ .menuElement{
border: 20px; border: 20px;
padding: 10px; padding: 10px;
padding-right: 0px;
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
} }
@ -125,7 +137,6 @@ ul {
.menuElement:hover { .menuElement:hover {
//background-color: #687fad; //background-color: #687fad;
color: lightblue; color: lightblue;
background-color: #d6e2fa;
} }
.bottomMenu { .bottomMenu {
@ -147,15 +158,28 @@ ul {
//background-color: #d6e2fa; //background-color: #d6e2fa;
} }
#menu ul{ #section ul>li{
display: block; display: block;
margin: auto; margin: auto;
float: center; float: center;
text-align: right;
list-style: none;
}
#section li{
display: inline-block;
vertical-align: top;
}
#menu ul{
//display: block;
margin: auto;
float: center;
text-align: center; text-align: center;
list-style: none; list-style: none;
} }
#menu li{ #menu li{
display: inline-block; //display: inline-block;
} }

View File

@ -7,18 +7,23 @@
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<h1><a class="title" href="/" style="text-decoration: none; color: inherit">{{.Title}}</a></h1> <div class="section">
<ul id="section">
<li>
<h1><a class="title" href="/" style="text-decoration: none;">{{.Title}}</a></h1>
<div class="tagline"> <div class="tagline">
<p style="text-indent: 0;">Develop games, play games, talk games</p> <p style="text-indent: 0;">Develop games, play games, talk games</p>
</div> </div>
<div class="menu"> <div class="menu">
<ul id="menu"> <ul id="menu">
<li><a class={{if eq .CurrentPage "blog"}}"menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/">blog</a></li> <!-- <li><a class={{if eq .CurrentPage "blog"}} "menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/">blog</a></li> -->
<li><a class={{if eq .CurrentPage "about"}}"menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/about">about</a></li> <li><a class={{if eq .CurrentPage "past"}} "menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/past">past</a></li>
<li><a class={{if eq .CurrentPage "past"}}"menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/past">past</a></li> <li><a class={{if eq .CurrentPage "about"}} "menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/about">about</a></li>
<li><a class={{if eq .CurrentPage "contact"}}"menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/contact">contact</a></li> <li><a class={{if eq .CurrentPage "contact"}} "menuselect menuElement no-link"{{else}}"menuElement no-link"{{end}} href="/contact">contact</a></li>
</ul> </ul>
</div> </div>
</li>
<li>
<div class="contents"> <div class="contents">
{{if eq .CurrentPage "blog"}} {{if eq .CurrentPage "blog"}}
<article class="posts">{{template "content" .}}</article> <article class="posts">{{template "content" .}}</article>
@ -30,6 +35,9 @@
<div>{{template "contact" .}}</div> <div>{{template "contact" .}}</div>
{{end}} {{end}}
</div> </div>
</li>
</ul>
</div>
</body> </body>
</html> </html>
{{end}} {{end}}

View File

@ -1,9 +1,17 @@
{{define "past"}} {{define "past"}}
<article class="post"> <article class="post">
<ul style="list-style: none;"> <ul style="width: max-content; list-style: none;">
{{with .Posts}} {{with .Posts}}
{{range .}} {{range .}}
<li><a class="no-link" style="text-decoration: none; color: inherit" href="/post/{{.URLTitle}}"><b>{{.Title}}</b></a> - {{.NormalDate}}</li>{{end}}{{end}} <li>
<div style="display: flex; justify-content: space-between; ">
<div style="padding-right: 20px">
<a class="no-link" style="text-decoration: none; color: inherit" href="/post/{{.URLTitle}}"><b>{{.Title}}</b></a>
</div>
<div>
{{.NormalDate}}
</div>
</div>{{end}}{{end}}
</ul> </ul>
</article> </article>
{{end}} {{end}}

View File

@ -28,7 +28,8 @@ func main() {
http.HandleFunc("/past/", pastHandler) http.HandleFunc("/past/", pastHandler)
http.HandleFunc("/contact/", contactHandler) http.HandleFunc("/contact/", contactHandler)
http.HandleFunc("/post/", postHandler) http.HandleFunc("/post/", postHandler)
http.HandleFunc("/", blogHandler) http.HandleFunc("/", pastHandler)
//http.HandleFunc("/", blogHandler)
http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.Dir("images")))) http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.Dir("images"))))
http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("css")))) http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("css"))))
@ -64,7 +65,8 @@ func blogHandler(w http.ResponseWriter, req *http.Request) {
length := len(posts) length := len(posts)
posts = posts[:3] posts = posts[:3]
//posts = getNewestPosts(3) //posts = getNewestPosts(3)
page := Page{name, posts, "blog"} page := Page{name, posts, "past"}
//page := Page{name, posts, "blog"}
renderTemplates(w, page) renderTemplates(w, page)
posts = posts[:length] posts = posts[:length]
} }