From a75d37e8b35873f7bff5cc393f7565af5e5b3ffa Mon Sep 17 00:00:00 2001 From: wgroeneveld Date: Sun, 30 Oct 2022 21:34:55 +0100 Subject: [PATCH] major CSS refactoring: kill bootstrap + theme-default deps --- config.toml | 2 +- ...ing-to-the-definitive-nostalgic-console.md | 4 +- layouts/shortcodes/dualscreens.html | 6 +- .../assets/sass/_bootstrap-minimal.sass | 125 + .../assets/sass/_codex.sass | 150 +- .../assets/sass/_sidebar.sass | 58 +- .../assets/sass/main.sass | 1 + .../layouts/404.html | 18 +- .../layouts/_default/single.html | 4 +- .../layouts/_default/terms.html | 4 +- .../layouts/about/list.html | 12 +- .../layouts/partials/gamegrid.html | 72 +- .../layouts/partials/head.html | 5 +- .../layouts/partials/mobile_nav_toggle.html | 1 - .../layouts/partials/portfolio-block.html | 35 +- .../layouts/partials/portfolio.html | 48 +- .../layouts/partials/score.html | 14 +- .../layouts/partials/scorelabel.html | 13 + .../layouts/partials/sidebar.html | 4 +- .../layouts/platforms/single.html | 24 +- .../static/css/bootstrap.min.css | 5691 ++++++++++++++++- 21 files changed, 6051 insertions(+), 240 deletions(-) create mode 100644 themes/jefklak-creative-portfolio/assets/sass/_bootstrap-minimal.sass create mode 100644 themes/jefklak-creative-portfolio/layouts/partials/scorelabel.html 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 @@ -
-
+
{{ index .Params 2 }}
{{ index .Params 2 }}
-
-
{{ index .Params 4 }}
{{ index .Params 4 }}
-
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" . }}
-
@@ -66,7 +65,6 @@
-
{{ 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" . }}
-
logo @@ -52,7 +51,6 @@ {{ end }}
-
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" }} - +