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