Fixed header style again and added 'active' to navbar

This commit is contained in:
Sofia 2016-11-04 12:30:11 +02:00
parent 7a018bd536
commit 074020ced7
11 changed files with 69 additions and 46 deletions

View File

@ -18,9 +18,9 @@
<div class="stuffarea">
<ul class="navbar">
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="#" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="/" id="about-link"><li ><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li ><div class="button">Games</div></li></a>
<a href="#" id="blog-link"><li class="active"><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>

View File

@ -18,9 +18,9 @@
<div class="stuffarea">
<ul class="navbar">
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="/" id="about-link"><li ><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li ><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li ><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>

View File

@ -35,32 +35,42 @@ def generate_page(template, page):
rel_games = "/games"
rel_blog = "/blog"
about_hidden = 'class="hiddenarea"'
games_hidden = 'class="hiddenarea"'
blog_hidden = 'class="hiddenarea"'
blogtext_hidden = 'class="hiddenarea"'
about_class = 'class="hiddenarea"'
games_class = 'class="hiddenarea"'
blog_class = 'class="hiddenarea"'
blogtext_class = 'class="hiddenarea"'
about_btn_class = ''
games_btn_class = ''
blog_btn_class = ''
if (page == "about"):
rel_about = "#"
about_hidden = ""
about_class = ""
about_btn_class = 'class="active"'
elif (page == "games"):
rel_games = "#"
games_hidden = ""
games_class = ""
games_btn_class = 'class="active"'
elif (page == "blog"):
rel_blog = "#"
blog_hidden = ""
blog_class = ""
blog_btn_class = 'class="active"'
elif (page == "blogtext"):
rel_blogtext = "#"
blogtext_hidden = ""
blogtext_class = ""
content = content.replace("$relative_about$", rel_about);
content = content.replace("$relative_games$", rel_games);
content = content.replace("$relative_blog$", rel_blog);
content = content.replace("$about_is_hidden$", about_hidden);
content = content.replace("$games_is_hidden$", games_hidden);
content = content.replace("$blog_is_hidden$", blog_hidden);
content = content.replace("$blogtext_is_hidden$", blogtext_hidden);
content = content.replace("$about_class$", about_class);
content = content.replace("$games_class$", games_class);
content = content.replace("$blog_class$", blog_class);
content = content.replace("$blogtext_class$", blogtext_class);
content = content.replace("$about_btn_class$", about_btn_class);
content = content.replace("$games_btn_class$", games_btn_class);
content = content.replace("$blog_btn_class$", blog_btn_class);
return content;
def build_blogposts():

View File

@ -78,21 +78,21 @@ body, html {
.cont .stuffarea h6 {
margin: 0;
color: #ff0091; }
.cont .stuffarea .blogpost {
.cont .stuffarea h2.blogtitle {
padding: 0.5em;
color: #ff0091;
transition: 0.2s;
margin: 0; }
.cont .stuffarea h2.blogtitle:hover {
cursor: pointer;
background-color: #191919;
transition: 0.2s; }
.cont .stuffarea a {
color: #ff0091; }
.cont .stuffarea .timestamp {
color: #636363;
vertical-align: middle;
font-size: 15px; }
.cont .stuffarea h2:hover {
cursor: pointer;
background-color: #191919;
transition: 0.2s; }
.cont .stuffarea p {
color: #fff; }
.cont .stuffarea li {
@ -123,6 +123,10 @@ body, html {
background-color: #303030;
transition: 0.2s;
cursor: pointer; }
.cont .stuffarea ul.navbar li.active {
background-color: #252525; }
.cont .stuffarea ul.navbar li.active:hover {
background-color: #363636; }
noscript {
color: #fff; }

View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": ["../scss/main.scss"],
"names": [],
"file": "main.css"

View File

@ -18,9 +18,9 @@
<div class="stuffarea">
<ul class="navbar">
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="#" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="/" id="about-link"><li ><div class="button">About</div></li></a>
<a href="#" id="games-link"><li class="active"><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li ><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>

View File

@ -18,9 +18,9 @@
<div class="stuffarea">
<ul class="navbar">
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="#" id="about-link"><li class="active"><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li ><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li ><div class="button">Blog</div></li></a>
</ul>
<div id="about" >
<h1>Teascade</h1>

View File

@ -28,10 +28,12 @@ function openPage(page, new_url, renew_history) {
return;
}
slideOpacity(function () {
document.getElementById(window.currPage + "-link").children[0].className = "";
document.getElementById(window.currPage).className = "hiddenarea";
window.currPage = page;
document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = "";
document.getElementById(page + "-link").children[0].className = "active";
var target = new_url || page;
var targetPg = "/" + target;
if (target == "about") {

View File

@ -95,14 +95,17 @@ body, html {
}
}
.blogpost {
h2.blogtitle {
padding: 0.5em;
color: $pink;
transition: 0.2s;
margin: 0;
}
p {
}
h2.blogtitle:hover {
cursor: pointer;
background-color: $dark - #060606;
transition: 0.2s;
}
a {
@ -115,12 +118,6 @@ body, html {
font-size: 15px;
}
h2:hover {
cursor: pointer;
background-color: $dark - #060606;
transition: 0.2s;
}
p {
color: $regular;
}
@ -164,6 +161,14 @@ body, html {
transition: 0.2s;
cursor: pointer;
}
li.active {
background-color: $dark + #060606;
}
li.active:hover {
background-color: $dark + #060606 + #111;
}
}
}
}

View File

@ -18,20 +18,20 @@
<div class="stuffarea">
<ul class="navbar">
<a href="$relative_about$" id="about-link"><li><div class="button">About</div></li></a>
<a href="$relative_games$" id="games-link"><li><div class="button">Games</div></li></a>
<a href="$relative_blog$" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="$relative_about$" id="about-link"><li $about_btn_class$><div class="button">About</div></li></a>
<a href="$relative_games$" id="games-link"><li $games_btn_class$><div class="button">Games</div></li></a>
<a href="$relative_blog$" id="blog-link"><li $blog_btn_class$><div class="button">Blog</div></li></a>
</ul>
<div id="about" $about_is_hidden$ >
<div id="about" $about_class$ >
$about_content$
</div>
<div id="games" $games_is_hidden$ >
<div id="games" $games_class$ >
$games_content$
</div>
<div id="blog" $blog_is_hidden$ >
<div id="blog" $blog_class$ >
$blog_content$
</div>
<div id="blogtext" $blogtext_is_hidden$ >
<div id="blogtext" $blogtext_class$ >
<noscript>
<p>Oh sorry, it looks like someone sent you a link to a blogtext (or something), but you don't have javascript enabled!</p>
<p>Sorry to be the one to break the bad news for you, but we don't take javascript-absolutists kindly this 'round 'o town. So if you could kindly just press that "About" button and forget this ever happened, yeah?</p>

View File

@ -41,10 +41,12 @@ function openPage(page: string, new_url: string = null, renew_history=true) {
if (page == window.currPage) { return; }
slideOpacity(() => {
document.getElementById(window.currPage + "-link").children[0].className = ""
document.getElementById(window.currPage).className = "hiddenarea";
window.currPage = page;
document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = "";
document.getElementById(page + "-link").children[0].className = "active"
let target = new_url || page;
let targetPg = "/" + target;
if (target == "about") { target = ""; targetPg = ""; };