improvement: initial rebrand to roleplay
|
@ -23,7 +23,6 @@
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<a class="navbar-brand" href="#">kazhnuz.space</a>
|
|
||||||
<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>
|
||||||
|
|
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 7.6 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 6.0 KiB |
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Blue Sky, by Kazhnuz</title>
|
<title>Roleplay</title>
|
||||||
|
|
||||||
<!-- meta -->
|
<!-- meta -->
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
|
@ -24,7 +24,6 @@
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
<header id="page-header">
|
<header id="page-header">
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark navbar-transparent">
|
<nav class="navbar navbar-expand-lg navbar-dark navbar-transparent">
|
||||||
<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">
|
<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>
|
||||||
|
@ -53,7 +52,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="title_area">
|
<div class="title_area">
|
||||||
<h1>Blue Sky</h1>
|
<h1><img src="img/logo.png" /></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -23,7 +23,6 @@
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<a class="navbar-brand" href="#">kazhnuz.space</a>
|
|
||||||
<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>
|
||||||
|
|
|
@ -16,8 +16,8 @@ $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
||||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
$border-radius: 3px;
|
$border-radius: 5px;
|
||||||
$border-size: 1px;
|
$border-size: 2px;
|
||||||
|
|
||||||
$baseline: 1.5;
|
$baseline: 1.5;
|
||||||
$baselinerem: $baseline * 1rem;
|
$baselinerem: $baseline * 1rem;
|
||||||
|
|
|
@ -36,7 +36,10 @@ $wrapper-padding: $baselinerem * 3;
|
||||||
/* 02.1 - Wrapper et page totale */
|
/* 02.1 - Wrapper et page totale */
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
background: $background-color url('img/background.png') center bottom repeat-x;
|
background-image: url("img/header.png"), url("img/back2.png"), url("img/back.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
||||||
|
background-attachment: scroll, scroll, scroll;
|
||||||
|
background-position: top center, top center, top center;
|
||||||
|
background-repeat: no-repeat, repeat-y , repeat ;
|
||||||
|
|
||||||
|
|
||||||
padding-left:$wrapper-padding/2;
|
padding-left:$wrapper-padding/2;
|
||||||
|
@ -47,6 +50,17 @@ $wrapper-padding: $baselinerem * 3;
|
||||||
padding-right:$wrapper-padding;
|
padding-right:$wrapper-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* Alt background for smaller screen */
|
||||||
|
|
||||||
|
@media screen and (max-width: 1199px) {
|
||||||
|
#wrapper {
|
||||||
|
background-image: url("img/header_small.png"), url("img/back2_small.png"), url("img/back_alt.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
||||||
|
background-attachment: scroll, scroll, scroll;
|
||||||
|
background-position: top center, top center, top center;
|
||||||
|
background-repeat: no-repeat, repeat-y , repeat ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#global-area {
|
#global-area {
|
||||||
@include row-grid();
|
@include row-grid();
|
||||||
|
|
82
style.css
|
@ -469,7 +469,11 @@ mark {
|
||||||
*/
|
*/
|
||||||
/* 02.1 - Wrapper et page totale */
|
/* 02.1 - Wrapper et page totale */
|
||||||
#wrapper {
|
#wrapper {
|
||||||
background: #42a0f3 url("img/background.png") center bottom repeat-x;
|
background-image: url("img/header.png"), url("img/back2.png"), url("img/back.png");
|
||||||
|
/* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
||||||
|
background-attachment: scroll, scroll, scroll;
|
||||||
|
background-position: top center, top center, top center;
|
||||||
|
background-repeat: no-repeat, repeat-y, repeat;
|
||||||
padding-left: 2.25rem;
|
padding-left: 2.25rem;
|
||||||
padding-right: 2.25rem;
|
padding-right: 2.25rem;
|
||||||
}
|
}
|
||||||
|
@ -480,6 +484,16 @@ mark {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Alt background for smaller screen */
|
||||||
|
@media screen and (max-width: 1199px) {
|
||||||
|
#wrapper {
|
||||||
|
background-image: url("img/header_small.png"), url("img/back2_small.png"), url("img/back_alt.png");
|
||||||
|
/* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
||||||
|
background-attachment: scroll, scroll, scroll;
|
||||||
|
background-position: top center, top center, top center;
|
||||||
|
background-repeat: no-repeat, repeat-y, repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
#global-area {
|
#global-area {
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -518,7 +532,7 @@ header h1 {
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
@ -587,7 +601,7 @@ ul.social li a:hover {
|
||||||
*/
|
*/
|
||||||
/* 10.1 - Cards */
|
/* 10.1 - Cards */
|
||||||
.card {
|
.card {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
border: none;
|
border: none;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
@ -756,19 +770,19 @@ ul.social li a:hover {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
.card-body:first-child {
|
.card-body:first-child {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 5px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
.card-body:last-child {
|
.card-body:last-child {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
.card-body:only-child {
|
.card-body:only-child {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 10.1.1 - Headers */
|
/* 10.1.1 - Headers */
|
||||||
|
@ -776,7 +790,7 @@ ul.social li a:hover {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
||||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||||
|
@ -784,19 +798,19 @@ ul.social li a:hover {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.card-header:first-child, .card-footer:first-child {
|
.card-header:first-child, .card-footer:first-child {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 5px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
.card-header:last-child, .card-footer:last-child {
|
.card-header:last-child, .card-footer:last-child {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
.card-header:only-child, .card-footer:only-child {
|
.card-header:only-child, .card-footer:only-child {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer h7, .card-footer h8, .card-footer h9, .card-footer h10 {
|
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer h7, .card-footer h8, .card-footer h9, .card-footer h10 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
@ -814,22 +828,22 @@ ul.social li a:hover {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.card-meta:first-child {
|
.card-meta:first-child {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 5px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
.card-meta:last-child {
|
.card-meta:last-child {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
.card-meta:only-child {
|
.card-meta:only-child {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
.card-meta.media {
|
.card-meta.media {
|
||||||
-ms-flex-align: center !important;
|
-ms-flex-align: center !important;
|
||||||
|
@ -857,19 +871,19 @@ ul.social li a:hover {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
.list-group:first-child {
|
.list-group:first-child {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 5px;
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 5px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
.list-group:last-child {
|
.list-group:last-child {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
.list-group:only-child {
|
.list-group:only-child {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
|
@ -898,7 +912,7 @@ a.list-group-item:hover {
|
||||||
|
|
||||||
/* 10.3 - Alerts */
|
/* 10.3 - Alerts */
|
||||||
.alert {
|
.alert {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
border: none;
|
border: none;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
@ -1060,15 +1074,15 @@ a.list-group-item:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||||
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
.btn:focus {
|
.btn:focus {
|
||||||
|
@ -1077,8 +1091,8 @@ a.list-group-item:hover {
|
||||||
}
|
}
|
||||||
.btn:active {
|
.btn:active {
|
||||||
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
.btn:active:focus {
|
.btn:active:focus {
|
||||||
|
@ -1243,7 +1257,7 @@ a.list-group-item:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group .btn {
|
.btn-group .btn {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
.btn-group .btn:not(:first-child) {
|
.btn-group .btn:not(:first-child) {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
|
@ -1482,7 +1496,7 @@ a.list-group-item:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-preview {
|
.card-preview {
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 5px 5px 5px 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||||
|
|