style: rapport
This commit is contained in:
Laureηt
parent
a49036d931
commit
2c367cbcbd
881
docs/bigstone.css
Normal file
881
docs/bigstone.css
Normal file
|
|
@ -0,0 +1,881 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* awsm.css v3.0.7 (https://igoradamenko.github.io/awsm.css/)
|
||||
* Copyright 2015 Igor Adamenko <mail@igoradamenko.com> (https://igoradamenko.com)
|
||||
* Licensed under MIT (https://github.com/igoradamenko/awsm.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, "PT Sans", "Open Sans", "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.4;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1.2em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 20rem) {
|
||||
body {
|
||||
font-size: calc(1rem + 0.00625 * (100vw - 20rem));
|
||||
}
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
body {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
body header,
|
||||
body,
|
||||
body footer,
|
||||
body article {
|
||||
position: relative;
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
body > header {
|
||||
margin-bottom: 3.5em;
|
||||
}
|
||||
body > header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
body > header p {
|
||||
margin: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
body > footer {
|
||||
margin-top: 6em;
|
||||
padding-bottom: 1.5em;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #145e86;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 1em 0;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
nav li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
nav a:visited {
|
||||
color: #1570ab;
|
||||
}
|
||||
nav a:hover {
|
||||
color: #aec8e7;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
ul li + li,
|
||||
ol li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
ul li > details,
|
||||
ol li > details {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p + ul,
|
||||
p + ol {
|
||||
margin-top: -0.75em;
|
||||
}
|
||||
p img,
|
||||
p picture {
|
||||
margin: auto;
|
||||
/* margin-bottom: 0.5em;
|
||||
margin-left: 0.5em; */
|
||||
}
|
||||
p picture img {
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
aside {
|
||||
margin: 0.5em 0;
|
||||
font-style: italic;
|
||||
color: #145e86;
|
||||
}
|
||||
@media (min-width: 65rem) {
|
||||
aside {
|
||||
position: absolute;
|
||||
right: -12.5rem;
|
||||
width: 9.375rem;
|
||||
max-width: 9.375rem;
|
||||
margin: 0;
|
||||
padding-left: 0.5em;
|
||||
font-size: 0.8em;
|
||||
border-left: 1px solid #184165;
|
||||
}
|
||||
}
|
||||
aside:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
aside:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
section + section {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.25em 0 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h1:hover > a[href^="#"][id]:empty,
|
||||
h1:focus > a[href^="#"][id]:empty,
|
||||
h2:hover > a[href^="#"][id]:empty,
|
||||
h2:focus > a[href^="#"][id]:empty,
|
||||
h3:hover > a[href^="#"][id]:empty,
|
||||
h3:focus > a[href^="#"][id]:empty,
|
||||
h4:hover > a[href^="#"][id]:empty,
|
||||
h4:focus > a[href^="#"][id]:empty,
|
||||
h5:hover > a[href^="#"][id]:empty,
|
||||
h5:focus > a[href^="#"][id]:empty,
|
||||
h6:hover > a[href^="#"][id]:empty,
|
||||
h6:focus > a[href^="#"][id]:empty {
|
||||
opacity: 1;
|
||||
}
|
||||
h1 + p,
|
||||
h1 + details,
|
||||
h2 + p,
|
||||
h2 + details,
|
||||
h3 + p,
|
||||
h3 + details,
|
||||
h4 + p,
|
||||
h4 + details,
|
||||
h5 + p,
|
||||
h5 + details,
|
||||
h6 + p,
|
||||
h6 + details {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
h1 > a[href^="#"][id]:empty,
|
||||
h2 > a[href^="#"][id]:empty,
|
||||
h3 > a[href^="#"][id]:empty,
|
||||
h4 > a[href^="#"][id]:empty,
|
||||
h5 > a[href^="#"][id]:empty,
|
||||
h6 > a[href^="#"][id]:empty {
|
||||
position: absolute;
|
||||
left: -0.65em;
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #145e86;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
h1 > a[href^="#"][id]:empty,
|
||||
h2 > a[href^="#"][id]:empty,
|
||||
h3 > a[href^="#"][id]:empty,
|
||||
h4 > a[href^="#"][id]:empty,
|
||||
h5 > a[href^="#"][id]:empty,
|
||||
h6 > a[href^="#"][id]:empty {
|
||||
left: -0.8em;
|
||||
}
|
||||
}
|
||||
h1 > a[href^="#"][id]:empty:target,
|
||||
h1 > a[href^="#"][id]:empty:hover,
|
||||
h1 > a[href^="#"][id]:empty:focus,
|
||||
h2 > a[href^="#"][id]:empty:target,
|
||||
h2 > a[href^="#"][id]:empty:hover,
|
||||
h2 > a[href^="#"][id]:empty:focus,
|
||||
h3 > a[href^="#"][id]:empty:target,
|
||||
h3 > a[href^="#"][id]:empty:hover,
|
||||
h3 > a[href^="#"][id]:empty:focus,
|
||||
h4 > a[href^="#"][id]:empty:target,
|
||||
h4 > a[href^="#"][id]:empty:hover,
|
||||
h4 > a[href^="#"][id]:empty:focus,
|
||||
h5 > a[href^="#"][id]:empty:target,
|
||||
h5 > a[href^="#"][id]:empty:hover,
|
||||
h5 > a[href^="#"][id]:empty:focus,
|
||||
h6 > a[href^="#"][id]:empty:target,
|
||||
h6 > a[href^="#"][id]:empty:hover,
|
||||
h6 > a[href^="#"][id]:empty:focus {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
color: #99c0c9;
|
||||
}
|
||||
h1 > a[href^="#"][id]:empty:target:focus,
|
||||
h2 > a[href^="#"][id]:empty:target:focus,
|
||||
h3 > a[href^="#"][id]:empty:target:focus,
|
||||
h4 > a[href^="#"][id]:empty:target:focus,
|
||||
h5 > a[href^="#"][id]:empty:target:focus,
|
||||
h6 > a[href^="#"][id]:empty:target:focus {
|
||||
outline: none;
|
||||
}
|
||||
h1 > a[href^="#"][id]:empty::before,
|
||||
h2 > a[href^="#"][id]:empty::before,
|
||||
h3 > a[href^="#"][id]:empty::before,
|
||||
h4 > a[href^="#"][id]:empty::before,
|
||||
h5 > a[href^="#"][id]:empty::before,
|
||||
h6 > a[href^="#"][id]:empty::before {
|
||||
content: "§ ";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-top: 1em;
|
||||
font-size: 1em;
|
||||
color: #145e86;
|
||||
}
|
||||
|
||||
article + article {
|
||||
margin-top: 4em;
|
||||
}
|
||||
article header p {
|
||||
font-size: 0.6em;
|
||||
color: #145e86;
|
||||
}
|
||||
article header p + h1,
|
||||
article header p + h2 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
article header h1 + p,
|
||||
article header h2 + p {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
article header h1 a,
|
||||
article header h2 a {
|
||||
color: #99c0c9;
|
||||
}
|
||||
article header h1 a:visited,
|
||||
article header h2 a:visited {
|
||||
color: #145e86;
|
||||
}
|
||||
article header h1 a:visited:hover,
|
||||
article header h2 a:visited:hover {
|
||||
color: #aec8e7;
|
||||
}
|
||||
article > footer {
|
||||
margin-top: 1.5em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1570ab;
|
||||
}
|
||||
a:visited {
|
||||
color: #726191;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
outline-width: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #aec8e7;
|
||||
}
|
||||
a abbr {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
abbr {
|
||||
margin-right: -0.075em;
|
||||
text-decoration: none;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
letter-spacing: 0.075em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 1em 0 0.5em;
|
||||
padding: 0;
|
||||
}
|
||||
img + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
img figcaption {
|
||||
opacity: 0.65;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
table {
|
||||
display: inline-block;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
background: linear-gradient(
|
||||
rgba(153, 192, 201, 0.15) 0%,
|
||||
rgba(153, 192, 201, 0.15) 100%
|
||||
)
|
||||
0 0,
|
||||
linear-gradient(
|
||||
rgba(153, 192, 201, 0.15) 0%,
|
||||
rgba(153, 192, 201, 0.15) 100%
|
||||
)
|
||||
100% 0;
|
||||
background-attachment: scroll, scroll;
|
||||
background-size: 1px 100%, 1px 100%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
table caption {
|
||||
font-size: 0.9em;
|
||||
background: #1b2d3e;
|
||||
}
|
||||
table td,
|
||||
table th {
|
||||
padding: 0.35em 0.75em;
|
||||
vertical-align: top;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #184165;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
table td:first-child,
|
||||
table th:first-child {
|
||||
padding-left: 0;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#1b2d3e 50%,
|
||||
rgba(27, 45, 62, 0) 100%
|
||||
);
|
||||
background-size: 2px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
table td:last-child,
|
||||
table th:last-child {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
#1b2d3e 50%,
|
||||
rgba(27, 45, 62, 0) 100%
|
||||
);
|
||||
background-position: 100% 0;
|
||||
background-size: 2px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
table td:only-child,
|
||||
table th:only-child {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#1b2d3e 50%,
|
||||
rgba(27, 45, 62, 0) 100%
|
||||
),
|
||||
linear-gradient(to left, #1b2d3e 50%, rgba(27, 45, 62, 0) 100%);
|
||||
background-position: 0 0, 100% 0;
|
||||
background-size: 2px 100%, 2px 100%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
table th {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
form {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
form select,
|
||||
form label {
|
||||
display: block;
|
||||
}
|
||||
form label:not(:first-child) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
form p label {
|
||||
display: inline;
|
||||
}
|
||||
form p label + label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
form legend:first-child + label {
|
||||
margin-top: 0;
|
||||
}
|
||||
form select,
|
||||
form input[type],
|
||||
form textarea {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
form input[type="checkbox"],
|
||||
form input[type="radio"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid #145e86;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #145e86;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background: #184165;
|
||||
color: #99c0c9;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
button:not([disabled]):hover {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
button:active {
|
||||
background-color: #145e86;
|
||||
}
|
||||
button[disabled] {
|
||||
color: #145e86;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
select {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background: #184165;
|
||||
color: #99c0c9;
|
||||
cursor: pointer;
|
||||
padding-right: 1.2em;
|
||||
background-position: top 55% right 0.35em;
|
||||
background-size: 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(20, 94, 134)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
select:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
select:not([disabled]):hover {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
select:active {
|
||||
background-color: #145e86;
|
||||
}
|
||||
select[disabled] {
|
||||
color: #145e86;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
select:not([disabled]):focus,
|
||||
select:not([disabled]):hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(153, 192, 201)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type^="date"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="time"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="url"] {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type^="date"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="url"]:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="text"]::-moz-placeholder,
|
||||
input[type="password"]::-moz-placeholder,
|
||||
input[type^="date"]::-moz-placeholder,
|
||||
input[type="email"]::-moz-placeholder,
|
||||
input[type="number"]::-moz-placeholder,
|
||||
input[type="search"]::-moz-placeholder,
|
||||
input[type="tel"]::-moz-placeholder,
|
||||
input[type="time"]::-moz-placeholder,
|
||||
input[type="month"]::-moz-placeholder,
|
||||
input[type="week"]::-moz-placeholder,
|
||||
input[type="url"]::-moz-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="text"]::-webkit-input-placeholder,
|
||||
input[type="password"]::-webkit-input-placeholder,
|
||||
input[type^="date"]::-webkit-input-placeholder,
|
||||
input[type="email"]::-webkit-input-placeholder,
|
||||
input[type="number"]::-webkit-input-placeholder,
|
||||
input[type="search"]::-webkit-input-placeholder,
|
||||
input[type="tel"]::-webkit-input-placeholder,
|
||||
input[type="time"]::-webkit-input-placeholder,
|
||||
input[type="month"]::-webkit-input-placeholder,
|
||||
input[type="week"]::-webkit-input-placeholder,
|
||||
input[type="url"]::-webkit-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="text"]:-ms-input-placeholder,
|
||||
input[type="password"]:-ms-input-placeholder,
|
||||
input[type^="date"]:-ms-input-placeholder,
|
||||
input[type="email"]:-ms-input-placeholder,
|
||||
input[type="number"]:-ms-input-placeholder,
|
||||
input[type="search"]:-ms-input-placeholder,
|
||||
input[type="tel"]:-ms-input-placeholder,
|
||||
input[type="time"]:-ms-input-placeholder,
|
||||
input[type="month"]:-ms-input-placeholder,
|
||||
input[type="week"]:-ms-input-placeholder,
|
||||
input[type="url"]:-ms-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"] {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background: #184165;
|
||||
color: #99c0c9;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
input[type="submit"]:focus,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="submit"]:not([disabled]):hover,
|
||||
input[type="button"]:not([disabled]):hover,
|
||||
input[type="reset"]:not([disabled]):hover {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="submit"]:active,
|
||||
input[type="button"]:active,
|
||||
input[type="reset"]:active {
|
||||
background-color: #145e86;
|
||||
}
|
||||
input[type="submit"][disabled],
|
||||
input[type="button"][disabled],
|
||||
input[type="reset"][disabled] {
|
||||
color: #145e86;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input[type="color"] {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 6em;
|
||||
}
|
||||
input[type="color"]:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="color"]::-moz-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="color"]::-webkit-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="color"]:-ms-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
input[type="color"]:hover {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="file"] {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background: #184165;
|
||||
color: #99c0c9;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0.75em 0.5em;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
input[type="file"]:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="file"]:not([disabled]):hover {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
input[type="file"]:active {
|
||||
background-color: #145e86;
|
||||
}
|
||||
input[type="file"][disabled] {
|
||||
color: #145e86;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
margin: -0.2em 0.75em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
textarea {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: calc(0.25em - 1px) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
border: 1px solid #145e86;
|
||||
border-radius: 2px;
|
||||
background: #1b2d3e;
|
||||
color: #99c0c9;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4.5em;
|
||||
resize: vertical;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
textarea:focus {
|
||||
border: 1px solid #99c0c9;
|
||||
}
|
||||
textarea::-moz-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
textarea:-ms-input-placeholder {
|
||||
color: #145e86;
|
||||
}
|
||||
|
||||
output {
|
||||
display: block;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
var,
|
||||
samp {
|
||||
font-family: Consolas, "Lucida Console", Monaco, monospace;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
font-size: 0.8em;
|
||||
background: linear-gradient(
|
||||
rgba(153, 192, 201, 0.15) 0%,
|
||||
rgba(153, 192, 201, 0.15) 100%
|
||||
)
|
||||
0 0,
|
||||
linear-gradient(
|
||||
rgba(153, 192, 201, 0.15) 0%,
|
||||
rgba(153, 192, 201, 0.15) 100%
|
||||
)
|
||||
100% 0;
|
||||
background-attachment: scroll, scroll;
|
||||
background-size: 1px 100%, 1px 100%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
pre > code {
|
||||
display: inline-block;
|
||||
overflow-x: visible;
|
||||
box-sizing: border-box;
|
||||
min-width: 100%;
|
||||
border-right: 3px solid #1b2d3e;
|
||||
border-left: 1px solid #1b2d3e;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: 2em 0;
|
||||
border: 0;
|
||||
background: #184165;
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1em 0;
|
||||
}
|
||||
details[open] {
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid #184165;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px dashed;
|
||||
cursor: pointer;
|
||||
}
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
noscript {
|
||||
color: #a15433;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(21, 112, 171, 0.25);
|
||||
}
|
||||
|
|
@ -1,9 +1,35 @@
|
|||
<h1 id="model-classification-in-rocket-league-sideswipe">Model
|
||||
classification in Rocket League Sideswipe</h1>
|
||||
<p>Laurent Fainsin Damien Guillotin Pierre-Eliot Jourdan</p>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="pandoc" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>rapport</title>
|
||||
<style>
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
||||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||
ul.task-list{list-style: none;}
|
||||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="bigstone.css" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<h1 id="classification-dans-rocket-league-sideswipe">Classification dans
|
||||
Rocket League Sideswipe</h1>
|
||||
Laurent Fainsin — Damien Guillotin — Pierre-Eliot Jourdan
|
||||
</center>
|
||||
<p>Lien vers notre <a
|
||||
href="https://git.inpt.fr/tocard-inc/enseeiht/projet-classification">dépot
|
||||
gitlab</a></p>
|
||||
gitlab</a>.</p>
|
||||
<p>Lien vers notre <a
|
||||
href="https://fainsil.users.inpt.fr/content/DL/dataset.zip">dataset</a>.</p>
|
||||
<h2 id="description">Description</h2>
|
||||
<p>Le but de ce projet est de permettre la reconnaissance
|
||||
(classification) de voitures dans le jeu vidéo mobile Rocket League
|
||||
|
|
@ -11,36 +37,57 @@ Sideswipe, et ce peu importe les accessoires équipés tels que les roues,
|
|||
les chapeaux, les stickers, les couleurs…</p>
|
||||
<h2 id="méthodolgie-dacquisition-du-dataset">Méthodolgie d’acquisition
|
||||
du dataset</h2>
|
||||
<p>Pour acquérir les 400 000 images de notre dataset, nous avons
|
||||
<p>Pour acquérir les quelque 400 000 images de notre dataset, nous avons
|
||||
simplement écrit un script capable d’automatiser la customisation des
|
||||
modèles ainsi que la prise de screenshots. Il nous aura fallu environ 18
|
||||
heures pour constituer notre dataset.</p>
|
||||
<p>Notre dataset est un dossier contenant toutes nos images et une base
|
||||
de données sqlite3 faisant le lien entre les noms de nos screenshots
|
||||
(des uuids) et les paramètre de la voiture dans l’image.</p>
|
||||
(des uuids) et les paramètres de la voiture dans l’image.</p>
|
||||
<p>Par exemple <code>ec7d32da-ad24-11ec-813b-e0d4e8390134.jpg</code>
|
||||
correspond au modèle de voiture 2 (la werewolf) à la team 0 (les bleus),
|
||||
à la couleur primaire 50%, à la couleur secondaire 0%, au chapeau n°12
|
||||
(<insérer nom chapeau>), au sticker n°1 (<insérer nom sticker>), à la
|
||||
roue n°4 (<insérer nom roue>) et à la 3ème rotation.</p>
|
||||
<p>Voici l’image associée :</p>
|
||||
(le Rasta), au sticker n°1 (le Kana), à la roue n°4 (l’Helicoprion) et à
|
||||
la 3ème rotation.</p>
|
||||
<p>Voici l’image associée:</p>
|
||||
<p><img src="image_methodo.jpg" /></p>
|
||||
<h2 id="méthodologie">Méthodologie</h2>
|
||||
<ul class="incremental">
|
||||
<li>Description de votre méthodologie pour partitionner les images en
|
||||
ensembles d’entraı̂nement, de validation et de test.</li>
|
||||
</ul>
|
||||
<p>-> Voir la doc de tensorflow.</p>
|
||||
<p>Nous pensons dans un premier temps fractionner notre dataset de la
|
||||
manière suivante:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="header">
|
||||
<th style="text-align: center;">Train</th>
|
||||
<th style="text-align: center;">Test</th>
|
||||
<th style="text-align: center;">Validation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td style="text-align: center;">70%</td>
|
||||
<td style="text-align: center;">15%</td>
|
||||
<td style="text-align: center;">15%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Nous utiliserons les méthodes fournies par Tensorflow pour split
|
||||
notre dataset via ces proportions.</p>
|
||||
<p>Notre objectif final serait d’utiliser l’augmentation pour obtenir
|
||||
plus d’un million d’images.</p>
|
||||
<h2 id="pronostic">Pronostic</h2>
|
||||
<p>Si l’on décide d’évaluer le réseau sur des voitures avec une rotation
|
||||
qui est la même que lors de l’aquisition des données, le résultat
|
||||
qui est la même que lors de l’acquisition des données, le résultat
|
||||
devrait être plus que correct mais si l’on évalue le réseau sur une
|
||||
rotation différente, c’est la que les problèmes peuvent arriver, il se
|
||||
peut que l’on sur-apprenne la discretion de nos rotations.</p>
|
||||
rotation différente, c’est là que les problèmes peuvent arriver, il se
|
||||
peut que l’on sur-apprenne la discrétion de nos rotations.</p>
|
||||
<h2 id="chargement-de-nos-données">Chargement de nos données</h2>
|
||||
<ul class="incremental">
|
||||
<li>Script de chargement de vos données.</li>
|
||||
</ul>
|
||||
<p>Comme nous possédons un grand nombre d’images et comme celles-ci sont
|
||||
réliées via un csv/sqlite3, nous allons devoir utiliser une <a
|
||||
href="https://www.tensorflow.org/tutorials/load_data/csv#using_tfdata">structure
|
||||
spéciale</a> de Tensorflow pour charger les images via leur association
|
||||
dans le csv/sqlite3, et aussi pour permettre de ne pas tout charger en
|
||||
mémoire (car notre dataset sera très probablement de taille supérieur à
|
||||
la RAM de nos machines).</p>
|
||||
<h2 id="exemple-du-dataset">Exemple du dataset</h2>
|
||||
<p><img src="demo_datas.gif" /></p>
|
||||
<table>
|
||||
|
|
@ -53,7 +100,7 @@ peut que l’on sur-apprenne la discretion de nos rotations.</p>
|
|||
</colgroup>
|
||||
<thead>
|
||||
<tr class="header">
|
||||
<th style="text-align: left;">Rotation</th>
|
||||
<th style="text-align: center;">Rotation</th>
|
||||
<th style="text-align: center;">Octane</th>
|
||||
<th style="text-align: center;">AfterShock</th>
|
||||
<th style="text-align: center;">Werewolf</th>
|
||||
|
|
@ -62,70 +109,70 @@ peut que l’on sur-apprenne la discretion de nos rotations.</p>
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td style="text-align: left;">0</td>
|
||||
<td style="text-align: center;">0</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_0.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_0.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_0.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_0.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td style="text-align: left;">1</td>
|
||||
<td style="text-align: center;">1</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_1.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_1.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_1.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_1.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td style="text-align: left;">2</td>
|
||||
<td style="text-align: center;">2</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_2.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_2.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_2.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_2.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td style="text-align: left;">3</td>
|
||||
<td style="text-align: center;">3</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_3.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_3.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_3.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_3.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td style="text-align: left;">4</td>
|
||||
<td style="text-align: center;">4</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_4.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_4.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_4.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_4.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td style="text-align: left;">5</td>
|
||||
<td style="text-align: center;">5</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_5.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_5.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_5.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_5.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td style="text-align: left;">6</td>
|
||||
<td style="text-align: center;">6</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_6.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_6.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_6.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_6.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td style="text-align: left;">7</td>
|
||||
<td style="text-align: center;">7</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_7.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_7.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_7.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_7.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td style="text-align: left;">8</td>
|
||||
<td style="text-align: center;">8</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_8.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_8.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_8.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/3_8.jpg" /></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td style="text-align: left;">9</td>
|
||||
<td style="text-align: center;">9</td>
|
||||
<td style="text-align: center;"><img src="demo_datas/0_9.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/1_9.jpg" /></td>
|
||||
<td style="text-align: center;"><img src="demo_datas/2_9.jpg" /></td>
|
||||
|
|
@ -133,3 +180,5 @@ peut que l’on sur-apprenne la discretion de nos rotations.</p>
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
<center>
|
||||
|
||||
# Classification dans Rocket League Sideswipe
|
||||
|
||||
Laurent Fainsin —
|
||||
Damien Guillotin —
|
||||
Pierre-Eliot Jourdan
|
||||
</center>
|
||||
|
||||
Lien vers notre [dépot gitlab](https://git.inpt.fr/tocard-inc/enseeiht/projet-classification)
|
||||
Lien vers notre [dépot gitlab](https://git.inpt.fr/tocard-inc/enseeiht/projet-classification).
|
||||
|
||||
Lien vers notre [dataset](https://fainsil.users.inpt.fr/content/DL/dataset.zip).
|
||||
|
||||
## Description
|
||||
|
||||
Loading…
Reference in a new issue