make our logo an inlined svg

2 files changed, 26 insertions, 1 deletions

diff --git a/index.html b/index.html
index 8be56b8..f539edd 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,18 @@
     <div id="wrapper" class="not-confirmed step1">
       <div class="collapsable block-step1">
         <div onclick="step0_done()" class="block-header">
-          <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1>
+          <h1 id="head1"><svg width="42px" height="42px">
+<path d="M21,1C9.954,1,1,9.954,1,21s8.954,20,20,20s20-8.954,20-20S32.046,1,21,1z M30.739,20.971c0-0.31-0.116-0.592-0.349-0.845
+    c-0.233-0.251-0.524-0.378-0.874-0.378c-0.349,0-0.631,0.126-0.844,0.378c-0.214,0.253-0.339,0.535-0.378,0.845h-3.232
+    c0-0.31-0.126-0.592-0.378-0.845c-0.252-0.251-0.533-0.378-0.844-0.378c-0.311,0-0.592,0.126-0.844,0.378
+    c-0.252,0.253-0.368,0.535-0.35,0.845v8.124c0,1.339-0.476,2.494-1.426,3.464c-0.951,0.971-2.106,1.456-3.465,1.456
+    c-1.359,0-2.504-0.485-3.436-1.456c-0.931-0.97-1.407-2.125-1.426-3.464h3.261c0,0.465,0.155,0.854,0.466,1.165
+    c0.311,0.311,0.694,0.466,1.15,0.466s0.84-0.155,1.15-0.466c0.311-0.31,0.466-0.699,0.466-1.165v-8.124
+    c0-0.31-0.116-0.592-0.349-0.845c-0.233-0.251-0.524-0.378-0.874-0.378c-0.349,0-0.63,0.126-0.844,0.378
+    c-0.214,0.253-0.34,0.535-0.378,0.845h-3.232c0-0.31-0.126-0.592-0.378-0.845c-0.252-0.251-0.534-0.378-0.844-0.378
+    s-0.592,0.126-0.844,0.378c-0.253,0.253-0.379,0.535-0.379,0.845H8c0-3.571,1.271-6.628,3.814-9.171
+    c2.543-2.542,5.609-3.814,9.2-3.814c3.571,0,6.629,1.271,9.172,3.814C32.729,14.343,34,17.4,34,20.971H30.739z"/>
+</svg> Abmahnbeantworter</h1>
         </div>
         <div class="juice">
           <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
diff --git a/style.css b/style.css
index 5a57b2a..0ef5891 100644
--- a/style.css
+++ b/style.css
@@ -73,8 +73,22 @@ h1 {
   font-weight: 300;
   text-transform: uppercase;
   cursor: pointer;
+  vertical-align: top;
+  padding-top: 0px;
+}
+
+h1 svg {
+  transform: scale(1.35) translate(0px, 4px) rotate(0deg);
+  margin-right: 21px;
+  float: left;
+  transition: transform 0.5s;
 }
 
+#wrapper.step1 h1 svg {
+  transform: scale(1.35) translate(0px, 4px) rotate(360deg);
+}
+
+
 h2 {
   font-size: 24pt;
   font-weight: 300;