Semantic HTML and post feed #23
|
@ -17,7 +17,7 @@ div#editor-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
div#editor-left div.contentblock {
|
div#editor-left section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 10px 5px 10px 10px;
|
margin: 10px 5px 10px 10px;
|
||||||
|
@ -48,7 +48,7 @@ textarea#editor-content {
|
||||||
div#editor-right {
|
div#editor-right {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
div#editor-right div.contentblock {
|
div#editor-right section {
|
||||||
margin: 10px 5px 10px 10px;
|
margin: 10px 5px 10px 10px;
|
||||||
}
|
}
|
||||||
span.message-warning {
|
span.message-warning {
|
||||||
|
|
|
@ -8,14 +8,14 @@ body {
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
div#wrapper {
|
main {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
div#header {
|
header {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
@ -24,7 +24,7 @@ div#header {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
div#header p, div#header h2 {
|
header p, header h2 {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
div#login-status {
|
div#login-status {
|
||||||
|
@ -33,7 +33,7 @@ div#login-status {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
div#sidebar {
|
nav {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
float:left;
|
float:left;
|
||||||
margin:5px;
|
margin:5px;
|
||||||
|
@ -46,7 +46,7 @@ div#sidebar {
|
||||||
img#logo {
|
img#logo {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
div#sidebar table {
|
nav table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
@ -63,32 +63,32 @@ table a {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
div#sidebar table a {
|
nav table a {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
table a:hover {
|
table a:hover {
|
||||||
background-color: var(--button-hover);
|
background-color: var(--button-hover);
|
||||||
}
|
}
|
||||||
div#sidebar table a.current-page {
|
nav table a.current-page {
|
||||||
background-color: var(--button-current);
|
background-color: var(--button-current);
|
||||||
}
|
}
|
||||||
div#sidebar table a.current-page:hover {
|
nav table a.current-page:hover {
|
||||||
background-color: var(--button-current);
|
background-color: var(--button-current);
|
||||||
}
|
}
|
||||||
div#sidebar table td {
|
nav table td {
|
||||||
padding: 0px; margin: 3px 0;
|
padding: 0px; margin: 3px 0;
|
||||||
border-bottom: 8px solid transparent;
|
border-bottom: 8px solid transparent;
|
||||||
}
|
}
|
||||||
div#content {
|
article {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
div.content-2col {
|
article.content-2col {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
left: 226px;
|
left: 226px;
|
||||||
max-width: 564px;
|
max-width: 564px;
|
||||||
}
|
}
|
||||||
div.contentblock {
|
section {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: 2px 2px 10px #888888;
|
box-shadow: 2px 2px 10px #888888;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
@ -216,26 +216,26 @@ details.setting-help {
|
||||||
width: 4em;
|
width: 4em;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 816px) {
|
@media only screen and (max-width: 816px) {
|
||||||
div#wrapper {
|
main {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
div#header {
|
header {
|
||||||
max-width: 554px;
|
max-width: 554px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
div#sidebar {
|
nav {
|
||||||
max-width: 548px;
|
max-width: 548px;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
float: inherit;
|
float: inherit;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
div#content{
|
article{
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
div.content-1col {
|
article.content-1col {
|
||||||
max-width: 564px;
|
max-width: 564px;
|
||||||
}
|
}
|
||||||
div.content-2col {
|
article.content-2col {
|
||||||
max-width: 564px;
|
max-width: 564px;
|
||||||
position: static;
|
position: static;
|
||||||
right: inherit;
|
right: inherit;
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='page.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='page.css') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="wrapper">
|
<main>
|
||||||
<div id="header">
|
<header>
|
||||||
<div id="login-status" {% block login_status_attr %}{% endblock %}>
|
<div id="login-status" {% block login_status_attr %}{% endblock %}>
|
||||||
{% if current_user.is_authenticated %}
|
{% if current_user.is_authenticated %}
|
||||||
<b>{{ current_user.username -}}</b>
|
<b>{{ current_user.username -}}</b>
|
||||||
|
@ -24,15 +24,15 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% block header %}{% endblock %}
|
{% block header %}{% endblock %}
|
||||||
</div>
|
</header>
|
||||||
{% block sidebar %}{% endblock %}
|
{% block sidebar %}{% endblock %}
|
||||||
<div id="content" class="{% block content_class %}{% endblock %}">
|
<article class="{% block content_class %}{% endblock %}">
|
||||||
{% if not template_content_blocks %}{% set template_content_blocks = [] %}{% endif %}
|
{% if not template_content_blocks %}{% set template_content_blocks = [] %}{% endif %}
|
||||||
{% if not content_blocks %}{% set content_blocks = [] %}{% endif %}
|
{% if not content_blocks %}{% set content_blocks = [] %}{% endif %}
|
||||||
{% for content_block in template_content_blocks + content_blocks %}<div class="contentblock">
|
{% for content_block in template_content_blocks + content_blocks -%}
|
||||||
{{ content_block|safe }}</div>
|
<section>{{ content_block|safe }}</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
{% extends "page.jinja" %}
|
{% extends "page.jinja" %}
|
||||||
{% block sidebar %}
|
{% block sidebar %}
|
||||||
<div id="sidebar">
|
<nav>
|
||||||
{% if not template_sidebar_rows %}{% set template_sidebar_rows = [] %}{% endif %}
|
{% if not template_sidebar_rows %}{% set template_sidebar_rows = [] %}{% endif %}
|
||||||
{% if not sidebar_rows %}{% set sidebar_rows = [] %}{% endif %}
|
{% if not sidebar_rows %}{% set sidebar_rows = [] %}{% endif %}
|
||||||
<table>
|
<table>
|
||||||
{% for row in template_sidebar_rows + sidebar_rows %}
|
{% for row in template_sidebar_rows + sidebar_rows %}
|
||||||
<tr><td>{{ row|safe }}</td></tr>{% endfor %}
|
<tr><td>{{ row|safe }}</td></tr>{% endfor %}
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</nav>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content_class %}content-2col{% endblock %}
|
{% block content_class %}content-2col{% endblock %}
|
|
@ -34,7 +34,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
<div id="editor-left" class="column">
|
<div id="editor-left" class="column">
|
||||||
<div class="contentblock">
|
<section>
|
||||||
{# Thin header bar #}
|
{# Thin header bar #}
|
||||||
<div id="editor-header">
|
<div id="editor-header">
|
||||||
{# Header always includes backlink to lexicon #}
|
{# Header always includes backlink to lexicon #}
|
||||||
|
@ -103,16 +103,16 @@
|
||||||
{# #}{{ article.contents }}{#
|
{# #}{{ article.contents }}{#
|
||||||
#}</textarea>
|
#}</textarea>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div id="editor-right" class="column">
|
<div id="editor-right" class="column">
|
||||||
<div id="preview" class="contentblock">
|
<section id="preview">
|
||||||
<p>This editor requires Javascript to function.</p>
|
<p>This editor requires Javascript to function.</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="preview-citations" class="contentblock">
|
<section id="preview-citations">
|
||||||
<p> </p>
|
<p> </p>
|
||||||
</div>
|
</div>
|
||||||
<div id="preview-control" class="contentblock">
|
<section id="preview-control">
|
||||||
<p> </p>
|
<p> </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue