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