hack.less wip
parent
d1f01dd51e
commit
48af6fa551
|
@ -17,11 +17,11 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="main-block">
|
||||
<!--<div id="main-block">-->
|
||||
{{ block "main" . }}
|
||||
empty
|
||||
{{ end }}
|
||||
</div>
|
||||
<!--</div>-->
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
@ -1,11 +1,18 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<!-- {{ .TableOfContents }}-->
|
||||
|
||||
{{ .TableOfContents }}
|
||||
<!--<div class="content">-->
|
||||
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="date">published {{ .Date | time.Format "January 2006" }}</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="date">published {{ .Date | time.Format "January 2006" }}</div>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
<!-- </div>-->
|
||||
|
||||
{{ end }}
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<div class="warning">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
@font-normal: ~"'Roboto', sans-serif";
|
||||
@font-code: ~"'Inconsolata', monospace";
|
||||
@font-header: ~"'Zilla Slab', serif";
|
||||
//@font-header: ~"'Inconsolata', monospace";
|
||||
|
||||
@font-height: 1.7em;
|
||||
@font-code-height: 1.1em;
|
||||
|
|
|
@ -0,0 +1,80 @@
|
|||
@import "color.less";
|
||||
@import "font.less";
|
||||
|
||||
// Header
|
||||
header {
|
||||
h1 {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
padding: 20px 0 30px;
|
||||
margin: 0;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: "====================================================================================================";
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
|
||||
h2:before, h3:before, h4:before, h5:before, h6:before {
|
||||
display: inline
|
||||
}
|
||||
|
||||
h2:before {
|
||||
content: "## "
|
||||
}
|
||||
|
||||
h3:before {
|
||||
content: "### "
|
||||
}
|
||||
|
||||
h4:before {
|
||||
content: "#### "
|
||||
}
|
||||
|
||||
h5:before {
|
||||
content: "##### "
|
||||
}
|
||||
|
||||
h6:before {
|
||||
content: "###### "
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
.content {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 20px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul > li:after {
|
||||
content: "-"
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: a;
|
||||
|
||||
li:nth-child(n+10):after {
|
||||
left: -7px
|
||||
}
|
||||
|
||||
> li:after {
|
||||
content: counter(a) ".";
|
||||
counter-increment: a
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
// listings of articles
|
||||
ul.pages-list{
|
||||
list-style-type: none;
|
||||
margin-left: .0em;
|
||||
padding-left: .0em;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding-left: 1.3em;
|
||||
padding-right: 1.0em;
|
||||
padding-top: 1.0em;
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0em;
|
||||
background-color: @color-pages-list;
|
||||
|
||||
border-left: 3px solid @color-pages-list-border;
|
||||
|
||||
display: block;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: @color-pages-list-text;
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,10 +1,13 @@
|
|||
@import "color.less";
|
||||
@import "font.less";
|
||||
|
||||
body {
|
||||
#main-navigation {
|
||||
//background-color: @color-nav-background;
|
||||
//position: fixed;
|
||||
|
||||
width: 100%;
|
||||
display: grid;
|
||||
display: grid; // todo: no need for grids
|
||||
grid-template-columns: 1fr minmax(100px, 800px) 1fr;
|
||||
grid-template-areas:
|
||||
". menu .";
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
//body {
|
||||
// nav#TableOfContents {
|
||||
// grid-area: sidebar;
|
||||
//
|
||||
// font-family: @font-sidebar;
|
||||
// color: @color-sidebar-font;
|
||||
//
|
||||
// > ul {
|
||||
// position: fixed;
|
||||
// }
|
||||
//
|
||||
// ul {
|
||||
//
|
||||
// list-style-type: none;
|
||||
// margin-left: .0em;
|
||||
// padding-left: .6em;
|
||||
// }
|
||||
//
|
||||
//
|
||||
// a:link,a:visited,a:active {
|
||||
// text-decoration: none;
|
||||
// color: @color-sidebar-font;
|
||||
// }
|
||||
// a:hover {
|
||||
// text-decoration: underline;
|
||||
// color: @color-sidebar-font;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//@media @non-desktop {
|
||||
// body nav#TableOfContents {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
|
@ -4,6 +4,9 @@
|
|||
@import "media-types.less";
|
||||
@import "font.less";
|
||||
@import "main-navigation.less";
|
||||
@import "main-hack.less";
|
||||
@import "main-toc.less";
|
||||
@import "main-listing.less";
|
||||
|
||||
// left and right for notes and warning and and code blocks
|
||||
@special-info-padding-side: 0.5em;
|
||||
|
@ -11,111 +14,29 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
|
||||
#main-block{
|
||||
//padding-top: 49px;
|
||||
font-family: @font-normal;
|
||||
line-height: @font-height;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(100px,800px) 1fr;
|
||||
grid-template-areas:
|
||||
". content sidebar";
|
||||
header{
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: @font-normal;
|
||||
line-height: @font-height;
|
||||
|
||||
grid-area: content;
|
||||
|
||||
.date {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
h2,h3,h4,h5,h6,p,pre,div,ul,table,figure,ol{
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// listings of articles
|
||||
ul.pages-list{
|
||||
list-style-type: none;
|
||||
margin-left: .0em;
|
||||
padding-left: .0em;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding-left: 1.3em;
|
||||
padding-right: 1.0em;
|
||||
padding-top: 1.0em;
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0em;
|
||||
background-color: @color-pages-list;
|
||||
|
||||
border-left: 3px solid @color-pages-list-border;
|
||||
|
||||
display: block;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: @color-pages-list-text;
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media @non-desktop {
|
||||
body nav#TableOfContents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
nav#TableOfContents {
|
||||
grid-area: sidebar;
|
||||
|
||||
font-family: @font-sidebar;
|
||||
color: @color-sidebar-font;
|
||||
|
||||
> ul {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
list-style-type: none;
|
||||
margin-left: .0em;
|
||||
padding-left: .6em;
|
||||
}
|
||||
|
||||
|
||||
a:link,a:visited,a:active {
|
||||
text-decoration: none;
|
||||
color: @color-sidebar-font;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: @color-sidebar-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-margin {
|
||||
margin-top: .65em;
|
||||
margin-bottom: .65em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-family: @font-header;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
// ???
|
||||
.block-margin {
|
||||
margin-top: .65em;
|
||||
margin-bottom: .65em;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
@desktop: ~"(min-width: 1180px)";
|
||||
@non-desktop: ~"(max-width: 1200px)";
|
||||
|
||||
|
|
Loading…
Reference in New Issue