90 lines
2.3 KiB
HTML
90 lines
2.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="document-container">
|
|
<header class="document-header">
|
|
<h1>{{ organization.name }}</h1>
|
|
<div class="document-meta">
|
|
<p>Created: {{ document.created_at|date:"F j, Y" }}</p>
|
|
<p>Last modified: {{ document.modified_at|date:"F j, Y" }}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<article class="document-content">
|
|
{% for segment in segments %}
|
|
{% if segment.segment_type == 'title' %}
|
|
<h1 class="document-title">{{ segment.content }}</h1>
|
|
{% elif segment.segment_type == 'subtitle' %}
|
|
<h2 class="document-subtitle">{{ segment.content }}</h2>
|
|
{% elif segment.segment_type == 'h1' %}
|
|
<h2 class="document-h1">{{ segment.content }}</h2>
|
|
{% elif segment.segment_type == 'h2' %}
|
|
<h3 class="document-h2">{{ segment.content }}</h3>
|
|
{% elif segment.segment_type == 'h3' %}
|
|
<h4 class="document-h3">{{ segment.content }}</h4>
|
|
{% elif segment.segment_type == 'quote' %}
|
|
<blockquote class="document-quote">{{ segment.content }}</blockquote>
|
|
{% else %}
|
|
<p class="document-body">{{ segment.content }}</p>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</article>
|
|
</div>
|
|
|
|
<style>
|
|
.document-container {
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.document-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.document-meta {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.document-content {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.document-title {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.document-subtitle {
|
|
font-size: 2rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.document-h1 {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.document-h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.document-h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.document-quote {
|
|
border-left: 4px solid #ccc;
|
|
margin: 1.5rem 0;
|
|
padding-left: 1rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.document-body {
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
{% endblock %} |