sidebar redesign layout, js includes herwerken
This commit is contained in:
wgroeneveld
parent
ea25df6fde
commit
e61a74aaba
13
config.toml
13
config.toml
|
|
@ -9,6 +9,8 @@ enableEmoji = true
|
|||
# for .Lastmod to work with .GitInfo: --enableGitInfo https://gohugo.io/variables/git/
|
||||
enableGitInfo = true
|
||||
|
||||
summaryLength = 20
|
||||
|
||||
[Author]
|
||||
name = "Wouter Groeneveld"
|
||||
email = "wouter.groeneveld@gmail.com"
|
||||
|
|
@ -23,7 +25,7 @@ enableGitInfo = true
|
|||
description = "Retro game thoughts"
|
||||
copyright = "No © reserved - sharing is caring. <a href='https://github.com/wgroeneveld/jefklakscodex' target='_blank'>Hack away!</a><br/>An integral part of <a href='https://brainbaking.com/' target='_blank'>Brain Baking</a>."
|
||||
sidebarAbout = [
|
||||
"You’re looking at “The Codex”, a dedicated and highly opinionated website about nostalgic games that left a lasting impression on me."
|
||||
"You’re browsing “The Codex”, a dedicated and highly opinionated website about nostalgic games that left a lasting impression on me."
|
||||
]
|
||||
|
||||
# Nav links in the side bar
|
||||
|
|
@ -40,3 +42,12 @@ enableGitInfo = true
|
|||
name = "About the Codex"
|
||||
url = "about/"
|
||||
|
||||
[privacy]
|
||||
[privacy.googleAnalytics]
|
||||
anonymizeIP = true
|
||||
disable = false
|
||||
respectDoNotTrack = false
|
||||
useSessionStorage = false
|
||||
[privacy.youtube]
|
||||
disable = false
|
||||
privacyEnhanced = true
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
title = "Jefklak's Retro Gaming Codex"
|
||||
+++
|
||||
|
||||
**<i class='fa fa-book'></i> Codex | <i class='fa fa-comments'></i> Articles | <i class='fa fa-gamepad'></i> Guides | <i class='fa fa-newspaper-o'></i> Reviews.**
|
||||
<strong><i class='fa fa-book'></i> Codex | <i class='fa fa-comments'></i> Articles | <i class='fa fa-gamepad'></i> Guides | <i class='fa fa-newspaper-o'></i> Reviews.</strong>
|
||||
<hr/>
|
||||
|
||||
You're looking at Jefklak's (Retro [Game](/tags)) Codex, a dedicated and highly opinionated website about nostalgic games. A lovely mix between Nintendo handheld gaming love, '90s DOS games and old school PC RPGs that were an integral part of [my youth](/about). <br/>
|
||||
That healthy cocktail left a lasting impression - and netted me the Codex (and glasses). A lot of articles have been carefully restored from the black depths of the Jefklak Archive for your entertainment. As [Deckard Cain](https://www.youtube.com/watch?v=tAVVy_x3Erg) would have said it: **Stay Awhile and Listen**!
|
||||
That healthy cocktail left a lasting impression - and netted me the Codex (and glasses). A lot of articles have been carefully restored from the black depths of the Jefklak Archive for your entertainment. As [Deckard Cain](https://www.youtube.com/watch?v=tAVVy_x3Erg) would have said it:
|
||||
|
||||
> Stay Awhile and Listen!
|
||||
|
||||
#### Looking for something specific? [Browse the Appendix](/tags).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
+++
|
||||
showonlyimage = false
|
||||
draft = false
|
||||
imageActive = "gif/acnh.gif"
|
||||
image = "gif/acnh_still.gif"
|
||||
imageActive = "/img/games/ac/acgc.jpg"
|
||||
image = "/img/games/ac/acgc.jpg"
|
||||
date = "2020-05-24"
|
||||
title = "31 Animal Crossing GCN Features that (never?) returned"
|
||||
tags = ['Animal Crossing']
|
||||
game_name = 'Animal Crossing: New Horizons'
|
||||
Description = 'It is a fresh breeze indeed as the Island unfolds, buildings appear, and I sweat my ass off trying to collect enough lumber and clay to satisfy even the most grumpy of Tom Nooks. Welcome to the latest installment of Animal Crossing!'
|
||||
game_platform = 'switch'
|
||||
game_name = 'Animal Crossing'
|
||||
description = 'Which features from previous Animal Crossing games do you wish were present in the Switch one? Some features never made the jump to a new iteration. Let us take a closer look.'
|
||||
game_platform = 'gc'
|
||||
game_genre = 'Life sim'
|
||||
game_release_year = '2020'
|
||||
game_developer = 'Nintendo'
|
||||
|
|
@ -30,7 +30,7 @@ Jeff is still playing the original Gamecube version of Animal Crossing - anno 20
|
|||
- 12. **Cherry blossom festival** - Yes! It just passed in April.
|
||||
- 24. **Catching Wisp's spirits**. He's grateful and gives an item in exchange, but I can't remember which one it was... I might have sold it. Whoops.
|
||||
|
||||
[](https://www.jvgs.net/acblog/2018/05/25/31-features/#comment-7281)
|
||||
[](https://www.jvgs.net/acblog/2018/05/25/31-features/#comment-7281)
|
||||
|
||||
Too bad no statue will be built in New Horizons...
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ date = "2020-04-05"
|
|||
title = "Animal Crossing: New Horizons Adventure Blog"
|
||||
tags = ['Animal Crossing']
|
||||
game_name = 'Animal Crossing: New Horizons'
|
||||
Description = 'It is a fresh breeze indeed as the Island unfolds, buildings appear, and I sweat my ass off trying to collect enough lumber and clay to satisfy even the most grumpy of Tom Nooks. Welcome to the latest installment of Animal Crossing!'
|
||||
description = 'It is a fresh breeze indeed as the Island unfolds, buildings appear, and I sweat my ass off trying to collect enough lumber and clay to satisfy even the most grumpy of Tom Nooks. Welcome to the latest installment of Animal Crossing!'
|
||||
game_platform = 'switch'
|
||||
game_genre = 'Life sim'
|
||||
game_release_year = '2020'
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ date = "2006-10-01"
|
|||
title = "Animal Crossing: Wild World Adventure Blog"
|
||||
tags = ['Animal Crossing']
|
||||
game_name = 'Animal Crossing: Wild World'
|
||||
Description = 'It is a wild world indeed as the Acorn festival is about to start. Should I exchange some acorns ro net me a chair so I can gift Drift something for his birthday? What to do!'
|
||||
description = 'It is a wild world indeed as the Acorn festival is about to start. Should I exchange some acorns ro net me a chair so I can gift Drift something for his birthday? What to do!'
|
||||
game_platform = 'ds'
|
||||
game_genre = 'Life sim'
|
||||
game_release_year = '2005'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
+++
|
||||
title = "Jefklak's Codex: Appendix"
|
||||
+++
|
||||
<img src="/img/logo.png"/>
|
||||
|
||||
### Codex Appendix
|
||||
|
||||
|
||||
## Codex Appendix
|
||||
|
||||
Browse [by article](#byarticle) or [by tag](#bytag) (game).
|
||||
|
|
|
|||
|
|
@ -22,19 +22,19 @@
|
|||
|
||||
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
|
||||
{{ partial "mobile_nav_toggle.html" . }}
|
||||
{{ .Content }}
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
{{ .Content }}
|
||||
<div class="content-column-content">
|
||||
|
||||
<h4>By Article</h4>
|
||||
<h3><a name="byarticle"></a>By Article</h3>
|
||||
<hr style="clear: both;"/>
|
||||
|
||||
{{ with .Site.GetPage "section" "articles" }}
|
||||
{{ partial "articlelist.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<h4>By Tag</h4>
|
||||
<h3><a name="bytag"></a>By Tag</h3>
|
||||
{{ partial "taglist.html" . }}
|
||||
<hr style="clear: both;"/>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,17 @@
|
|||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
{{ with .Params.archived }}
|
||||
<kbd class="item-tag">Archived</kbd>
|
||||
{{ end }}
|
||||
{{ with .Description }}
|
||||
<br/>{{ . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<br/>
|
||||
{{- if isset .Params "description" }}
|
||||
{{ with .Description }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{- else }}
|
||||
{{ with .Summary }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<!-- hugo doesn't provide extra settings like anonymizeIp ... -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', '{{ .Site.GoogleAnalytics}}', 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='//www.google-analytics.com/analytics.js'></script>
|
||||
|
|
@ -120,4 +120,6 @@ body, .content-column-content, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5,
|
|||
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="Jefklak's Codex" />
|
||||
<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="Jefklak's Codex" />
|
||||
{{ end }}
|
||||
{{ partial "google-analytics-anonymous.html" . }}
|
||||
{{- if (ne hugo.Environment "development") }}
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -42,12 +42,6 @@
|
|||
{{ end }}
|
||||
|
||||
<hr/>
|
||||
<h3>Looking for more?</h3>
|
||||
|
||||
<a href="/tags">Browse the Appendix</a><br/>
|
||||
<a href="/about">About the Codex</a>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@
|
|||
<!-- built-in theme scripts -->
|
||||
<script src="{{ "js/jquery.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/bootstrap.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/jquery.cookie.js" | absURL }}"> </script>
|
||||
<script src="{{ "js/ekko-lightbox.js" | absURL }}"></script>
|
||||
<script src="{{ "js/jquery.scrollTo.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/masonry.pkgd.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/imagesloaded.pkgd.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/owl.carousel.min.js" | absURL }}"></script>
|
||||
<script src="{{ "js/front.js" | absURL }}"></script>
|
||||
<!-- custom stuff -->
|
||||
|
||||
<script src="{{ "js/codex.js" | absURL }}"></script>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,13 @@
|
|||
{{ $url := .Site.BaseURL }}
|
||||
|
||||
<div id="sidebar" class="col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-content sidebar-scrolling">
|
||||
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||
{{ range .Site.Params.sidebarAbout }}
|
||||
<p class="sidebar-p">{{ . | safeHTML }}</p>
|
||||
{{ end }}
|
||||
|
||||
<div class="sidebar-header">
|
||||
<span>Latest</span>
|
||||
<img src="/img/gob_letter.gif"/>
|
||||
</div>
|
||||
{{ with .Site.GetPage "section" "articles" }}
|
||||
<ul class="sidebar-menu">
|
||||
{{ range first 10 .Data.Pages.ByDate.Reverse }}
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "01/2006") | $.Scratch.Set "subtitle" }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
<span class="sidebar-date">
|
||||
<i class='fa fa-calendar'></i>
|
||||
{{ $.Scratch.Get "subtitle" }}
|
||||
</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
<div class="sidebar-header">
|
||||
<span>Browsing</span>
|
||||
<img src="/img/gob_waypoint.gif"/>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
{{ range .Site.Params.navlinks }}
|
||||
<li><a href="{{ $url }}{{ .url }}">{{ .name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
{{ if and (isset .Params "image") .Params.image }}
|
||||
<hr/>
|
||||
<div class="sidebar-game-info">
|
||||
<div class="sidebar-header">
|
||||
{{ with .Params.game_name }}
|
||||
|
|
@ -69,11 +39,10 @@
|
|||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
<hr/>
|
||||
{{ end }}
|
||||
|
||||
<!-- ripped from BB's minimal theme -->
|
||||
{{ $related := first 3 (where (where (where .Site.Pages.ByDate.Reverse ".Type" "==" "articles") ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
||||
{{ $related := first 4 (where (where (where .Site.Pages.ByDate.Reverse ".Type" "==" "articles") ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
||||
|
||||
{{ if $related }}
|
||||
|
||||
|
|
@ -92,9 +61,39 @@
|
|||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<hr/>
|
||||
|
||||
{{ end }}
|
||||
|
||||
<div class="sidebar-header">
|
||||
<span>Latest</span>
|
||||
<img src="/img/gob_letter.gif"/>
|
||||
</div>
|
||||
{{ with .Site.GetPage "section" "articles" }}
|
||||
<ul class="sidebar-menu">
|
||||
{{ range first 10 .Data.Pages.ByDate.Reverse }}
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "01/2006") | $.Scratch.Set "subtitle" }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
<span class="sidebar-date">
|
||||
<i class='fa fa-calendar'></i>
|
||||
{{ $.Scratch.Get "subtitle" }}
|
||||
</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
<div class="sidebar-header">
|
||||
<span>Browsing</span>
|
||||
<img src="/img/gob_waypoint.gif"/>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
{{ range .Site.Params.navlinks }}
|
||||
<li><a href="{{ $url }}{{ .url }}">{{ .name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="copyright">
|
||||
<p class="credit">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,45 @@
|
|||
/***
|
||||
* root changes
|
||||
***/
|
||||
|
||||
:root {
|
||||
--accent: #a6a57c;
|
||||
--bglight: #f1f4dd;
|
||||
--bgdarker: #e6ecb2;
|
||||
--bgdark: #d7d7a3;
|
||||
--textcolor: #363636;
|
||||
--textlink: #c7532d;
|
||||
}
|
||||
|
||||
/** commento specific **/
|
||||
html {
|
||||
font-size: 1.0rem
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4,
|
||||
.content-column-content p, .content-column-content li, .box-masonry .box-masonry-text p {
|
||||
color: var(--textcolor);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bglight);
|
||||
line-height: 1.7;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
body {
|
||||
font-size: inherit;
|
||||
}
|
||||
html {
|
||||
font-size: 1.15rem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***
|
||||
* commento specific
|
||||
***/
|
||||
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
|
||||
.commento-root .commento-round-check input[type=radio]:checked+label:before {
|
||||
background: var(--accent) !important;
|
||||
|
|
@ -49,13 +86,10 @@
|
|||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
.commento-name {
|
||||
font-size: 14pt !important;
|
||||
}
|
||||
|
||||
.commento-root .commento-card .commento-body p,
|
||||
.commento-root textarea {
|
||||
font-size: 12pt !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.commento-root *,
|
||||
|
|
@ -65,18 +99,47 @@
|
|||
text-align: left !important;
|
||||
}
|
||||
|
||||
.commento-root .commento-card .commento-name {
|
||||
font-size: 14pt !important;
|
||||
.commento-root .commento-card .commento-name, .commento-name {
|
||||
font-size: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
/* pm wiki conversion styles */
|
||||
|
||||
/***
|
||||
* pmwiki conversion styles
|
||||
***/
|
||||
.rfloat {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* hugo theme custom stuff */
|
||||
|
||||
/***
|
||||
* hugo theme custom stuff
|
||||
***/
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -85,31 +148,30 @@ ul, ol {
|
|||
blockquote {
|
||||
font-size: inherit;
|
||||
font-style: italic;
|
||||
border-left: 5px solid #c7532d;
|
||||
border-left: 5px solid var(--accent);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
button {
|
||||
background-color: var(--accent) !important;
|
||||
color: white !important;
|
||||
border-color: darkgrey !important;
|
||||
}
|
||||
|
||||
.small-navbar button {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
margin-top: -1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
img.full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f1f4dd;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.content-column-content {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
#csslink {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -118,7 +180,7 @@ body {
|
|||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
|
|
@ -126,10 +188,25 @@ footer {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
footer, #csslink {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.row-offcanvas-left .sidebar-offcanvas {
|
||||
left: -46%;
|
||||
}
|
||||
}
|
||||
|
||||
footer .img-responsive {
|
||||
|
|
@ -140,14 +217,21 @@ footer .img-responsive {
|
|||
padding-top: 30px;
|
||||
}
|
||||
|
||||
body, .content-column-content p, .content-column-content li, .box-masonry .box-masonry-text p {
|
||||
color: #363636;
|
||||
@media (min-width: 1200px) {
|
||||
.content-column-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
width: 72%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu li {
|
||||
font-size: 0.8rem;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border: 1px solid #d7d7a3;
|
||||
border: 1px solid var(--bgdark);
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -159,7 +243,7 @@ a.internal {
|
|||
|
||||
.sidebar-menu li:hover {
|
||||
/* background randomly set in script */
|
||||
border: 1px solid #a6a57c;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-game-platform {
|
||||
|
|
@ -168,10 +252,11 @@ a.internal {
|
|||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
.sidebar-heading {
|
||||
font-weight: bold;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-date {
|
||||
|
|
@ -209,17 +294,21 @@ a.internal {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.content-column-content p {
|
||||
.content-column-content p, .content-column-content li {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
a, .box-masonry h4 a {
|
||||
color:#c7532d;
|
||||
color: var(--textlink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-menu li:hover:before, .sidebar-menu li:hover a {
|
||||
color: var(--textlink);
|
||||
}
|
||||
|
||||
a:hover, .box-masonry h4 a:hover {
|
||||
color:#c7532d;
|
||||
color: var(--textlink);
|
||||
background-color: #d1d3bd;
|
||||
}
|
||||
|
||||
|
|
@ -229,9 +318,24 @@ a:hover, .box-masonry h4 a:hover {
|
|||
}
|
||||
|
||||
.sidebar-content {
|
||||
border-right: 5px solid #a6a57c;
|
||||
position: unset;
|
||||
border-right: 5px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-scrolling {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: calc(33.33% - 5px);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.sidebar-fixed {
|
||||
width: calc(25% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
|
@ -250,38 +354,37 @@ a:hover, .box-masonry h4 a:hover {
|
|||
background: none;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.content-column div.row {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
#sidebar, .sidebar-content {
|
||||
background-color: #d7d7a3;
|
||||
background-color: var(--bgdark);
|
||||
}
|
||||
|
||||
#sidebar hr {
|
||||
border-top: 1px solid #a6a57c;
|
||||
border-top: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-game-info {
|
||||
background-color: #e6ecb2;
|
||||
border: 1px solid #a6a57c;
|
||||
background-color: var(--bgdarker);
|
||||
border: 1px solid var(--accent);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.box-masonry {
|
||||
background-color: #d9e7ac;
|
||||
border: 1px solid #a6a57c;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.img-inactive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-active {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box-masonry:hover {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 21 KiB |
|
|
@ -1,11 +1,55 @@
|
|||
$(function() {
|
||||
|
||||
var addResponsiveTagToContentImages = function() {
|
||||
$("img").addClass("img-responsive");
|
||||
};
|
||||
var disableResponsiveImagesForInlineLis = function() {
|
||||
$('li img.img-responsive').each(function() {
|
||||
$(this).removeClass('img-responsive');
|
||||
$(this).css('border', 'none');
|
||||
});
|
||||
};
|
||||
addResponsiveTagToContentImages();
|
||||
disableResponsiveImagesForInlineLis();
|
||||
|
||||
function lightbox() {
|
||||
$(document).delegate('*[data-toggle="lightbox"]', 'click', function (event) {
|
||||
event.preventDefault();
|
||||
$(this).ekkoLightbox();
|
||||
});
|
||||
};
|
||||
lightbox();
|
||||
|
||||
function offCanvas() {
|
||||
$('[data-toggle="offcanvas"]').click(function () {
|
||||
$('.row-offcanvas').toggleClass('active')
|
||||
});
|
||||
}
|
||||
offCanvas();
|
||||
|
||||
function scrollThenFixSidebar() {
|
||||
var maxHeight = $('.sidebar-content').height() - $(window).height() + 40;
|
||||
$(document).on('scroll', function(e) {
|
||||
if($(document).scrollTop() > maxHeight) {
|
||||
$('.sidebar-content').addClass('sidebar-fixed').removeClass('sidebar-scrolling');
|
||||
} else {
|
||||
$('.sidebar-content').addClass('sidebar-scrolling').removeClass('sidebar-fixed');
|
||||
}
|
||||
})
|
||||
}
|
||||
scrollThenFixSidebar();
|
||||
|
||||
var addTargetBlankToExternalLinks = function() {
|
||||
var host = (new URL(window.location.href)).hostname;
|
||||
$('.content-column-content a').each(function() {
|
||||
var me = $(this);
|
||||
var url = me.attr('href');
|
||||
if(url.startsWith('http') && url.indexOf(host) === -1) {
|
||||
me.attr('target', '_blank');
|
||||
}
|
||||
})
|
||||
};
|
||||
addTargetBlankToExternalLinks();
|
||||
|
||||
var enableLightboxOnClickImgInContent = function() {
|
||||
$('.content-column-content img').click(function(e) {
|
||||
|
|
@ -18,11 +62,11 @@ $(function() {
|
|||
|
||||
var enableScrollToTopOnInternalLinks = function() {
|
||||
$('#totop').click(function() {
|
||||
$.scrollTo($('#top'), 1000);
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
});
|
||||
|
||||
$('a.internal').click(function() {
|
||||
$.scrollTo($($(this).data('to')), 1000);
|
||||
$($(this).data('to')).animate({ scrollTop: 0 }, "slow");
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -62,32 +106,9 @@ $(function() {
|
|||
$('.sidebar-game-info').mouseenter(animate).mouseleave(inanimate);
|
||||
};
|
||||
|
||||
var resizeSidebar = function() {
|
||||
const height = document.querySelector('.content-column').clientHeight;
|
||||
$('.sidebar-content').css('height', (height + 50) + 'px');
|
||||
};
|
||||
|
||||
var hijackAppendChildToExecuteAfter = function(afterFn, elId) {
|
||||
const _appendChild = Node.prototype.appendChild;
|
||||
|
||||
Node.prototype.appendChild = function(el) {
|
||||
const result = _appendChild.apply(this, arguments);
|
||||
if(el.id === elId) {
|
||||
setTimeout(afterFn, 100);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
animateActiveGameImagesIfFound();
|
||||
setSideBarPlatformHeight();
|
||||
addRandomImageToSideBarMenus();
|
||||
enableScrollToTopOnInternalLinks();
|
||||
enableLightboxOnClickImgInContent();
|
||||
disableResponsiveImagesForInlineLis();
|
||||
resizeSidebar();
|
||||
|
||||
// needed for Commento, no 'official' callback when done provided.
|
||||
hijackAppendChildToExecuteAfter(resizeSidebar, 'commento-footer');
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
masonry();
|
||||
//masonry();
|
||||
$(function () {
|
||||
offCanvas();
|
||||
lightbox();
|
||||
carousels();
|
||||
//carousels();
|
||||
utils();
|
||||
highlightCurrentPage();
|
||||
makeImagesResponsive();
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||
* Licensed under MIT
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.13
|
||||
*/
|
||||
;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||typeof a=='object'?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
|
||||
Loading…
Reference in New Issue