projects/fipamothemekit
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

tweaking css for new layout

Browse source
This commit is contained in:
Are0h 2020-05-07 14:40:36 -07:00
parent f17bf28d71
commit 2b963e69ee
12 changed files with 112 additions and 605 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

570
assets/css/base.css
View file

@ -1,48 +1,16 @@
/** /**
------------------------------- -------------------------------
-- Bulma
-------------------------------
**/
/**
-------------------------------
-- Typography -- Typography
------------------------------- -------------------------------
**/ **/
@font-face { h1,
font-weight: 400; h2,
font-style: normal; h3,
font-family: 'AlteHaasGrotesk'; h4,
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'); h5,
} h6 {
@font-face { color: $primary;
font-weight: 600; font-weight: 900;
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;
} }
/** /**
------------------------------- -------------------------------
@ -142,8 +110,8 @@ sub {
} }
sup { sup {
top: -0.55em; top: -0.55em;
background: #addbeb; background: #aedcea;
color: #2b8caf; color: #113641;
border-radius: 2px; border-radius: 2px;
padding: 0 2px 0 2px; padding: 0 2px 0 2px;
margin: 0 2px 0 0; margin: 0 2px 0 0;
@ -262,13 +230,13 @@ template {
------------------------------- -------------------------------
**/ **/
html { html {
background: url("../images/bg-teal-pattern.png"); background: #113641;
font: 300 1em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
color: #ebdfce; color: #fffacd;
} }
a { a {
font: 300 1em 'RobotoMono', Helvetica, Arial, sans-serif; font: 300 1em $titleType;
color: #baf273; color: #7ed07e;
text-decoration: underline; text-decoration: underline;
-moz-transition: all 0.1s linear; -moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear; -webkit-transition: all 0.1s linear;
@ -276,78 +244,30 @@ a {
transition: all 0.1s linear; transition: all 0.1s linear;
} }
a:hover { a:hover {
color: #e8fbd0; color: #daf1da;
background: #2b8caf; background: #113641;
} }
svg.icons { svg.icons {
width: 20px; width: 20px;
fill: #eb6b99; fill: #fc6399;
}
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%;
} }
.main-container { .main-container {
margin: 0 auto; margin: 0 auto;
z-index: 10; z-index: 10;
position: relative; position: relative;
} }
.main-container section header { .main-container header {
width: 100%; width: 100%;
max-width: 1024px; height: 600px;
position: relative; border-top: 5px #7ed07e solid;
width: 100%; border-bottom: 2px #f9690e solid;
font-size: 1em;
padding: 20px;
opacity: 0;
color: #ebdfce;
} }
.main-container section header #float-bg { .main-container section {
background: url("../images/bg-teal-pattern.png"); overflow: hidden;
position: absolute;
z-index: 5;
isolation: isolate;
opacity: 0;
left: 20%;
} }
.main-container section header #float-bg img { .main-container section #index-content span {
width: 250px; font: 600 2em/2 Helvetica, Arial, sans-serif;
mix-blend-mode: multiply; color: #fc6399;
}
.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;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.main-container .content #the-intro { .main-container .content #the-intro {
@ -362,7 +282,7 @@ h6 {
} }
.main-container .content #index-display span, .main-container .content #index-display span,
.main-container .content #index-display a { .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) { @media only screen and (max-width: 375px) {
@ -374,19 +294,19 @@ h6 {
font-size: 3.3rem; font-size: 3.3rem;
} }
.main-container .header .header-desc span a { .main-container .header .header-desc span a {
color: #eee; color: #fffacd;
width: 250px; width: 250px;
font-weight: 300; font-weight: 300;
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
font: 300 7em/1em 'RobotoMono', Helvetica, Arial, sans-serif; font: 300 7em/1em $titleType;
text-decoration: none; text-decoration: none;
margin: 0 0 50px 0; margin: 0 0 50px 0;
} }
.main-container .header .header-desc #the-intro { .main-container .header .header-desc #the-intro {
color: #eb6b99; color: #fc6399;
opacity: 0; opacity: 0;
font: 400 1.8em 'RobotoMono', Helvetica, Arial, sans-serif; font: 400 1.8em $titleType;
display: inline-block; display: inline-block;
width: 95%; width: 95%;
} }
@ -440,13 +360,12 @@ header #header-two #the-intro {
padding: 20px; padding: 20px;
width: 100%; width: 100%;
max-width: 1024px; max-width: 1024px;
font-size: 1em;
z-index: 10; z-index: 10;
position: relative; position: relative;
} }
#index-display #recent-title { #index-display #recent-title {
color: #eee; color: #fffacd;
font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; font: 400 2em $titleType;
vertical-align: top; vertical-align: top;
} }
#index-display .index-block { #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 -- Forms
------------------------------- -------------------------------
**/ **/
@ -880,8 +400,8 @@ textarea {
} }
button, button,
input[type=submit] { input[type=submit] {
background: #baf273; background: #7ed07e;
color: #2b8caf; color: #113641;
font: 14px 'RobotoMono'; font: 14px 'RobotoMono';
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
@ -890,11 +410,11 @@ input[type=submit] {
} }
select { select {
font: 14px 'RobotoMono'; font: 14px 'RobotoMono';
border: 1px solid #eb6b99; border: 1px solid #fc6399;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
color: #2b8caf; color: #113641;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
font: 14px 'RobotoMono'; font: 14px 'RobotoMono';
@ -931,7 +451,7 @@ select {
line-height: 250px; line-height: 250px;
} }
#blog-content #blog-display #blog-list .blog-entry label { #blog-content #blog-display #blog-list .blog-entry label {
background: #eb6b99; background: #fc6399;
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: 3px;
} }
@ -961,27 +481,27 @@ select {
padding: 30px 0 0 0; padding: 30px 0 0 0;
} }
#post-content #header-post #header-one label#the-title a { #post-content #header-post #header-one label#the-title a {
font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif; font: 500 2em $titleType;
width: 97px; width: 97px;
height: 115px; height: 115px;
color: #eb6b99; color: #fc6399;
text-decoration: none; text-decoration: none;
display: block; display: block;
word-break: break-all; word-break: break-all;
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
} }
#post-content #header-post #header-one span#post-title { #post-content #header-post #header-one span#post-title {
font: 200 4.5em/1em 'RobotoMono', Helvetica, Arial, sans-serif; font: 200 4.5em/1em $titleType;
color: #eee; color: #fffacd;
margin: 20px 0 0 10px; margin: 20px 0 0 10px;
padding: 20px 0 80px 0; padding: 20px 0 80px 0;
display: block; display: block;
} }
#post-content #post-display { #post-content #post-display {
color: #ebdfce; color: #f9690e;
width: 80%; width: 80%;
margin: 50px auto; margin: 50px auto;
font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; font: 400 1.5em Helvetica, Arial, sans-serif;
padding-bottom: 50px; padding-bottom: 50px;
} }
/*# sourceMappingURL=base.css.map */ /*# sourceMappingURL=base.css.map */

2
assets/css/base.css.map
View file

File diff suppressed because one or more lines are too long

15
assets/scripts/start.min.js vendored
View file

@ -117,7 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
} }
return newRequire; return newRequire;
})({"Base.jsx":[function(require,module,exports) { })({"Base.js":[function(require,module,exports) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
@ -137,7 +137,6 @@ function () {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
//TODO: Flip to unified structure defined in BMG, brah
function Base() { function Base() {
_classCallCheck(this, Base); _classCallCheck(this, Base);
@ -147,7 +146,7 @@ function () {
_createClass(Base, [{ _createClass(Base, [{
key: "start", key: "start",
value: function start() { value: function start() {
console.log("I knoooooooow you see it... "); console.log('I knoooooooow you see it... ');
} //-------------------------- } //--------------------------
// methods // methods
//-------------------------- //--------------------------
@ -161,17 +160,17 @@ function () {
}(); }();
exports.default = Base; exports.default = Base;
},{}],"Start.jsx":[function(require,module,exports) { },{}],"Start.js":[function(require,module,exports) {
"use strict"; "use strict";
var _Base = _interopRequireDefault(require("./Base.jsx")); var _Base = _interopRequireDefault(require("./Base"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var base = new _Base.default(); var base = new _Base.default();
}, false); }, 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 global = arguments[3];
var OVERLAY_ID = '__parcel__error__overlay__'; var OVERLAY_ID = '__parcel__error__overlay__';
var OldModule = module.bundle.Module; var OldModule = module.bundle.Module;
@ -199,7 +198,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; 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) { ws.onmessage = function (event) {
checkedAssets = {}; checkedAssets = {};
@ -374,5 +373,5 @@ function hmrAcceptRun(bundle, id) {
return true; 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 //# sourceMappingURL=/start.min.js.map

2
assets/scripts/start.min.js.map
View file

File diff suppressed because one or more lines are too long

9
index.pug
View file

@ -1,10 +1,11 @@
extends frame extends frame
block main-content block main-content
header(style="background: url("+default_bg+") scroll center center / cover")
section#index-content section#index-content
header
#index-display #index-display
#index-content #index-content
div !{content_index} span= title
span Shit. I think I just made a theme kit for Fipamo div !{content_index}

19
package.json Normal file
View 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"
}
}

7
pug.config.js
View file

@ -1,11 +1,14 @@
module.exports = { module.exports = {
locals: { locals: {
title: 'Fipamo Theme Kit', title: 'This is Fipamo',
keywords: keywords:
'creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek', 'creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek',
description: description:
'The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.', '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', content_page: 'This is some page content... for your broke ass',
bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }] bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }]
} }

10
src/styles/_colors.styl
View file

@ -1,6 +1,6 @@
$primary = #2B8CAF; $primary = #113641;
$secondary = #EB6B99; $secondary = #FC6399;
$tertiary = #EBDFCE; $tertiary = #F9690E;
$highlight = #BAF273; $highlight = #7ED07E;
$white = #eee; $white = #FFFACD;
$black = #32302f; $black = #32302f;

1
src/styles/_index.styl
View file

@ -11,7 +11,6 @@
padding 20px padding 20px
width 100% width 100%
max-width 1024px max-width 1024px
font-size 1em
z-index 10 z-index 10
position relative position relative
#recent-title #recent-title

4
src/styles/_mixins.styl
View file

@ -10,3 +10,7 @@ object-transitions(rate)
background-opacity(rgb-value, opacity) background-opacity(rgb-value, opacity)
background: rgba(rgb-value, opacity); background: rgba(rgb-value, opacity);
custom-header(weight, size, line-height, color)
font: weight size/line-height $bodyType
color: color

73
src/styles/_structure.styl
View file

@ -1,7 +1,7 @@
html html
background url('../images/bg-teal-pattern.png') background $primary
font 300 1em $bodyType font 400 1.3em/1.3em $bodyType
color $tertiary color $white
a a
font 300 1em $titleType font 300 1em $titleType
@ -16,68 +16,27 @@ a:hover
svg.icons svg.icons
width 20px width 20px
fill $secondary 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 .main-container
margin 0 auto margin 0 auto
z-index 10 z-index 10
position relative position relative
header
width: 100%;
height 600px;
border-top 5px $highlight solid
border-bottom 2px $tertiary solid
section section
header overflow hidden
width 100% #index-content
max-width 1024px span
#float-bg custom-header(600, 2em, 2, $secondary)
background url('../images/bg-teal-pattern.png')
position absolute div
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
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;

5
src/styles/_typography.styl
View file

@ -1,3 +1,6 @@
$titleType = Helvetica, Arial, sans-serif;
$bodyType = Helvetica, Arial, sans-serif; $bodyType = Helvetica, Arial, sans-serif;
h1, h2, h3, h4, h5, h6
color $primary
font-weight 900