You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
590 lines
10 KiB
590 lines
10 KiB
$brandingBG: rgba(103, 173, 219, 0.40);
|
|
$brandingBG2: rgba(75, 147, 193, 0.65);
|
|
$brandingBG3: rgba(103, 173, 219, 0.27);
|
|
|
|
$branding: black;
|
|
$branding2: blue;
|
|
$branding3: #1b4c6c;
|
|
|
|
$menuWidth: 65px;
|
|
|
|
$navbarHeight: 100px;
|
|
|
|
.shadow {
|
|
-webkit-box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
|
|
box-shadow: 1px 4px 20px -8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.license {
|
|
margin: auto;
|
|
}
|
|
|
|
.mailme {
|
|
float: left;
|
|
}
|
|
|
|
.cc-license {
|
|
height: 20px;
|
|
width: 70px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.gradient {
|
|
-webkit-background-size: cover !important;
|
|
-moz-background-size: cover !important;
|
|
-o-background-size: cover !important;
|
|
background-size: cover !important;
|
|
background-repeat:no-repeat !important;
|
|
background-color: #FBFCFD !important;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
@extend .gradient;
|
|
}
|
|
|
|
.app-body {
|
|
@extend .gradient;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.blog-title {
|
|
-webkit-transform-style: preserve-3d !important;
|
|
-webkit-transform: translate3d(0, 0, 0) !important;
|
|
transform : translate3d(0, 0, 0) !important;
|
|
text-transform: capitalize;
|
|
display: block;
|
|
text-overflow: ellipsis !important;
|
|
margin-top: 15px;
|
|
max-width: 100%;
|
|
height: 68px !important;
|
|
overflow: hidden !important;
|
|
margin: auto;
|
|
font-weight: 400;
|
|
color: black;
|
|
@media (max-width: 600px) {
|
|
font-size: 1.7em;
|
|
}
|
|
@media (max-width: 530px) {
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
@extend .shadow;
|
|
background-color: #FBFCFD !important;
|
|
height: 68px;
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
top: 0;
|
|
position: fixed;
|
|
z-index: 1;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
.footer {
|
|
@extend .shadow;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 1rem;
|
|
background-color: #efefef;
|
|
text-align: center;
|
|
}
|
|
|
|
.twitter-share-button-rendered {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.fb-share-button {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.social-wrapper {
|
|
height: 25px;
|
|
}
|
|
|
|
.fb-share-button > span {
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.social {
|
|
margin-top: 25%;
|
|
}
|
|
|
|
.sidebar-button {
|
|
display: block !important;
|
|
margin-top: 0;
|
|
border: none;
|
|
color: black !important;
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
&:hover {
|
|
background-color: $brandingBG !important;
|
|
}
|
|
}
|
|
|
|
.sidebar-divider {
|
|
&:after {
|
|
background: none !important;
|
|
color: $branding3 !important;
|
|
}
|
|
}
|
|
|
|
.menu-element {
|
|
padding-bottom: 2px !important;
|
|
padding-top: 2px !important;
|
|
}
|
|
|
|
.category-button {
|
|
border-radius: 2px !important;
|
|
border-color: $branding2 !important;
|
|
display: block !important;
|
|
margin-top: 0;
|
|
padding: .6rem 1.2rem .4rem 1.2rem;
|
|
color: $branding !important;
|
|
text-decoration: none;
|
|
&:hover {
|
|
background-color: $brandingBG !important;
|
|
}
|
|
}
|
|
|
|
.categorybar {
|
|
max-width: 350px;
|
|
margin: auto;
|
|
padding: 0px 0px 0px 0px !important;
|
|
}
|
|
|
|
.fewer-categories {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.more-categories {
|
|
margin-top: 8px;
|
|
min-height: 8px;
|
|
}
|
|
|
|
.menu-button {
|
|
display: block !important;
|
|
margin-top: 0;
|
|
text-decoration: none;
|
|
color: $branding !important;
|
|
background-color: white !important;
|
|
&:hover {
|
|
background-color: $brandingBG !important;
|
|
}
|
|
}
|
|
|
|
.header-social {
|
|
margin-top : 6%;
|
|
margin-bottom : 2%;
|
|
@media (max-width: 600px) {
|
|
margin-top: 7%;
|
|
}
|
|
@media (max-width: 530px) {
|
|
margin-top: 8%;
|
|
}
|
|
}
|
|
|
|
.social-brand {
|
|
border: none !important;
|
|
display: block !important;
|
|
padding: .6rem 1.2rem .4rem 1.2rem;
|
|
text-decoration: none;
|
|
line-height: 2rem;
|
|
&:hover {
|
|
color: $brandingBG !important;
|
|
}
|
|
}
|
|
|
|
.branded {
|
|
border-radius: 2px !important;
|
|
border-color: $branding2 !important;
|
|
display: block !important;
|
|
margin-top: 0;
|
|
padding: .6rem 1.2rem .4rem 1.2rem;
|
|
text-decoration: none;
|
|
color: $branding !important;
|
|
background-color: white !important;
|
|
&:hover {
|
|
background-color: $brandingBG !important;
|
|
}
|
|
}
|
|
|
|
.loader-branded {
|
|
color: transparent !important;
|
|
min-height: 1.6rem;
|
|
pointer-events: none;
|
|
position: relative;
|
|
|
|
&:after {
|
|
-webkit-animation: loading .5s infinite linear;
|
|
animation: loading .5s infinite linear;
|
|
border: .2rem solid $branding;
|
|
border-radius: .8rem;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
content: "";
|
|
display: block;
|
|
height: 1.6rem;
|
|
left: 50%;
|
|
margin-left: -.8rem;
|
|
margin-top: -.8rem;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 1.6rem;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.bar-menu {
|
|
font-size: 100% !important;
|
|
}
|
|
|
|
.tab-active {
|
|
border-bottom-color: $branding !important;
|
|
color: $branding !important;
|
|
}
|
|
|
|
a {
|
|
color: $branding2 !important;
|
|
}
|
|
|
|
.branded-loader {}
|
|
|
|
.post-text, .title, .post, .postnav {
|
|
text-align: center;
|
|
border: 1px;
|
|
}
|
|
|
|
p, h6, h5, h4, h3, h2, h1 {
|
|
font-family: 'Open Sans',sans-serif !important;
|
|
}
|
|
|
|
.post-title {
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-size: 1.6em;
|
|
font-weight: 600;
|
|
line-height: 1.6em;
|
|
color: #3A4145;
|
|
text-align: center;
|
|
}
|
|
|
|
.post-author {
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-size: 1.0em;
|
|
line-height: 1.2em;
|
|
color: #3A4145;
|
|
}
|
|
|
|
.project-title {
|
|
font-family: 'Open Sans',sans-serif !important;
|
|
line-height: 1.6em !important;
|
|
color: #3A4145 !important;
|
|
}
|
|
|
|
.project-description {
|
|
font-family: 'Open Sans',sans-serif !important;
|
|
font-size: 1.2em !important;
|
|
line-height: 1.2em !important;
|
|
color: #3A4145 !important;
|
|
}
|
|
|
|
.links-navigate {
|
|
width: 100%;
|
|
margin-bottom: 25px !important;
|
|
margin: auto !important;
|
|
}
|
|
|
|
.navigate {
|
|
width: 20%;
|
|
margin-bottom: 25px !important;
|
|
margin: auto !important;
|
|
}
|
|
|
|
.navigate-small {
|
|
width: $menuWidth;
|
|
margin-bottom: 25px !important;
|
|
margin: auto !important;
|
|
}
|
|
|
|
.navigate-tab {
|
|
border: thin solid;
|
|
border-radius: 2px !important;
|
|
margin-bottom: 5px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
&:hover {
|
|
background-color: $brandingBG;
|
|
}
|
|
}
|
|
|
|
.navigate-tab-mobile {
|
|
@extend .navigate-tab;
|
|
margin: auto !important;
|
|
}
|
|
|
|
.navigate-item {
|
|
text-transform: capitalize;
|
|
color: $branding !important;
|
|
&:hover {
|
|
color: $branding3 !important;
|
|
}
|
|
}
|
|
|
|
.mobile-navigate {
|
|
width: $menuWidth;
|
|
height: 45px !important;
|
|
}
|
|
|
|
.mobile-menu {
|
|
left: -100% !important;
|
|
border-radius: 2px !important;
|
|
border: 1px solid !important;
|
|
border-color: $branding !important;
|
|
}
|
|
|
|
.my-avatar {
|
|
z-index: 0 !important;
|
|
}
|
|
|
|
.content-box {
|
|
margin-top: 5px;
|
|
display: flex !important; /* defines flexbox */
|
|
flex-direction: column !important; /* top to bottom */
|
|
justify-content: space-between !important; /* first item at start, last at end */
|
|
position: relative !important;
|
|
}
|
|
|
|
.projects-box {
|
|
@extend .content-box;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.projects-card {
|
|
@extend .shadow;
|
|
height: 230px !important;
|
|
@media(max-width: 1468px) {
|
|
height: 310px !important;
|
|
}
|
|
@media(max-width: 800px) {
|
|
height: 275px !important;
|
|
}
|
|
@media(max-width: 360px) {
|
|
height: 280px !important;
|
|
}
|
|
@media(max-width: 330px) {
|
|
height: 300px !important;
|
|
}
|
|
}
|
|
|
|
.posts-box {
|
|
@extend .content-box;
|
|
height: 250px !important;
|
|
}
|
|
|
|
.browse-content {
|
|
margin: auto;
|
|
max-width: 90%;
|
|
@media (max-width: 1000px) {
|
|
max-width: 95%;
|
|
}
|
|
@media (max-width: 800px) {
|
|
max-width: 97%;
|
|
}
|
|
@media (max-width: 400px) {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
$bg-color: red;
|
|
|
|
.browse-readmore {
|
|
z-index: 1;
|
|
background: linear-gradient(to bottom, rgba($bg-color, 0) 0%, rgba($bg-color, 1) 100%);
|
|
height: 100px;
|
|
width: 100px;
|
|
margin-top: -100px;
|
|
position: absolute;
|
|
}
|
|
|
|
@mixin gradient-text($gradient, $bg : 'light') {
|
|
@supports(mix-blend-mode: lighten) {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
|
|
background: unquote($gradient);
|
|
pointer-events: none;
|
|
}
|
|
|
|
@if ($bg == 'light') {
|
|
color: #000;
|
|
background: #fff;
|
|
mix-blend-mode: multiply;
|
|
|
|
&::before {
|
|
mix-blend-mode: screen;
|
|
}
|
|
} @else {
|
|
color: #fff;
|
|
background: #000;
|
|
mix-blend-mode: lighten;
|
|
|
|
&::before {
|
|
mix-blend-mode: multiply;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.summary {
|
|
}
|
|
|
|
.blurmore {
|
|
@include gradient-text('linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%)', 'light');
|
|
}
|
|
|
|
.readmore {
|
|
color: $branding !important;
|
|
&:hover {
|
|
background-color: $brandingBG3 !important;
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.category-chip {
|
|
height: 22px !important;
|
|
vertical-align: top !important;
|
|
&:hover {
|
|
background-color: $brandingBG3 !important;
|
|
}
|
|
}
|
|
|
|
.post-card {
|
|
@extend .shadow;
|
|
max-width: 85%;
|
|
@media(max-width: 500px) {
|
|
max-width: 95%;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: auto;
|
|
max-width: 80%;
|
|
@media (max-width: 1000px) {
|
|
max-width: 85%;
|
|
}
|
|
@media (max-width: 800px) {
|
|
max-width: 87%;
|
|
}
|
|
@media (max-width: 400px) {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
p > img, code {
|
|
margin: auto;
|
|
max-width: 85%;
|
|
@media (max-width: 1000px) {
|
|
max-width: 90%;
|
|
}
|
|
@media (max-width: 800px) {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
margin: auto;
|
|
}
|
|
|
|
code {
|
|
text-indent: 0mm;
|
|
margin: auto;
|
|
}
|
|
|
|
.projects-content {
|
|
margin: auto;
|
|
max-width: 25%;
|
|
@media (max-width: 1000px) {
|
|
max-width: 60%;
|
|
}
|
|
@media (max-width: 800px) {
|
|
max-width: 70%;
|
|
}
|
|
@media (max-width: 400px) {
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
|
|
.links-column {
|
|
@extend .shadow;
|
|
background-color: white;
|
|
margin: 5px 5px 5px 5px;
|
|
}
|
|
|
|
.links-content {
|
|
margin-top: 5px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.link-box {
|
|
margin: 5px;
|
|
}
|
|
|
|
.post-content {
|
|
text-indent: 6mm;
|
|
max-width: 100%;
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-size: 1.4em;
|
|
line-height: 1.6em;
|
|
color: #3A4145;
|
|
text-align: left;
|
|
}
|
|
|
|
.project-content {
|
|
margin-top: 5px;
|
|
max-width: 100%;
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-size: 1.0em;
|
|
line-height: 1.6em;
|
|
color: #3A4145;
|
|
text-align: left;
|
|
}
|
|
|
|
.rounded-button {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.maxinput {
|
|
background-color: grey;
|
|
}
|
|
|
|
.maxwarn {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 10%;
|
|
}
|
|
|
|
.editor {}
|
|
|