Browse Source

rework header/footer

master
alice 1 week ago
parent
commit
273cbfa732
7 changed files with 102 additions and 29 deletions
  1. +1
    -1
      ccvpn/settings.py
  2. +80
    -14
      static/css/style.css
  3. BIN
      static/fonts/poiret_one-0.woff2
  4. BIN
      static/fonts/poiret_one-1.woff2
  5. BIN
      static/fonts/poiret_one-2.woff2
  6. +1
    -1
      static/img/bg-logo.svg
  7. +20
    -13
      templates/layout.html

+ 1
- 1
ccvpn/settings.py View File

@@ -132,7 +132,7 @@ USE_L10N = True
USE_TZ = True

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



+ 80
- 14
static/css/style.css View File

@@ -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 */


BIN
static/fonts/poiret_one-0.woff2 View File


BIN
static/fonts/poiret_one-1.woff2 View File


BIN
static/fonts/poiret_one-2.woff2 View File


+ 1
- 1
static/img/bg-logo.svg View File

@@ -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" />


+ 20
- 13
templates/layout.html View File

@@ -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 %}


Loading…
Cancel
Save