From 0fd3c14fbbc797638ff1714d68e361b2822fad36 Mon Sep 17 00:00:00 2001
From: Martial Simon <msimon_fr@hotmail.com>
Date: Tue, 9 Jul 2024 23:05:04 +0200
Subject: proto: homepage draft

---
 style.css | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 style.css

(limited to 'style.css')

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..aeabbea
--- /dev/null
+++ b/style.css
@@ -0,0 +1,135 @@
+body {
+	background: linear-gradient(74deg, skyblue, pink 60%, salmon);
+	padding: 0 10vh
+}
+
+h1::before, h1::after {
+	content: " - ";
+}
+/*h2::before, h2::after {
+	content: " ~ ";
+}*/
+
+h2 {
+	font-style: italic;
+}
+
+.text-link::after {
+	content: '<';
+}
+
+.text-link::before {
+	content: '>';
+}
+
+section p {
+	max-width: 500px;
+}
+
+@media screen and (max-width: 600px) {
+	section p {
+		max-width: 90vw;
+	}
+}
+
+section:nth-of-type(odd) {
+	justify-items: end;
+	text-align: end;
+}
+
+h1, h2 {
+	transition-property: text-decoration;
+	transition-duration: 0.7s;
+	transition-timing-function: ease-out;
+}
+
+h1:hover,h2:hover {
+	text-decoration: underline;
+}
+
+#timeline {
+	margin-top: 20px;
+	position: relative;
+}
+
+#timeline::before {
+	position: absolute;
+	content: '';
+	width: 5px;
+	height: 100%;
+	background: skyblue;
+	left: 14px;
+	border-radius: 3px;
+}
+
+.timestamp {
+	position: relative;
+	padding: 4px 15px 4px 35px;
+	background-color: salmon;
+	display: inline-block;
+	width: auto;
+	border-radius: 40px;
+	border: 1px solid pink;
+	margin-bottom: 30px;
+}
+
+.timestamp::before {
+	position: absolute;
+	content: '';
+	width: 20px;
+	height: 20px;
+	background-color: green;
+	border-radius: 100%;
+	border: 1px solid #8db600;
+	left: 5px;
+	/*top: 3px;*/
+}
+
+.events {
+	padding-left:35px;
+	display:block;
+	position: relative;
+	margin-bottom: 30px;
+}
+
+.events::before {
+	content: '';
+	position: absolute;
+	width: 30px;
+	height: 0;
+	border: 0.8px dashed red;
+	top: 12px;
+	left: 20px;
+}
+
+.events::after {
+	content: '';
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: purple;
+	top: 7px;
+	left: 11px;
+	border: 1px solid black;
+	border-radius: 100%;
+}
+
+.event {
+	position: relative;
+	border-radius: 0 15px 0 15px;
+	border: 1px solid gray;
+	transition: all 0.3s ease-in-out;
+	overflow: hidden;
+	padding: 0 2%;
+	max-width: 30vw;
+}
+
+footer {
+	font-family: serif, Cousine;
+	text-align: right;
+}
+
+@font-face{
+	font-family:Cousine;
+	src:url(./fonts/CousineNerdFont-Regular.ttf);
+}
-- 
cgit v1.2.3