diff options
-rw-r--r-- | exampleSite/config.toml | 1 | ||||
-rw-r--r-- | layouts/_default/li.html | 34 | ||||
-rw-r--r-- | layouts/partials/pages/lists.html | 2 | ||||
-rw-r--r-- | static/css/theme.css | 79 |
4 files changed, 105 insertions, 11 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index bac565b..646e52e 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -2,6 +2,7 @@ # GLOBAL SITE SETTINGS # Parameters used by HUGO to configure the site's global settings. +preserveTaxonomyNames = "true" baseurl = "https://example.org/" languageCode = "en-us" diff --git a/layouts/_default/li.html b/layouts/_default/li.html index 8532cec..1c4368b 100644 --- a/layouts/_default/li.html +++ b/layouts/_default/li.html @@ -1,8 +1,30 @@ <li class="project-item"> - <a href="{{.Permalink}}">{{ .Title }}</a> - {{ with .Params.subtitle }} - <p> - {{ . | markdownify }} - </p> - {{ end }} + + <a href="{{.Permalink}}" class="project-item-box"> + {{ $logos := .Resources.Match "logos/*" }} + {{ if gt (len $logos) 0 }} + {{ $image := index $logos 0 }} + <figure class="no-photoswipe"> + <img class="project-item-logo" src="{{ $image.RelPermalink }}" alt="" title="{{ $image.Title }}"> + </figure> + {{ end }} + + <div> + {{ with .Title }} + <div class="project-title"> + {{ . }} + </div> + {{ end }} + + {{ with .Params.subtitle }} + <div class="project-subtitle"> + {{ . }} + </div> + {{ end }} + </div> + + <div class="project-item-box-highlight"> + </div> + </a> + </li> diff --git a/layouts/partials/pages/lists.html b/layouts/partials/pages/lists.html index b628998..8ef461e 100644 --- a/layouts/partials/pages/lists.html +++ b/layouts/partials/pages/lists.html @@ -33,7 +33,7 @@ {{/* Sort the list */}} {{ partial "utils/ordered-list.html" (dict "list" .Pages "params" .Params "scratch" .Scratch) }} - <ul> + <ul class="project-item-list"> {{ range (.Scratch.Get "list") }} {{ .Render "li" }} {{ end }} diff --git a/static/css/theme.css b/static/css/theme.css index bb31f08..964f6a5 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -839,10 +839,6 @@ min-height: 300px; } } -.project-item p { - font-size: 1em; -} - /******************************************************************************/ /* CONTACT */ @@ -1142,6 +1138,81 @@ min-height: 300px; margin-bottom: 0; } + +/******************************************************************************/ + +/* PROJECTS LISTS & TAXONOMIES */ + +.project-item-box { + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + position: relative; + + margin: 0 auto; +} +@media(max-width: 768px) { + .project-item-box { + display: block; + border-top: 1px outset var(--GENERAL-COLOR-1); + } +} + +.project-item-box:link { + text-decoration: none; +} + +.project-item-box .project-title { + margin-left: 0.5em; + font-size: 20px; + + font-family: var(--PROJECTBOX-NAME-FONT, var(--GENERAL-FONT-2)); + color: var(--GENERAL-LINK-COLOR-1); +} +.project-item-box .project-subtitle { + margin-left: 1em; + font-size: 14px; + + font-family: var(--PROJECTBOX-CATEGORY-FONT, var(--GENERAL-FONT-2)); + color: var(--GENERAL-FONT-COLOR-1); +} + +.project-item-box .project-item-box-highlight { + display: block; + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; + opacity: 0; + + background: var(--PROJECTBOX-CAPTION-BACKGROUND-COLOR); +} + +.project-item-box:hover .project-item-box-highlight { + opacity: 0.25; +} + +ul.project-item-list { + justify-content: center; + list-style: none; + padding: 0; +} + +.project-item-list .project-item { + margin: 0 5px 1em 5px; +} + +.project-item-logo { + margin: 0.5em; + width: 32px; + height: 32px; +} + + /******************************************************************************/ /* PAGE 404 */ |