226 lines
3.7 KiB
CSS
226 lines
3.7 KiB
CSS
![]() |
/* =============VALUES============== */
|
||
|
:root {
|
||
|
--header-height: 46px;
|
||
|
--header-font-size: 1.75rem;
|
||
|
--header-font-padding: 10px 20px;
|
||
|
--header-icon-padding: 5px;
|
||
|
--border-color: #DDDDDD;
|
||
|
--header-background: rgba(255,255,255,0.9);
|
||
|
}
|
||
|
|
||
|
/* =============HEADER============== */
|
||
|
.header{
|
||
|
border-bottom: 1px solid var(--border-color);
|
||
|
height: var(--header-height);
|
||
|
width: 80%;
|
||
|
max-width: 960px;
|
||
|
white-space: nowrap;
|
||
|
background: var(--header-background);
|
||
|
top: 0px;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
#headerContainer {
|
||
|
position: fixed;
|
||
|
width: 100vw;
|
||
|
max-width: 100%;
|
||
|
text-align: center;
|
||
|
padding: 0;
|
||
|
z-index: 100;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: #5625BA;
|
||
|
}
|
||
|
|
||
|
.centered {
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
border-top: 1px solid lightgray;
|
||
|
margin-top: 5rem;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
margin-top: 5rem;
|
||
|
margin-bottom: 1rem;
|
||
|
}
|
||
|
|
||
|
.header *{
|
||
|
max-height: var(--header-height);
|
||
|
box-sizing: border-box;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
font-size: var(--header-font-size);
|
||
|
}
|
||
|
|
||
|
.right_side{
|
||
|
float: right;
|
||
|
text-align: right;
|
||
|
}
|
||
|
|
||
|
.left_side{
|
||
|
float: left;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
.header a{
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.header_title, .header nav a{
|
||
|
padding: calc(2*var(--header-icon-padding));
|
||
|
}
|
||
|
|
||
|
.header_button{
|
||
|
padding: 0 !important;
|
||
|
}
|
||
|
|
||
|
.header_button img{
|
||
|
padding: var(--header-icon-padding);
|
||
|
height: var(--header-height);
|
||
|
margin-left: var(--header-icon-padding);
|
||
|
}
|
||
|
|
||
|
#header_toggle_mobile{
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* Desktop mode */
|
||
|
@media (min-width: 610px) {
|
||
|
#header_main_nav{
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Mobile mode */
|
||
|
@media (max-width: 610px) {
|
||
|
|
||
|
.header {
|
||
|
width: 100%
|
||
|
}
|
||
|
|
||
|
#titleColumn{
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#banner {
|
||
|
width: 100% !important;
|
||
|
max-width: 100% !important;
|
||
|
}
|
||
|
|
||
|
#screenshot {
|
||
|
max-width: calc(100vw - 4rem) !important;
|
||
|
}
|
||
|
|
||
|
#header_main_nav{
|
||
|
display: none;
|
||
|
position: absolute;
|
||
|
top: var(--header-height);
|
||
|
left: 0px;
|
||
|
background: var(--header-background);
|
||
|
width: 100vw;
|
||
|
max-height: none;
|
||
|
border-bottom: 1px solid var(--border-color);
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
#header_main_nav a{
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
/* Visible by default */
|
||
|
#header_toggle_mobile{
|
||
|
display: inherit;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
/* =============CONTENT============== */
|
||
|
#content{
|
||
|
z-index: 0;
|
||
|
min-height: calc( 100vh - var(--header-height) );
|
||
|
padding-top: var(--header-height);
|
||
|
}
|
||
|
|
||
|
#banner {
|
||
|
width: 80%;
|
||
|
max-width: 960px;
|
||
|
margin: 0 auto;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.article_image{
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
.buttonImage{
|
||
|
width: 20rem;
|
||
|
transition: box-shadow 0.3s;
|
||
|
}
|
||
|
|
||
|
.buttonImage:hover, #browserbutton:hover{
|
||
|
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
|
||
|
}
|
||
|
|
||
|
.spacer {
|
||
|
height: 10rem;
|
||
|
}
|
||
|
|
||
|
.paddingColumn{
|
||
|
padding: 2rem 0;
|
||
|
}
|
||
|
.gridItem{
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#screenshot {
|
||
|
width: 30rem;
|
||
|
max-width: calc(50vw - 10rem);
|
||
|
border-radius: 13px;
|
||
|
box-shadow: 0px 8px 8px 3px rgba(0,0,0,0.25);
|
||
|
}
|
||
|
|
||
|
#footer{
|
||
|
border-top: 1px solid var(--border-color);
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
font-family: "Courier 10 Pitch", Courier, monospace;
|
||
|
font-size: 95%;
|
||
|
line-height: 140%;
|
||
|
}
|
||
|
|
||
|
#browserbutton {
|
||
|
background-color: #000;
|
||
|
display: inline-block;
|
||
|
height: 50px;
|
||
|
width: 160px;
|
||
|
border-radius: 6px;
|
||
|
transition: box-shadow 0.3s;
|
||
|
text-decoration: none;
|
||
|
font-size: 1.5rem;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
#browserbutton img {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
||
|
font-size: 95%;
|
||
|
line-height: 140%;
|
||
|
background: #faf8f0;
|
||
|
}
|