1
0
Fork 0
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:
muflax 2011-12-23 12:33:28 +01:00
parent a5100b2e42
commit fd05f6f764
3 changed files with 145 additions and 114 deletions

View file

@ -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 */

View file

@ -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>

View file

@ -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