grafica-hangar-org/assets/css/hangar-static-app.css

424 lines
9.9 KiB
CSS

/*
hangar css styles
version 0.6
date: 2020 12 16
author jorge@hangar.org
*/
:root{
--color-hangar: rgb(0,0,255);
--color-body: rgb(20,20,20);
--color-secondary: rgb(90,90,90) ;
--color-background: rgb(250,250,250);
--color-body-invert: rgb(200,200,200);
--color-background-invert: rgb(10,10,10);
--color-black: rgb(0,0,0);
--color-white: rgb(255,255,255);
--color-grey-dark: rgb(110,110,110);
--color-grey-light: rgb(230,230,230);
--global-padding: 1rem;
--global-margin: 1rem;
--global-border: 0.05rem solid var(--color-grey-light);
--global-radius: 1rem;
}
@media screen{
body{
background-color: var(--color-white);
color: var(--color-body);
font-family: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
}
a{
color: var(--color-hangar);
}
a:hover{
color: var(--color-grey-dark);
border-bottom:0.2rem solid var(--color-hangar);
margin-bottom:-0.2rem;
}
.hangar-blue{
color:var(--color-hangar);
}
.hangar-grey{
color:var(--color-grey-dark);
}
span.hangar-blue-bg,
.hangar-blue-bg img{
background-color:var(--color-hangar);
}
.hangar-blue-invert{
color:var(--color-white);
background-color:var(--color-hangar);
}
.invert-bg{
background-color: black;
}
.hangar-logo {
font-size:0px;
color:transparent;
}
.hangar-logo::after {
display:inline-block;
content:'';
background-image: url('https://grafica.hangar.org/assets/img/hangar-logo.svg');
width: 9rem;
height: 3.8rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-white);
position: relative;
bottom:-0.5rem;
}
.hangar-logo.small::after{
width: 4rem;
height: 1.7rem;
bottom:-0.3rem;
}
.hangar-logo.icon::after{
background-image: url('https://grafica.hangar.org/assets/img/hangar-logo-icon.svg');
width: 3rem;
height:3rem;
bottom:-0.3rem;
}
.hangar-logo.small.icon::after{
width: 1.5rem;
height: 1.5rem;
bottom:-0.2rem;
}
.hangar-logo.hangar-blue-bg::after{
background-color:var(--color-hangar);
}
.up-arrow::before {
display:inline;
content:"\21D1";
}
.up-arrow:hover{
display: inline;
}
.full-height{
min-height: 100vh;
}
.hide{
display:none;
}
h1,h2,h3,h4,h5,h6{
font-weight: bold;
margin:2rem auto;
}
h1{
font-size:4rem;
}
h2{
font-size:3.5rem;
}
h3{
font-size:3rem;
}
h4{
font-size:2.5rem;
}
h5{
font-size:2rem;
}
h6{
font-size:1.5rem;
}
ul{
list-style: none;
}
/* menu fixed to the right side*/
.menu-fixed-right {
position: fixed;
top: 1rem;
right: 1em;
max-width: 7rem;
padding: 0.5rem;
background: var(--color-grey-light);
font-size: 0.8rem;
text-align: right;
line-height: 0.9rem;
}
.menu-fixed-right li {
padding: 0.2rem 0;
border-bottom:1px dotted var(--color-hangar);
}
footer {
margin-top: 2rem;
border-top: var(--global-border);
color: var(--color-grey-dark);
font-size: 0.8rem;
}
/* only for class hangar-grafica */
.hangar-grafica h1,
.hangar-grafica h2,
.hangar-grafica h3,
.hangar-grafica h4,
.hangar-grafica h5,
.hangar-grafica h6 {
color: var(--color-grey-dark);
background-color: var(--color-grey-light);
padding: 0.5rem;
}
.hangar-grafica .logos a,
.hangar-grafica .icons a{
display: inline-block;
}
.hangar-grafica .logos img {
max-width: 30vw;
margin:1rem 0;
}
.hangar-grafica .icons img {
max-width: 15vw;
}
.hangar-grafica figcaption {
color: var(--color-grey-dark);
font-size: 0.9rem;
font-style: italic;
}
.hangar-grafica .codeblock {
background-color: var(--color-grey-light);
text-align: left;
padding:1rem;
}
.hangar-grafica a[href$=".SVG"]::after,
.hangar-grafica a[href$=".svg"]::after,
.hangar-grafica a[href$=".JPG"]::after,
.hangar-grafica a[href$=".jpg"]::after,
.hangar-grafica a[href$=".PNG"]::after,
.hangar-grafica a[href$=".png"]::after,
.hangar-grafica a[href$=".GIF"]::after,
.hangar-grafica a[href$=".gif"]::after {
content: '';
display: inline-block;
margin-bottom:1rem;
border-bottom: 1px solid grey;
}
.hangar-grafica a[href$=".SVG"]::after,
.hangar-grafica a[href$=".svg"]::after {
content:"file svg";
}
.hangar-grafica a[href$=".JPG"]::after,
.hangar-grafica a[href$=".jpg"]::after {
content:"file jpg";
}
.hangar-grafica a[href$=".PNG"]::after,
.hangar-grafica a[href$=".png"]::after {
content:"file png";
}
.hangar-grafica a[href$=".GIF"]::after,
.hangar-grafica a[href$=".gif"]::after {
content:"file gif";
}
/* buttons */
.button {
background-color: var(--color-hangar);
color: var(--color-body-invert);
padding: calc(var(--global-padding) / 4);
border-radius: calc(var(--global-radius) / 4);
}
a.button {
display: inline-block;
margin: calc(var(--global-margin) / 4);
}
a:hover.button{
border: none;
color: var(--color-white);
}
/* cards - services */
.card {
border: var(--global-border);
border-radius: var(--global-radius) * 0.3;
padding: 1rem;
margin: 0.5rem;
}
.card-divider{
padding-bottom: calc(var(--global-padding)/2);
border-bottom: var(--global-border);
}
.card-divider a{
color: var(--color-body);
}
.card-image {
height: 5rem;
display: flex;
align-self: center;
}
.card-section{
padding-top: calc(var(--global-padding) / 2);
border-top: var(--global-border);
}
/* only for live-streaming */
.live-streaming h1,
.live-streaming h2,
.live-streaming h3,
.live-streaming h4,
.live-streaming h5,
.live-streaming h6{
margin:0.5rem 0;
}
.live-streaming h1{
font-size: 2.5rem;
}
.live-streaming h2{
font-size: 2rem;
}
.live-streaming .video-js, .live-streaming .video-dimensions,.embedchat iframe {
width: calc(30vw * 3);
height: calc(15vw * 3);
margin-bottom:1.5rem;
}
.embedchat iframe {
max-width: 48rem;
min-height:24rem;
border: none;
}
/* switches for color & view */
#wrapper.colorswitch-invert, #wrapper.viewswitch-change{
position: absolute;
z-index: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
}
input.colorswitch, input.viewswitch {
display:none;
}
label.colorswitch, label.viewswitch{
z-index: 10;
position:relative;
display:inline-block;
width: 2rem;
height: 1rem;
}
label.colorswitch {
top: 1rem;
left: 80vw;
}
label.viewswitch {
top: 2.5rem;
left: calc(80vw - 2.3rem);
}
label.colorswitch .slider,label.viewswitch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-grey-dark);
border: var(--global-border);
border-radius: var(--global-radius);
transition: all 0.4s;
}
label.colorswitch .slider:before,
label.viewswitch .slider:before {
position: absolute;
content: "";
width: 0.7rem;
height: 0.7rem;
left: 0.05rem;
top: 0.05rem;
background-color: var(--color-white);
border-radius: var(--global-radius);
transition: all 0.4s;
}
input.colorswitch:checked ~ label.colorswitch .slider,input.viewswitch:checked ~ label.viewswitch .slider {
background-color: var(--color-grey-dark);
}
input.colorswitch:checked ~ label.colorswitch .slider:before,input.viewswitch:checked ~ label.viewswitch .slider:before {
transform: translateX(1rem);
}
label:before,label:after {
font-family: "Font Awesome 5 Free";
font-size: 0.7rem;
display: inline-block;
position: absolute;
}
label.colorswitch:before,label.viewswitch:before {
right: 2.5rem;
}
label.colorswitch:after,label.viewswitch:after {
left: 2.5rem;
}
input.viewswitch ~ label.viewswitch:before {
content: "\f0c8\f0c8"/*"top/bottom"*/;
transform: rotate(90deg);
margin-right:-0.25rem;
}
input.viewswitch ~ label.viewswitch:after {
content: "\f0c8\f0c8"/*"left/right"*/;
}
input.colorswitch ~ label.colorswitch:before{
content: "\f0eb"/*"light"*/;
}
input.colorswitch ~ label.colorswitch:after{
content: "\f186"/*"dark"*/;
}
input.colorswitch:checked ~ label.colorswitch,
input.colorswitch:checked ~ label.viewswitch {
color:var(--color-white);
}
input.colorswitch:checked ~ .colorswitch-invert {
color: var(--color-white);
background: var(--color-body);
}
input.colorswitch:checked ~ .colorswitch-invert .hangar-logo::after {
filter: invert(90%);
--webkit-filter: invert(90%);
}
input.colorswitch:checked ~ .colorswitch-invert code,
input.colorswitch:checked ~ .colorswitch-invert .embedchat iframe {
filter: invert(80%);
--webkit-filter: invert(80%);
}
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container{
max-width: unset;
}
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-webchat {
flex-flow: row;
justify-content: center;
}
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-js,
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-dimensions {
width: calc(30vw * 2);
max-width:970px;
height: calc(15vw * 2);
max-height:calc(970px / 2);
float: left;
margin-right:1rem;
}
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .embedchat iframe {
width: calc(30vw * 1);
height: calc(15vw * 2);
max-height:calc(970px / 2);
}
}
@media screen and (min-width:768px) {
.live-streaming h2.logo {
float: left;
margin-right: 2rem;
}
.live-streaming .video-js, .live-streaming .video-dimensions {
width: calc(30vw * 2);
max-width:970px;
height: calc(15vw * 2);
max-height:calc(970px / 2);
}
.embedchat iframe {
width: calc(30vw * 2);
max-width: 48rem;
height: calc(15vw * 2);
min-height:24rem;
}
}
@media screen and (min-width: 850px) {
}