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 ------------------- */
|
/* ------------------ 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 ------------------- */
|
||||||
|
|
File diff suppressed because one or more lines are too long
16
index.html
16
index.html
|
@ -23,8 +23,14 @@
|
||||||
<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">
|
||||||
|
<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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -51,11 +57,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
<header class="container">
|
|
||||||
<div class="row">
|
|
||||||
<h1>Blue Sky</h1>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Reference in a new issue