212 lines
3.2 KiB
CSS
212 lines
3.2 KiB
CSS
html {
|
|
background-color: #1a1a1a
|
|
}
|
|
|
|
body {
|
|
max-width: 650px;
|
|
margin: 40px auto;
|
|
padding: 0 10px;
|
|
font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
color: #eee;
|
|
}
|
|
|
|
/* #article-footer, #page-footer, #index-footer {
|
|
border-top: 1px solid #05dee0;
|
|
} */
|
|
|
|
footer {
|
|
border-top: 1px solid #05dee0;
|
|
}
|
|
|
|
|
|
h1, h2, h3, h4 {
|
|
line-height: 1.25
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 10pt;
|
|
margin-bottom: 0;
|
|
font-size: 24pt;
|
|
}
|
|
|
|
p.date-modified {
|
|
font-size: 10pt;
|
|
color: #828282;
|
|
margin-top: 5pt;
|
|
}
|
|
|
|
a:link {
|
|
color: #04bebf;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #05dee0;
|
|
text-decoration: underline
|
|
}
|
|
|
|
a:visited {
|
|
color: #05dee0
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid;
|
|
border-collapse: collapse;
|
|
padding: 5px;
|
|
margin-top: 10pt;
|
|
margin-bottom: 10pt;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
table.left {
|
|
margin-left: 0;
|
|
}
|
|
|
|
ul.training-links {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: space-between;
|
|
margin-top: 5pt;
|
|
}
|
|
|
|
.menu {
|
|
font-size: larger;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top:0;
|
|
background-color: #1a1a1a;
|
|
|
|
}
|
|
|
|
.menu ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: space-around;
|
|
border: 1px solid #05dee0;
|
|
padding-top: 10px; padding-bottom: 10px;
|
|
margin-top: 5pt;
|
|
}
|
|
|
|
.menu a:link, .menu a:visited, h1 a:link, h1 a:visited {
|
|
color: #eee;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu a:hover, h1 a:hover {
|
|
color: #fff;
|
|
text-decoration: underline
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content img {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: max-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
img.tpsummary {
|
|
max-width: max-content;
|
|
width: 95%
|
|
}
|
|
|
|
.yt-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 90%;
|
|
padding-top: 56.25%; /* 16:9 Aspect Ratio */
|
|
}
|
|
|
|
iframe.youtube {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 99%;
|
|
height: 99%;
|
|
border-color: #ff66ff;
|
|
}
|
|
|
|
[class*="row-"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 5pt;
|
|
}
|
|
|
|
[class*="col-"] {
|
|
flex: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-3 {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.col-1 p {
|
|
margin: 0;
|
|
}
|
|
|
|
.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navbar {
|
|
flex: 100%;
|
|
}
|
|
|
|
.content {
|
|
flex: 100%;
|
|
}
|
|
|
|
@media only screen and (min-width: 350px) {
|
|
.col-1 {flex: 50%}
|
|
.col-3 {flex: 33%}
|
|
.row-1 {flex-direction: row}
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.col-2 {flex:50%;}
|
|
.row-2 {flex-direction: row}
|
|
}
|
|
|
|
@media only screen and (min-width: 750px) {
|
|
.wrapper {flex-direction: row;}
|
|
.menu {flex: 15%; margin-right: 15pt; margin-top: 10pt; }
|
|
.content {flex: 80%}
|
|
.menu ul {
|
|
flex-direction: column;
|
|
position: sticky; position: -webkit-sticky; top: 5%;
|
|
border: 0; border-right: 1px solid #05dee0;
|
|
text-align: right;
|
|
padding-right: 15px; padding-top: 0; padding-bottom: 0;
|
|
margin-top: 0
|
|
}
|
|
.menu hr {display: none;}
|
|
body {max-width: 750px;}
|
|
#main-header {
|
|
border-bottom: 1px solid #05dee0;
|
|
padding-bottom: 10pt
|
|
}
|
|
}
|