Rework responsiveness using grids
This commit is contained in:
jultty
parent
c703581abd
commit
65d6c262a8
4 changed files with 201 additions and 131 deletions
|
|
@ -42,9 +42,13 @@ nav {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nav-menu ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
#nav-menu li {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#skip-to-main {
|
||||
|
|
@ -78,6 +82,13 @@ ul {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
text-decoration-thickness: 0.1px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-top: 5px;
|
||||
margin-left: 30px;
|
||||
|
|
@ -119,7 +130,11 @@ h1 {
|
|||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
margin: 40px 0px 10px 0px;
|
||||
margin: 40px 0px 30px 30px;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
margin: 40px 0px 10px 30px;
|
||||
}
|
||||
|
||||
h2,h3,h4 {
|
||||
|
|
@ -188,17 +203,48 @@ table th, td {
|
|||
}
|
||||
|
||||
footer {
|
||||
margin-top: 40px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
padding: 20px 20px;
|
||||
padding: 0px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-back {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header-art {
|
||||
display: grid;
|
||||
grid-template-columns: 12% 76% 12%;
|
||||
grid-template-areas: "margin-left art margin-right";
|
||||
margin: 25px 0px 15px 20px;
|
||||
}
|
||||
|
||||
.header-art pre {
|
||||
grid-area: art;
|
||||
justify-self: center;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 2% 63% 33% 2%;
|
||||
grid-template-areas: "margin-left nav lang margin-right";
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#nav-menu {
|
||||
grid-area: nav;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
#language-selector {
|
||||
justify-self: end;
|
||||
grid-area: lang;
|
||||
}
|
||||
|
||||
#language-icon {
|
||||
width: 22px;
|
||||
display: inline-block;
|
||||
|
|
@ -212,22 +258,10 @@ footer {
|
|||
margin: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#language-selector {
|
||||
justify-self: end;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-art {
|
||||
margin: 25px 0px 15px 20px;
|
||||
font-size: 8px;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "nav nav" "lang lang";
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
|
|
@ -236,7 +270,8 @@ footer {
|
|||
}
|
||||
|
||||
main pre {
|
||||
margin: 30px 0px;
|
||||
margin: 30px 0;
|
||||
padding: 20px 10px 30px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,70 +281,97 @@ footer {
|
|||
margin: 0 45px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.index-user-controls#user-controls {
|
||||
grid-template-columns: 13% 64% 10% 13%;
|
||||
}
|
||||
|
||||
.index-posts ul#posts {
|
||||
margin-left: 14%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
margin-left: 30px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.header-art pre {
|
||||
margin-top: 100px;
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* wide screen */
|
||||
@media (min-width: 1000px) {
|
||||
|
||||
.header-art {
|
||||
grid-template-columns: 12% 76% 12%;
|
||||
}
|
||||
|
||||
.header-art pre {
|
||||
margin-top: 120px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.index-user-controls#user-controls {
|
||||
grid-template-columns: 1fr 680px 140px 1fr;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 12% 62% 14% 12%;
|
||||
}
|
||||
|
||||
#language-selector {
|
||||
justify-self: end;
|
||||
.index-posts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 900px 1fr;
|
||||
grid-template-areas: "margin-left posts margin-right";
|
||||
}
|
||||
|
||||
.header-art {
|
||||
margin: 25px 0px 15px 35px;
|
||||
.index-posts ul {
|
||||
grid-area: posts;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.index-posts ul#posts {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
text-decoration-thickness: 0.1px;
|
||||
}
|
||||
|
||||
/* widescreen */
|
||||
@media (min-width: 1000px) {
|
||||
.article {
|
||||
/* very wide screen */
|
||||
@media (min-width: 1921px) {
|
||||
main {
|
||||
margin: 0 20%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 30px;
|
||||
.header-art pre {
|
||||
margin-top: 160px;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
grid-template-columns: 600px 2fr;
|
||||
.index-user-controls#user-controls {
|
||||
grid-template-columns: 1fr 575px 200px 1fr;
|
||||
}
|
||||
|
||||
#language-selector {
|
||||
justify-self: start;
|
||||
.subpage-user-controls#user-controls {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-areas: "nav nav" "lang lang";
|
||||
}
|
||||
|
||||
.header-art {
|
||||
margin: 60px 0px 20px 85px;
|
||||
}
|
||||
}
|
||||
|
||||
/* fullscreen */
|
||||
@media (min-width: 1500px) {
|
||||
.article {
|
||||
margin: 0 30%;
|
||||
.subpage-user-controls #nav-menu {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 30px;
|
||||
.subpage-user-controls #language-selector {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#user-controls {
|
||||
grid-template-columns: 600px 2fr;
|
||||
.index-posts {
|
||||
grid-template-columns: 1fr 800px 1fr;
|
||||
}
|
||||
|
||||
#language-selector {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
|
|||
|
|
@ -10,75 +10,65 @@
|
|||
<html lang="{{ lang }}" id="theme">
|
||||
{% endif %}
|
||||
|
||||
<head prefix="og: https://ogp.me/ns/website#">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<head prefix="og: https://ogp.me/ns/website#">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
{%- set title_tail = " ~ " ~ config.title %}
|
||||
{%- set title_tail = " ~ " ~ config.title %}
|
||||
|
||||
{%- if page.title %}
|
||||
{%- set title = page.title ~ title_tail %}
|
||||
{%- elif section.title %}
|
||||
{%- set title = section.title ~ title_tail %}
|
||||
{%- else %}
|
||||
{%- set title = config.title %}
|
||||
{%- endif %}
|
||||
{%- if page.title %}
|
||||
{%- set title = page.title ~ title_tail %}
|
||||
{%- elif section.title %}
|
||||
{%- set title = section.title ~ title_tail %}
|
||||
{%- else %}
|
||||
{%- set title = config.title %}
|
||||
{%- endif %}
|
||||
|
||||
<title>{{ title }}</title>
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link href="{{ get_url(path="assets/css/style.css", trailing_slash=false) }}" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-dark.css", trailing_slash=false) }}" media="(prefers-color-scheme: dark)" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-light.css", trailing_slash=false) }}" media="(prefers-color-scheme: light)" />
|
||||
<link href="{{ get_url(path="assets/css/style.css", trailing_slash=false) }}" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-dark.css", trailing_slash=false) }}" media="(prefers-color-scheme: dark)" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path="assets/css/syntax-light.css", trailing_slash=false) }}" media="(prefers-color-scheme: light)" />
|
||||
|
||||
|
||||
{%- set description = page.content | default(value=config.description) | striptags | regex_replace(pattern="\n", rep=" ") | truncate(length=120) %}
|
||||
<link rel="icon" type="image/png" sizes="36x36" href="{{ get_url(path="assets/img/icons/kitty/kitty_32.png", trailing_slash=false) }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="assets/img/icons/kitty/kitty_16.png", trailing_slash=false) }}">
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="{{ get_url(path="assets/img/icons/kitty/kitty_circle_128.png", trailing_slash=false) }}">
|
||||
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:description" content="{{ description }}" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="{{ current_url | default(value= get_url(path="/")) | safe }}" />
|
||||
{%- set description = page.content | default(value=config.description) | striptags | regex_replace(pattern="\n", rep=" ") | truncate(length=120) %}
|
||||
|
||||
{% block rss %}<link rel="alternate" type="application/rss+xml" title="RSS ({{ lang }})" href="{{ get_url(path="rss.xml", lang=lang, trailing_slash=false) }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="Atom ({{ lang }})" href="{{ get_url(path="atom.xml", lang=lang, trailing_slash=false) }}">{% endblock %}
|
||||
</head>
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:description" content="{{ description }}" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="{{ current_url | default(value= get_url(path="/")) | safe }}" />
|
||||
<meta property="og:image" content="{{ get_url(path="assets/img/icons/kitty/kitty_circle_192.png") }}" />
|
||||
|
||||
<body>
|
||||
{% if lang == "pt" %}
|
||||
<a id="skip-to-main" href="#main">Saltar para o conteúdo</a>
|
||||
{% else %}
|
||||
<a id="skip-to-main" href="#main">Skip to content</a>
|
||||
{% endif %}
|
||||
{% block rss %}<link rel="alternate" type="application/rss+xml" title="RSS ({{ lang }})" href="{{ get_url(path="rss.xml", lang=lang, trailing_slash=false) }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="Atom ({{ lang }})" href="{{ get_url(path="atom.xml", lang=lang, trailing_slash=false) }}">{% endblock %}
|
||||
</head>
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
<div id="user-controls">
|
||||
<nav>
|
||||
<ul id="nav-menu">
|
||||
{% if lang == "pt" %}
|
||||
<li><a id="home" href="{{ get_url(path="/") }}">Início</a></li>
|
||||
{% else %}
|
||||
<li><a id="home" href="{{ get_url(path="/") }}">Home</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li>
|
||||
<li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
|
||||
<li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
|
||||
<li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div id="language-selector">
|
||||
{% if current_path %}
|
||||
{% set prepared_path = current_path | replace(from="pt/", to="") %}
|
||||
<body>
|
||||
{% if lang == "pt" %}
|
||||
<a href="{{ get_url(path=prepared_path) }}">English</a>
|
||||
<a id="skip-to-main" href="#main">Saltar para o conteúdo</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path="pt" ~ prepared_path) }}">Português</a>
|
||||
{% endif %}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<a id="skip-to-main" href="#main">Skip to content</a>
|
||||
{% endif %}
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
<div id="user-controls" class="{% if current_path and (current_path == "/" or current_path == "pt/" ) %}index-user-controls{% else %}subpage-user-controls{% endif %}">
|
||||
<nav id="nav-menu">
|
||||
<ul>
|
||||
{% if lang == "pt" %}
|
||||
<li><a id="home" href="{{ get_url(path="/pt") }}">Início</a></li>
|
||||
{% else %}
|
||||
<li><a id="home" href="{{ get_url(path="/") }}">Home</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li>
|
||||
<li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
|
||||
<li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
|
||||
<li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% if current_path and translation_count > 1 %}
|
||||
{% set english_path = current_path | regex_replace(pattern="^/pt", rep="") %}
|
||||
<div id="language-selector">
|
||||
|
|
@ -88,9 +78,10 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
{% block content %} {% endblock %}
|
||||
</main>
|
||||
<main id="main">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block footer %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,19 @@
|
|||
|
||||
{% block header %}
|
||||
<header>
|
||||
<pre class="header-art"
|
||||
role="img" aria-label="ASCII art with 'jutty.dev' in a 3D, slanted font">
|
||||
__ __ __
|
||||
__ /\ \__/\ \__ /\ \
|
||||
/\_\ __ __\ \ ,_\ \ ,_\ __ __ \_\ \ __ __ __
|
||||
\/\ \/\ \/\ \\ \ \/\ \ \/ /\ \/\ \ /'_` \ /'__`\/\ \/\ \
|
||||
\ \ \ \ \_\ \\ \ \_\ \ \_\ \ \_\ \ __/\ \L\ \/\ __/\ \ \_/ |
|
||||
_\ \ \ \____/ \ \__\\ \__\\/`____ \/\_\ \___,_\ \____\\ \___/
|
||||
/\ \_\ \/___/ \/__/ \/__/ `/___/> \/_/\/__,_ /\/____/ \/__/
|
||||
\ \____/ /\___/
|
||||
\/___/ \/__/
|
||||
</pre>
|
||||
<div class="header-art">
|
||||
<pre role="img" aria-label="ASCII art with 'jutty.dev' in a 3D, slanted font">
|
||||
__ __ __
|
||||
__ /\ \__/\ \__ /\ \
|
||||
/\_\ __ __\ \ ,_\ \ ,_\ __ __ \_\ \ __ __ __
|
||||
\/\ \/\ \/\ \\ \ \/\ \ \/ /\ \/\ \ /'_` \ /'__`\/\ \/\ \
|
||||
\ \ \ \ \_\ \\ \ \_\ \ \_\ \ \_\ \ __/\ \L\ \/\ __/\ \ \_/ |
|
||||
_\ \ \ \____/ \ \__\\ \__\\/`____ \/\_\ \___,_\ \____\\ \___/
|
||||
/\ \_\ \/___/ \/__/ \/__/ `/___/ \/_/\/__,_ /\/____/ \/__/
|
||||
\ \____/ /\___/
|
||||
\/___/ \/__/
|
||||
</pre>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock header %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1 id="post-title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="post-date"><strong>{{ page.date }}</strong></p>
|
||||
{{ page.content | safe }}
|
||||
|
||||
<article class="blog-post">
|
||||
<h1 id="post-title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="post-date"><strong>{{ page.date }}</strong></p>
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
{% endblock content %}
|
||||
|
||||
{% block footer %}
|
||||
<footer>
|
||||
<hr/>
|
||||
<p class="footer-text">
|
||||
made by <a href="https://jutty.dev">jutty</a>
|
||||
with <a href="https://www.getzola.org/">Zola</a>
|
||||
•
|
||||
BSD-licensed <a href="https://github.com/jultty/blog">source code</a>
|
||||
•
|
||||
<a href="{{ get_url(path="acknowledgments") }}">acknowledgments</a>
|
||||
<br/>
|
||||
built {{ now(utc=true) | date(format="%Y-%m-%d %H:%M") }} UTC, {{ now(timestamp=true) }} non-leap seconds since the Unix Epoch
|
||||
</p>
|
||||
</footer>
|
||||
{% endblock footer %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue