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 {
}
/***************************************************/
/********************* 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;
}
.flex-spacer { flex-grow: 1; }
/***************************************************/
/********************* Header */
header{
height: 80px;
padding: 0 3%;
color: #fff;
background-color: #1c619a;
border-bottom: 1px solid #000;
padding: 0.6em 6em;
}
header .inner {
display: flex;
flex-wrap: wrap;
}
header #logo{
float: left;
height: 80px;
padding-left: 75px;
display: flex;
flex-direction: column;
padding: 0 0 0 75px;
background: url(../img/bg-logo.svg) no-repeat;
background-size: 70px;
background-position: left center;
}
header #logo * {
margin: 0;
padding: 0;
border: 0;
}
/* ok but what about the second reset */
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;
}
header #logo h1 a{
margin: 0px;
position: relative;
top: -24px;
font-size: 68px;
}
header #logo h2 a{
display: block;
margin: 0px;
margin-top: 3px;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.425em;
@ -135,31 +98,98 @@ header #logo h1 a, header #logo h2 a {
color: white;
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;
text-transform: uppercase;
text-align: right;
}
header nav ul{
header .site-menu ul{
margin: 0px;
padding: 0px;
padding-top: 26px;
}
header nav li{
display: inline;
header .site-menu li{
margin: 0px 7px;
position: relative;
bottom: -5px;
}
header .site-menu li:first-child{
margin-left: 0;
}
header .site-menu li:last-child{
margin-right: 0;
}
header nav li.selected{
header .site-menu li.selected{
border-bottom: 2px solid #ddd;
}
header nav li:hover{
header .site-menu li:hover{
border-bottom: 2px solid #1c80d4;
}
header nav a{
header .site-menu a{
color: #fff;
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 */
@ -576,6 +606,7 @@ a.home-signup-button {
}
.homepage .more {
text-align: right;
font-size: 0.9em;
}
.homepage .map {
display: block;
@ -1098,27 +1129,11 @@ div.ticket-message-private {
bottom: -1px;
}
@media screen and (max-width: 64em) {
.content {
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 {
width: 100%;
flex-direction: column;

98
templates/layout.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save