666 lines
11 KiB
CSS
666 lines
11 KiB
CSS
.container {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.table-responsive {
|
|
width: 100% !important;
|
|
overflow-x: auto;
|
|
|
|
}
|
|
|
|
|
|
.header {
|
|
margin-top: 6rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.value-prop {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.value-props {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.docs-header {
|
|
text-transform: uppercase;
|
|
font-size: 1.4rem;
|
|
letter-spacing: .2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.docs-section {
|
|
border-top: 1px solid #eee;
|
|
padding: 4rem 0;
|
|
margin: 6rem 0 6rem 0;
|
|
|
|
}
|
|
|
|
.value-img {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 2.5rem auto 0;
|
|
}
|
|
|
|
.item-grid .column,
|
|
.item-grid .columns {
|
|
background: #EEE;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-bottom: .75rem;
|
|
font-weight: 600;
|
|
letter-spacing: .1rem;
|
|
}
|
|
|
|
.docs-item .row,
|
|
.docs-item.row,
|
|
.docs-item form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-item h1,
|
|
.docs-item h2,
|
|
.docs-item h3,
|
|
.docs-item h4,
|
|
.docs-item h5,
|
|
.docs-item h6 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.heading-font-size {
|
|
font-size: 1.2rem;
|
|
color: #999;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.code-item {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.code-item-body {
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.item-header {
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.item-description {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.item-project-summary{
|
|
font-size: 1rem;
|
|
}
|
|
|
|
select{
|
|
width: 100%;
|
|
}
|
|
|
|
.params{
|
|
width: 100%;
|
|
}
|
|
|
|
.item-screenshot-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
border: 1px solid #eee;
|
|
height: 250px;
|
|
}
|
|
|
|
.item-screenshot {
|
|
width: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
.item-screenshot.coming-soon {
|
|
width: auto;
|
|
position: absolute;
|
|
background: #eee;
|
|
top: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
|
|
.docs-subheader {
|
|
font-size: 1.1rem;
|
|
margin: 0 0 1rem 1rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ------ */
|
|
|
|
|
|
|
|
.dark-theme #about-me {
|
|
margin: 3rem 0 3rem 0;
|
|
}
|
|
|
|
#about-me{
|
|
margin: 3rem 0 3rem 0;
|
|
text-align: justify;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.date {
|
|
color:#33C3F0;
|
|
}
|
|
|
|
.pdf-light {
|
|
background: white !important;
|
|
color: black !important;
|
|
}
|
|
|
|
/* Navbar - mobile default */
|
|
.navbar {
|
|
display: flex;
|
|
flex-direction: row; /* horizontal on mobile */
|
|
justify-content: center; /* center items horizontally */
|
|
align-items: center; /* vertically align items */
|
|
flex-wrap: wrap; /* wrap to next line if too many items */
|
|
background: #fff;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
margin-bottom: 6rem;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.navbar-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.navbar-item {
|
|
margin: 0.5rem 1rem; /* horizontal spacing between items */
|
|
}
|
|
|
|
.navbar-link {
|
|
text-transform: uppercase;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1rem;
|
|
text-decoration: none;
|
|
color: #222;
|
|
}
|
|
|
|
.res-intro #name {
|
|
font-weight:800;
|
|
color:#555;
|
|
}
|
|
|
|
@keyframes cursor {
|
|
from, to {
|
|
border-color: transparent;
|
|
}
|
|
50% {
|
|
border-color: #33C3F0; /* Skeleton's accent blue */
|
|
}
|
|
}
|
|
|
|
@keyframes typing {
|
|
from {
|
|
width: 100%;
|
|
}
|
|
to {
|
|
width: 0; /* deletes once */
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
33.3333% {
|
|
font-size: 3.3rem;
|
|
letter-spacing: 3px;
|
|
color: #222; /* Dark text for light theme */
|
|
}
|
|
to {
|
|
font-size: 3.3rem;
|
|
letter-spacing: 3px;
|
|
color: #222; /* Keep it visible */
|
|
}
|
|
}
|
|
|
|
.typing-slider {
|
|
font-family: "Doto", monospace;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin-left: 1rem;
|
|
|
|
}
|
|
|
|
.typing-slider p {
|
|
position: relative;
|
|
display: inline;
|
|
font-size: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0;
|
|
animation: slide 2s step-start forwards; /* run once, keep state */
|
|
}
|
|
|
|
.typing-slider p::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-left: 3px solid #33C3F0; /* Accent cursor */
|
|
background-color: #fff; /* Light background */
|
|
animation: typing 2s steps(15) forwards, cursor 1.5s infinite;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
-webkit-animation: blink 1.5s steps(1, start) infinite;
|
|
animation: blink 1.5s steps(1, start) infinite;
|
|
color:#33C3F0;
|
|
}
|
|
|
|
|
|
@-webkit-keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
|
|
/* Larger than phone */
|
|
@media (min-width: 550px) {
|
|
|
|
|
|
|
|
.header {
|
|
margin-top: 18rem;
|
|
}
|
|
.value-props {
|
|
margin-top: 9rem;
|
|
margin-bottom: 7rem;
|
|
}
|
|
.value-img {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.item-grid .column,
|
|
.item-grid .columns {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.docs-section {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
#work-experience .work-summary{
|
|
text-align: justify;
|
|
font-size: 1.2rem;
|
|
}
|
|
#work-experience .work-technologies{
|
|
text-align: justify;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.item-send-yourself-copy {
|
|
float: right;
|
|
margin-top: 12px;
|
|
}
|
|
.item-screenshot-wrapper {
|
|
position: absolute;
|
|
width: 48%;
|
|
height: 100%;
|
|
left: 0;
|
|
max-height: none;
|
|
}
|
|
|
|
.table-responsive {
|
|
width: 100% !important;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
}
|
|
|
|
/* Larger than tablet */
|
|
@media (min-width: 750px) {
|
|
/* Navbar */
|
|
.navbar + .docs-section {
|
|
border-top-width: 0;
|
|
}
|
|
.navbar {
|
|
flex-direction: row; /* horizontal on desktop */
|
|
justify-content: flex-start; /* align left */
|
|
height: 6.5rem;
|
|
padding: 0 2rem;
|
|
}
|
|
.navbar-list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: auto;
|
|
}
|
|
.navbar-item {
|
|
margin: 0 1.5rem 0 0;
|
|
}
|
|
.navbar-link {
|
|
line-height: 6.5rem;
|
|
font-size: 11px;
|
|
letter-spacing: .2rem;
|
|
margin-right: 35px;
|
|
}
|
|
|
|
.navbar-link.active {
|
|
color: #33C3F0;
|
|
}
|
|
|
|
.has-docked-nav .navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.has-docked-nav .navbar-spacer {
|
|
display: block;
|
|
}
|
|
|
|
.has-docked-nav .navbar > .container {
|
|
width: 80%;
|
|
}
|
|
|
|
/* Popover */
|
|
.popover.open {
|
|
display: block;
|
|
}
|
|
.popover {
|
|
display: none;
|
|
position: absolute;
|
|
top: 92%;
|
|
left: -50%;
|
|
background: #fff;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
-webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
|
|
-moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
|
|
filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
|
|
}
|
|
.popover-item:first-child .popover-link:after,
|
|
.popover-item:first-child .popover-link:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.popover-item:first-child .popover-link:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-bottom-color: #fff;
|
|
border-width: 10px;
|
|
margin-left: -10px;
|
|
}
|
|
.popover-item:first-child .popover-link:before {
|
|
border-color: rgba(238, 238, 238, 0);
|
|
border-bottom-color: #eee;
|
|
border-width: 11px;
|
|
margin-left: -11px;
|
|
}
|
|
.popover-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
.popover-item {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.popover-link {
|
|
position: relative;
|
|
color: #222;
|
|
display: block;
|
|
padding: 8px 20px;
|
|
border-bottom: 1px solid #eee;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
letter-spacing: .1rem;
|
|
}
|
|
.popover-item:first-child .popover-link {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.popover-item:last-child .popover-link {
|
|
border-radius: 0 0 4px 4px;
|
|
border-bottom-width: 0;
|
|
}
|
|
.popover-link:hover {
|
|
color: #fff;
|
|
background: #33C3F0;
|
|
}
|
|
.popover-link:hover,
|
|
.popover-item:first-child .popover-link:hover:after {
|
|
border-bottom-color: #33C3F0;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.header .header-buttons {
|
|
margin: 6rem;
|
|
}
|
|
|
|
|
|
/* ---------------- DARK THEME SUPPORT ---------------- */
|
|
.dark-theme {
|
|
background-color: #121212;
|
|
color: #e0e0e0; /* base text color */
|
|
}
|
|
|
|
/* Generic text elements */
|
|
.dark-theme p,
|
|
.dark-theme ul,
|
|
.dark-theme ol,
|
|
.dark-theme li,
|
|
.dark-theme div,
|
|
.dark-theme a,
|
|
.dark-theme h1,
|
|
.dark-theme h2,
|
|
.dark-theme h3,
|
|
.dark-theme h4,
|
|
.dark-theme h5,
|
|
.dark-theme h6 {
|
|
color: #aaa; /* brighter default text */
|
|
}
|
|
|
|
/* Links */
|
|
.dark-theme a {
|
|
color: #33C3F0; /* accent blue */
|
|
}
|
|
.dark-theme a:hover {
|
|
color: #66d5f5; /* lighter blue on hover */
|
|
}
|
|
|
|
/* Navbar */
|
|
.dark-theme .navbar {
|
|
background: #1e1e1e;
|
|
border-top: 1px solid #333;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.dark-theme .navbar-link {
|
|
color: #ddd;
|
|
}
|
|
|
|
.dark-theme .navbar-link.active {
|
|
color: #33C3F0;
|
|
}
|
|
|
|
/* Sections */
|
|
.dark-theme .docs-section {
|
|
border-top: 1px solid #333;
|
|
}
|
|
|
|
.dark-theme .item-grid .column,
|
|
.dark-theme .item-grid .columns {
|
|
background: #2a2a2a;
|
|
color: #eee;
|
|
}
|
|
|
|
/* Cards / images */
|
|
.dark-theme .item-screenshot-wrapper {
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.dark-theme .item-screenshot.coming-soon {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
/* Popovers */
|
|
.dark-theme .popover {
|
|
background: #1e1e1e;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.dark-theme .popover-link {
|
|
color: #ddd;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.dark-theme .popover-link:hover {
|
|
background: #33C3F0;
|
|
color: #fff;
|
|
border-bottom-color: #33C3F0;
|
|
}
|
|
|
|
/* Headers and intro */
|
|
.dark-theme .docs-header,
|
|
.dark-theme .docs-subheader,
|
|
.dark-theme .heading-font-size,
|
|
.dark-theme .res-intro #name {
|
|
color: #fafafa; /* brighter headers */
|
|
}
|
|
|
|
.dark-theme .code-item {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0;
|
|
background-color: #555;
|
|
}
|
|
|
|
.dark-theme .code-item-body {
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
background-color: #555;
|
|
}
|
|
|
|
.dark-theme code{
|
|
background-color: #333;
|
|
}
|
|
|
|
.dark-theme input {
|
|
background-color: #333;
|
|
color:#eee;
|
|
}
|
|
|
|
@keyframes cursor {
|
|
from, to {
|
|
border-color: transparent;
|
|
}
|
|
50% {
|
|
border-color: #33C3F0;
|
|
}
|
|
}
|
|
|
|
@keyframes typing {
|
|
from {
|
|
width: 100%;
|
|
}
|
|
to {
|
|
width: 0; /* deletes once */
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
33.3333% {
|
|
font-size: 3.3rem;
|
|
letter-spacing: 3px;
|
|
}
|
|
to {
|
|
font-size: 3.3rem; /* stay visible */
|
|
letter-spacing: 3px; /* keep spacing */
|
|
}
|
|
}
|
|
|
|
.dark-theme .typing-slider {
|
|
font-family: "Doto", monospace;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.dark-theme .typing-slider p {
|
|
position: relative;
|
|
display: inline;
|
|
font-size: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0;
|
|
animation: slide 2s step-start forwards; /* run once, keep state */
|
|
}
|
|
|
|
.dark-theme .typing-slider p::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-left: 3px solid black;
|
|
background-color: #121212;
|
|
animation: typing 2s steps(15) forwards, cursor 1.5s infinite;
|
|
}
|
|
|