CSS cleanup (#115)

fabi1cazenave · Jan 19, 2024 · 437809a · 437809a
1 parent 70d61b1
commit 437809a
Show file tree

Hide file tree

Showing 14 changed files with 428 additions and 460 deletions.
diff --git a/101.html b/101.html
diff --git a/css/images/key-bksp.png → css/101/key-bksp.png b/css/images/key-bksp.png → css/101/key-bksp.png
diff --git a/css/images/key-caps.png → css/101/key-caps.png b/css/images/key-caps.png → css/101/key-caps.png
diff --git a/css/images/key-rtrn.png → css/101/key-rtrn.png b/css/images/key-rtrn.png → css/101/key-rtrn.png
diff --git a/css/images/key-shift.png → css/101/key-shift.png b/css/images/key-shift.png → css/101/key-shift.png
diff --git a/css/images/key-tab.png → css/101/key-tab.png b/css/images/key-tab.png → css/101/key-tab.png
diff --git a/css/keyboard.css → css/101/keyboard.css b/css/keyboard.css → css/101/keyboard.css
@@ -79,12 +79,12 @@ kbd.specialKey {
   background-position: bottom left;
 }
 
-#key_TAB  { background-image: url(images/key-tab.png);  }
-#key_BKSP { background-image: url(images/key-bksp.png); }
-#key_CAPS { background-image: url(images/key-caps.png); }
-#key_RTRN { background-image: url(images/key-rtrn.png); }
+#key_TAB  { background-image: url(key-tab.png);  }
+#key_BKSP { background-image: url(key-bksp.png); }
+#key_CAPS { background-image: url(key-caps.png); }
+#key_RTRN { background-image: url(key-rtrn.png); }
 #key_LFSH,
-#key_RTSH { background-image: url(images/key-shift.png); }
+#key_RTSH { background-image: url(key-shift.png); }
 
 
 /******************************************************************************

diff --git a/css/lafayette.css → css/101/layout.css b/css/lafayette.css → css/101/layout.css
@@ -1,26 +1,19 @@
-a, a:hover, a:visited, a:active {
-  color: brown;
+body {
+  min-width: 780px;
 }
 
-code {
-  background-color: #eef;
-  padding: 2px;
+nav {
+  float: right;
 }
 
-kbd {
-  background: white;
-  border-color: #ddd #bbb #bbb #ddd;
-  border-radius: 3px;
-  border-style: solid;
-  border-width: 1px 1px 2px;
-  margin-bottom: 0.5em;
-  padding: 1px 3px;
-  white-space: nowrap;
+#intro {
+  width: 664px;
+  margin: 20px auto;
 }
 
 
 /******************************************************************************
- * Keyboard layout
+ * Keyboard Colors
  */
 
 /* primary lafayette keys */
@@ -103,7 +96,7 @@ kbd .level6 {
   overflow: hidden;
   position: relative;
   height: 350px;
-  width: 780px;
+  width: calc(100% + 40px);
   margin: 0 -20px;
 }
 
@@ -112,7 +105,7 @@ kbd .level6 {
   top: 0;
   width: 620px;
   height: 300px;
-  margin: 0 58px;
+  margin: 0 calc(50% - 330px);
   padding: 20px;
   border: 1px solid #ddd;
   background-color: #f8f8f8;
@@ -150,6 +143,37 @@ kbd .level6 {
 }
 
 
+/**
+ * Transitions -- ignored by IE<10 and older browsers
+ */
+
+#keyboard kbd,
+#keyboard span {
+  transition-duration: 1s;
+  transition-property: opacity, background-color;
+}
+
+#description div {
+  transition-duration: 1s;
+  transition-property: transform, opacity;
+}
+
+#description div[smil=idle] {
+  opacity: 0;
+  transform: scale(0.3) translate(+160%);
+}
+
+#description div[smil=active] {
+  opacity: 1;
+}
+
+#description div[smil=done] {
+  opacity: 0;
+  transform: scale(0.3) translate(-160%);
+}
+
+
+
 /******************************************************************************
  * Download
  */

