diff --git a/sass/_search.scss b/sass/_search.scss index c6e569a..feb497b 100644 --- a/sass/_search.scss +++ b/sass/_search.scss @@ -1,9 +1,8 @@ .search-container { - position: absolute; font-size: 12px; top: 20px; left: 26px; - width: 20vw; + width: 42%; max-width: 300px; z-index: 2; input { @@ -59,38 +58,6 @@ } } -@media screen and (max-width: 960px) { - .search-container { - width: 30vw; - } - - .search-results { - width: 65vw; - right: unset; - margin-right: -50%; - } -} - -@media screen and (max-width: 640px) { - .search-container { - width: 65vw; - max-width: 325px; - top: 70px; - left: 50%; - right: unset; - margin-right: -50%; - transform: translate(-50%, 0); - } - - .search-results { - width: 75vw; - left: 25%; - right: unset; - margin-right: -25%; - transform: translate(-30%, 0); - } -} - @media (prefers-color-scheme: dark) { .search-container { input { diff --git a/sass/_site.scss b/sass/_site.scss index e2bb79d..f2d4c9e 100644 --- a/sass/_site.scss +++ b/sass/_site.scss @@ -11,8 +11,13 @@ width: 65%; float: right; overflow-y: auto; + text-align: justify; .content { - padding: 120px 10% 60px; + max-width: 100%; + display: flex; + flex-direction: column; + margin-bottom: auto; + padding: 0px 10% 52px; } } @@ -38,15 +43,14 @@ } .block-right { width: 50%; - display: block; - > div { + display: flex; + flex-direction: column; + .content { display: flex; + flex: 1; + padding: 0px 10% 52px; align-items: center; - } - .content { - padding: 120px 60px 60px; - max-width: 600px; - min-height: 94%; + justify-content: center; } } } @@ -57,17 +61,28 @@ } .content { - margin: 0 auto; + margin: 0 20px; overflow-wrap: break-word; } nav.nav-bar { - position: absolute; + display: flex; + gap: 20px; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + flex: 1 1 22px; top: 20px; - right: 26px; z-index: 2; } +#nav-container { + margin: 20px; + display: flex; + flex-direction: row-reverse; +} + nav.nav-bar ul { font-size: 12px; text-transform: uppercase; @@ -372,14 +387,21 @@ a.zola-anchor { } } +.post-info { + text-align: start; + display: flex; + align-items: flex-start; +} + #posts { .block-right { - display: block; + display: flex; + flex-direction: column; height: 100%; .content { height: auto; - min-height: 94%; - display: block; + display: flex; + flex-direction: column; } } .logo { @@ -413,7 +435,6 @@ a.zola-anchor { } .posts-list { - margin: 50px 0; > li { margin-bottom: 23px; padding-bottom: 20px; @@ -552,7 +573,6 @@ a.zola-anchor { .post-music { justify-content: center; align-items: center; - height: 100%; position: relative; padding: 6px 10px; display: inline-flex; @@ -634,7 +654,7 @@ a.zola-anchor { .date-highlight { text-align: center; font-size: 16px; - margin: 0 0 50px; + margin: 50px 0 50px; color: $overlay-color; display: -webkit-box; display: -moz-box; @@ -662,56 +682,57 @@ a.zola-anchor { } .projects { - padding-right: 20px; - display: block; - > h2 { - font-size: 22px; - padding-top: 20px; - padding-left: 20px; - #project-archived { - text-decoration: line-through; - } - } - .project-lang { - font-size: 16px; - } - .project-license { - font-size: 10px; - } - .project-description { - font-size: 15px; + width: 100%; + padding-right: 20px; + display: block; + > h2 { + font-size: 22px; + padding-top: 20px; + padding-left: 20px; + #project-archived { + text-decoration: line-through; } - > ul { - padding: 0; + } + .project-lang { + font-size: 16px; + } + .project-license { + font-size: 10px; + } + .project-description { + font-size: 15px; + } + > ul { + padding: 0; + list-style-type: none; + > li { + margin-bottom: 14px; + padding-left: 20px; list-style-type: none; - > li { - margin-bottom: 14px; - padding-left: 20px; - list-style-type: none; - } - } - .tags { - margin-top: 0; - padding-bottom: 10px; - padding-left: 0; - > li { - text-transform: lowercase; - list-style-type: none; - } } - .tags:is(.project-tags) > ul { - padding: 0; + } + .tags { + margin-top: 0; + padding-bottom: 10px; + padding-left: 0; + > li { + text-transform: lowercase; + list-style-type: none; } - .tags:is(.project-tags) > li { - margin: 0; - font-size: 8px; - padding: 4px; - margin-right: 10px; - margin-bottom: 10px; - &:last-child { - margin-right: 0; - } + } + .tags:is(.project-tags) > ul { + padding: 0; + } + .tags:is(.project-tags) > li { + margin: 0; + font-size: 8px; + padding: 4px; + margin-right: 10px; + margin-bottom: 10px; + &:last-child { + margin-right: 0; } + } } .entry-meta { @@ -798,22 +819,19 @@ a.zola-anchor { } } -.toc-block { - margin-bottom: 26px; -} - .toc-anchor { font-size: 15px; } .footer-content { + vertical-align: bottom; + margin-top: auto; position: relative; display: flex; justify-content: center; align-items: center; height: auto; line-height: 0.6rem; - bottom: 0; } .footer-links { @@ -868,12 +886,6 @@ a.zola-anchor { grid-template-rows: repeat(4, auto); } } - nav.nav-bar { - left: 50%; - right: unset; - margin-right: -50%; - transform: translate(-50%, 0); - } .inner-post { h1 { line-height: 36px; @@ -907,7 +919,8 @@ a.zola-anchor { } .block-right { .content { - padding: 145px 20px 40px; + height: 100%; + padding: 0px 20px 0px; } } .projects { diff --git a/templates/base.html b/templates/base.html index f3dd2d9..4010d66 100644 --- a/templates/base.html +++ b/templates/base.html @@ -39,19 +39,10 @@

{%- block page_title %}{% if page.title %}{{ page.titl
- {% if config.build_search_index == true %} - - - - {% endif %} + {% block nav %} + + {% endblock nav %} {% block right %}
{% block date %}
{% if page.date %}{{ page.date | date(format="%d %b %Y") }}{% else %}x{% endif %}
{% endblock date %} diff --git a/templates/page.html b/templates/page.html index 57be1fa..c072ac8 100644 --- a/templates/page.html +++ b/templates/page.html @@ -21,7 +21,7 @@

{{ page.title | safe }}

{% if page.extra.subtitle %}

{{ page.extra.subtitle | safe}}

{% endif %} {% if current_path is starting_with("/posts/") %} {% if config.extra.read_time == true or page.updated %} -
+