style: start with large and not much designed

diff --git a/chloro/phyll/static/css/_opensans.scss b/chloro/phyll/static/css/_opensans.scss
new file mode 100644 (file)
index 0000000..35a0ae8
--- /dev/null
+++ b/chloro/phyll/static/css/_opensans.scss
@@ -0,0 +1,37 @@
+@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);

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
new file mode 100644 (file)
index 0000000..e25a946
--- /dev/null
+++ b/chloro/phyll/static/css/style.scss
@@ -0,0 +1,114 @@
+@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%;
+               }
+       }
+
+}

diff --git a/chloro/phyll/templates/phyll/base.html b/chloro/phyll/templates/phyll/base.html
index 57969453c04308c585d885b22e47e87fab76d9dc..d46f147950d922879389a13aa5393e13abc16ca5 100644 (file)
--- a/chloro/phyll/templates/phyll/base.html
+++ b/chloro/phyll/templates/phyll/base.html
@@ -9,8 +9,13 @@
     {% endblock %}
   </head>
   <body>
     {% endblock %}
   </head>
   <body>

-  {% block body %}
-  {% endblock %}
+    <header>
+      <h1><a href="/">Coin web de Frédéric Péters</a></h1>
+    </header>
+    <main class="{% block content-class %}{% endblock %}">
+      {% block body %}
+      {% endblock %}
+    </main>

   {% if request.user.is_staff %}
   <div class="actions">
     <a href="/new-note/">{% trans "New Note" %}</a>
   {% if request.user.is_staff %}
   <div class="actions">
     <a href="/new-note/">{% trans "New Note" %}</a>

diff --git a/chloro/phyll/templates/phyll/home.html b/chloro/phyll/templates/phyll/home.html
index e650d666d1674addc275adbd539b7bbb71665bf9..ad9596e89e39cd479844ca47e904163b1242178b 100644 (file)
--- a/chloro/phyll/templates/phyll/home.html
+++ b/chloro/phyll/templates/phyll/home.html
@@ -1,4 +1,11 @@
 {% extends "phyll/base.html" %}
 
 {% extends "phyll/base.html" %}
 

+{% block content-class %}home{% endblock %}
+

 {% block body %}
 {% block body %}

+<div>
+<a href="tag/radio/">Radio <span>(Panik &amp; ailleurs)</span></a>
+<a href="tag/code/">Logiciel libre <span>(Debian, GNOME &amp; ce qui passe)</span></a>
+<a href="tag/divers/"><span>(Totalement)</span> divers</a>
+</div>

 {% endblock %}
 {% endblock %}

diff --git a/chloro/phyll/templates/phyll/note_detail.html b/chloro/phyll/templates/phyll/note_detail.html
index f9d1b0101a60dacc909f22bb12c5a043c024c3f9..425ee2da38e13dbcf0779fd472c2e97691f53622 100644 (file)
--- a/chloro/phyll/templates/phyll/note_detail.html
+++ b/chloro/phyll/templates/phyll/note_detail.html
@@ -1,9 +1,13 @@
 {% extends "phyll/base.html" %}
 {% load i18n %}
 
 {% extends "phyll/base.html" %}
 {% load i18n %}
 

+{% block content-class %}post{% endblock %}
+

 {% block body %}
 {% block body %}

-<h1>{{ object.title }}</h1>
+<div>
+<h2>{{ object.title }}</h2>

 <div>{{ object.text|safe }}</div>
 <div>{{ object.text|safe }}</div>

+</div>

 {% endblock %}
 
 {% block bottom-actions %}
 {% endblock %}
 
 {% block bottom-actions %}