fluffychat/docs/assets/css/custom.css

226 lines
3.7 KiB
CSS
Raw Normal View History

2020-12-24 11:31:58 +01:00
/* =============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;
}