Browse Source

responsive: unify common style and light.css (WIP)

This includes loading the common style sheets at low resolutions
and removing the undescribable redundancy in light.css.

The harder part was getting the navbar right, because it relied
heavily on the distinction between navbar.css and light.css.

This is still a work in progress.
master
lephe 10 months ago
parent
commit
78b4299207
7 changed files with 55 additions and 68 deletions
  1. +1
    -1
      app/routes/admin.py
  2. +12
    -2
      app/static/css/header.css
  3. +28
    -52
      app/static/css/light.css
  4. +0
    -1
      app/static/css/navbar.css
  5. +2
    -2
      app/templates/base/base.html
  6. +9
    -9
      app/templates/base/head.html
  7. +3
    -1
      app/templates/base/navbar.html

+ 1
- 1
app/routes/admin.py View File

@@ -55,7 +55,7 @@ def admin():
m = Member.query.filter_by(name=name).first()
if m is not None:
# TODO: Do a real member deletion, not just a hack like this
for sp in SpecialPrivilege.query.filter_by(mid=m.id):
for sp in SpecialPrivilege.query.filter_by(mid=m.id).all():
db.session.delete(sp)
db.session.commit()
db.session.delete(m)

+ 12
- 2
app/static/css/header.css View File

@@ -4,8 +4,18 @@

header {
height: 50px; margin: 0; padding: 0 16px;
display: flex; align-items: center; justify-content: space-between;
background: #f4f4f6; border-bottom: 1px solid #d0d0d0;

display: flex; align-items: center; justify-content: space-between;
flex-flow: row wrap;
}
@media screen and (max-width: 1000px) {
header {
height: 75px;
}
header .title {
page-break-after: always;
}
}

header h1 {
@@ -15,7 +25,7 @@ header h1 {
}

header .spacer {
flex: auto 1 0;
flex: 1 0 auto;
}

header .links {

+ 28
- 52
app/static/css/light.css View File

@@ -9,17 +9,6 @@

/* Global */

body {
margin: 0;
background: #ffffff;
font-family: sans-serif;
}

nav a {
color: #ffffff; opacity: .7;
text-decoration: none;
transition: opacity .15s ease;
}
nav a:hover,
nav a:focus {
opacity: 1;
@@ -29,23 +18,24 @@ nav a:focus {
display: none;
}

.container {
margin-left: 0;
}

/* Menu */

#spacer-menu {
height: 60px;
}

#light-menu {
list-style: none;
display: flex; flex-direction: row; align-items: center;
width: 100%; height: 40px;
width: 100%; height: 60px;
overflow-x: auto; overflow-y: hidden;
margin: 0; padding: 0;
text-indent: 0;
background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

#logo {
position: relative; display: block;
height: 100%; opacity: 1;
background: -moz-linear-gradient(left, #bf1c11, #ba1203);
background: -webkit-linear-gradient(left, #bf1c11, #ba1203);
width: auto; height: 100%; margin-bottom: 0;
}
/*#logo::after {
position: absolute; left: 100%; top: 50%;
@@ -56,7 +46,7 @@ nav a:focus {
margin-top: -4px;
}*/
#logo img {
width: 40px;
width: 60px;
margin: 0; padding: 0;
margin-bottom: -4.5px;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
@@ -67,14 +57,10 @@ nav a:focus {
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}

#light-menu > li {
#light-menu li {
display: flex; flex-direction: column;
align-items: center; flex-grow: 1;
height: 100%;
text-align: center;
color: #ffffff;
}
#light-menu li {
padding: 0 2px;
}
#light-menu li > a {
@@ -84,9 +70,16 @@ nav a:focus {
cursor: pointer;
}
#light-menu li > a > div {
display: none;
display: block;
font-size: 12px;
}
#light-menu li > a:hover {
text-decoration: none;
}
#light-menu li:not(.opened) > a:hover::after,
#light-menu li:not(.opened) > a:focus::after {
display: none;
}

#light-menu li > a > svg {
display: block; width: 20px; flex-shrink: 0;
@@ -108,18 +101,17 @@ nav a:focus {
font-family: NotoSans; font-size: 12px;
background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: .1s ease;
position: unset;
left: unset;
}
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}

#menu > div {
width: 100%;
display: none;
}
#menu > div.opened {
display: block;
}
#menu h2 {
margin: 10px 0 10px 40px;
@@ -175,15 +167,15 @@ nav a:focus {
margin: 5px 0;
}

@media all and (min-width: 550px) {
#light-menu {
height: 60px;
@media all and (max-width: 550px) {
#light-menu, #spacer-menu {
height: 40px;
}
#logo img {
width: 60px;
width: 40px;
}
#light-menu li > a > div {
display: block;
display: none;
}
}

@@ -240,22 +232,6 @@ header input[type="search"] {
box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
}

#spotlight {
display: flex;
align-items: center; justify-content: space-around;
}
#spotlight a {
padding: 5px 10px; margin: 5px 0;
color: #727272; font-size: 14px;
/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
transition: border .15s ease;
text-decoration: none;
}
#spotlight a:hover, header #spotlight a:focus {
color: #404040;
}


/* Homepage */

section {

+ 0
- 1
app/static/css/navbar.css View File

@@ -55,7 +55,6 @@ nav a:focus {
#light-menu li {
width: 100%; height: 45px;
text-align: center;
font-family: Raleway; font-size: 13px;
color: #ffffff;
}
#light-menu li > a {

+ 2
- 2
app/templates/base/base.html View File

@@ -5,9 +5,9 @@
<body>
{% include "base/navbar.html" %}

<div class="container">
<div class=container>
<header>
<div>{% block title %}(page title){% endblock %}</div>
<div class=title>{% block title %}(page title){% endblock %}</div>
{% include "base/header.html" %}
</header>


+ 9
- 9
app/templates/base/head.html View File

@@ -4,14 +4,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/global.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/navbar.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/header.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/container.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/form.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/footer.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/flash.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/responsive.css')}}>
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/table.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/global.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/navbar.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/header.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/container.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/form.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/footer.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/flash.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/responsive.css')}}>
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = 'css/table.css')}}>
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href={{url_for('static', filename = 'css/light.css')}}>
</head>

+ 3
- 1
app/templates/base/navbar.html View File

@@ -68,7 +68,9 @@
</li>
</ul>

<div id="menu">
<div id=spacer-menu></div>

<div id=menu>
{% include "base/navbar/account.html" %}

{% include "base/navbar/news.html" %}

Loading…
Cancel
Save