Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
La Quadrature du Net
rpteam
Revue de Press
Commits
0655a721
Commit
0655a721
authored
Apr 24, 2017
by
cynddl
Browse files
Transitioning towards semantic and modular styles
parent
596ff198
Changes
5
Hide whitespace changes
Inline
Side-by-side
apps/rp/templates/rp/article_list.html
View file @
0655a721
...
...
@@ -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
View file @
0655a721
...
...
@@ -14,6 +14,8 @@
section
{
margin
:
0px
!important
;
padding-bottom
:
24px
;
padding-top
:
24px
;
&
.white-pure
{
padding
:
34px
;
...
...
static/src/components/navigation.css
View file @
0655a721
/* 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
View file @
0655a721
...
...
@@ -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
View file @
0655a721
...
...
@@ -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
<
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>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment