usability fixes see brainbaking
This commit is contained in:
parent
874aade0cf
commit
b30cd2545e
|
@ -5,7 +5,7 @@ html
|
||||||
font-size: 1.15rem
|
font-size: 1.15rem
|
||||||
|
|
||||||
|
|
||||||
body, h1, h2, h3, h4, .content-column-content p, .content-column-content li, .box-masonry .box-masonry-text p
|
body, h1, h2, h3, h4, article p, article li, .box-masonry .box-masonry-text p
|
||||||
color: var(--textcolor)
|
color: var(--textcolor)
|
||||||
|
|
||||||
body
|
body
|
||||||
|
@ -134,7 +134,7 @@ a.external
|
||||||
font-size: 0.9em
|
font-size: 0.9em
|
||||||
|
|
||||||
|
|
||||||
.content-column-content
|
article
|
||||||
img
|
img
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
border: 1px solid black
|
border: 1px solid black
|
||||||
|
@ -164,6 +164,7 @@ a.external
|
||||||
a, .box-masonry h4 a
|
a, .box-masonry h4 a
|
||||||
color: var(--textlink)
|
color: var(--textlink)
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
border-bottom: 1px solid darkgrey
|
||||||
|
|
||||||
a:hover, .box-masonry h4 a:hover
|
a:hover, .box-masonry h4 a:hover
|
||||||
color: var(--textlink)
|
color: var(--textlink)
|
||||||
|
@ -220,9 +221,32 @@ a:hover, .box-masonry h4 a:hover
|
||||||
|
|
||||||
|
|
||||||
.categories
|
.categories
|
||||||
color: var(--accent)
|
color: var(--textlinktag)
|
||||||
|
|
||||||
kbd
|
kbd
|
||||||
padding: 0.2rem 0.5rem 0.2rem 0.5rem
|
padding: 0.2rem 0.5rem 0.2rem 0.5rem
|
||||||
background-color: var(--bgdark)
|
background-color: var(--bgdark)
|
||||||
color: var(--accent)
|
color: var(--textlinktag)
|
||||||
|
|
||||||
|
#skiptocontent
|
||||||
|
a
|
||||||
|
z-index: 99
|
||||||
|
padding: 6px
|
||||||
|
position: absolute
|
||||||
|
top: -50px
|
||||||
|
left: 0px
|
||||||
|
color: white
|
||||||
|
border 1px solid white
|
||||||
|
border-top-right-radius: 8px
|
||||||
|
border-bottom-right-radius: 8px
|
||||||
|
background: black
|
||||||
|
-webkit-transition: top 1s ease-out
|
||||||
|
transition: top 1s ease-out
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
position: absolute
|
||||||
|
left: 0px
|
||||||
|
top: 0px
|
||||||
|
outline-color: transparent
|
||||||
|
-webkit-transition: top .1s ease-in
|
||||||
|
transition: top .1s ease-in
|
||||||
|
|
|
@ -4,4 +4,5 @@ html
|
||||||
--bgdarker: #e6ecb2
|
--bgdarker: #e6ecb2
|
||||||
--bgdark: #d7d7a3
|
--bgdark: #d7d7a3
|
||||||
--textcolor: #363636
|
--textcolor: #363636
|
||||||
--textlink: #c7532d
|
--textlink: #b74a27
|
||||||
|
--textlinktag: #5d5c43
|
||||||
|
|
|
@ -3,10 +3,10 @@
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
{{ partial "mobile_nav_toggle.html" . }}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<div class="content-column-content">
|
<article>
|
||||||
<h1>Page not found</h1>
|
<h1>Page not found</h1>
|
||||||
<p><a href="{{ .Site.BaseURL }}">Return to the home page</a>.</p>
|
<p><a href="{{ .Site.BaseURL }}">Return to the home page</a>.</p>
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a name="top" id="top"></a>
|
<div id="skiptocontent">
|
||||||
|
<a href="#top">skip to main content</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ with .OutputFormats.Get "RSS" }}
|
{{ with .OutputFormats.Get "RSS" }}
|
||||||
<a href="{{ .RelPermalink }}" id="csslink" target="_blank">
|
<a href="{{ .RelPermalink }}" id="csslink" target="_blank">
|
||||||
|
@ -15,8 +17,11 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row row-offcanvas row-offcanvas-left">
|
<div class="row row-offcanvas row-offcanvas-left">
|
||||||
{{ partial "sidebar.html" . }}
|
{{ partial "sidebar.html" . }}
|
||||||
{{ block "main" . }}
|
<a name="top" id="top"></a>
|
||||||
{{ end }}
|
<main>
|
||||||
|
{{ block "main" . }}
|
||||||
|
{{ end }}
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,8 +4,9 @@
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
{{ partial "mobile_nav_toggle.html" . }}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<div class="content-column-content">
|
<article>
|
||||||
|
|
||||||
|
<header>
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
<h5>
|
<h5>
|
||||||
<span style="color: grey;">
|
<span style="color: grey;">
|
||||||
|
@ -25,6 +26,7 @@
|
||||||
</span>
|
</span>
|
||||||
</h5>
|
</h5>
|
||||||
<hr/>
|
<hr/>
|
||||||
|
</header>
|
||||||
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
|
|
||||||
|
@ -37,9 +39,9 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
{{ if (not .Params.disableComments) }}
|
{{ if (not .Params.disableComments) }}
|
||||||
|
<hr/>
|
||||||
<h4 class="page-header"><i class="fa fa-comments-o"></i>
|
<h4 class="page-header"><i class="fa fa-comments-o"></i>
|
||||||
Join the Discussion
|
Join the Discussion
|
||||||
</h4>
|
</h4>
|
||||||
|
@ -54,7 +56,7 @@
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,13 +2,13 @@
|
||||||
<html lang="{{ .Site.LanguageCode }}">
|
<html lang="{{ .Site.LanguageCode }}">
|
||||||
<head>{{ partial "head.html" . }}</head>
|
<head>{{ partial "head.html" . }}</head>
|
||||||
<style>
|
<style>
|
||||||
.content-column-content ul li:before {
|
article ul li:before {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
.content-column-content h5 {
|
article h5 {
|
||||||
width: 15%;
|
width: 15%;
|
||||||
}
|
}
|
||||||
.content-column-content ul {
|
article ul {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -24,8 +24,10 @@
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
{{ partial "mobile_nav_toggle.html" . }}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
{{ .Content }}
|
<article>
|
||||||
<div class="content-column-content">
|
{{ .Content }}
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
<h3><a name="byarticle"></a>By Article</h3>
|
<h3><a name="byarticle"></a>By Article</h3>
|
||||||
<hr style="clear: both;"/>
|
<hr style="clear: both;"/>
|
||||||
|
@ -38,7 +40,7 @@
|
||||||
{{ partial "taglist.html" . }}
|
{{ partial "taglist.html" . }}
|
||||||
<hr style="clear: both;"/>
|
<hr style="clear: both;"/>
|
||||||
|
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,10 +3,10 @@
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
{{ partial "mobile_nav_toggle.html" . }}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<div class="content-column-content">
|
<article>
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<footer>
|
<footer>
|
||||||
<a style="cursor: pointer;" id="totop"><img src="/img/bg-back.gif" alt="to top" /></a>
|
<a style="cursor: pointer;" id="totop"><img src="/img/bg-back.gif" alt="back to top" /></a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -88,7 +88,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body, .content-column-content, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
body, article, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
font-family: '{{ .Site.Params.font }}', sans-serif !important;
|
font-family: '{{ .Site.Params.font }}', sans-serif !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,9 +4,9 @@
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<img src="/img/logo.png"/>
|
<img src="/img/logo.png"/>
|
||||||
{{ if eq .Paginator.PageNumber 1 }}
|
{{ if eq .Paginator.PageNumber 1 }}
|
||||||
<div class="content-column-content">
|
<article>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<h3>Featured Codex Articles
|
<h3>Featured Codex Articles
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ $url := .Site.BaseURL }}
|
{{ $url := .Site.BaseURL }}
|
||||||
|
|
||||||
<div class="sidebar col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
|
<nav class="sidebar col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
|
||||||
<div class="sidebar-content sidebar-scrolling">
|
<div class="sidebar-content sidebar-scrolling">
|
||||||
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||||
{{ range .Site.Params.sidebarAbout }}
|
{{ range .Site.Params.sidebarAbout }}
|
||||||
|
@ -18,9 +18,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style="position: relative;">
|
<p style="position: relative;">
|
||||||
<img src="{{ $url }}{{ .Params.image }}" alt="" class="img-responsive img-inactive" style="border: 1px solid black"/>
|
<img src="{{ $url }}{{ .Params.image }}" alt="game cover image" class="img-responsive img-inactive" style="border: 1px solid black"/>
|
||||||
{{ with .Params.imageActive }}
|
{{ with .Params.imageActive }}
|
||||||
<img src="{{ $url }}{{ . }}" alt="" class="img-responsive img-active" style="border: 1px solid black"/>
|
<img src="{{ $url }}{{ . }}" alt="game cover image active" class="img-responsive img-active" style="border: 1px solid black"/>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ with .Params.game_platform }}
|
{{ with .Params.game_platform }}
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>Related</span>
|
<span>Related</span>
|
||||||
<img src="/img/gob_purse.gif"/>
|
<img src="/img/gob_purse.gif" alt="related articles" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
|
@ -67,7 +67,7 @@
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>Latest</span>
|
<span>Latest</span>
|
||||||
<img src="/img/gob_letter.gif"/>
|
<img src="/img/gob_letter.gif" alt="latest articles" />
|
||||||
</div>
|
</div>
|
||||||
{{ with .Site.GetPage "section" "articles" }}
|
{{ with .Site.GetPage "section" "articles" }}
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
|
@ -86,7 +86,7 @@
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>Browsing</span>
|
<span>Browsing</span>
|
||||||
<img src="/img/gob_waypoint.gif"/>
|
<img src="/img/gob_waypoint.gif" alt="More information" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
{{ range .Site.Params.navlinks }}
|
{{ range .Site.Params.navlinks }}
|
||||||
|
@ -103,5 +103,5 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ $(function() {
|
||||||
offCanvas();
|
offCanvas();
|
||||||
|
|
||||||
function scrollThenFixSidebar() {
|
function scrollThenFixSidebar() {
|
||||||
var maxHeight = $('.sidebar-content').height() - $(window).height() + 40;
|
var maxHeight = $('.sidebar-content').height() - $(window).height();
|
||||||
$(document).on('scroll', function(e) {
|
$(document).on('scroll', function(e) {
|
||||||
var s = document.scrollingElement.scrollTop || $('html').scrollTop() || $('body').scrollTop();
|
var s = document.scrollingElement.scrollTop || $('html').scrollTop() || $('body').scrollTop();
|
||||||
if(s > maxHeight) {
|
if(s > maxHeight) {
|
||||||
|
@ -42,7 +42,7 @@ $(function() {
|
||||||
|
|
||||||
var addTargetBlankToExternalLinks = function() {
|
var addTargetBlankToExternalLinks = function() {
|
||||||
var host = (new URL(window.location.href)).hostname;
|
var host = (new URL(window.location.href)).hostname;
|
||||||
$('.content-column-content a').each(function() {
|
$('article a').each(function() {
|
||||||
var me = $(this);
|
var me = $(this);
|
||||||
var url = me.attr('href');
|
var url = me.attr('href');
|
||||||
if(url && url.startsWith('http') && url.indexOf(host) === -1) {
|
if(url && url.startsWith('http') && url.indexOf(host) === -1) {
|
||||||
|
@ -53,7 +53,7 @@ $(function() {
|
||||||
addTargetBlankToExternalLinks();
|
addTargetBlankToExternalLinks();
|
||||||
|
|
||||||
var enableLightboxOnClickImgInContent = function() {
|
var enableLightboxOnClickImgInContent = function() {
|
||||||
$('.content-column-content img').click(function(e) {
|
$('article img').click(function(e) {
|
||||||
var me = $(this);
|
var me = $(this);
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
me.data('remote', me.attr('src'));
|
me.data('remote', me.attr('src'));
|
||||||
|
|
Loading…
Reference in New Issue