css changes

This commit is contained in:
shizuka 2018-10-15 16:26:02 +02:00
parent a410ad1a5b
commit bc818b463f

View File

@ -1,5 +1,5 @@
BODY { BODY {
padding-top: 75px; padding-top: 7.5rem;
letter-spacing: +.02rem; letter-spacing: +.02rem;
font-weight: 300; font-weight: 300;
font-size: 1.6rem; font-size: 1.6rem;
@ -8,7 +8,6 @@ BODY {
} }
code { code {
color: f00;
font-size: 1.6rem; font-size: 1.6rem;
background-color: #f9f2f4; background-color: #f9f2f4;
@ -39,7 +38,7 @@ h4 {
} }
img{ img{
max-width: 500px; max-width: 50rem;
height: auto; height: auto;
} }
@ -51,46 +50,41 @@ video {
pre { pre {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.7rem; line-height: 1.7rem;
margin-top: 10px; margin-top: 1rem;
margin-bottom: 10px; margin-bottom: 1rem;
} }
.input-group { .input-group {
padding-right: 30px; padding-right: 3rem;
padding-left: 20px; padding-left: 2rem;
} }
.warning { .warning {
border-left: 10px solid #ba3232; border-left: 0.60em solid #ba3232;
margin-left: auto; margin-left: auto;
margin-bottom: 20px; margin-bottom: 1em;
margin-top: 20px; margin-top: 1em;
color: #ba3232; color: #ba3232;
padding: 25px 35px; padding: 2.5rem 3.5rem;
text-align: left; text-align: left;
background-color: #fdf7f7; background-color: #fdf7f7;
} }
.info { .info {
border-left: 10px solid #918f8a; /*#4d5363*/ border-left: 0.6em solid #918f8a; /*#4d5363*/
margin-left: auto; margin-left: auto;
margin-bottom: 20px; margin-bottom: 1em;
margin-top: 20px; margin-top: 1em;
color: black; color: black;
padding: 25px 35px; padding: 2.5rem 3.5rem;
text-align: left; text-align: left;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.navbar { .navbar {
letter-spacing: +.05rem;
font-weight: bold;
font-size: 1.8rem;
background-color: #292929; background-color: #292929;
position: fixed;
} }
a:link { a:link {
@ -104,76 +98,47 @@ a:visited {
a:hover { a:hover {
color: #000; color: #000;
} }
.navbar a {
font-size: 1rem;
}
.navbar a:link{
color: #ba3232;
}
.navbar a:visited {
color: #ba3232;
/*font-size: 1.5rem;*/
}
.navbar a:hover {
color: #ba3232;
/*font-size: 2rem;*/
}
.sidebar-header { .sidebar-header {
color: #000; color: #000;
font-size: 3rem; font-size: 1rem;
text-align: center; text-align: center;
letter-spacing: 0.3rem; letter-spacing: 0.3rem;
font-weight: bold; font-weight: bold;
padding-bottom: 10px; padding-bottom: 1rem;
background-color: #ba3232; background-color: #ba3232;
} }
.sidebar-toggle { .sidebar-toggle {
float: left; float: left;
margin-left: 15px; margin-left: 1.5rem;
} }
.sidebar { .sidebar {
margin-top: -1px; margin-top: -0.15rem;
position: fixed; position: fixed;
top: 51px; top: 5.1rem;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1050; z-index: 1050;
padding-left: 20px; padding-left: 2rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #292929; background-color: #292929;
border-right: 1px solid #eee; border-right: 0.1rem solid #eee;
/*letter-spacing: +.05rem;*/
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.55; line-height: 1.55;
width: 325px; width: 32.5rem;
} }
.sidebar.active { .sidebar.active {
display: block; display: block;
}
@media (min-width: 768px) {
.sidebar {
display: block;
top: 0px;
}
.navbar a {
font-size: 2rem;
}
} }
.sidebar a { .sidebar a {
display: block; display: block;
padding: 10px 20px; padding: 1rem 2rem;
text-decoration: none; text-decoration: none;
color: #ccc; color: #ccc;
} }
@ -181,36 +146,33 @@ a:hover {
.sidebar-header a { .sidebar-header a {
color: #fff; color: #fff;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;
} }
.sidebar ul { .sidebar ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.sidebar > ul { .sidebar > ul {
margin-right: -21px; /* 20px padding + 1px border */ margin-right: -2.1rem; /* 20px padding + 1px border */
margin-bottom: 20px; margin-bottom: 2rem;
margin-left: -20px; margin-left: -2rem;
} }
.sidebar .sub-item > a{ .sidebar .sub-item > a{
padding-left: 40px; padding-left: 4rem;
background-color: #111; background-color: #111;
} }
.sidebar .subsub-item > a{ .sidebar .subsub-item > a{
padding-left: 60px; padding-left: 6rem;
background-color: #111; background-color: #111;
} }
.sidebar .subsubsub-item > a{ .sidebar .subsubsub-item > a{
padding-left: 80px; padding-left: 8rem;
background-color: #111; background-color: #111;
} }
@ -223,22 +185,12 @@ a:hover {
.sidebar a:hover { .sidebar a:hover {
color: #fff; color: #fff;
/* background-color: #ba3232; font-weight: bold;
*/ font-weight: bold;
} }
.main { .main {
padding: 20px; padding: 2rem;
} margin-left: 0rem;
@media (min-width: 768px) {
.main {
padding-right: 5rem;
padding-left: 12rem;
}
.navbar {
display: none;
}
} }
.main .page-header { .main .page-header {
@ -249,28 +201,54 @@ a:hover {
font-weight: bold; font-weight: bold;
} }
@media (min-width: 768px) {
.sidebar {
display: block;
top: 0rem;
}
.navbar a {
font-size: 2rem;
}
.main {
margin-left: 32.5rem;
}
.navbar {
display: none;
}
/* img {
max-width: screen-width;
}*/
}
/*
@media (min-width: 1800) {
.main{
margin-right: 100px;
}
}
*/
.bs-callout { .bs-callout {
padding: 20px; padding: 2rem;
margin: 20px 0; margin: 2rem 0;
border: 1px solid #eee; border: 0.1rem solid #eee;
border-left-width: 5px; border-left-width: 0.5rem;
border-radius: 3px; border-radius: 0.3rem;
} }
.bs-callout:first-child { .bs-callout:first-child {
margin-top: 0; margin-top: 0;
} }
.bs-callout h4 { .bs-callout h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 0.5rem;
} }
.bs-callout p:last-child { .bs-callout p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.bs-callout code { .bs-callout code {
border-radius: 3px; border-radius: 0.3rem;
} }
.bs-callout+.bs-callout { .bs-callout+.bs-callout {
margin-top: -5px; margin-top: -0.5rem;
} }
.bs-callout-default { .bs-callout-default {
border-left-color: #777; border-left-color: #777;