kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: add basic new styling

Browse source
This commit is contained in:
Kazhnuz 2019-10-08 13:50:01 +02:00
parent d4c5d542da
commit 6dc901375b
5 changed files with 60 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
css/style.css
View file

@ -1,10 +1,15 @@
/* ------------------ CUSTOM STYLE ------------------- */ /* ------------------ CUSTOM STYLE ------------------- */
body { body {
background-color: #fdf6e3; background-color: #002b36;
} }
#wrapper { #wrapper {
background-color: #fdf6e3;
}
#page-header {
background: #2aa198 url("../img/background.png") center bottom repeat-x; background: #2aa198 url("../img/background.png") center bottom repeat-x;
height: 350px;
} }
/* ------------------ GLOBAL STYLE ------------------- */ /* ------------------ GLOBAL STYLE ------------------- */
@ -60,6 +65,7 @@ header h1 {
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
footer { footer {
color: #fdf6e3;
margin-top: 40px; margin-top: 40px;
} }
@ -76,8 +82,8 @@ ul.social li {
display: inline; display: inline;
} }
ul.social li a { ul.social li a {
color: #fdf6e3; color: #002b36;
background-color: #000000; background-color: #fdf6e3;
padding: 0.3em; padding: 0.3em;
padding-left: 0.36em; padding-left: 0.36em;
padding-right: 0.36em; padding-right: 0.36em;
@ -85,8 +91,8 @@ ul.social li a {
border-radius: 100%; border-radius: 100%;
} }
ul.social li a:hover { ul.social li a:hover {
color: #000; color: #fdf6e3;
background-color: #fdf6e3; background-color: #002b36;
} }
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

66
index.html
View file

@ -23,40 +23,42 @@
<body> <body>
<div id="wrapper"> <div id="wrapper">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <header class="container-fluid" id="page-header">
<a class="navbar-brand" href="#">Blue Sky</a> <div class="row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <div class="col-md-6">
<span class="navbar-toggler-icon"></span> <h1>Blue Sky</h1>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Exemple de page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Galleries
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Truc 1</a>
<a class="dropdown-item" href="#">Truc 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Voir gallerie entière</a>
</div> </div>
</li>
</ul>
</div>
</nav>
<div class="col-md-6">
<header class="container"> <nav class="navbar navbar-expand-lg navbar-dark bg-skyblue">
<div class="row"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<h1>Blue Sky</h1> <span class="navbar-toggler-icon"></span>
</div> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Exemple de page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Galleries
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Truc 1</a>
<a class="dropdown-item" href="#">Truc 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Voir gallerie entière</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header> </header>
<section class="container"> <section class="container">

9
scss/_commons.scss
View file

@ -56,6 +56,7 @@ header h1 {
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
footer { footer {
color: $color-footer-text;
margin-top:40px; margin-top:40px;
} }
@ -71,16 +72,16 @@ ul.social {
list-style: none; list-style: none;
display: inline; display: inline;
a { a {
color: $color-light; color: $color-footer-back;
background-color:#000000; background-color: $color-footer-text;
padding:0.3em; padding:0.3em;
padding-left:0.36em; padding-left:0.36em;
padding-right:0.36em; padding-right:0.36em;
vertical-align:middle; vertical-align:middle;
border-radius:100%; border-radius:100%;
&:hover { &:hover {
color:#000; color:$color-footer-text;
background-color: $color-light; background-color: $color-footer-back;
} }
} }
} }

10
scss/style.scss
View file

@ -17,6 +17,9 @@ $color-link: $color-blue;
$color-selection: $color-blue; $color-selection: $color-blue;
$color-mark: $color-yellow; $color-mark: $color-yellow;
$color-footer-back: $color-dark;
$color-footer-text: $color-light;
@mixin borders() { @mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
} }
@ -26,11 +29,16 @@ $color-mark: $color-yellow;
} }
body { body {
background-color: $color-light; background-color: $color-footer-back;
} }
#wrapper { #wrapper {
background-color: $color-light;
}
#page-header {
background: $color-turquoise url('../img/background.png') center bottom repeat-x; background: $color-turquoise url('../img/background.png') center bottom repeat-x;
height:350px;
} }
@import 'commons'; @import 'commons';