improvement: add basic new styling
This commit is contained in:
parent
d4c5d542da
commit
6dc901375b
5 changed files with 60 additions and 43 deletions
|
@ -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 ------------------- */
|
||||
|
|
File diff suppressed because one or more lines are too long
18
index.html
18
index.html
|
@ -23,8 +23,14 @@
|
|||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#">Blue Sky</a>
|
||||
<header class="container-fluid" id="page-header">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
|
@ -50,12 +56,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<header class="container">
|
||||
<div class="row">
|
||||
<h1>Blue Sky</h1>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
Reference in a new issue