diff --git a/showcase.markdown b/showcase.markdown index 5f5ab2b..645b4d7 100755 --- a/showcase.markdown +++ b/showcase.markdown @@ -9,33 +9,40 @@ permalink: /showcase justify-content: flex-end; width: 30%; aspect-ratio: 3/2; - background-color: #333333; background-size: cover; - margin: 0; + border-radius: 3px; + border: 1px solid #101010; flex-grow: 1; } .card.big { - min-width: 50%; - max-width: 70%; - aspect-ratio: 16/9; + width: 50%; + aspect-ratio: 3/2; } .card figcaption { padding: 1.5em; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); - text-shadow: 0 0 black; + text-shadow: 0 0 1px black; + row-gap: 1em; + } + .card.big figcaption { + flex-direction: row; + justify-content: space-between; + align-items: center; } {% assign projects = site.projects | sort: "priority" | reverse %} -
+
    {% for project in projects %}
  1. -

    {{ project.name }}

    - {{ project.content | remove: "

    " | remove: "

    " }}
    - + +

    {{ project.name }}

    + {{ project.content | remove: "

    " | remove: "

    " }}
    +
    +
  2. {% endfor %} diff --git a/style.css b/style.css index 30c502b..7773840 100755 --- a/style.css +++ b/style.css @@ -30,6 +30,17 @@ menu li { margin: 4px 8px; } menu a { color: inherit;} +menu a { + padding: 4px 8px; + background-color: rgba(10, 10, 10, 0.8); + border-radius: 3px; + backdrop-filter: blur(6px); + transition: background-color 0.25s ease; +} +menu a:hover, menu a.accent { + border-bottom: 0; + background-color: rgba(19, 19, 19, 0.9); +} .title { text-transform: uppercase; letter-spacing: 1px; @@ -41,12 +52,9 @@ header, footer, menu, .list, .grid { column-gap: 2em; flex-wrap: wrap; } -.texture { - background-position: 0% 0%; - background-image: linear-gradient(transparent, black), url(/images/topography.svg); -} .list { column-gap: 1em;} header, footer, .list, .card, figcaption { flex-direction: column;} +menu { justify-content: center;} .flex, .card, figcaption { display: -ms-flex; display: flex;} .horizontal { flex-direction: row; @@ -54,7 +62,7 @@ header, footer, .list, .card, figcaption { flex-direction: column;} } .grid { flex-direction: row; - column-gap: 0; row-gap: 0; + /*column-gap: 0; row-gap: 0;*/ } .chip, button { display: inline-block; @@ -78,6 +86,11 @@ figure { margin: 0;} max-height: 1em; vertical-align: middle; } +.texture { + background-position: 0% 0%; + background-image: linear-gradient(transparent, black), url(/images/topography.svg); + animation: map 0.5s ease; +} .cover { height: 400px;} .full-width { /* credit: gomakethings.com */ position: relative;