Font size abstraction

css/fonts.css

@@ -10,3 +10,11 @@
     font-weight: 400;
     src: local('Open Sans'), local('OpenSans'), url(../bower_components/opensans-googlefont/OpenSans-Regular.ttf);
 }
+
+.small-font {
+    font-size: 13px;
+}
+
+.large-font {
+    font-size:24px;
+}

css/style.css

@@ -109,7 +109,6 @@ footer {
     background-repeat:repeat-x;
     bottom:0;
     color:#adadad;
-    font-size:12px;
     padding-top:20px;
     position:fixed;
     text-align:center;
@@ -168,7 +167,6 @@ footer a:hover {
     color:#dedede;
     cursor:pointer;
     display:inline-block;
-    font-size:24px;
     font-weight:800;
     padding: 12px 14px;
     position:relative;
@@ -196,7 +194,6 @@ footer a:hover {
     border: 3px solid #a5a5a5;
     border-radius:10px;
     color:#3F3F3F;
-    font-size:24px;
     font-weight:800;
     margin-right:8px;
     min-width:426px;
@@ -222,7 +219,6 @@ footer a:hover {
     background-position:0 100%;
     background-repeat:no-repeat;
     color:#a5a5a5;
-    font-size:13px;
     padding-bottom:10px;
     padding-left:41px;
     padding-top:10px;
@@ -247,7 +243,6 @@ footer a:hover {
 .bookmarklet {
     border: 2px dotted;
     color:gray;
-    font-size:13px;
     padding:10px 30px;
     position:relative;
     text-decoration:none;
@@ -258,8 +253,6 @@ footer a:hover {
     background-color:#cecece;
     border-radius:6px;
     color:#696969;
-    font-size:14px;
-    font-weight:300;
     height:26px;
     margin-top:12px;
     position:relative;
@@ -485,7 +478,6 @@ footer a:hover {
 .tripleliste ul li {
     color:#383838;
     float:left;
-    font-size:16px;
     list-style-type:none;
     position:relative;
     text-align:left;
@@ -578,7 +570,6 @@ h1 {
 
 .locales {
     float: left;
-    font-size: 12px;
     padding-left: 1em;
     padding-top: 1em;
     text-align: left;
@@ -623,7 +614,6 @@ h1 {
     border: none;
     cursor: pointer;
     display: inline-block;
-    font-size: 12px;
     padding: 1em;
 }
 

templates/inc/footer.tpl

@@ -1,5 +1,5 @@
 </div>
-<footer>
+<footer class="small-font">
     <div class="footer_wrapper">
      {t}Code by{/t} <a rel="author" target="blank"
         href="http://rudloff.pro/">Pierre Rudloff</a>

templates/inc/header.tpl

@@ -5,8 +5,8 @@
         <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" target="_blank">{t}Share on Facebook{/t}<div class="facebookmask"></div></a>
     </div>
     {if isset($supportedLocales)}
-    <div class="locales">
+    <div class="locales small-font">
-        <button class="localesBtn" title="{t}Switch language{/t}">
+        <button class="localesBtn small-font" title="{t}Switch language{/t}">
             {if isset($locale)}
                 {$locale->getCountry()->getEmoji()}
             {else}

templates/index.tpl

@@ -9,15 +9,15 @@
     </label>
     <div class="champs">
         <span class="URLinput_wrapper">
-        <input class="URLinput" type="url" name="url" id="url"
+        <input class="URLinput large-font" type="url" name="url" id="url"
         required autofocus placeholder="http://example.com/video" />
         </span>
         {if $config->uglyUrls}
             <input type="hidden" name="page" value="video" />
         {/if}
-        <input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
+        <input class="downloadBtn large-font" type="submit" value="{t}Download{/t}" /><br/>
         {if $config->convert}
-            <div class="mp3">
+            <div class="mp3 small-font">
                 <p><input type="checkbox" id="audio" class="audio" name="audio">
                 <label for="audio"><span class="ui"></span>
                     {t}Audio only (MP3){/t}</label></p>
@@ -25,10 +25,10 @@
         {/if}
     </div>
     </form>
-    <a class="combatiblelink" href="{path_for name="extractors"}">{t}See all supported websites{/t}</a>
+    <a class="combatiblelink small-font" href="{path_for name="extractors"}">{t}See all supported websites{/t}</a>
     <div id="bookmarklet" class="bookmarklet_wrapper">
         <p> {t}Drag this to your bookmarks bar:{/t} </p>
-        <a class="bookmarklet" href="javascript:window.location='{$domain}{path_for name='video'}?url='+encodeURIComponent(location.href);">{t}Bookmarklet{/t}</a>
+        <a class="bookmarklet small-font" href="javascript:window.location='{$domain}{path_for name='video'}?url='+encodeURIComponent(location.href);">{t}Bookmarklet{/t}</a>
     </div>
 
 </div>