Move all template inline styles to style.css

This commit is contained in:
Juno Takano 2025-12-28 06:07:37 -03:00
commit b431a86b96
6 changed files with 64 additions and 21 deletions

View file

@ -37,7 +37,7 @@ a {
} }
a:visited { a:visited {
text-decoration-color: #aaa; text-decoration-color: #aaa;
} }
div.header-row { div.header-row {
@ -74,6 +74,24 @@ h1.node-title {
margin: 10px 0; margin: 10px 0;
} }
ul.tree-node-text {
display: inline;
padding-left: 0;
}
li.tree-node-text {
display: inline;
}
details.tree-node-text {
display: inline;
cursor: pointer;
}
summary.tree-node-text {
display: inline;
}
footer div { footer div {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
@ -84,8 +102,33 @@ footer p {
margin: 0; margin: 0;
} }
nav li { span.detached-connection {
filter: opacity(60%);
}
nav#main-menu {
text-align: center;
}
nav#main-menu ul {
display: inline;
padding-left: 0;
}
nav#main-menu li {
margin-right: 10px; margin-right: 10px;
display: inline;
}
div#error-poem {
text-align: right;
margin-top: 8em;
margin-right: 2em;
font-size: 0.8em;
}
em#index-node-count {
font-size: 0.8em;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

View file

@ -18,21 +18,21 @@
{% endblock head %} {% endblock head %}
</head> </head>
<body> <body>
<nav style="text-align: center;"> <nav id="main-menu">
<ul style="display: inline; padding-left: 0;"> <ul>
<li style="display: inline;"><a href="/">Index</a></li> <li><a href="/">Index</a></li>
{% if config.about %} {% if config.about %}
<li style="display: inline;"><a href="/about">About</a></li> <li><a href="/about">About</a></li>
{% endif %} {% endif %}
{% if config.tree %} {% if config.tree %}
<li style="display: inline;"><a href="/tree">Tree</a></li> <li><a href="/tree">Tree</a></li>
{% endif %} {% endif %}
{% if config.raw %} {% if config.raw %}
{% if config.raw_toml %} {% if config.raw_toml %}
<li style="display: inline;"><a href="/graph/toml">TOML Graph</a></li> <li><a href="/graph/toml">TOML Graph</a></li>
{% endif %} {% endif %}
{% if config.raw_json %} {% if config.raw_json %}
<li style="display: inline;"><a href="/graph/json">JSON Graph</a></li> <li><a href="/graph/json">JSON Graph</a></li>
{% endif %} {% endif %}
{% endif %} {% endif %}
</ul> </ul>

View file

@ -6,8 +6,8 @@
</h1> </h1>
{{ message | default(value="This error has not been described in detail.") | linebreaksbr | safe }} {{ message | default(value="This error has not been described in detail.") | linebreaksbr | safe }}
<hr> <hr>
<div align=right style="margin-top: 8em; margin-right: 2em"> <div id="error-poem">
<em style="font-size: 0.8em;"> <em>
fallen<br/> fallen<br/>
out of the circle<br/> out of the circle<br/>
you are welcome to climb<br/> you are welcome to climb<br/>

View file

@ -42,7 +42,7 @@
</ul> </ul>
{% if config.index_node_count < nodes | length %} {% if config.index_node_count < nodes | length %}
<br/> <br/>
<em style="font-size:0.9em""> <em id="index-node-count">
Listing {{ config.index_node_count }} of {{ nodes | length }} nodes. Listing {{ config.index_node_count }} of {{ nodes | length }} nodes.
{% if config.tree %} {% if config.tree %}
<br/> <br/>

View file

@ -30,7 +30,7 @@
<li> <li>
<strong>{{node.id}}</strong> <strong>{{node.id}}</strong>
&raquo; &raquo;
<span style="filter: opacity(70%);">{{connection.to}}</span> <span class="detached-connection">{{connection.to}}</span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

View file

@ -19,10 +19,10 @@
<ul> <ul>
{% if config.tree_node_text %} {% if config.tree_node_text %}
<li><strong>Text:</strong> <li><strong>Text:</strong>
<ul style="display: inline; padding-left: 0;"> <ul class="tree-node-text">
<li style="display: inline;"> <li class="tree-node-text">
<details style="display: inline; cursor: pointer;"> <details class="tree-node-text">
<summary style="display: inline;"> <summary class="tree-node-text">
{{root_node.text | truncate(length=120)}} {{root_node.text | truncate(length=120)}}
</summary> </summary>
{{root_node.text}} {{root_node.text}}
@ -55,10 +55,10 @@
<ul> <ul>
{% if config.tree_node_text %} {% if config.tree_node_text %}
<li><strong>Text:</strong> <li><strong>Text:</strong>
<ul style="display: inline; padding-left: 0;"> <ul class="tree-node-text">
<li style="display: inline;"> <li class="tree-node-text">
<details style="display: inline; cursor: pointer;"> <details class="tree-node-text">
<summary style="display: inline;"> <summary class="tree-node-text">
{{node.text | truncate(length=30)}} {{node.text | truncate(length=30)}}
</summary> </summary>
{{node.text}} {{node.text}}