Commit 0655a721 authored by cynddl's avatar cynddl

Transitioning towards semantic and modular styles

parent 596ff198
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-md-12 white-pure"> <div class="col-md-12 white-bg">
<ul class="nav nav-integrated"> <ul class="nav nav-integrated">
<li class="nav-item{% if filter_view == 'flux' %} active{% endif %}"> <li class="nav-item{% if filter_view == 'flux' %} active{% endif %}">
<a class="nav-link" href="{% url 'article-list' filter_view='flux'%}"> <a class="nav-link" href="{% url 'article-list' filter_view='flux'%}">
......
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
section { section {
margin: 0px !important; margin: 0px !important;
padding-bottom: 24px;
padding-top: 24px;
& .white-pure { & .white-pure {
padding: 34px; padding: 34px;
......
/* Navigation */ /* Navigation */
@custom-selector :--enter :hover, :focus;
.navbar-nav.blue > li > a { .navbar-sm {
background-color: #3b68b0; font-size: 13px;
color: #ffffff; font-weight: 600;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-default {
background-color: white;
color: #3b68b0;
margin-bottom: 0px;
min-height: 35px;
border: none;
border-radius: 0px;
}
.navbar-default .navbar-nav > li > a {
color: #3b68b0;
font-size: 18px;
font-family: FiraSansBook;
}
.navbar-default:not(#up-bar) .navbar-nav > li > a.on,
.navbar-default:not(#up-bar) .navbar-nav > li > a:hover {
color: #3b68b0;
font-family: FiraSansMedium;
font-size: 18px;
}
section {
padding-bottom: 24px;
padding-top: 24px;
}
.dark-blue, .dark-blue .navbar-nav > li > a {
background-color: #2f5188;
color: #ffffff;
}
nav.dark-blue {
/*padding-right: 5%;*/
}
#up-bar, #up-bar > .navbar-nav, #up-bar > .navbar-nav > li, #up-bar > .navbar-nav > li > a {
height: 38px;
} }
#up-bar > .navbar-nav > li > a { .navbar a {
padding-top: 7px; color: var(--color-medium-blue);
padding-bottom: 7px; &:--enter {
color: var(--color-dark-blue);
}
} }
.navbar-brand { .navbar .navbar-brand {
padding: 0; padding: 0;
z-index: 1000; z-index: 1000;
position: absolute; position: absolute;
} }
.dark-blue .navbar-nav > li > a, .navbar.dark-blue-bg a, .navbar.medium-blue-bg a {
.navbar-nav.blue > li > a { color: var(--color-white);
font-weight: bold; &:--enter {
font-size: 13px; color: var(--color-medium-gray);
} }
.dark-blue .navbar-nav > li > a:hover,
.navbar-nav.blue > li > a:hover {
color: #ffffff;
}
.dark-blue .navbar-nav > li > a:hover {
font-size: 13px;
} }
.navbar-nav.blue > li > a:hover {
font-size: 18px;
}
.nav-white, .nav-white .navbar-nav > li > a { /* Integrated navigation */
background-color: #ffffff;
color: #3b68b0;
}
.nav.nav-integrated { .nav.nav-integrated {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
text-align: center;
position: absolute; /* Cancel row margins */
top: 0; right: 0; left: 0; margin-left: -15px;
margin-right: -15px;
background-color: #ebf3ff; background-color: var(--color-light-gray);
border: 0 solid #ffffff; border: 0 solid var(--color-white);
border-width: 4px 4px 0 0; border-width: 4px 4px 0 0;
} }
ul.nav.nav-integrated li{ ul.nav.nav-integrated li {
flex-grow: 1; flex-grow: 1;
border: 0 solid #ffffff; border: 0 solid var(--color-white);
border-width: 0 0 4px 4px; border-width: 0 0 4px 4px;
}
ul.nav.nav-integrated li a { &.active {
padding: 1rem; background-color: var(--color-white);
font-weight: bold; }
text-align: center;
} a {
ul.nav.nav-integrated li.active { padding: 1rem;
background-color: #ffffff; font-weight: bold;
text-align: center;
}
} }
.nav-integrated .badge { .nav.nav-integrated .badge {
vertical-align: middle; vertical-align: middle;
background-color: #3b68b0; background-color: var(--color-medium-blue);
padding: .4rem .8rem; padding: .4rem .8rem;
margin-left: .5rem; margin-left: .5rem;
} }
...@@ -5,35 +5,36 @@ ...@@ -5,35 +5,36 @@
--color-black: #000000; --color-black: #000000;
--color-white: #ffffff; --color-white: #ffffff;
--color-light-gray: #ccd3dd;
}
--color-medium-gray: #ccd3dd;
--color-light-gray: #ebf3ff;
}
.white { .white-bg {
background-color: #ebf3ff; background-color: var(--color-white);
color: var(--color-dark-blue); color: var(--color-medium-blue);
} }
.light-blue a, .blue a { .light-grey-bg {
color: var(--color-dark-blue); background-color: var(--color-light-gray);
color: var(--color-dark-blue);
} }
.medium-blue { .medium-blue-bg {
background-color: var(--color-medium-blue); background-color: var(--color-medium-blue);
color: var(--color-white); color: var(--color-white);
} }
.light-blue { .dark-blue-bg {
background-color: var(--color-light-blue); background-color: var(--color-dark-blue);
color: var(--color-white); color: var(--color-white);
} }
.sky-blue { .light-blue-bg {
background-color: #dde5f1; background-color: var(--color-light-blue);
color: #3b68b0; color: var(--color-white);
} }
.white-pure { .light-blue-bg a, .medium-blue-bg a {
background-color: var(--color-white); color: var(--color-dark-blue);
color: var(--color-medium-blue);
} }
...@@ -70,17 +70,7 @@ ...@@ -70,17 +70,7 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-form" id="merci">
<div class="modal-form-title modal-form-only">
<a class="close modal-form-only" href="/#"><span>Fermer</span></a>
<h1>Merci &lt;3</h1>
</div>
<div class="modal-form-body modal-form-only">
<div class="modal-row">
<p>Merci de votre soutien</p>
</div>
</div>
</div>
<div class="modal-form" id="password-reset"> <div class="modal-form" id="password-reset">
<div class="modal-form-title modal-form-only"> <div class="modal-form-title modal-form-only">
<a class="close modal-form-only" href="/#"><span>Fermer</span></a> <a class="close modal-form-only" href="/#"><span>Fermer</span></a>
...@@ -104,7 +94,7 @@ ...@@ -104,7 +94,7 @@
</div> </div>
<div> <div>
<nav class="navbar sticky-top navbar-toggleable-md dark-blue"> <nav class="navbar navbar-sm sticky-top navbar-toggleable-md dark-blue-bg">
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#add-account">Créer un compte</a></li> <li class="nav-item"><a class="nav-link" href="#add-account">Créer un compte</a></li>
...@@ -125,7 +115,7 @@ ...@@ -125,7 +115,7 @@
</nav> </nav>
</div> </div>
<section class="text-center container-fluid white"> <section class="text-center container-fluid light-grey-bg">
<div id="subtitle" class="row justify-content-center"> <div id="subtitle" class="row justify-content-center">
<div class="page-header col-md-10"> <div class="page-header col-md-10">
<h1><span>Bienvenue sur la revue de presse de La Quadrature</span></h1> <h1><span>Bienvenue sur la revue de presse de La Quadrature</span></h1>
...@@ -143,7 +133,7 @@ ...@@ -143,7 +133,7 @@
</section> </section>
<section id="main" class="container-fluid white"> <section id="main" class="container-fluid light-grey-bg">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</section> </section>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment