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