jdr-et-univers/roleplay.css
Archived
1
0
Fork 0
Code Issues 7 Pull requests Releases Wiki Activity

improvement: initial rebrand to roleplay

Browse source
This commit is contained in:
Kazhnuz 2019-11-13 12:20:50 +01:00
parent 560765536e
commit 4866816d56
15 changed files with 68 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
color-test.html
View file

@ -23,7 +23,6 @@
<div id="wrapper">
<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">
<span class="navbar-toggler-icon"></span>
</button>

BIN
img/back.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
img/back2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
img/back2_small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
img/back_alt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
img/background.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
img/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
img/header_small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
img/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

5
index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>Blue Sky, by Kazhnuz</title>
<title>Roleplay</title>
<!-- meta -->
<meta name="description" content="">
@ -24,7 +24,6 @@
<div id="wrapper">
<header id="page-header">
<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">
<span class="navbar-toggler-icon"></span>
</button>
@ -53,7 +52,7 @@
</nav>
<div class="title_area">
<h1>Blue Sky</h1>
<h1><img src="img/logo.png" /></h1>
</div>
</header>

1
preview.html
View file

@ -23,7 +23,6 @@
<div id="wrapper">
<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">
<span class="navbar-toggler-icon"></span>
</button>

4
scss/_definitions.scss
View file

@ -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-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
$border-radius: 3px;
$border-size: 1px;
$border-radius: 5px;
$border-size: 2px;
$baseline: 1.5;
$baselinerem: $baseline * 1rem;

16
scss/_global.scss
View file

@ -36,7 +36,10 @@ $wrapper-padding: $baselinerem * 3;
/* 02.1 - Wrapper et page totale */
#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;
@ -47,6 +50,17 @@ $wrapper-padding: $baselinerem * 3;
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 {
@include row-grid();

82
style.css
View file

@ -469,7 +469,11 @@ mark {
*/
/* 02.1 - Wrapper et page totale */
#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-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 {
max-width: 1600px;
margin: auto;
@ -518,7 +532,7 @@ header h1 {
.navbar {
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-right: 0;
}
@ -587,7 +601,7 @@ ul.social li a:hover {
*/
/* 10.1 - Cards */
.card {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
@ -756,19 +770,19 @@ ul.social li a:hover {
background-color: white;
}
.card-body:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-body:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-body:only-child {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
}
/* 10.1.1 - Headers */
@ -776,7 +790,7 @@ ul.social li a:hover {
border: 0;
border-radius: 0;
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;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
@ -784,19 +798,19 @@ ul.social li a:hover {
border-radius: 0;
}
.card-header:first-child, .card-footer:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-header:last-child, .card-footer:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.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 {
font-size: 1em;
@ -814,22 +828,22 @@ ul.social li a:hover {
border: 0;
border-radius: 0;
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 {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-meta:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-meta:only-child {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
}
.card-meta.media {
-ms-flex-align: center !important;
@ -857,19 +871,19 @@ ul.social li a:hover {
background-color: white;
}
.list-group:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.list-group:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.list-group:only-child {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
}
.list-group-item {
@ -898,7 +912,7 @@ a.list-group-item:hover {
/* 10.3 - Alerts */
.alert {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
@ -1060,15 +1074,15 @@ a.list-group-item:hover {
}
.btn {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px;
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);
}
.btn:hover {
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-radius: 3px 3px 3px 3px;
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.btn:focus {
@ -1077,8 +1091,8 @@ a.list-group-item:hover {
}
.btn:active {
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-radius: 3px 3px 3px 3px;
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.btn:active:focus {
@ -1243,7 +1257,7 @@ a.list-group-item:hover {
}
.btn-group .btn {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
}
.btn-group .btn:not(:first-child) {
border-top-left-radius: 0;
@ -1482,7 +1496,7 @@ a.list-group-item:hover {
}
.card-preview {
border-radius: 3px 3px 3px 3px;
border-radius: 5px 5px 5px 5px;
width: 100%;
margin: auto;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);

2
style.css.map
View file

File diff suppressed because one or more lines are too long