Commit 0655a721 authored by cynddl's avatar cynddl

Transitioning towards semantic and modular styles

parent 596ff198
......@@ -3,7 +3,7 @@
{% block content %}
<div class="row">
<div class="col-md-12 white-pure">
<div class="col-md-12 white-bg">
<ul class="nav nav-integrated">
<li class="nav-item{% if filter_view == 'flux' %} active{% endif %}">
<a class="nav-link" href="{% url 'article-list' filter_view='flux'%}">
......
......@@ -14,6 +14,8 @@
section {
margin: 0px !important;
padding-bottom: 24px;
padding-top: 24px;
& .white-pure {
padding: 34px;
......
/* Navigation */
@custom-selector :--enter :hover, :focus;
.navbar-nav.blue > li > a {
background-color: #3b68b0;
color: #ffffff;
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;
.navbar-sm {
font-size: 13px;
font-weight: 600;
}
#up-bar > .navbar-nav > li > a {
padding-top: 7px;
padding-bottom: 7px;
.navbar a {
color: var(--color-medium-blue);
&:--enter {
color: var(--color-dark-blue);
}
}
.navbar-brand {
.navbar .navbar-brand {
padding: 0;
z-index: 1000;
position: absolute;
}
.dark-blue .navbar-nav > li > a,
.navbar-nav.blue > li > a {
font-weight: bold;
font-size: 13px;
}
.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.dark-blue-bg a, .navbar.medium-blue-bg a {
color: var(--color-white);
&:--enter {
color: var(--color-medium-gray);
}
}
.navbar-nav.blue > li > a:hover {
font-size: 18px;
}
.nav-white, .nav-white .navbar-nav > li > a {
background-color: #ffffff;
color: #3b68b0;
}
/* Integrated navigation */
.nav.nav-integrated {
display: flex;
justify-content: space-around;
text-align: center;
position: absolute;
top: 0; right: 0; left: 0;
/* Cancel row margins */
margin-left: -15px;
margin-right: -15px;
background-color: #ebf3ff;
border: 0 solid #ffffff;
background-color: var(--color-light-gray);
border: 0 solid var(--color-white);
border-width: 4px 4px 0 0;
}
ul.nav.nav-integrated li{
ul.nav.nav-integrated li {
flex-grow: 1;
border: 0 solid #ffffff;
border: 0 solid var(--color-white);
border-width: 0 0 4px 4px;
}
ul.nav.nav-integrated li a {
padding: 1rem;
font-weight: bold;
text-align: center;
}
ul.nav.nav-integrated li.active {
background-color: #ffffff;
&.active {
background-color: var(--color-white);
}
a {
padding: 1rem;
font-weight: bold;
text-align: center;
}
}
.nav-integrated .badge {
.nav.nav-integrated .badge {
vertical-align: middle;
background-color: #3b68b0;
background-color: var(--color-medium-blue);
padding: .4rem .8rem;
margin-left: .5rem;
}
......@@ -5,35 +5,36 @@
--color-black: #000000;
--color-white: #ffffff;
--color-light-gray: #ccd3dd;
}
--color-medium-gray: #ccd3dd;
--color-light-gray: #ebf3ff;
}
.white {
background-color: #ebf3ff;
color: var(--color-dark-blue);
.white-bg {
background-color: var(--color-white);
color: var(--color-medium-blue);
}
.light-blue a, .blue a {
color: var(--color-dark-blue);
.light-grey-bg {
background-color: var(--color-light-gray);
color: var(--color-dark-blue);
}
.medium-blue {
.medium-blue-bg {
background-color: var(--color-medium-blue);
color: var(--color-white);
}
.light-blue {
background-color: var(--color-light-blue);
.dark-blue-bg {
background-color: var(--color-dark-blue);
color: var(--color-white);
}
.sky-blue {
background-color: #dde5f1;
color: #3b68b0;
.light-blue-bg {
background-color: var(--color-light-blue);
color: var(--color-white);
}
.white-pure {
background-color: var(--color-white);
color: var(--color-medium-blue);
.light-blue-bg a, .medium-blue-bg a {
color: var(--color-dark-blue);
}
......@@ -70,17 +70,7 @@
</div>
</form>
</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-title modal-form-only">
<a class="close modal-form-only" href="/#"><span>Fermer</span></a>
......@@ -104,7 +94,7 @@
</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">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#add-account">Créer un compte</a></li>
......@@ -125,7 +115,7 @@
</nav>
</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 class="page-header col-md-10">
<h1><span>Bienvenue sur la revue de presse de La Quadrature</span></h1>
......@@ -143,7 +133,7 @@
</section>
<section id="main" class="container-fluid white">
<section id="main" class="container-fluid light-grey-bg">
{% block content %}
{% endblock %}
</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