CCrypto
/
ccvpn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new header

Browse Source
master
alice 4 years ago
parent ef93260c77
commit 4b9d6371bd
2 changed files with 139 additions and 128 deletions
Show Stats Download Patch File Download Diff File

169
static/css/style.css
Unescape Escape View File

@ -53,80 +53,43 @@ div#captcha > div {
} }
/***************************************************/ .flex-spacer { flex-grow: 1; }
/********************* Top bar */
#topbar{
padding: 0 3%;
color: #737373;
background: #000;
}
#topbar p {
margin: 0;
}
#topbar a:hover{
cursor: pointer;
background: none;
}
#topbar a{
display: inline-block;
color: #2c99f3;
text-decoration: none;
padding: 4px 5px;
}
#topbar a:hover{
background: #222;
}
#topbar .topbar-left{
float: left;
}
#topbar .topbar-right{
float: right;
text-align: right;
}
#topbar .topbar-right a{
font-size: 1.2em;
padding: 2px 5px 2px;
}
/***************************************************/ /***************************************************/
/********************* Header */ /********************* Header */
header{ header{
height: 80px;
padding: 0 3%;
color: #fff; color: #fff;
background-color: #1c619a; background-color: #1c619a;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
padding: 0.6em 6em;
} }
header .inner {
display: flex;
flex-wrap: wrap;
}
header #logo{ header #logo{
float: left; display: flex;
height: 80px; flex-direction: column;
padding-left: 75px; padding: 0 0 0 75px;
background: url(../img/bg-logo.svg) no-repeat; background: url(../img/bg-logo.svg) no-repeat;
background-size: 70px; background-size: 70px;
background-position: left center; background-position: left center;
} }
header #logo * { /* ok but what about the second reset */
margin: 0; header #logo > * { margin: 0; padding: 0; }
padding: 0; /* i dont think he knows about the second reset */
border: 0;
}
header #logo h1, header #logo h2 { header #logo h1, header #logo h2 {
font-size: 100%; font-size: 100%;
line-height: 0.8;
} }
header #logo h1 a{ header #logo h1 a{
margin: 0px; margin: 0px;
position: relative;
top: -24px;
font-size: 68px; font-size: 68px;
} }
header #logo h2 a{ header #logo h2 a{
display: block; display: block;
margin: 0px;
margin-top: 3px;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.425em; letter-spacing: 0.425em;
@ -135,31 +98,98 @@ header #logo h1 a, header #logo h2 a {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
header nav{
float: right; header nav {
display: flex;
flex-direction: column;
margin-left: 6em;
flex-grow: 1;
}
header ul {
list-style-type: none;
padding: 0;
margin: 0;
}
header li {
display: inline;
}
header nav > div {
display: flex;
flex-direction: row;
align-items: end;
}
header .lang-menu {
}
header .lang-menu,
header .lang-menu a {
color: #ddd;
}
header .user-menu {
margin-left: 3em;
font-size: 1.1em;
}
header .user-menu li {
margin-left: 0.75em;
}
header .user-menu li a {
color: #fff;
}
header .site-menu{
font-size: 1.2em; font-size: 1.2em;
text-transform: uppercase; text-transform: uppercase;
text-align: right;
} }
header nav ul{ header .site-menu ul{
margin: 0px; margin: 0px;
padding: 0px;
padding-top: 26px;
} }
header nav li{ header .site-menu li{
display: inline;
margin: 0px 7px; margin: 0px 7px;
position: relative;
bottom: -5px;
}
header .site-menu li:first-child{
margin-left: 0;
} }
header nav li.selected{ header .site-menu li:last-child{
margin-right: 0;
}
header .site-menu li.selected{
border-bottom: 2px solid #ddd; border-bottom: 2px solid #ddd;
} }
header nav li:hover{ header .site-menu li:hover{
border-bottom: 2px solid #1c80d4; border-bottom: 2px solid #1c80d4;
} }
header nav a{ header .site-menu a{
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@media screen and (max-width: 64em) {
header {
padding: 0.6em 1em;
}
header nav {
margin-left: 3em;
}
}
@media screen and (max-width: 40em) {
header .inner {
flex-direction: column;
align-items: center;
}
header nav {
margin-left: 0;
}
header #logo {
margin-bottom: 1em;
}
}
/***************************************************/ /***************************************************/
/********************* Common layout */ /********************* Common layout */
@ -576,6 +606,7 @@ a.home-signup-button {
} }
.homepage .more { .homepage .more {
text-align: right; text-align: right;
font-size: 0.9em;
} }
.homepage .map { .homepage .map {
display: block; display: block;
@ -1098,27 +1129,11 @@ div.ticket-message-private {
bottom: -1px; bottom: -1px;
} }
@media screen and (max-width: 64em) { @media screen and (max-width: 64em) {
.content { .content {
padding: 0em 1em 3em 1em; padding: 0em 1em 3em 1em;
} }
header{
height: 120px;
}
header nav{
float: left;
width: 100%;
}
header nav ul{
text-align: center;
padding-top: 0;
}
.flex-page { .flex-page {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;

66
templates/layout.html
Unescape Escape View File

@ -19,37 +19,33 @@
{% block headers %}{% endblock %} {% block headers %}{% endblock %}
</head> </head>
<body> <body>
<div id="topbar"> <header>
<div class="topbar-left"> <div class="inner">
<p> <div id="logo">
<a href="http://ccrypto.org">CCrypto</a> <h2><a href="https://ccrypto.org/">CCrypto</a></h2>
// <a href="//status.ccrypto.org/">{% trans 'Service Status' %}</a> <h1><a href="https://vpn.ccrypto.org/">VPN</a></h1>
</div>
<nav>
<div>
<ul class="lang-menu">
<li>Language:</li>
{% for l, _ in LANGUAGES %} {% for l, _ in LANGUAGES %}
| <a href="{% url 'set_lang' %}?lang={{l}}&amp;next={{request.get_full_path}}">{{l.upper}}</a> <li><a href="{% url 'set_lang' %}?lang={{l}}&amp;next={{request.get_full_path}}">{{l.upper}}</a></li>
{% endfor %} {% endfor %}
</p> </ul>
</div> <div class="flex-spacer"></div>
<div class="topbar-right"> <ul class="user-menu">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<p><a class="create" href="/account/">{% trans 'Your account' %}</a> <li><a class="create" href="/account/">{% trans 'Your account' %}</a></li>
<a class="create" href="/account/logout">{% trans 'Logout' %}</a> <li><a class="create" href="/account/logout">{% trans 'Logout' %}</a></li>
</p>
{% else %} {% else %}
<p><a href="/account/signup" class="create">{% trans 'Sign up' %}</a> <li><a href="/account/signup" class="create">{% trans 'Sign up' %}</a></li>
<a href="/account/login" class="create">{% trans 'Log in' %}</a> <li><a href="/account/login" class="create">{% trans 'Log in' %}</a></li>
</p>
{% endif %} {% endif %}
</ul>
</div> </div>
<div style="clear:both"></div> <div class="flex-spacer"></div>
</div> <ul class="site-menu">
<header id="header">
<div id="logo">
<h2><a href="//ccrypto.org/">CCrypto</a></h2>
<h1><a href="/">VPN</a></h1>
</div>
<nav>
<ul>
<li><a href="/">{% trans "VPN" %}</a></li> <li><a href="/">{% trans "VPN" %}</a></li>
<li><a href="/status">{% trans "Servers" %}</a></li> <li><a href="/status">{% trans "Servers" %}</a></li>
<li><a href="/page/help">{% trans "Guides & Support" %}</a></li> <li><a href="/page/help">{% trans "Guides & Support" %}</a></li>
@ -61,7 +57,7 @@
{% endif %} {% endif %}
</ul> </ul>
</nav> </nav>
<div style="clear: both"></div> </div>
</header> </header>
{% block wrap %} {% block wrap %}
@ -81,22 +77,22 @@
<footer id="footer"> <footer id="footer">
<ul class="footer-column"> <ul class="footer-column">
<li>By <a href="https://ccrypto.org/">CCrypto</a></li> <li>{% trans 'By' %} <a href="https://ccrypto.org/">CCrypto</a></li>
<li><a href="/page/tos">{% trans 'ToS' %}</a></li> <li>‣ <a href="/page/tos">{% trans 'ToS' %}</a></li>
<li><a href="https://git.ccrypto.org/CCrypto/ccvpn3">{% trans 'Source code' %}</a></li> <li>‣ <a href="https://git.ccrypto.org/CCrypto/ccvpn3">{% trans 'Source code' %}</a></li>
</ul> </ul>
<ul class="footer-column"> <ul class="footer-column">
<li><a href="https://status.ccrypto.org/">{% trans 'Service Status' %}</a></li> <li>‣ <a href="https://status.ccrypto.org/">{% trans 'Service Status' %}</a></li>
<li><a href="/page/help">{% trans "Guides & Support" %}</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> <li>‣ <a href="https://twitter.com/CCrypto_VPN">{% trans 'CCrypto_VPN on Twitter' %}</a></li>
</ul> </ul>
<ul class="footer-column"> <ul class="footer-column">
<li>Your IP: {{CLIENT_IP}}</li> <li>{% trans 'Your IP:'%} {{CLIENT_IP}}</li>
<li> <li>
{% if CLIENT_ON_VPN %} {% if CLIENT_ON_VPN %}
Your are connected over CCVPN {% trans 'You are connected over CCVPN' %}
{% else %} {% else %}
Your are not connected over CCVPN {% trans 'You are not connected over CCVPN' %}
{% endif %} {% endif %}
</li> </li>
</ul> </ul>

Write Preview
Loading…
Cancel
Save