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 */ /* gray */
.blue { .gray {
color: #e9e9e9; color: #e9e9e9;
border: solid 1px #555; border: solid 1px #555;
background: #6e6e6e; background: #6e6e6e;
} }
.blue:hover { .gray:hover {
background: #616161; background: #616161;
} }
.blue:active { .gray:active {
color: #afafaf; color: #afafaf;
} }
@@ -384,20 +384,20 @@ a.button {
} }
/* blue */ /* blue */
.graytext { .bluetext {
color: #27aae2; color: #27aae2;
} }
.gray { .blue {
color: #fae7e9; color: #fae7e9;
border: solid 1px #27aae2; border: solid 1px #27aae2;
background: #27aae2; background: #27aae2;
} }
.gray:hover { .blue:hover {
background: #1c74bb; background: #1c74bb;
border: solid 1px #27aae2; border: solid 1px #27aae2;
} }
.gray:active { .blue:active {
color: #ffffff; color: #ffffff;
} }
@@ -844,3 +844,7 @@ a.wh:hover {
hyphens: auto; 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; margin: 0;
padding: 0; padding: 0;
} }
user ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-head { .main-head {
grid-area: header; grid-area: header;
} }
.main-user {
grid-area: user;
}
.content { .content {
grid-area: content; grid-area: content;
} }
@@ -49,20 +59,24 @@
} }
.wrapper { .wrapper {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 2px;
grid-template-areas: grid-template-areas:
"header" "header"
"nav" "user"
"content" "nav"
"sidebar" "content"
"ad" "sidebar"
"footer"; "ad"
"footer";
} }
@media (min-width: 500px) {
@media (min-width: 750px) {
.wrapper { .wrapper {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-areas: grid-template-areas:
"header header" "header header"
"user user"
"nav nav" "nav nav"
"sidebar content" "sidebar content"
"ad footer"; "ad footer";
@@ -75,12 +89,14 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
@media (min-width: 700px) { @media (min-width: 800px) {
.wrapper { .wrapper {
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: grid-template-areas:
"header header header" "header header user"
"nav content sidebar" "nav content sidebar"
"nav content ad" "nav content ad"
"footer footer footer" "footer footer footer"

4
static/css/text2.css
View File

@@ -147,3 +147,7 @@ p {
/* padding: 10px 0; */ /* padding: 10px 0; */
text-align: left; 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" type="text/css" href="/static/admin/css/widgets.css"/>
<link rel="stylesheet" href="/static/css/resetnew.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/styles2.css">
<link rel="stylesheet" href="/static/css/text2.css" /> <link rel="stylesheet" href="/static/css/text2.css" />
<link rel="stylesheet" href="/static/css/rowsandall2.css" /> <link rel="stylesheet" href="/static/css/rowsandall2.css" />
@@ -98,35 +99,35 @@
<header class="main-head"> <header class="main-head">
<ul> <ul>
<li> <li>
<a href="/"><img src="/static/img/logo7.png" <a href="/" title="Home">
alt="Rowsandall logo" width="300px"></a> <img src="/static/img/logo7.png"
alt="Rowsandall logo" width="300px">
</a>
</li> </li>
<li> <li>
<p>Free Data and Analysis. For Rowers. By Rowers.</p> <p>Free Data and Analysis. For Rowers. By Rowers.</p>
</li> </li>
</ul>
</header>
<user class="main-user">
<ul>
<li> <li>
<a href="">Help</a> <a href="/rowers/help" title="Help">
</li> <i class="bluetext fas fa-question">&nbsp;</i>
</a>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li> <a class="icon-link" href="/rowers/me/edit" title="Account">
<p> <i class="bluetext fas fa-user">&nbsp;</i>
{% if user.first_name %} </a>
<a href="/rowers/me/edit">{{ user.first_name }}</a> <a class="icon-link" href="{% url 'logout' %}?next=/login" title="Log Out">
{% else %} <i class="bluetext fas fa-sign-out-alt">&nbsp;</i></a>
<a href="/rowers/me/edit">{{ user }}</a> {% else %}
{% endif %} <a class="icon-link" href="{% url 'login' %}" title="Log In">
</p> <i class="bluetext fas fa-sign-in-alt"></i></a>
</li>
<li>
<a href="">Logout</a>
{% else %}
<li>
<p><a href="{% url 'login' %}">login</a> </p>
</li>
{% endif %} {% endif %}
</li> </li>
</ul> </ul>
</header> </user>
<nav class="main-nav"> <nav class="main-nav">
<ul> <ul>
<li><a href="">Nav 1</a></li> <li><a href="">Nav 1</a></li>