diff --git a/css/images/forkme.png b/css/images/forkme.png
diff --git a/css/lafayette-oldie.css b/css/lafayette-oldie.css
diff --git a/css/lafayette42.css b/css/lafayette42.css
diff --git a/css/layout.css b/css/layout.css
@@ -1,17 +1,30 @@
+html {
+  background-color: #ccc;
+  height: 100%;
+}
+
+body {
+  margin: auto;
+  padding: 20px;
+  max-width: 54em;
+  min-height: calc(100% - 40px);
+  font-family: sans-serif;
+  border-left: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  background-color: #fdfdfd;
+  color: #333;
+  box-shadow: 0px 1px 10px #888;
+}
+
 h1 {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 30px;
 }
 
-h1 + p {
-  margin-top: 0.5em;
-  color: #c8a;
-}
-
 h1, h2 {
   color: brown;
-  border-bottom: 1px inset brown;
+  border-bottom: 1px solid brown;
 }
 
 h2 {
@@ -31,48 +44,51 @@ h3 {
   border-bottom: 1px dotted #333;
 }
 
-dd, dt {
-  margin-bottom: 0.5em;
+header p {
+  margin-top: 0.5em;
+  color: #735;
 }
 
+#intro {
+  padding: 0;
+  margin: 20px;
+}
 
-/******************************************************************************
- * Fixed width layout (780px)
- */
+.highlight {
+  margin: 20px 0;
+  padding: 0 20px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  border-radius: 15px;
+}
 
-html {
-  background-color: #ccc;
-  height: 100%;
+dd, dt {
+  margin-bottom: 0.5em;
 }
 
-body {
-  width: 740px;
-  margin: auto;
-  padding: 20px;
-  min-height: calc(100% - 40px);
-  font-family: sans-serif;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid #aaa;
-  background-color: #fdfdfd;
-  color: #333;
-  box-shadow: 0px 1px 10px #888;
+a, a:hover, a:visited, a:active {
+  color: brown;
 }
 
-/******************************************************************************
- * "Fork me" ribbon
- */
+code {
+  background-color: #eef;
+  padding: 2px;
+}
 
-#github {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  display: block;
-  width: 149px;
-  height: 149px;
-  background-image: url(images/forkme.png);
+kbd {
+  background: white;
+  border-color: #ddd #bbb #bbb #ddd;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px 1px 2px;
+  margin-bottom: 0.5em;
+  padding: 1px 3px;
+  white-space: nowrap;
 }
 
-#github span {
-  display: none;
+footer {
+  color: brown;
+  margin-top: 3em;
+  border-top: 1px solid brown;
+  text-align: right;
 }
diff --git a/css/transitions.css b/css/transitions.css
diff --git a/index.html b/index.html
@@ -5,20 +5,19 @@
   <meta name="description" content="Une variante ergonomique de QWERTY pour les
     développeurs francophones et les typographes exigeants. " />
   <title> QWERTY-Lafayette </title>
-  <link type="text/css" rel="stylesheet" href="css/layout.css"      />
-  <link type="text/css" rel="stylesheet" href="css/lafayette42.css" />
-  <link type="text/css" rel="stylesheet" href="css/demo.css"        />
+  <link type="text/css" rel="stylesheet" href="css/layout.css"    />
+  <link type="text/css" rel="stylesheet" href="css/lafayette.css" />
+  <link type="text/css" rel="stylesheet" href="css/demo.css"      />
   <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
   <script src="js/x-keyboard.js" type="module"></script>
   <script src="js/demo.js" type="text/javascript"></script>
 </head>
 <body>
-  <a href="https://github.com/fabi1cazenave/qwerty-lafayette"
-    id="github"><span>Fork me on GitHub</span></a>
-
-  <h1> <button hidden>démo !</button> <small>QWERTY</small>-Lafayette </h1>
-  <p> Une variante de QWERTY pour les développeurs francophones, les typographes
-    exigeants et les utilisateurs de claviers ergonomiques. </p>
+  <header>
+    <h1> <button hidden>démo !</button> <small>QWERTY</small>-Lafayette </h1>
+    <p> Une variante ergonomique de QWERTY pour les développeurs francophones et
+      les typographes exigeants. </p>
+  </header>
 
   <div id="demo" hidden>
     <div>
@@ -288,5 +287,9 @@ <h2 id="licence"> Licence <a href="#licence">#</a> </h2>
   <p> <a href="http://wtfpl.net/">WTFPL</a>
     – Do What the Fuck You Want to Public License. </p>
 
+  <footer>
+    <a href="https://github.com/fabi1cazenave/qwerty-lafayette">dépôt GitHub</a> |
+    <a href="https://discord.gg/5xR5K3nAFX">serveur Discord</a>
+  </footer>
 </body>
 </html>