mirror of
https://github.com/fmap/muflax65ngodyewp.onion
synced 2024-06-29 10:36:48 +02:00
made some progress with the design
This commit is contained in:
parent
a5100b2e42
commit
fd05f6f764
|
@ -10,6 +10,11 @@ $hover: #057dff;
|
||||||
$quote: #a6a542;
|
$quote: #a6a542;
|
||||||
$pre: #fff8d9;
|
$pre: #fff8d9;
|
||||||
|
|
||||||
|
/* sizes */
|
||||||
|
$left-col: 45em;
|
||||||
|
$right-col: 25em;
|
||||||
|
$margin: 1em;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: $bg;
|
background: $bg;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
|
@ -20,16 +25,37 @@ body {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div#body {
|
||||||
|
width: $left-col + $right-col;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
div#main {
|
div#main {
|
||||||
padding: 0;
|
width: $left-col;
|
||||||
width: 45em;
|
float: left;
|
||||||
|
margin-bottom: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#title {
|
div#title {
|
||||||
|
h1 {
|
||||||
|
background: $crumb-bg;
|
||||||
|
color: $crumb-fg;
|
||||||
|
line-height: 1.3em;
|
||||||
|
font-size: 1.7em;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link.title, a:hover.title, a:visited.title, a:active.title {
|
||||||
background: $crumb-bg;
|
background: $crumb-bg;
|
||||||
color: $crumb-fg;
|
color: $crumb-fg;
|
||||||
line-height: 1.3;
|
}
|
||||||
text-align: center;
|
|
||||||
|
/* don't underline titles */
|
||||||
|
a:link.title, a:visited.title, a:active.title {
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* episteme header */
|
/* episteme header */
|
||||||
|
@ -44,34 +70,40 @@ div#disqus {
|
||||||
}
|
}
|
||||||
|
|
||||||
div#nav {
|
div#nav {
|
||||||
float: right;
|
float: left;
|
||||||
position: absolute;
|
width: $right-col - $margin;
|
||||||
right: 0;
|
margin-left: $margin;
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* toc */
|
/* toc */
|
||||||
div#toc {
|
div#toc {
|
||||||
|
h1 {
|
||||||
|
background: $crumb-bg;
|
||||||
|
color: $crumb-fg;
|
||||||
|
line-height: 1.3em;
|
||||||
|
font-size: 1.7em;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#crumb {
|
div#crumb {
|
||||||
|
a {
|
||||||
|
line-height: 1.4em;
|
||||||
|
font-size: 1.3em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
background: $crumb-bg;
|
background: $crumb-bg;
|
||||||
color: $crumb-fg;
|
color: $crumb-fg;
|
||||||
line-height: 2em;
|
// line-height: 2em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// width: 100%;
|
position: fixed;
|
||||||
float: right;
|
bottom: 0;
|
||||||
}
|
left: auto;
|
||||||
|
width: $left-col + $right-col;
|
||||||
|
margin: 0 auto;
|
||||||
a:link.title, a:hover.title, a:visited.title, a:active.title {
|
|
||||||
font-size: 1.7em;
|
|
||||||
color: $crumb-fg;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* don't underline titles */
|
|
||||||
a:link.title, a:visited.title, a:active.title {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.footnotes {
|
div.footnotes {
|
||||||
|
@ -80,13 +112,13 @@ div.footnotes {
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
margin-left: 0.2em;
|
margin-left: 0.2em;
|
||||||
/* font-size: 1em; */
|
// font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link.crumb, a:hover.crumb, a:visited.crumb, a:active.crumb {
|
a:link.crumb, a:hover.crumb, a:visited.crumb, a:active.crumb {
|
||||||
color: $crumb-fg;
|
color: $crumb-fg;
|
||||||
font-size: 1.3em;
|
// font-size: 1.3em;
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
|
@ -106,8 +138,8 @@ a.episteme:hover {
|
||||||
|
|
||||||
/* move paragraphs a bit closer to the center, with list exceptions */
|
/* move paragraphs a bit closer to the center, with list exceptions */
|
||||||
p {
|
p {
|
||||||
margin-left: 1em;
|
margin-left: $margin;
|
||||||
margin-right: 1em;
|
margin-right: $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul p {
|
ul p {
|
||||||
|
@ -129,11 +161,11 @@ ol p {
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.table .align_right {
|
ul.table .align_right {
|
||||||
margin-right: 1em;
|
margin-right: $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.table li {
|
ul.table li {
|
||||||
margin-left: -1em;
|
margin-left: -$margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* general lists */
|
/* general lists */
|
||||||
|
@ -142,18 +174,18 @@ li {
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
margin-left: 2em;
|
margin-left: 2 * $margin;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-left: 1em;
|
padding-left: $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: square;
|
list-style-type: square;
|
||||||
margin-left: 2em;
|
margin-left: 2 * $margin;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-left: 1em;
|
padding-left: $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
|
@ -211,15 +243,15 @@ h3, h4, h5, h6 {
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 10px solid $quote;
|
border-left: 10px solid $quote;
|
||||||
border-right: 10px solid $quote;
|
border-right: 10px solid $quote;
|
||||||
margin-left: 1em;
|
margin-left: $margin;
|
||||||
margin-right: 1em;
|
margin-right: $margin;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fix indentation if blockquote is already indented */
|
/* fix indentation if blockquote is already indented */
|
||||||
li blockquote {
|
li blockquote {
|
||||||
padding-left: 1em;
|
padding-left: $margin;
|
||||||
margin-right: 2em;
|
margin-right: 2 * $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
@ -228,7 +260,7 @@ pre {
|
||||||
font-family: monospace !important;
|
font-family: monospace !important;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0.5em 1em;
|
padding: $margin/2 $margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* pygments code highlighting */
|
/* pygments code highlighting */
|
||||||
|
|
|
@ -21,88 +21,87 @@
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- main part -->
|
<div id="body">
|
||||||
<div id="main">
|
<!-- main part -->
|
||||||
<!-- page title -->
|
<div id="main">
|
||||||
<% if @item[:title] %>
|
<!-- page title -->
|
||||||
<div id="title"><a class="title" href="/"><%= @item[:title] %></a></div>
|
<% if @item[:title] %>
|
||||||
<% end %>
|
<div id="title"><h1 class="title">
|
||||||
|
<a class="title" href="/"><%= @item[:title] %></a>
|
||||||
|
</h1></div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<!-- epistemic and technical state -->
|
<!-- epistemic and technical state -->
|
||||||
<div id="episteme">
|
<div id="episteme">
|
||||||
<% if @item[:episteme] %>
|
<% if @item[:episteme] %>
|
||||||
<p><span class="align_left">
|
<p><span class="align_left">
|
||||||
Last modified:
|
Last modified:
|
||||||
<a class='episteme' href='/changelog/'>
|
<a class='episteme' href='/changelog/'>
|
||||||
<%= @item[:date] %>
|
<%= @item[:date] %>
|
||||||
</a> (<%= techne @item[:techne] %>).
|
</a> (<%= techne @item[:techne] %>).
|
||||||
</span>
|
</span>
|
||||||
<span class="align_right">
|
<span class="align_right">
|
||||||
Epistemic state:
|
Epistemic state:
|
||||||
<a class='episteme' href='/episteme/'>
|
<a class='episteme' href='/episteme/'>
|
||||||
<%= episteme @item[:episteme] %></a>.
|
<%= episteme @item[:episteme] %></a>.
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- actual content (not indented to protect markdown) -->
|
||||||
|
<div id="content">
|
||||||
|
|
||||||
|
<%= yield %>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- comments -->
|
||||||
|
<% unless @item[:no_comments] or @item[:is_category] %>
|
||||||
|
<div id="disqus">
|
||||||
|
<div id="disqus_thread"></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var disqus_shortname = 'muflax';
|
||||||
|
var disqus_identifier = '<%= @item.identifier %>';
|
||||||
|
var disqus_url = 'http://muflax.com<%= @item.identifier %>';
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var dsq = document.createElement('script')
|
||||||
|
dsq.type = 'text/javascript'
|
||||||
|
dsq.async = true;
|
||||||
|
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
||||||
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>Please enable JavaScript to view the
|
||||||
|
<a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
|
||||||
|
</noscript>
|
||||||
|
<a href="http://disqus.com" class="dsq-brlink">
|
||||||
|
blog comments powered by <span class="logo-disqus">Disqus</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- actual content (not indented to protect markdown) -->
|
<!-- navigation sidebar -->
|
||||||
<div id="content">
|
<div id="nav">
|
||||||
|
<!-- table of contents -->
|
||||||
<%= yield %>
|
<% if @item[:toc] %>
|
||||||
|
<div id="toc">
|
||||||
|
<%= toc %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<!-- contact -->
|
||||||
|
<!-- TODO -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- comments -->
|
|
||||||
<% unless @item[:no_comments] or @item[:is_category] %>
|
|
||||||
<div id="disqus">
|
|
||||||
<div id="disqus_thread"></div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var disqus_shortname = 'muflax';
|
|
||||||
var disqus_identifier = '<%= @item.identifier %>';
|
|
||||||
var disqus_url = 'http://muflax.com<%= @item.identifier %>';
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var dsq = document.createElement('script')
|
|
||||||
dsq.type = 'text/javascript'
|
|
||||||
dsq.async = true;
|
|
||||||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
|
||||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
<noscript>Please enable JavaScript to view the
|
|
||||||
<a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
|
|
||||||
</noscript>
|
|
||||||
<a href="http://disqus.com" class="dsq-brlink">
|
|
||||||
blog comments powered by <span class="logo-disqus">Disqus</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- navigation sidebar -->
|
|
||||||
<div id="nav">
|
|
||||||
<!-- table of contents -->
|
|
||||||
<% if @item[:toc] %>
|
|
||||||
<div id="toc">
|
|
||||||
<%= toc %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<!-- breadcrumb navigation -->
|
<!-- breadcrumb navigation -->
|
||||||
<div id="crumb">
|
<div id="crumb">
|
||||||
<ul id="crumb">
|
<%= breadcrumbs.map do |crumb|
|
||||||
<% breadcrumbs.each do |crumb| %>
|
"<a class='crumb' href='#{crumb[:link]}'>#{crumb[:title].downcase}</a>"
|
||||||
<li class="crumb">
|
end.join(" » ") %>
|
||||||
<a class="crumb" href="<%= crumb[:link] %>"><%= crumb[:title] %></a>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- contact -->
|
|
||||||
<!-- TODO -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -5,7 +5,7 @@ def breadcrumbs
|
||||||
breadcrumbs_for_identifier(@item.identifier).map do |crumb|
|
breadcrumbs_for_identifier(@item.identifier).map do |crumb|
|
||||||
{
|
{
|
||||||
link: crumb.identifier,
|
link: crumb.identifier,
|
||||||
title: crumb[:short_title] || crumb[:title] || crumb.name,
|
title: (crumb[:short_title] || crumb[:title] || crumb.name).to_s,
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue