--- /dev/null
+@charset "UTF-8";
+
+$font-path: '../xstatic/fonts' !default;
+
+@mixin font($type, $weight) {
+ @font-face {
+ font-family: 'Open Sans';
+ src: url('#{$font-path}/#{$type}/OpenSans-#{$type}.woff2') format('woff2'),
+ url('#{$font-path}/#{$type}/OpenSans-#{$type}.woff') format('woff'),
+ url('#{$font-path}/#{$type}/OpenSans-#{$type}.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-path}/#{$type}/OpenSans-#{$type}.ttf?#iefix') format('truetype');
+ font-weight: $weight;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'Open Sans';
+ @if $type == Regular { // not RegularItalic
+ src: url('#{$font-path}/Italic/OpenSans-Italic.woff2') format('woff2'),
+ url('#{$font-path}/Italic/OpenSans-Italic.woff') format('woff'),
+ url('#{$font-path}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-path}/Italic/OpenSans-Italic.ttf?#iefix') format('truetype');
+ } @else {
+ src: url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.woff2') format('woff2'),
+ url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.woff') format('woff'),
+ url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.ttf?#iefix') format('truetype');
+ }
+ font-weight: $weight;
+ font-style: italic;
+ }
+}
+
+@include font('Light', 300);
+@include font('Regular', 400);
+@include font('Semibold', 600);
+@include font('Bold', 700);
+@include font('ExtraBold', 800);
--- /dev/null
+@charset "UTF-8";
+
+$text-color: #222;
+$link-color: #0000ee;
+$visited-link-color: #551a8b;
+
+@import "opensans";
+
+body {
+ font-family: "Open Sans", sans-serif;
+ background: white;
+ color: $text-color;
+ font-size: 100%;
+}
+
+a {
+ color: $link-color;
+ text-decoration: none;
+ border-bottom: 0.1em dotted $link-color;
+ &:visited {
+ color: $visited-link-color;
+ border-color: $visited-link-color;
+ }
+ &:hover {
+ border-bottom-style: solid;
+ }
+}
+
+header {
+ display: inline-block;
+ h1 {
+ font-weight: normal;
+ text-transform: uppercase;
+ margin: 1em 0 0 1em;
+ padding: 0 0.5em;
+ color: lighten($text-color, 20%);
+ background: #fafaff;
+ display: inline-block;
+ a {
+ border: none;
+ }
+ }
+ transform: rotate(-2deg);
+ position: relative;
+ z-index: 2;
+}
+
+div.actions {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ a {
+ margin-left: 1rem;
+ }
+}
+
+main {
+ margin: 0 4em;
+ padding: 1em;
+ background: #fafaff;
+ max-width: 70em;
+ min-height: 70vh;
+ clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
+}
+
+.home {
+ a {
+ text-transform: uppercase;
+ display: block;
+ text-decoration: none;
+ font-size: 500%;
+ font-weight: bold;
+ padding-top: 0.5em;
+ line-height: 50%;
+ span {
+ font-size: 30%;
+ }
+ margin-bottom: 2rem;
+ }
+}
+
+.post {
+ max-width: 50em;
+ div.figure {
+ text-align: center;
+ margin: 1em 0;
+ img {
+ border: 1px solid gray;
+ padding: 3px;
+ }
+ }
+}
+
+.post-list {
+ ul, li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+ }
+ a {
+ text-transform: uppercase;
+ display: inline-block;
+ text-decoration: none;
+ font-size: 200%;
+ font-weight: bold;
+ padding-top: 0.5em;
+ margin-right: 1em;
+ span {
+ font-size: 60%;
+ }
+ }
+
+}
{% extends "phyll/base.html" %}
+{% block content-class %}home{% endblock %}
+
{% block body %}
+<div>
+<a href="tag/radio/">Radio <span>(Panik & ailleurs)</span></a>
+<a href="tag/code/">Logiciel libre <span>(Debian, GNOME & ce qui passe)</span></a>
+<a href="tag/divers/"><span>(Totalement)</span> divers</a>
+</div>
{% endblock %}