rework header/footer

3 years ago · 273cbfa732
parent e026b510fb
commit 273cbfa732
7 changed files with 102 additions and 29 deletions
--- a/ccvpn/settings.py
+++ b/ccvpn/settings.py
@ -132,7 +132,7 @@ USE_L10N = True
 USE_TZ = True

 LANGUAGES = (
-    ('fr', "French"),
+    ('fr', "Français"),
    ('en', "English"),
 )

--- a/static/css/style.css
+++ b/static/css/style.css
@ -61,22 +61,28 @@ div#captcha > div {
 /********************* Header                      */

 header{
-    color: #fff;
-    background-color: #1c619a;
-    border-bottom: 1px solid #000;
-    padding: 0.6em 6em;
+    color: #1c619a;
+    padding: 1em 6em;
 }
 header .inner {
    display: flex;
    flex-wrap: wrap;
 }

+header .statusbar {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5em;
+}
+
 header #logo{
    display: flex;
    flex-direction: column;
+    justify-content: center;
+    height: 75px;
    padding: 0 0 0 75px;
    background: url(../img/bg-logo.svg) no-repeat;
-    background-size: 70px;
+    background-size: 75px;
    background-position: left center;
 }
 /* ok but what about the second reset */
@ -84,26 +90,28 @@ header #logo > * { margin: 0; padding: 0; }
 /* i dont think he knows about the second reset */
 header #logo h1, header #logo h2 {
    font-size: 100%;
-    line-height: 0.8;
+    line-height: 0.83;
 }
 header #logo h1 a{
    margin: 0px;
-    font-size: 68px;
+    font-size: 62px;
 }
 header #logo h2 a{
    display: block;
-    font-size: 16px;
-    font-weight: normal;
-    letter-spacing: 0.425em;
+    font-size: 25px;
+    letter-spacing: 0.230em;
+    font-family: 'Poiret One';
+    font-weight: 400;
 }
 header #logo h1 a, header #logo h2 a {
-    color: white;
+    color: #1c619a;
    text-decoration: none;
 }

 header nav {
    display: flex;
    flex-direction: column;
+    justify-content: center;
    margin-left: 6em;
    flex-grow: 1;
 }
