diff --git a/config.toml b/config.toml
index 5e041c1..59abc38 100644
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
baseurl = "https://jefklakscodex.com/"
-title = "Jefklaks Codex"
+title = "Jefklak's Codex"
theme = "jefklak-creative-portfolio"
languageCode = "en-us"
publishDir = "docs"
diff --git a/content/articles/switching-to-the-definitive-nostalgic-console.md b/content/articles/switching-to-the-definitive-nostalgic-console.md
index c879619..494d86b 100644
--- a/content/articles/switching-to-the-definitive-nostalgic-console.md
+++ b/content/articles/switching-to-the-definitive-nostalgic-console.md
@@ -53,7 +53,7 @@ Heavyweight metroidvania's:
- Dandara (16)
- The Mummy Demastered (16)
- Cave Story+
-- Axiom Verge (8)
+- [Axiom Verge](/games/switch/axiom-verge) (8)
- [Hollow Knight](/games/switch/hollow-knight)
- Xeodrifter
@@ -77,7 +77,7 @@ Inspired by: **Contra**, **Metal Slug**, **Mega Man**
Inspired by **Sonic**, **Kirby**, **Mario Bros**
- [Sonic Mania](/games/switch/sonic-mania)
-- Rayman Legends
+- [Rayman Legends](/games/switch/rayman-legends)
- Kirby Star Allies
- Donkey Kong: Tropical Freeze (could be hard- or softcore)
diff --git a/layouts/shortcodes/dualscreens.html b/layouts/shortcodes/dualscreens.html
index 97aed48..560f0db 100644
--- a/layouts/shortcodes/dualscreens.html
+++ b/layouts/shortcodes/dualscreens.html
@@ -1,18 +1,14 @@
-
-
+
-
-
-
diff --git a/themes/jefklak-creative-portfolio/assets/sass/_bootstrap-minimal.sass b/themes/jefklak-creative-portfolio/assets/sass/_bootstrap-minimal.sass
new file mode 100644
index 0000000..9f0e1d3
--- /dev/null
+++ b/themes/jefklak-creative-portfolio/assets/sass/_bootstrap-minimal.sass
@@ -0,0 +1,125 @@
+*
+ box-sizing: border-box
+ &:before, &:after
+ box-sizing: border-box
+
+html, body
+ overflow-x: hidden
+
+header
+ z-index: 1000
+
+
+.hidden
+ display: none !important
+
+.visible-xs
+ display: none !important
+
+ @media (max-width: 766px)
+ display: block !important
+
+.container-fluid
+ padding-left: 0
+ height: 100%
+
+.row
+ margin-right: -15px
+ margin-left: -15px
+ &:before, &:after
+ display: table
+ content: " "
+ &:after
+ clear: both
+
+.content-column
+ padding-left: 45px
+ padding-right: 45px
+ padding-top: 30px
+
+ @media (min-width: 1200px)
+ padding-left: 5rem
+ width: 73%
+
+ &-content
+ @media (min-width: 1200px)
+ padding: 0
+
+ div.row
+ padding-bottom: 14px
+
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
+ line-height: 1.2
+
+ol, ul
+ margin-top: 0
+
+section
+ position: relative
+ padding-top: 40px
+ padding-bottom: 40px
+
+.pull-left
+ float: left !important
+
+.box-masonry
+ background-color: var(--bglightshade)
+ border: 1px solid var(--accent)
+ border-radius: 5px
+ margin-bottom: 30px
+ transition: all 0.2s ease-out
+ display: flex
+ flex-wrap: wrap
+
+ &-text
+ padding: 15px 20px 15px
+ flex-grow: 1
+ flex-basis: calc(70% - 22px)
+
+ h4
+ margin: 0
+
+ .box-masonry-image
+ flex-grow: 1
+ flex-basis: calc(20% - 20px)
+
+ img
+ object-fit: cover
+ min-height: 100%
+
+ &-description
+ clear: both
+ strong
+ font-size: 1.1rem
+ text-style: italic
+
+ .sidebar-date
+ float: right
+ clear: both
+ padding-top: 0.5em
+ padding-bottom: 0.5em
+
+ &:hover
+ box-shadow: 0 0 5px grey
+
+.pagination
+ display: inline-block
+ padding-left: 0
+ border-radius: 4px
+
+ li
+ list-style-type: none
+ position: relative
+ float: left
+ padding: 6px 12px
+ border: 1px solid var(--bgdark)
+ background-color: var(--bgdarker)
+
+ &.active
+ font-weight: bold
+ background-color: var(--bgdark)
+
+ &.disabled
+ background-color: var(--bglight)
+ cursor: not-allowed
diff --git a/themes/jefklak-creative-portfolio/assets/sass/_codex.sass b/themes/jefklak-creative-portfolio/assets/sass/_codex.sass
index 7b8992e..860d995 100644
--- a/themes/jefklak-creative-portfolio/assets/sass/_codex.sass
+++ b/themes/jefklak-creative-portfolio/assets/sass/_codex.sass
@@ -5,9 +5,15 @@ html
font-size: 1.15rem
-body, h1, h2, h3, h4, article p, article li, .box-masonry .box-masonry-text p, .copyright, .copyright p.credit a
+body, h1, h2, h3, h4, article p, article li, .box-masonry .box-masonry-text p
color: var(--textcolor)
+.copyright
+ color: var(--textcolor)
+ font-size: 0.8rem
+ p.credit a
+ color: var(--textcolor)
+
.latest-all
float: right
margin-top: -20px
@@ -17,12 +23,12 @@ body, h1, h2, h3, h4, article p, article li, .box-masonry .box-masonry-text p, .
max-width: 100%
height: auto
-.box-masonry .box-masonry-text p
- font-size: 0.9rem
body
background-color: var(--bglight)
line-height: 1.7
+ margin: 0
+ box-sizing: border-box
height: 100%
@media (min-width: 960px)
@@ -61,6 +67,7 @@ h1, .h1
font-size: 2.5rem
font-weight: 700
margin-bottom: 2rem
+ margin-top: 0
h2, .h2
font-size: 2rem
@@ -88,17 +95,33 @@ blockquote
border-left: 7px solid var(--accent)
background-color: var(--bglightshade)
border-radius: 5px
- padding: 12px 24px
- margin: 0 0 24px
+ padding: 0.8rem
+ margin: 0 0 24px
+
+ p
+ margin: 0
p
margin: 0 0 24px
-button
- background-color: var(--accent) !important
- color: white !important
- border-color: darkgrey !important
+button
+ display: inline-block
+ padding: 6px 12px
+ font-size: 1rem
+ touch-action: manipulation
+ cursor: pointer
+ font-weight: 400
+ text-align: center
+ background-color: var(--accent)
+ color: white
+ border: 1px solid transparent
+ border-color: darkgrey
+ border-radius: 4px
+ transition: all 0.2s ease-out
+
+ &:hover
+ box-shadow: 0 0 5px grey
.small-navbar button
@@ -108,11 +131,17 @@ button
margin-left: 1rem
-hr
+hr
+ border: 0
border-top: 1px solid var(--accent)
- margin-top: 24px
- margin-bottom: 24px
+ margin-top: 24px
+ margin-bottom: 24px
+.img-responsive
+ max-width: 100%
+ height: auto
+ margin: 0 auto
+ display: block
#rsslink
position: absolute
@@ -137,29 +166,14 @@ footer
@media only screen and (min-width: 1200px)
visibility: visible
+a
+ &.lbox
+ border-bottom: none
-.content-column
- padding-left: 30px
- padding-right: 30px
- padding-top: 30px
+ &:hover
+ background-color: unset
- @media (min-width: 1200px)
- padding-left: 5rem
-
- &-content
- @media (min-width: 1200px)
- padding: 0
-
- div.row
- padding-bottom: 14px
-
-
-.col-lg-8
- @media (min-width: 1200px)
- width: 72%
-
-
-a.external
+ &.external
background-image: url(/img/external.png)
background-position: center right
background-repeat: no-repeat
@@ -179,8 +193,9 @@ a.external
article
figure
- margin-top: 1.5rem
- margin-bottom: 1.5rem
+ margin: 1.5rem
+ @media (min-width: 992px)
+ margin: 1.5rem 0 1.5rem 0
figcaption
padding: 10px
@@ -192,6 +207,14 @@ article
border: 1px solid black
border-radius: 5px
+ .dualscreens
+ display: grid
+ grid-template-columns: repeat(2, 1fr)
+ grid-column-gap: 10px
+
+ figure
+ margin: 0
+
.video-mask
padding-top: 1.2rem
padding-bottom: 1.2rem
@@ -209,8 +232,13 @@ article
p, li
text-align: left !important
-main li
- list-style-type: circle
+main
+ float: left
+ @media (min-width: 768px)
+ width: 75%
+
+ li
+ list-style-type: circle
.no-border
border: none !important
@@ -219,43 +247,14 @@ main li
display: none
-a, .box-masonry h4 a, .link
+a, .link
color: var(--textlink)
text-decoration: none
border-bottom: 1px solid darkgrey
-a:hover, .box-masonry h4 a:hover, .link:hover
+a:hover, .link:hover
color: var(--textlink)
background-color: #d1d3bd
-
-
-.container-fluid
- padding-left: 0
- height: 100%
-
-
-.box-masonry
- background-color: var(--bglightshade)
- border: 1px solid var(--accent)
- border-radius: 5px
-
- &:hover
- box-shadow: 0 0 5px black
- .box-masonry-hover-text-header, .box-masonry-hover-center
- opacity: 1
- .box-masonry-image.with-hover-overlay:before
- opacity: 0.3
- .box-masonry-image.with-hover-icon:after
- opacity: 1
-
- .box-masonry-image
- background: none
- padding-top: 10px
-
- img
- height: 30vh
- object-fit: cover
-
.img-inactive
@@ -271,18 +270,6 @@ a:hover, .box-masonry h4 a:hover, .link:hover
.pages
color: var(--accent)
-.pagination > .disabled > span
- background-color: var(--bgdarker)
-
-.pagination > li > a, .pagination > li > span
- background-color: var(--bgdark)
- border: 1px solid var(--bgdarker)
- color: #333
-
-.pagination > .active > a
- background-color: var(--bglight)
- color: #333
-
.categories
padding-top: 1.5rem
@@ -291,6 +278,9 @@ a:hover, .box-masonry h4 a:hover, .link:hover
kbd
padding: 0.2rem 0.5rem 0.2rem 0.5rem
background-color: var(--bgdark)
+ border-radius: 5px
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
+ font-size: 90%
color: var(--textlinktag)
#skiptocontent
diff --git a/themes/jefklak-creative-portfolio/assets/sass/_sidebar.sass b/themes/jefklak-creative-portfolio/assets/sass/_sidebar.sass
index d080877..f10f3ac 100644
--- a/themes/jefklak-creative-portfolio/assets/sass/_sidebar.sass
+++ b/themes/jefklak-creative-portfolio/assets/sass/_sidebar.sass
@@ -1,12 +1,17 @@
.sidebar
padding: 0
height: 100%
+ float: left
+ min-height: 1px
overflow: auto
vertical-align: top
display: inline-block
padding-left: 10px
background-color: var(--bgdark)
+ @media (min-width: 768px)
+ width: 25%
+
&-scrolling
width: 100%
position: unset
@@ -17,12 +22,13 @@
width: 50%
@media (min-width: 768px)
- width: calc(33.33% - 5px)
-
- @media (min-width: 960px)
width: calc(25% - 5px)
&-menu
+ list-style-type: none
+ padding-left: 20px
+ margin-bottom: 40px
+
li
font-size: 0.8rem
padding-top: 8px
@@ -41,11 +47,15 @@
&:before, a
color: var(--textlink)
- &-content
+ &-content
background-color: var(--bgdark)
border-right: 5px solid var(--accent)
padding-top: 30px
-
+ padding-left: 10px
+ @media (min-width: 992px)
+ padding-left: 20px
+ padding-right: 20px
+
&-offcanvas
@media screen and (max-width: 767px)
left: -46% !important
@@ -84,6 +94,9 @@
&-heading
font-weight: bold
+ font-size: 1.1rem
+ letter-spacing: 0.1em
+ text-transform: uppercase
padding-top: 10px
padding-left: 10px
margin-top: 0
@@ -93,3 +106,38 @@
color: var(--textlinkdark)
font-size: 0.7rem
+
+.row-offcanvas
+ @media screen and (max-width: 767px)
+ position: relative
+ transition: all 0.25s ease-out
+ opacity: 1
+
+ &-right
+ .sidebar-offcanvas
+ @media screen and (max-width: 767px)
+ right: -50%
+ @media screen and (max-width: 767px)
+ right: 0
+
+ &-left
+ .sidebar-offcanvas
+ @media screen and (max-width: 767px)
+ left: -48%
+ @media screen and (max-width: 767px)
+ left: 0
+
+
+ &-right.active
+ @media screen and (max-width: 767px)
+ right: 50%
+ &-left.active
+ @media screen and (max-width: 767px)
+ left: 50%
+
+.sidebar-offcanvas
+ @media screen and (max-width: 767px)
+ position: absolute
+ top: 0
+ width: 50%
+
diff --git a/themes/jefklak-creative-portfolio/assets/sass/main.sass b/themes/jefklak-creative-portfolio/assets/sass/main.sass
index ac12c51..18c467b 100644
--- a/themes/jefklak-creative-portfolio/assets/sass/main.sass
+++ b/themes/jefklak-creative-portfolio/assets/sass/main.sass
@@ -1,5 +1,6 @@
@import 'variables'
@import 'fonts'
+@import 'bootstrap-minimal'
@import 'codex'
@import 'sidebar'
@import 'toot'
diff --git a/themes/jefklak-creative-portfolio/layouts/404.html b/themes/jefklak-creative-portfolio/layouts/404.html
index 59468ac..73a44ba 100644
--- a/themes/jefklak-creative-portfolio/layouts/404.html
+++ b/themes/jefklak-creative-portfolio/layouts/404.html
@@ -1,16 +1,12 @@
{{ define "main" }}
-
+
{{ partial "mobile_nav_toggle.html" . }}
-
-
-
- Page not found
+
+ Page not found
-
- No Worries! Try to dig through all games or the appendix instead to find something similar to what you were looking for. Good luck!
-
-
-
-
+
+ No Worries! Try to dig through all games or the appendix instead to find something similar to what you were looking for. Good luck!
+
+
{{ end }}
diff --git a/themes/jefklak-creative-portfolio/layouts/_default/single.html b/themes/jefklak-creative-portfolio/layouts/_default/single.html
index 6dd3576..a55312c 100644
--- a/themes/jefklak-creative-portfolio/layouts/_default/single.html
+++ b/themes/jefklak-creative-portfolio/layouts/_default/single.html
@@ -1,9 +1,8 @@
{{ define "main" }}
-
+
{{ partial "mobile_nav_toggle.html" . }}
{{ end }}
diff --git a/themes/jefklak-creative-portfolio/layouts/_default/terms.html b/themes/jefklak-creative-portfolio/layouts/_default/terms.html
index c44d32f..1db0cf8 100644
--- a/themes/jefklak-creative-portfolio/layouts/_default/terms.html
+++ b/themes/jefklak-creative-portfolio/layouts/_default/terms.html
@@ -11,10 +11,9 @@
{{ partial "sidebar.html" . }}
-
+
{{ partial "mobile_nav_toggle.html" . }}
diff --git a/themes/jefklak-creative-portfolio/layouts/about/list.html b/themes/jefklak-creative-portfolio/layouts/about/list.html
index dbb1894..a155cd2 100644
--- a/themes/jefklak-creative-portfolio/layouts/about/list.html
+++ b/themes/jefklak-creative-portfolio/layouts/about/list.html
@@ -1,13 +1,11 @@
{{ define "main" }}
-
+
{{ partial "mobile_nav_toggle.html" . }}
-
-
- {{ .Title }}
- {{ .Content }}
-
-
+
+ {{ .Title }}
+ {{ .Content }}
+
{{ end }}
diff --git a/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html b/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
index f9dbb6e..96a1490 100644
--- a/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
+++ b/themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
@@ -1,46 +1,44 @@
-
+
{{ partial "mobile_nav_toggle.html" . }}
-
-
-
-
-
- {{ .Content }}
-
+
+
+
+
+ {{ .Content }}
+
-
Game Codex »
+
Game Codex »
- {{ $pages := .RegularPagesRecursive }}
- {{ if $pages }}
-
- Sort by:
-
-
-
-
-
-
-
-
- {{ range $pages }}
- {{ if isset .Params "game_name" }}
- {{ partial "gamegrid-block.html" . }}
- {{ end }}
- {{ end }}
+ {{ $pages := .RegularPagesRecursive }}
+ {{ if $pages }}
+
+ Sort:
+
+
+
+
+
- {{ else }}
-
- No entries yet. Check back soon!
-
- {{ end }}
-
+
+
+ {{ range $pages }}
+ {{ if isset .Params "game_name" }}
+ {{ partial "gamegrid-block.html" . }}
+ {{ end }}
+ {{ end }}
+
+ {{ else }}
- Browse the Codex: all games | by platform | the appendix.
+ No entries yet. Check back soon!
+ {{ end }}
-
-
+
+ Browse the Codex: all games | by platform | the appendix.
+
+
+
diff --git a/themes/jefklak-creative-portfolio/layouts/partials/head.html b/themes/jefklak-creative-portfolio/layouts/partials/head.html
index b064f03..e99039f 100644
--- a/themes/jefklak-creative-portfolio/layouts/partials/head.html
+++ b/themes/jefklak-creative-portfolio/layouts/partials/head.html
@@ -119,17 +119,14 @@
}
-
-
{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
{{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
-
+