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 ------------------- */
body {
background-color: #fdf6e3;
background-color: #002b36;
}
#wrapper {
background-color: #fdf6e3;
}
#page-header {
background: #2aa198 url("../img/background.png") center bottom repeat-x;
height: 350px;
}
/* ------------------ GLOBAL STYLE ------------------- */
@ -60,6 +65,7 @@ header h1 {
/* ------------------ FOOTER ------------------- */
footer {
color: #fdf6e3;
margin-top: 40px;
}
@ -76,8 +82,8 @@ ul.social li {
display: inline;
}
ul.social li a {
color: #fdf6e3;
background-color: #000000;
color: #002b36;
background-color: #fdf6e3;
padding: 0.3em;
padding-left: 0.36em;
padding-right: 0.36em;
@ -85,8 +91,8 @@ ul.social li a {
border-radius: 100%;
}
ul.social li a:hover {
color: #000;
background-color: #fdf6e3;
color: #fdf6e3;
background-color: #002b36;
}
/* ------------------ 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>
<div id="wrapper">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Blue Sky</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</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>
<header class="container-fluid" id="page-header">
<div class="row">
<div class="col-md-6">
<h1>Blue Sky</h1>
</div>
</li>
</ul>
</div>
</nav>
<header class="container">
<div class="row">
<h1>Blue Sky</h1>
</div>
<div class="col-md-6">
<nav class="navbar navbar-expand-lg navbar-dark bg-skyblue">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</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>
<section class="container">

9
scss/_commons.scss
View file

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

10
scss/style.scss
View file

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