Transitioning towards semantic and modular styles

apps/rp/templates/rp/article_list.html

@@ -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'%}">

static/src/components/layout.css

@@ -14,6 +14,8 @@
 
 section {
 	margin: 0px !important;
+	padding-bottom: 24px;
+	padding-top: 24px;
 
 	& .white-pure {
 		padding: 34px;

static/src/components/navigation.css

 /* 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;
 }

static/src/shared/colors.css

@@ -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);
 }

templates/base.html

@@ -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>