@ -113,7 +121,7 @@ header ul {
    margin: 0;
 }
 header li {
-    display: inline;
+    display: inline-block;
 }

 header nav > div {
@ -127,17 +135,28 @@ header .lang-menu {
 }
 header .lang-menu,
 header .lang-menu a {
-    color: #ddd;
+    color: #1c619a;
 }

 header .user-menu {
    margin-left: 3em;
+    margin-bottom: 0.3em;
    font-size: 1.1em;
 }
 header .user-menu li {
    margin-left: 0.75em;
 }
 header .user-menu li a {
+    color: #1c619a;
+    border: 1px solid #1c619a;
+    border-radius: 5px;
+    padding: 0.20em 0.50em;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 0.85em;
+}
+header .user-menu li a:hover {
+    background: #1c619a;
    color: #fff;
 }

@ -153,6 +172,8 @@ header .site-menu li{
    margin: 0px 7px;
    position: relative;
    bottom: -5px;
+    /* reserve a 2px border, avoid shifting things on :hover */
+    border-bottom: 2px solid transparent;
 }
 header .site-menu li:first-child{
    margin-left: 0;
@ -167,7 +188,7 @@ header .site-menu li:hover{
    border-bottom: 2px solid #1c80d4;
 }
 header .site-menu a{
-    color: #fff;
+    color: #1c619a;
    text-decoration: none;
 }

@ -363,6 +384,7 @@ footer{
    padding-bottom: 2em;
    font-size: 0.9em;
    flex-wrap:wrap;
+    line-height: 120%;
 }
 footer, footer a {
    color: #ccc;
@ -373,6 +395,21 @@ footer .footer-column {
    padding-left: 0;
    margin: 2em;
 }
+footer > ul > li {
+    margin: 0.1em 0;
+}
+
+footer .language-selector ul {
+    list-style: none;
+    padding-left: 1.5em;
+}
+
+.vpn-status-box {
+    border: 1px dotted white;
+    padding: 0.25em 0.25em;
+    margin: 0.5em 0;
+    border-radius: 2px;
+}


 .message p {
@ -1175,6 +1212,35 @@ div.ticket-message-private {
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

+/* cyrillic */
+@font-face {
+  font-family: 'Poiret One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/poiret_one-0.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poiret One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/poiret_one-1.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poiret One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/poiret_one-2.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+

 /***************************************************/
 /********************* Icons                       */
--- a/static/fonts/poiret_one-0.woff2
+++ b/static/fonts/poiret_one-0.woff2
--- a/static/fonts/poiret_one-1.woff2
+++ b/static/fonts/poiret_one-1.woff2
--- a/static/fonts/poiret_one-2.woff2
+++ b/static/fonts/poiret_one-2.woff2
--- a/static/img/bg-logo.svg
+++ b/static/img/bg-logo.svg
@ -57,7 +57,7 @@
     id="layer1"
     transform="translate(-69.432166,-723.44673)">
    <path
-       style="fill:#ffffff;fill-opacity:1"
+       style="fill:#1c619a;fill-opacity:1"
       d="m 117.39305,793.43075 c -4.50016,-0.29511 -8.65804,-1.75257 -12.24833,-4.2934 -0.79565,-0.56308 -2.10146,-1.6493 -2.61649,-2.17651 l -0.35816,-0.36662 4.13243,-4.13081 4.13242,-4.13082 0.56089,0.48548 c 1.22453,1.0599 2.65085,1.86478 4.20756,2.37433 1.25969,0.41233 2.08537,0.54178 3.4556,0.54178 0.78717,0 1.34662,-0.0379 1.84754,-0.1253 1.59652,-0.27844 3.5646,-1.10857 4.92561,-2.07761 0.83077,-0.5915 2.02715,-1.78789 2.61866,-2.61866 0.96904,-1.36101 1.79917,-3.32909 2.0776,-4.9256 0.0874,-0.50093 0.12531,-1.06038 0.12531,-1.84755 0,-0.78717 -0.0379,-1.34662 -0.12531,-1.84755 -0.27843,-1.59651 -1.10856,-3.5646 -2.0776,-4.92561 -0.59151,-0.83076 -1.78789,-2.02715 -2.61866,-2.61866 -1.36101,-0.96904 -3.32909,-1.79917 -4.92561,-2.0776 -0.98199,-0.17126 -2.7131,-0.17126 -3.69509,0 -2.03771,0.35538 -4.1949,1.38799 -5.79761,2.77523 l -0.54289,0.4699 -4.1173,-4.11342 c -2.26451,-2.26238 -4.1173,-4.1326 -4.1173,-4.15604 0,-0.0721 0.95804,-0.96976 1.61767,-1.5157 2.88464,-2.38746 6.49583,-4.0997 10.22032,-4.84593 1.61822,-0.32423 2.78628,-0.43508 4.58466,-0.43508 3.61912,0 6.86969,0.73362 10.09308,2.27788 3.48835,1.67121 6.68985,4.3684 8.91148,7.50773 2.27778,3.21868 3.69373,6.92339 4.16776,10.9046 0.16051,1.3481 0.16051,3.85239 0,5.2005 -0.55222,4.63786 -2.37846,8.88868 -5.32095,12.38519 -0.77099,0.91616 -2.15234,2.28811 -3.0464,3.02568 -3.40745,2.81105 -7.72093,4.64105 -12.13629,5.14883 -0.92821,0.10675 -3.16898,0.18155 -3.9346,0.13134 z m 0.7414,-18.77811 c -0.54742,-0.0969 -1.41142,-0.43646 -1.84785,-0.72615 -0.88864,-0.58984 -1.49551,-1.38895 -1.86266,-2.45269 -0.20469,-0.59305 -0.23617,-0.77094 -0.23617,-1.33434 0,-0.5634 0.0315,-0.74129 0.23617,-1.33434 0.51284,-1.48584 1.48328,-2.45628 2.96911,-2.96911 0.59305,-0.20469 0.77094,-0.23618 1.33434,-0.23618 0.5634,0 0.74129,0.0315 1.33434,0.23618 1.48584,0.51283 2.45628,1.48327 2.96911,2.96911 0.20469,0.59305 0.23618,0.77094 0.23618,1.33434 0,1.46263 -0.82166,2.93928 -2.11219,3.7959 -0.82046,0.54461 -2.17669,0.86669 -3.02038,0.71728 z m -26.675492,-4.62416 c -6.562675,-0.43036 -12.430999,-3.36917 -16.585462,-8.30585 -2.942489,-3.49651 -4.768731,-7.74733 -5.320944,-12.38519 -0.160515,-1.34811 -0.160515,-3.8524 0,-5.2005 0.716718,-6.01949 3.600349,-11.39133 8.186877,-15.25113 2.979881,-2.50771 6.575282,-4.23753 10.400786,-5.004 1.618222,-0.32423 2.786284,-0.43508 4.584656,-0.43508 1.798372,0 2.966433,0.11085 4.584655,0.43508 3.724484,0.74623 7.335684,2.45847 10.220314,4.84593 0.65963,0.54594 1.61768,1.44359 1.61768,1.5157 0,0.0234 -1.85279,1.89366 -4.1173,4.15604 l -4.11731,4.11342 -0.54288,-0.4699 c -1.602713,-1.38724 -3.759904,-2.41985 -5.797612,-2.77523 -0.981993,-0.17126 -2.713102,-0.17126 -3.695096,0 -1.596511,0.27843 -3.564597,1.10856 -4.925606,2.0776 -0.830768,0.59151 -2.027153,1.7879 -2.61866,2.61866 -0.969041,1.36101 -1.799172,3.3291 -2.077604,4.92561 -0.171259,0.98199 -0.171259,2.7131 0,3.6951 0.278432,1.59651 1.108563,3.56459 2.077604,4.9256 0.591507,0.83077 1.787892,2.02716 2.61866,2.61866 1.361009,0.96904 3.329095,1.79918 4.925606,2.07761 0.500928,0.0874 1.060378,0.1253 1.847549,0.1253 1.370224,0 2.195905,-0.12945 3.455598,-0.54179 1.556704,-0.50955 2.983029,-1.31442 4.207561,-2.37433 l 0.56088,-0.48547 4.13243,4.13082 4.13242,4.13081 -0.35815,0.36662 c -0.19699,0.20164 -0.71237,0.66492 -1.1453,1.02952 -3.47321,2.92498 -7.798705,4.78946 -12.31676,5.30906 -0.928204,0.10674 -3.168974,0.18154 -3.934592,0.13133 z M 92.0635,751.25037 c -0.54742,-0.0969 -1.411424,-0.43646 -1.84785,-0.72615 -0.888641,-0.58984 -1.495509,-1.38895 -1.862656,-2.45269 -0.20469,-0.59305 -0.236176,-0.77094 -0.236176,-1.33434 0,-0.5634 0.03149,-0.74129 0.236176,-1.33434 0.512831,-1.48584 1.483273,-2.45628 2.969109,-2.96911 0.59305,-0.20469 0.770941,-0.23618 1.33434,-0.23618 0.563398,0 0.741289,0.0315 1.334339,0.23618 1.485836,0.51283 2.456278,1.48327 2.96911,2.96911 0.204689,0.59305 0.236175,0.77094 0.236175,1.33434 0,1.46263 -0.821662,2.93928 -2.112183,3.7959 -0.820464,0.54461 -2.176692,0.86669 -3.020384,0.71728 z"
       id="path3047"
       inkscape:connector-curvature="0" />
--- a/templates/layout.html
+++ b/templates/layout.html
@ -27,12 +27,6 @@
            </div>
            <nav>
                <div>
-                    <ul class="lang-menu">
-                        <li>Language:</li>
-                        {% for l, _ in LANGUAGES %}
-                        <li><a href="{% url 'set_lang' %}?lang={{l}}&amp;next={{request.get_full_path}}">{{l.upper}}</a></li>
-                        {% endfor %}
-                    </ul>
                    <div class="flex-spacer"></div>
                    <ul class="user-menu">
                        {% if user.is_authenticated %}
@ -52,7 +46,6 @@
                    <li><a href="/admin/">{% trans "Admin" %}</a></li>
                    {% endif %}
                </ul>
-                <div class="flex-spacer"></div>
            </nav>
        </div>
    </header>
@ -74,19 +67,33 @@

    <footer id="footer">
        <ul class="footer-column">
-            <li>{% trans 'By' %} <a href="https://ccrypto.org/">CCrypto</a></li>
-            <li>‣ <a href="/page/tos">{% trans 'ToS' %}</a></li>
-            <li>‣ <a href="/page/privacy">{% trans 'Privacy Policy' %}</a></li>
-            <li>‣ <a href="https://git.ccrypto.org/CCrypto/ccvpn3">{% trans 'Source code' %}</a></li>
+            <li class="language-selector">
+                ‣ {% trans "Available in" %}
+                <ul>
+                    {% for l, n in LANGUAGES %}
+                    <li><a href="{% url 'set_lang' %}?lang={{l}}&amp;next={{request.get_full_path}}">{{n}}</a></li>
+                    {% endfor %}
+                </ul>
+            </li>
        </ul>
        <ul class="footer-column">
+            <li>‣ {% trans 'By' %} <a href="https://ccrypto.org/">CCrypto</a></li>
            <li>‣ <a href="https://status.ccrypto.org/">{% trans 'Service Status' %}</a></li>
+            <li>‣ <a href="https://git.ccrypto.org/CCrypto/ccvpn3">{% trans 'Source code' %}</a></li>
+        </ul>
+        <ul class="footer-column">
+            <li>‣ <a href="/page/privacy">{% trans 'Privacy Policy' %}</a></li>
+            <li>‣ <a href="/page/tos">{% trans 'Terms of Service' %}</a></li>
            <li>‣ <a href="/page/help">{% trans "Guides & Support" %}</a></li>
-            <li>‣ <a href="https://twitter.com/CCrypto_VPN">{% trans 'CCrypto_VPN on Twitter' %}</a></li>
        </ul>
        <ul class="footer-column">
-            <li>{% trans 'Your IP address:'%} {{CLIENT_IP}}</li>
            <li>
+                <i class="fa fa-twitter" aria-hidden="true"></i>
+                <a href="https://twitter.com/CCrypto_VPN">
+                @CCrypto_VPN</a>
+            </li>
+            <li class="vpn-status-box">
+                {% trans 'Your IP address:'%} {{CLIENT_IP}}<br />
                {% if CLIENT_ON_VPN %}
                    {% trans 'You are connected over CCVPN' %}
                {% else %}