sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

first attempts at redesign

Browse Source
This commit is contained in:
Sander Roosendaal
2018-09-18 16:40:34 +02:00
parent dedcda474c
commit f11faf2eea
4 changed files with 63 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/css/rowsandall2.css
View File

@@ -332,15 +332,15 @@ a.button {
}
/* gray */
.blue {
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
}
.blue:hover {
.gray:hover {
background: #616161;
}
.blue:active {
.gray:active {
color: #afafaf;
}
@@ -384,20 +384,20 @@ a.button {
}
/* blue */
.graytext {
.bluetext {
color: #27aae2;
}
.gray {
.blue {
color: #fae7e9;
border: solid 1px #27aae2;
background: #27aae2;
}
.gray:hover {
.blue:hover {
background: #1c74bb;
border: solid 1px #27aae2;
}
.gray:active {
.blue:active {
color: #ffffff;
}
@@ -844,3 +844,7 @@ a.wh:hover {
hyphens: auto;
}
.icon-link a:hover, a:visited, a:link, a:active {
text-decoration: none;
}

38
static/css/styles2.css
View File

@@ -28,10 +28,20 @@
margin: 0;
padding: 0;
}
user ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-head {
grid-area: header;
}
.main-user {
grid-area: user;
}
.content {
grid-area: content;
}
@@ -49,20 +59,24 @@
}
.wrapper {
display: grid;
grid-gap: 20px;
grid-gap: 2px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
"header"
"user"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
@media (min-width: 500px) {
@media (min-width: 750px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"header header"
"user user"
"nav nav"
"sidebar content"
"ad footer";
@@ -75,12 +89,14 @@
display: flex;
justify-content: space-between;
}
}
@media (min-width: 700px) {
@media (min-width: 800px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"header header user"
"nav content sidebar"
"nav content ad"
"footer footer footer"

4
static/css/text2.css
View File

@@ -147,3 +147,7 @@ p {
/* padding: 10px 0; */
text-align: left;
}
i {
font-size: 2em;
}

41
templates/newbase.html
View File

@@ -56,6 +56,7 @@
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link rel="stylesheet" href="/static/css/resetnew.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/styles2.css">
<link rel="stylesheet" href="/static/css/text2.css" />
<link rel="stylesheet" href="/static/css/rowsandall2.css" />
@@ -98,35 +99,35 @@
<header class="main-head">
<ul>
<li>
<a href="/"><img src="/static/img/logo7.png"
alt="Rowsandall logo" width="300px"></a>
<a href="/" title="Home">
<img src="/static/img/logo7.png"
alt="Rowsandall logo" width="300px">
</a>
</li>
<li>
<p>Free Data and Analysis. For Rowers. By Rowers.</p>
</li>
</ul>
</header>
<user class="main-user">
<ul>
<li>
<a href="">Help</a>
</li>
<a href="/rowers/help" title="Help">
<i class="bluetext fas fa-question">&nbsp;</i>
</a>
{% if user.is_authenticated %}
<li>
<p>
{% if user.first_name %}
<a href="/rowers/me/edit">{{ user.first_name }}</a>
{% else %}
<a href="/rowers/me/edit">{{ user }}</a>
{% endif %}
</p>
</li>
<li>
<a href="">Logout</a>
{% else %}
<li>
<p><a href="{% url 'login' %}">login</a> </p>
</li>
<a class="icon-link" href="/rowers/me/edit" title="Account">
<i class="bluetext fas fa-user">&nbsp;</i>
</a>
<a class="icon-link" href="{% url 'logout' %}?next=/login" title="Log Out">
<i class="bluetext fas fa-sign-out-alt">&nbsp;</i></a>
{% else %}
<a class="icon-link" href="{% url 'login' %}" title="Log In">
<i class="bluetext fas fa-sign-in-alt"></i></a>
{% endif %}
</li>
</ul>
</header>
</user>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>