SCSS -> SASS
This commit is contained in:
parent
6d58962e08
commit
abd9c07ac8
13 changed files with 134 additions and 140 deletions
|
@ -1,19 +1,17 @@
|
|||
body.blog
|
||||
&.post
|
||||
article
|
||||
h1
|
||||
font-size: 1.8em
|
||||
margin-bottom: 0.3em
|
||||
article.blog-post
|
||||
h1
|
||||
font-size: 1.8em
|
||||
margin-bottom: 0.3em
|
||||
|
||||
.info
|
||||
font-size: 0.9em
|
||||
.info
|
||||
font-size: 0.9em
|
||||
|
||||
.content
|
||||
margin-top: 1em
|
||||
.content
|
||||
margin-top: 1em
|
||||
|
||||
img
|
||||
display: block
|
||||
margin: 0 auto
|
||||
img
|
||||
display: block
|
||||
margin: 0 auto
|
||||
|
||||
img
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2)
|
||||
img
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
|
||||
|
|
43
assets/static/sass/_grid.sass
Normal file
43
assets/static/sass/_grid.sass
Normal file
|
@ -0,0 +1,43 @@
|
|||
*
|
||||
+box-sizing(border-box)
|
||||
|
||||
$pad: 20px
|
||||
|
||||
.grid
|
||||
background: white
|
||||
margin: 0 0 $pad 0
|
||||
|
||||
&:after
|
||||
/* Or @extend clearfix
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
|
||||
[class*='col-']
|
||||
float: left
|
||||
padding-right: $pad
|
||||
|
||||
.grid &:last-of-type
|
||||
padding-right: 0
|
||||
|
||||
.col-2-3
|
||||
width: 66.66%
|
||||
|
||||
.col-1-3
|
||||
width: 33.33%
|
||||
|
||||
.col-1-2
|
||||
width: 50%
|
||||
|
||||
.col-1-4
|
||||
width: 25%
|
||||
|
||||
.col-1-8
|
||||
width: 12.5%
|
||||
|
||||
/* Opt-in outside padding
|
||||
.grid-pad
|
||||
padding: $pad 0 $pad $pad
|
||||
|
||||
[class*='col-']:last-of-type
|
||||
padding-right: $pad
|
|
@ -1,48 +0,0 @@
|
|||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
$pad: 20px;
|
||||
|
||||
.grid {
|
||||
background: white;
|
||||
margin: 0 0 $pad 0;
|
||||
|
||||
&:after {
|
||||
/* Or @extend clearfix */
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
padding-right: $pad;
|
||||
.grid &:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.col-2-3 {
|
||||
width: 66.66%;
|
||||
}
|
||||
.col-1-3 {
|
||||
width: 33.33%;
|
||||
}
|
||||
.col-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
/* Opt-in outside padding */
|
||||
.grid-pad {
|
||||
padding: $pad 0 $pad $pad;
|
||||
[class*='col-']:last-of-type {
|
||||
padding-right: $pad;
|
||||
}
|
||||
}
|
50
assets/static/sass/_layout.sass
Normal file
50
assets/static/sass/_layout.sass
Normal file
|
@ -0,0 +1,50 @@
|
|||
body
|
||||
font-family: "Antic Slab"
|
||||
font-size: 20px
|
||||
line-height: 1.5em
|
||||
|
||||
.center
|
||||
margin: 0 auto
|
||||
max-width: 920px
|
||||
|
||||
a
|
||||
text-decoration: underilne
|
||||
color: #c24e4a
|
||||
|
||||
img max-width: 100%
|
||||
|
||||
header
|
||||
h1
|
||||
font-size: 1.5em
|
||||
margin-bottom: 0
|
||||
text-align: right
|
||||
|
||||
h2
|
||||
font-size: 0.8em
|
||||
font-weight: normal
|
||||
margin-top: 0
|
||||
display: none
|
||||
|
||||
nav.main-menu
|
||||
text-align: right
|
||||
|
||||
footer
|
||||
font-size: 0.7em
|
||||
padding-top: 1em
|
||||
|
||||
hr.light
|
||||
border: 0px
|
||||
margin: 1em 0 1em 0
|
||||
border-top: #CCC 1px solid
|
||||
|
||||
p:first-child
|
||||
margin-top: 0
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
.float-right
|
||||
float: right
|
|
@ -1,57 +0,0 @@
|
|||
body {
|
||||
font-family: 'Antic Slab';
|
||||
font-size: 20px;
|
||||
line-height: 1.5em
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underilne;
|
||||
//color: inherit !important;
|
||||
color: #c24e4a;
|
||||
//color: #3da3b7;
|
||||
}
|
||||
|
||||
img { max-width: 100%; }
|
||||
|
||||
header {
|
||||
h1 { margin-bottom: 0; font-size: 1.5em; text-align: right; }
|
||||
|
||||
h2 {
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav.main-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 0.7em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
hr.light {
|
||||
border: 0px;
|
||||
margin: 1em 0 1em 0;
|
||||
border-top: #CCC 1px solid;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
6
assets/static/sass/_mediaqueries.sass
Normal file
6
assets/static/sass/_mediaqueries.sass
Normal file
|
@ -0,0 +1,6 @@
|
|||
$desktop: "(max-width: 992px)"
|
||||
$until-desktop: "(min-width: 768px)"
|
||||
$tablet: "(max-width: 768px)"
|
||||
$until-tablet: "(min-width: 768px)"
|
||||
$mobile: "(max-width: 480px)"
|
||||
$until-mobile: "(min-width: 480px)"
|
|
@ -1,6 +0,0 @@
|
|||
$desktop: "(max-width: 992px)";
|
||||
$until-desktop: "(min-width: 768px)";
|
||||
$tablet: "(max-width: 768px)";
|
||||
$until-tablet: "(min-width: 768px)";
|
||||
$mobile: "(max-width: 480px)";
|
||||
$until-mobile: "(min-width: 480px)";
|
4
assets/static/sass/_mixins.sass
Normal file
4
assets/static/sass/_mixins.sass
Normal file
|
@ -0,0 +1,4 @@
|
|||
=box-sizing($type)
|
||||
-webkit-box-sizing: $type
|
||||
-moz-box-sizing: $type
|
||||
box-sizing: $type
|
|
@ -1,5 +0,0 @@
|
|||
@mixin box-sizing($type) {
|
||||
-webkit-box-sizing: $type;
|
||||
-moz-box-sizing: $type;
|
||||
box-sizing: $type;
|
||||
}
|
7
assets/static/sass/style.sass
Normal file
7
assets/static/sass/style.sass
Normal file
|
@ -0,0 +1,7 @@
|
|||
@import ./mediaqueries
|
||||
@import ./mixins
|
||||
@import ./grid
|
||||
@import ./layout
|
||||
@import ./blog
|
||||
@import ./table
|
||||
@import ./syntax
|
|
@ -1,7 +0,0 @@
|
|||
@import "./mediaqueries";
|
||||
@import "./mixins";
|
||||
@import "./grid";
|
||||
@import "./layout";
|
||||
@import "./blog";
|
||||
@import "./table";
|
||||
@import "./syntax";
|
|
@ -8,6 +8,8 @@ improvements to the workstation that made my life easier.
|
|||
|
||||
After other two weeks I will post a summary with the good and bad parts.
|
||||
|
||||
<!-- readmore -->
|
||||
|
||||
## Stuff fixed
|
||||
|
||||
### Lightdm black screen
|
||||
|
|
|
@ -1,11 +1,18 @@
|
|||
{% macro render_blog_post(post, from_index=false) %}
|
||||
<article class="center">
|
||||
{% set summary = post.body.html.split('<!-- readmore -->') %}
|
||||
<article class="blog-post center">
|
||||
<h1><a href="{{ post|url }}">{{ post.title }}</a></h1>
|
||||
<div class="info">
|
||||
Published on {{ post.pub_date }} with <a href="#">no comments.</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ post.body }}
|
||||
{% if from_index and summary|length > 1 %}
|
||||
{{ summary[0] }}
|
||||
<p class="text-right"><a href="{{ post|url }}">Read more</a></p>
|
||||
{% else %}
|
||||
{{ post.body }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<hr class="light">
|
||||
</article>
|
||||
{% endmacro %}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue