tweaking css for new layout
This commit is contained in:
Are0h
parent
f17bf28d71
commit
2b963e69ee
12 changed files with 112 additions and 605 deletions
|
|
@ -1,48 +1,16 @@
|
|||
/**
|
||||
-------------------------------
|
||||
-- Bulma
|
||||
-------------------------------
|
||||
**/
|
||||
/**
|
||||
-------------------------------
|
||||
-- Typography
|
||||
-------------------------------
|
||||
**/
|
||||
@font-face {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'AlteHaasGrotesk';
|
||||
src: url("fonts/app/AlteHaasGroteskRegular.eot"), url("fonts/app/AlteHaasGroteskRegular.eot?#iefix") format('embedded-opentype'), url("fonts/app/AlteHaasGroteskRegular.woff2") format('woff2'), url("fonts/app/AlteHaasGroteskRegular.woff") format('woff'), url("fonts/app/AlteHaasGroteskRegular.ttf") format('truetype'), url("fonts/app/AlteHaasGroteskRegular.svg?#AlteHaasGrotesk") format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-family: 'AlteHaasGrotesk';
|
||||
src: url("fonts/app/AlteHaasGroteskBold.eot"), url("fonts/app/AlteHaasGroteskBold.eot?#iefix") format('embedded-opentype'), url("fonts/app/AlteHaasGroteskBold.woff2") format('woff2'), url("fonts/app/AlteHaasGroteskBold.woff") format('woff'), url("fonts/app/AlteHaasGroteskBold.ttf") format('truetype'), url("fonts/app/AlteHaasGroteskBold.svg?#AlteHaasGrotesk") format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoMono';
|
||||
src: url("fonts/app/RobotoMono-Thin.eot"), url("fonts/app/RobotoMono-Thin.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Thin.woff2") format('woff2'), url("fonts/app/RobotoMono-Thin.woff") format('woff'), url("fonts/app/RobotoMono-Thin.ttf") format('truetype'), url("fonts/app/RobotoMono-Thin.svg?#RobotoMono") format('svg');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoMono';
|
||||
src: url("fonts/app/RobotoMono-Light.eot"), url("fonts/app/RobotoMono-Light.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Light.woff2") format('woff2'), url("fonts/app/RobotoMono-Light.woff") format('woff'), url("fonts/app/RobotoMono-Light.ttf") format('truetype'), url("fonts/app/RobotoMono-Light.svg?#RobotoMono") format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoMono';
|
||||
src: url("fonts/app/RobotoMono-Regular.eot"), url("fonts/app/RobotoMono-Regular.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Regular.woff2") format('woff2'), url("fonts/app/RobotoMono-Regular.woff") format('woff'), url("fonts/app/RobotoMono-Regular.ttf") format('truetype'), url("fonts/app/RobotoMono-Regular.svg?#RobotoMono") format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RobotoMono';
|
||||
src: url("fonts/app/RobotoMono-Bold.eot"), url("fonts/app/RobotoMono-Bold.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Bold.woff2") format('woff2'), url("fonts/app/RobotoMono-Bold.woff") format('woff'), url("fonts/app/RobotoMono-Bold.ttf") format('truetype'), url("fonts/app/RobotoMono-Bold.svg?#RobotoMono") format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $primary;
|
||||
font-weight: 900;
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
|
|
@ -142,8 +110,8 @@ sub {
|
|||
}
|
||||
sup {
|
||||
top: -0.55em;
|
||||
background: #addbeb;
|
||||
color: #2b8caf;
|
||||
background: #aedcea;
|
||||
color: #113641;
|
||||
border-radius: 2px;
|
||||
padding: 0 2px 0 2px;
|
||||
margin: 0 2px 0 0;
|
||||
|
|
@ -262,13 +230,13 @@ template {
|
|||
-------------------------------
|
||||
**/
|
||||
html {
|
||||
background: url("../images/bg-teal-pattern.png");
|
||||
font: 300 1em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
color: #ebdfce;
|
||||
background: #113641;
|
||||
font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
|
||||
color: #fffacd;
|
||||
}
|
||||
a {
|
||||
font: 300 1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #baf273;
|
||||
font: 300 1em $titleType;
|
||||
color: #7ed07e;
|
||||
text-decoration: underline;
|
||||
-moz-transition: all 0.1s linear;
|
||||
-webkit-transition: all 0.1s linear;
|
||||
|
|
@ -276,78 +244,30 @@ a {
|
|||
transition: all 0.1s linear;
|
||||
}
|
||||
a:hover {
|
||||
color: #e8fbd0;
|
||||
background: #2b8caf;
|
||||
color: #daf1da;
|
||||
background: #113641;
|
||||
}
|
||||
svg.icons {
|
||||
width: 20px;
|
||||
fill: #eb6b99;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #eb6b99 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
#loader {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#loader i {
|
||||
color: #ebdfce;
|
||||
}
|
||||
.blog-container {
|
||||
width: 100%;
|
||||
fill: #fc6399;
|
||||
}
|
||||
.main-container {
|
||||
margin: 0 auto;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
.main-container section header {
|
||||
.main-container header {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
color: #ebdfce;
|
||||
height: 600px;
|
||||
border-top: 5px #7ed07e solid;
|
||||
border-bottom: 2px #f9690e solid;
|
||||
}
|
||||
.main-container section header #float-bg {
|
||||
background: url("../images/bg-teal-pattern.png");
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
isolation: isolate;
|
||||
opacity: 0;
|
||||
left: 20%;
|
||||
.main-container section {
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-container section header #float-bg img {
|
||||
width: 250px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.main-container section header #header-one,
|
||||
.main-container section header #header-two {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
.main-container section header #header-one label#the-title a,
|
||||
.main-container section header #header-two label#the-title a {
|
||||
font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
width: 97px;
|
||||
height: 100px;
|
||||
color: #eb6b99;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
.main-container section #index-content span {
|
||||
font: 600 2em/2 Helvetica, Arial, sans-serif;
|
||||
color: #fc6399;
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.main-container .content #the-intro {
|
||||
|
|
@ -362,7 +282,7 @@ h6 {
|
|||
}
|
||||
.main-container .content #index-display span,
|
||||
.main-container .content #index-display a {
|
||||
font: 400 1.2em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
font: 400 1.2em Helvetica, Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 375px) {
|
||||
|
|
@ -374,19 +294,19 @@ h6 {
|
|||
font-size: 3.3rem;
|
||||
}
|
||||
.main-container .header .header-desc span a {
|
||||
color: #eee;
|
||||
color: #fffacd;
|
||||
width: 250px;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
font: 300 7em/1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
font: 300 7em/1em $titleType;
|
||||
text-decoration: none;
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
.main-container .header .header-desc #the-intro {
|
||||
color: #eb6b99;
|
||||
color: #fc6399;
|
||||
opacity: 0;
|
||||
font: 400 1.8em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
font: 400 1.8em $titleType;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
}
|
||||
|
|
@ -440,13 +360,12 @@ header #header-two #the-intro {
|
|||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
font-size: 1em;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
#index-display #recent-title {
|
||||
color: #eee;
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #fffacd;
|
||||
font: 400 2em $titleType;
|
||||
vertical-align: top;
|
||||
}
|
||||
#index-display .index-block {
|
||||
|
|
@ -457,405 +376,6 @@ header #header-two #the-intro {
|
|||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Fipamo
|
||||
-------------------------------
|
||||
**/
|
||||
#bm-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#bm-content #header-two {
|
||||
font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#bm-content #bookmark-display {
|
||||
padding: 0;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list .bookmark-entry {
|
||||
background: #0f313d;
|
||||
width: 50%;
|
||||
height: 500px;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 10px;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list .bookmark-entry .bookmark-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list .bookmark-entry .bookmark-info label {
|
||||
display: block;
|
||||
font-size: 0.5em;
|
||||
padding: 10px;
|
||||
background: #2b8caf;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #1e627b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate a,
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate label {
|
||||
padding: 5px;
|
||||
color: #ebdfce;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate a {
|
||||
padding: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
#bm-content #bookmark-display .bookmark-list .bookmark-entry {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Folio
|
||||
-------------------------------
|
||||
**/
|
||||
#work-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#work-content #header #header-two p {
|
||||
font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#work-content #header #header-two p span {
|
||||
color: #eb6b99;
|
||||
}
|
||||
#work-content #work-display {
|
||||
padding: 0;
|
||||
margin: 0 0 40px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
#work-content #work-list .work-item {
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-size: cover;
|
||||
background-color: #ebdfce;
|
||||
color: #ebdfce;
|
||||
}
|
||||
#work-content #work-list .work-item span {
|
||||
font: 600 0.7em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#work-content #work-contact #contact-form {
|
||||
opacity: 1;
|
||||
}
|
||||
#work-content #work-contact #contact-form label {
|
||||
font: 600 0.8em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #baf273;
|
||||
margin: 0 0 15px 0;
|
||||
display: block;
|
||||
}
|
||||
#work-content #work-contact #contact-form #request-form input[type=email],
|
||||
#work-content #work-contact #contact-form #request-form input[type=password],
|
||||
#work-content #work-contact #contact-form #request-form input[type=text] {
|
||||
width: 100%;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
#work-content #work-contact #contact-form #request-form select {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#work-content #work-contact #contact-form #request-form textarea {
|
||||
width: 100%;
|
||||
}
|
||||
#work-content #work-contact #contact-info label#request-status {
|
||||
font: 600 0.8em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #baf273;
|
||||
margin: 0 0 15px 0;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#work-content #work-contact #contact-info p {
|
||||
font: 400 1em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
color: #ebdfce;
|
||||
}
|
||||
#work-content #work-contact #contact-info p i {
|
||||
color: #baf273;
|
||||
}
|
||||
#project-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#project-content #project-display {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
#project-content #project-display #project-info span {
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#project-content #project-display #project-desc {
|
||||
font: 300 1.2em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
color: #ebdfce;
|
||||
}
|
||||
#project-content #project-images {
|
||||
margin: 10px 0 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
#project-content #project-images .folio-image {
|
||||
width: 100%;
|
||||
margin: 0 0 50px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#work-content #work-list .work-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Admin
|
||||
-------------------------------
|
||||
**/
|
||||
#admin-index-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#admin-index-content #admin-index-display {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
#admin-index-content #admin-index-display #admin-login {
|
||||
width: 300px;
|
||||
}
|
||||
#admin-index-content #admin-index-display #admin-index-title {
|
||||
color: #eee;
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
vertical-align: top;
|
||||
}
|
||||
#admin-index-content #admin-index-display .admin-menu-main .admin-nav span {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
#admin-index-content #admin-index-display .index-block {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-edit label {
|
||||
font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-edit textarea#entry_title {
|
||||
width: 100%;
|
||||
background: none;
|
||||
color: #ebdfce;
|
||||
font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-edit textarea#entry_text {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-meta label {
|
||||
font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-meta input,
|
||||
#admin-index-content #admin-index-display #blog-meta button {
|
||||
width: 100%;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-meta input {
|
||||
color: #eb6b99;
|
||||
background: #32302f;
|
||||
}
|
||||
#admin-index-content #admin-index-display #blog-meta #featured-click {
|
||||
display: none;
|
||||
}
|
||||
#blog-index-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#blog-index-content #blog-hub-display #blog-hub-title {
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#saved-index-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#saved-index-content #saved-hub-display #saved-hub-title label,
|
||||
#saved-index-content #saved-hub-display #saved-hub-main label {
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#saved-index-content #saved-hub-display #saved-hub-title textarea,
|
||||
#saved-index-content #saved-hub-display #saved-hub-main textarea {
|
||||
width: 90%;
|
||||
}
|
||||
#saved-index-content #saved-hub-display #saved-hub-title button,
|
||||
#saved-index-content #saved-hub-display #saved-hub-main button {
|
||||
padding: 5px;
|
||||
}
|
||||
#post-edit-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit {
|
||||
margin: 100px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit label {
|
||||
font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
display: block;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit #entry_title {
|
||||
width: 90%;
|
||||
background: none;
|
||||
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #ebdfce;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit #entry_text {
|
||||
width: 90%;
|
||||
height: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit pre {
|
||||
background: #32302f;
|
||||
}
|
||||
#post-edit-content header#header #header-one #blog-edit pre code {
|
||||
white-space: pre-wrap;
|
||||
color: #ebdfce;
|
||||
}
|
||||
#post-edit-content header#header #header-two label {
|
||||
font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
}
|
||||
#post-edit-content header#header #header-two #featured-image-drop {
|
||||
border-radius: 3px;
|
||||
border: 1px dashed #eee;
|
||||
width: 100%;
|
||||
font: 600 0.5em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#post-edit-content header#header #header-two #featured-image-drop img {
|
||||
width: 100%;
|
||||
}
|
||||
#post-edit-content header#header #header-two #blog-meta {
|
||||
margin: 100px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
#post-edit-content header#header #header-two #blog-meta #featured-click {
|
||||
display: none;
|
||||
}
|
||||
#post-edit-content header#header #header-two #blog-meta #entry_tags,
|
||||
#post-edit-content header#header #header-two #blog-meta button {
|
||||
width: 100%;
|
||||
}
|
||||
.folio-project-form {
|
||||
display: inline-block;
|
||||
width: 56%;
|
||||
}
|
||||
.folio-project-form input[type=email],
|
||||
.folio-project-form input[type=password],
|
||||
.folio-project-form input[type=text],
|
||||
.folio-project-form select {
|
||||
width: 400px;
|
||||
}
|
||||
.folio-project-form select {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
.folio-project-form textarea {
|
||||
width: 400px;
|
||||
height: 133px;
|
||||
}
|
||||
.folio-hub {
|
||||
padding: 20px;
|
||||
}
|
||||
.folio-hub span {
|
||||
margin: 10px 10px 0 0;
|
||||
}
|
||||
.folio-hub .btn-add-project span {
|
||||
font: 20px 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
margin: -35px 0 0 40px;
|
||||
display: block;
|
||||
height: 50px;
|
||||
}
|
||||
.folio-hub .project-list {
|
||||
width: 95%;
|
||||
}
|
||||
.folio-hub .project-list span.drag-handle {
|
||||
padding: 10px;
|
||||
color: #ebdfce;
|
||||
cursor: pointer;
|
||||
}
|
||||
.folio-hub .project-list .project-item {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #144252;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.folio-hub .project-list .project-item:hover {
|
||||
background: #1e627b;
|
||||
}
|
||||
.upload-list {
|
||||
color: #addbeb;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 260px;
|
||||
height: 330px;
|
||||
margin: 45px 0 0;
|
||||
}
|
||||
.thumb {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
margin: 10px 5px 0 0;
|
||||
}
|
||||
.upload-drop {
|
||||
width: 400px;
|
||||
height: 70px;
|
||||
background: $form-background;
|
||||
color: #addbeb;
|
||||
text-align: center;
|
||||
padding: 40px 0 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Forms
|
||||
-------------------------------
|
||||
**/
|
||||
|
|
@ -880,8 +400,8 @@ textarea {
|
|||
}
|
||||
button,
|
||||
input[type=submit] {
|
||||
background: #baf273;
|
||||
color: #2b8caf;
|
||||
background: #7ed07e;
|
||||
color: #113641;
|
||||
font: 14px 'RobotoMono';
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
|
|
@ -890,11 +410,11 @@ input[type=submit] {
|
|||
}
|
||||
select {
|
||||
font: 14px 'RobotoMono';
|
||||
border: 1px solid #eb6b99;
|
||||
border: 1px solid #fc6399;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
color: #2b8caf;
|
||||
color: #113641;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
font: 14px 'RobotoMono';
|
||||
|
|
@ -931,7 +451,7 @@ select {
|
|||
line-height: 250px;
|
||||
}
|
||||
#blog-content #blog-display #blog-list .blog-entry label {
|
||||
background: #eb6b99;
|
||||
background: #fc6399;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -961,27 +481,27 @@ select {
|
|||
padding: 30px 0 0 0;
|
||||
}
|
||||
#post-content #header-post #header-one label#the-title a {
|
||||
font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
font: 500 2em $titleType;
|
||||
width: 97px;
|
||||
height: 115px;
|
||||
color: #eb6b99;
|
||||
color: #fc6399;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
#post-content #header-post #header-one span#post-title {
|
||||
font: 200 4.5em/1em 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
color: #eee;
|
||||
font: 200 4.5em/1em $titleType;
|
||||
color: #fffacd;
|
||||
margin: 20px 0 0 10px;
|
||||
padding: 20px 0 80px 0;
|
||||
display: block;
|
||||
}
|
||||
#post-content #post-display {
|
||||
color: #ebdfce;
|
||||
color: #f9690e;
|
||||
width: 80%;
|
||||
margin: 50px auto;
|
||||
font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
font: 400 1.5em Helvetica, Arial, sans-serif;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
/*# sourceMappingURL=base.css.map */
|
||||
File diff suppressed because one or more lines are too long
15
assets/scripts/start.min.js
vendored
15
assets/scripts/start.min.js
vendored
|
|
@ -117,7 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
|
|||
}
|
||||
|
||||
return newRequire;
|
||||
})({"Base.jsx":[function(require,module,exports) {
|
||||
})({"Base.js":[function(require,module,exports) {
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
|
|
@ -137,7 +137,6 @@ function () {
|
|||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
//TODO: Flip to unified structure defined in BMG, brah
|
||||
function Base() {
|
||||
_classCallCheck(this, Base);
|
||||
|
||||
|
|
@ -147,7 +146,7 @@ function () {
|
|||
_createClass(Base, [{
|
||||
key: "start",
|
||||
value: function start() {
|
||||
console.log("I knoooooooow you see it... ");
|
||||
console.log('I knoooooooow you see it... ');
|
||||
} //--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
|
|
@ -161,17 +160,17 @@ function () {
|
|||
}();
|
||||
|
||||
exports.default = Base;
|
||||
},{}],"Start.jsx":[function(require,module,exports) {
|
||||
},{}],"Start.js":[function(require,module,exports) {
|
||||
"use strict";
|
||||
|
||||
var _Base = _interopRequireDefault(require("./Base.jsx"));
|
||||
var _Base = _interopRequireDefault(require("./Base"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var base = new _Base.default();
|
||||
}, false);
|
||||
},{"./Base.jsx":"Base.jsx"}],"../../../../../../.nvm/versions/node/v10.16.3/lib/node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
|
||||
},{"./Base":"Base.js"}],"../../../../../.nvm/versions/node/v10.16.3/lib/node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
|
||||
var global = arguments[3];
|
||||
var OVERLAY_ID = '__parcel__error__overlay__';
|
||||
var OldModule = module.bundle.Module;
|
||||
|
|
@ -199,7 +198,7 @@ var parent = module.bundle.parent;
|
|||
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
|
||||
var hostname = "" || location.hostname;
|
||||
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
var ws = new WebSocket(protocol + '://' + hostname + ':' + "65111" + '/');
|
||||
var ws = new WebSocket(protocol + '://' + hostname + ':' + "50107" + '/');
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
checkedAssets = {};
|
||||
|
|
@ -374,5 +373,5 @@ function hmrAcceptRun(bundle, id) {
|
|||
return true;
|
||||
}
|
||||
}
|
||||
},{}]},{},["../../../../../../.nvm/versions/node/v10.16.3/lib/node_modules/parcel/src/builtins/hmr-runtime.js","Start.jsx"], null)
|
||||
},{}]},{},["../../../../../.nvm/versions/node/v10.16.3/lib/node_modules/parcel/src/builtins/hmr-runtime.js","Start.js"], null)
|
||||
//# sourceMappingURL=/start.min.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +1,11 @@
|
|||
extends frame
|
||||
|
||||
block main-content
|
||||
header(style="background: url("+default_bg+") scroll center center / cover")
|
||||
section#index-content
|
||||
header
|
||||
|
||||
#index-display
|
||||
#index-content
|
||||
span= title
|
||||
div !{content_index}
|
||||
span Shit. I think I just made a theme kit for Fipamo
|
||||
|
||||
|
|
|
|||
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "fipamo-theme-kit",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"description": "Theming tool pack for Fipamo",
|
||||
"repository": "https://code.playvicio.us/Are0h/Fipamo",
|
||||
|
||||
"scripts":{
|
||||
"dev": "stylus -w -m -o assets/css src/styles/base.styl & parcel watch src/com/Start.js --out-dir assets/scripts --out-file start.min.js & parcel index.pug page.pug"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^4.1.10",
|
||||
"pug": "^2.0.4",
|
||||
"stylus": "^0.54.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
module.exports = {
|
||||
locals: {
|
||||
title: 'Fipamo Theme Kit',
|
||||
title: 'This is Fipamo',
|
||||
keywords:
|
||||
'creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek',
|
||||
description:
|
||||
'The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.',
|
||||
content_index: 'This is some page content... for your broke ass',
|
||||
default_bg: '/assets/images/global/default-bg.jpg',
|
||||
default_avi: '/assets/images/global/default-avi.png',
|
||||
content_index:
|
||||
'Hey, welcome to the show. This is the theme kit for making cool stuff with Fipamo, the most chill blog frame work ever. Because people have better things to do than mess with complicated blog set ups.',
|
||||
content_page: 'This is some page content... for your broke ass',
|
||||
bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$primary = #2B8CAF;
|
||||
$secondary = #EB6B99;
|
||||
$tertiary = #EBDFCE;
|
||||
$highlight = #BAF273;
|
||||
$white = #eee;
|
||||
$primary = #113641;
|
||||
$secondary = #FC6399;
|
||||
$tertiary = #F9690E;
|
||||
$highlight = #7ED07E;
|
||||
$white = #FFFACD;
|
||||
$black = #32302f;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
padding 20px
|
||||
width 100%
|
||||
max-width 1024px
|
||||
font-size 1em
|
||||
z-index 10
|
||||
position relative
|
||||
#recent-title
|
||||
|
|
|
|||
|
|
@ -10,3 +10,7 @@ object-transitions(rate)
|
|||
|
||||
background-opacity(rgb-value, opacity)
|
||||
background: rgba(rgb-value, opacity);
|
||||
|
||||
custom-header(weight, size, line-height, color)
|
||||
font: weight size/line-height $bodyType
|
||||
color: color
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
html
|
||||
background url('../images/bg-teal-pattern.png')
|
||||
font 300 1em $bodyType
|
||||
color $tertiary
|
||||
background $primary
|
||||
font 400 1.3em/1.3em $bodyType
|
||||
color $white
|
||||
|
||||
a
|
||||
font 300 1em $titleType
|
||||
|
|
@ -17,67 +17,26 @@ svg.icons
|
|||
width 20px
|
||||
fill $secondary
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color $secondary !important
|
||||
font-weight 600 !important
|
||||
|
||||
#loader
|
||||
position fixed
|
||||
z-index 2000
|
||||
height 100%
|
||||
width 100%
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
i
|
||||
color $tertiary
|
||||
|
||||
.blog-container
|
||||
width 100%
|
||||
.main-container
|
||||
margin 0 auto
|
||||
z-index 10
|
||||
position relative
|
||||
section
|
||||
header
|
||||
width 100%
|
||||
max-width 1024px
|
||||
#float-bg
|
||||
background url('../images/bg-teal-pattern.png')
|
||||
position absolute
|
||||
z-index 5
|
||||
//height 100%
|
||||
//width 100%
|
||||
//display flex
|
||||
//align-items center
|
||||
//justify-content center
|
||||
isolation isolate
|
||||
opacity 0
|
||||
left 20%
|
||||
img
|
||||
width 250px
|
||||
mix-blend-mode multiply
|
||||
width: 100%;
|
||||
height 600px;
|
||||
border-top 5px $highlight solid
|
||||
border-bottom 2px $tertiary solid
|
||||
section
|
||||
overflow hidden
|
||||
#index-content
|
||||
span
|
||||
custom-header(600, 2em, 2, $secondary)
|
||||
|
||||
div
|
||||
|
||||
|
||||
|
||||
position relative
|
||||
width 100%
|
||||
font-size 1em
|
||||
padding 20px
|
||||
opacity 0
|
||||
color $tertiary
|
||||
|
||||
#header-one, #header-two
|
||||
z-index 10
|
||||
position relative
|
||||
label#the-title a
|
||||
font 500 2em $titleType
|
||||
width 97px
|
||||
height 100px;
|
||||
color $secondary
|
||||
text-decoration none
|
||||
display block
|
||||
word-break: break-all;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
$titleType = Helvetica, Arial, sans-serif;
|
||||
$bodyType = Helvetica, Arial, sans-serif;
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color $primary
|
||||
font-weight 900
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue