@webqit/webqit.dev
Version:
webqit.dev Site
448 lines (416 loc) • 9.22 kB
CSS
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
}
/* ------------------ */
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
.divider {
border-bottom: 3px dotted gainsboro;
}
.ring-shadow,
.hover--ring-shadow:hover {
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.05);
}
.drop-shadow,
.hover--drop-shadow:hover {
box-shadow: 0px 0px 2.5px rgba(0,0,0,0.25), 0px 5px 7.5px -2.5px rgba(0,0,0,0.125);
}
.jelly-peel {
color: white;
background: slateblue;
}
.snap-container {
scroll-snap-type: proximity;
scroll-snap-points-y: repeat(300px);
scroll-snap-type: y proximity;
}
.snap-mandatory-container {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(300px);
scroll-snap-type: y mandatory;
}
.snaps-start {
scroll-snap-align: start;
}
.snaps-end {
scroll-snap-align: end;
}
.snaps-center {
scroll-snap-align: center;
}
.cta {
width: fit-content;
padding: 15px;
padding-left: 25px;
padding-right: 25px;
border-radius: 40px;
}
.cta span {
margin-left: 15px;
}
/* ------------------ */
html {
scroll-behavior: smooth;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
.outline li {
position: relative;
border: 1px dashed transparent;
}
.outline li.active {
border-color: gray;
}
.outline li .pointer {
position: relative;
display: inline-block;
opacity: 0.3;
}
.outline li .icon {
background-color: transparent ;
background-image: url(/img/bg/Dots.svg);
}
.outline li:hover .pointer,
.outline li.active .pointer {
opacity: 1;
}
.outline li.active .pointer {
margin-right: -2.5px;
}
/* ------------------ */
.menu-ring {
position: absolute;
left: -60px;
bottom: -30px;
display: inline-block;
width: 250px;
height: 250px;
border-radius: 50%;
background-color: whitesmoke;
}
.menu-control:hover .menu-ring {
background-color: lavender;
}
/**
* ----------
* BEGIN CIRCUS SHOW
* ----------
*/
.circus {
position: relative;
background-color: whitesmoke;
background-size: cover;
background-position: center;
animation: circus-buffer 4000ms forwards;
animation-iteration-count: 2;
}
.circus:before,
.circus:after {
position: absolute;
display: inline-block;
border-radius: inherit;
content: "";
}
.circus:before {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 50px white inset;
animation: circus-padding 3000ms forwards;
animation-delay: 8000ms;
}
.circus:after {
top: 20%;
left: 20%;
width: 60%;
height: 60%;
border: 1px solid transparent;
animation: circus-ring 2000ms forwards;
animation-delay: 11000ms;
}
.circus .display-link {
position: relative;
margin-bottom: 20px;
transform: scale(0);
animation: circus-link 1000ms forwards;
animation-delay: 15000ms;
}
@keyframes circus-buffer {
0% {box-shadow: 0px 0px 0px 50px white inset;}
20% {box-shadow: 0px 0px 0px 100px rgba(255, 255, 255, 0.35) inset;}
100% {box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 0.85) inset;}
}
@keyframes circus-padding {
from {box-shadow: 0px 0px 0px 50px white inset;}
to {box-shadow: 0px 0px 0px 0px white inset;}
}
@keyframes circus-ring {
0% {transform: scale(0.5); border-color: black;}
90% {transform: scale(1.05); border-color: white;}
100% {transform: scale(1); border-color: black;}
}
@keyframes circus-link {
from {transform: scale(0);}
to {transform: scale(1);}
}
/**
* ----------
* BEGIN MAIN
* ----------
*/
body {
background-color: white;
}
.page-section {
min-height: 100vh;
border-bottom: 3px solid silver;
}
main .page-section {
border-top: 3px solid silver;
}
/* ------------------- */
.section-div-a,
.section-div-b {
padding-top:100px;
padding-bottom:50px;
}
.section-div-a {
background-color: var(--section-div-a-bg);;
}
.section-div-b {
background-color: var(--section-div-b-bg);;
}
/* -header and -content */
.section-div-header,
.section-div-content {
padding-left: 40px;
padding-right: 40px;
}
.section-div-header {
position: sticky;
top: 0px;
font-weight: bold;
z-index: 3;
}
.section-div-content {
padding-top: 40px;
padding-bottom: 40px;
min-height: min-content ;
}
.section-div-a .section-div-header {
background-color: var(--section-div-a-bg);;
}
.section-div-b .section-div-header {
background-color: var(--section-div-b-bg);;
}
.section-div-content > p span {
display: inline-block;
padding: 10px;
font-weight: bold;
}
/* -icon and -more */
.section-icon,
.section-more {
position: relative;
height: 60px;
}
.section-icon {
width: 60px;
background-image: url(/img/bg/Dots.svg);
/*
background-color: rgba(0, 0, 0, 0.04);
border: 2px dashed silver;
*/
}
.section-more .text {
text-align: right;
margin-right: 10px;
width: 0px;
overflow: hidden;
white-space: nowrap;
}
.section-more:hover .text,
.section-more:active .text {
width: 100px;
}
/* -nav */
.section-nav {
width: max-content;
white-space: nowrap;
}
.section-nav > li {
line-height: 60px;
padding-left: 15px;
padding-right: 15px;
transition: all 400ms;
display: inline-block;
/*
border-top: 3px solid transparent;
order-bottom: 3px solid transparent;
*/
border-bottom: 1px solid transparent;
cursor: default;
}
.section-nav > li.active {
border-color: currentColor;
}
/** ------------- */
.section-nav > .overflow-control {
border: 1px dashed transparent;
}
.section-nav > .overflow-control:focus {
border-color: currentColor;
}
/** ------------- */
.section-nav > .overflow-control .section-nav-overflow {
color: gainsboro;
background-color: black;
display: none;
}
.section-nav > .overflow-control:focus .section-nav-overflow {
display: block;
}
.section-nav > .overflow-control .section-nav-overflow > li {
line-height: normal;
padding: 15px;
padding-left: 20px;
padding-right: 25px;
cursor: default;
border: 1px dashed transparent;
}
.section-nav > .overflow-control .section-nav-overflow > li.active {
color: white;
border-color: gray;
}
/* ------------------- */
.grid-3 {
display: grid;
grid-gap: 25px;
grid-gap: 15px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: max-content;
}
@media (max-width: 1100px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.grid-3 {
grid-template-columns: repeat(1, 1fr);
}
}
/* ------------------- */
/*
#tooling {
color:whitesmoke;
background-color: rgba(50, 50, 50, 0.85);
}
#tooling .section-div-a {
border-right: 2px solid rgba(100, 100, 100, 0.5);
}
#tooling .section-div-header {
background: rgba(50, 50, 50, 0.95);
box-shadow: 0px -5px 0px rgba(50, 50, 50, 0.85), 0px 5px 0px rgba(50, 50, 50, 0.85);
}
#tooling .section-div-header,
#tooling .section-div-header a {
color: silver;
}
#tooling a:hover {
color: white;
}
#tooling .item {
min-height: 350px;
padding: 40px;
background-color: inherit;
border-radius: 10px;
border: 1px dashed silver;
}
#tooling .item:hover {
border-color: white;
}
*/
#tooling {
--section-div-a-bg: lavender;
--section-div-b-bg: lavender;
border-bottom-color: black;
}
#tooling .item {
min-height: 250px;
padding: 45px;
padding: 35px;
border-radius: 15px;
border: 5px solid rgba(0, 0, 0, 0.2);
}
#tooling .item:hover {
background-color: white;
}
#tooling .item a {
font-weight: bold;
}
#tooling .item a:hover {
color: slateblue;
}
/* ------------------- */
#cloud {
--section-div-a-bg: purple;
--section-div-b-bg: gray;
border-top-color: black;
border-bottom-color: black;
color: wheat;
}
#cloud .section-div-b .section-div-content {
min-height: 70vh ;
}
#cloud .about {
color: gainsboro;
font-weight: bold;
background-image: url(/img/bg/Dots.svg);
}
#cloud .about .header {
color: white;
}
#cloud .about .starter-box {
color: white;
}
#cloud .highlights {
border-top: 3px solid silver;
max-width: 200px;
display: none;
}
#cloud .highlights .item {
padding: 30px;
}
/* ------------------- */
#community {
--section-div-a-bg: lightcyan;
--section-div-b-bg: lightcyan;
border-top-color: black;
}
#community .section-div-b .section-div-content {
min-height: 70vh ;
}
#community .grid-3 {
grid-gap: 0px;
display: none;
}
#community .about {
color: gray;
font-weight: bold;
background-image: url(/img/bg/Dots.svg);
}