1
0
mirror of https://github.com/kognise/water.css.git synced 2025-08-14 09:04:45 +02:00

refactor: minor cleanup

This commit is contained in:
Jonas Kuske
2020-05-30 04:35:33 +02:00
parent c938689a7e
commit a838f4fcec
2 changed files with 25 additions and 27 deletions

View File

@@ -120,7 +120,7 @@
<h2>Installation</h2> <h2>Installation</h2>
<div id="installation"> <div id="installation">
<header class="row version-select-snippet"> <header class="row" id="link-snippet-headline">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3> <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" id="copy-button"> <button type="button" id="copy-button">
<span id="copy-button-feedback" class="emoji"></span> <span id="copy-button-feedback" class="emoji"></span>

View File

@@ -6,11 +6,11 @@ html {
margin-top: 1rem; margin-top: 1rem;
} }
.version-select-snippet h3 { #link-snippet-headline {
margin: 1rem 2.5rem 1rem 0; margin: 1rem 2.5rem 1rem 0;
} }
/* Make the ✔ / ❌ Emoji appear next to the button */ /* Make the feedback Emoji appear next to the button */
#copy-button { #copy-button {
position: relative; position: relative;
margin-right: 2px; margin-right: 2px;
@@ -24,6 +24,27 @@ html {
transform: scale(1.3); transform: scale(1.3);
} }
#link-snippet-container {
overflow: hidden;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr;
}
#link-snippet-container > pre {
overflow: auto;
grid-column: 1;
grid-row: 1;
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms;
}
#link-snippet-container > pre[hidden] {
display: block;
visibility: hidden;
transform: scale(0);
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms;
}
#theme-form > label:not(:last-of-type) { #theme-form > label:not(:last-of-type) {
margin-right: 1rem; margin-right: 1rem;
} }
@@ -33,9 +54,7 @@ html {
} }
body > footer { body > footer {
display: flex; text-align: right;
justify-content: flex-end;
align-items: flex-end;
} }
.row { .row {
@@ -64,24 +83,3 @@ body > footer {
Helvetica Neue, Helvetica Neue,
sans-serif; sans-serif;
} }
#link-snippet-container {
overflow: hidden;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr;
}
#link-snippet-container > pre {
overflow: auto;
grid-column: 1;
grid-row: 1;
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms;
}
#link-snippet-container > pre[hidden] {
display: block;
visibility: hidden;
transform: scale(0);
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms;
}