From: Frédéric Péters <fpeters@0d.be>
Date: Sun, 29 Dec 2019 17:24:01 +0000 (+0100)
Subject: style: start with large and not much designed
X-Git-Tag: v2022~51
X-Git-Url: https://git.0d.be/?p=chloro.git;a=commitdiff_plain;h=b9f9b77184b8d1e24416e3392855e42bbb2fdef9

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
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
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 5796945..d46f147 100644
--- a/chloro/phyll/templates/phyll/base.html
+++ b/chloro/phyll/templates/phyll/base.html
@@ -9,8 +9,13 @@
     {% 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>
diff --git a/chloro/phyll/templates/phyll/home.html b/chloro/phyll/templates/phyll/home.html
index e650d66..ad9596e 100644
--- a/chloro/phyll/templates/phyll/home.html
+++ b/chloro/phyll/templates/phyll/home.html
@@ -1,4 +1,11 @@
 {% extends "phyll/base.html" %}
 
+{% block content-class %}home{% endblock %}
+
 {% 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 %}
diff --git a/chloro/phyll/templates/phyll/note_detail.html b/chloro/phyll/templates/phyll/note_detail.html
index f9d1b01..425ee2d 100644
--- 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 %}
 
+{% block content-class %}post{% endblock %}
+
 {% block body %}
-<h1>{{ object.title }}</h1>
+<div>
+<h2>{{ object.title }}</h2>
 <div>{{ object.text|safe }}</div>
+</div>
 {% endblock %}
 
 {% block bottom-actions %}