tweaking css for new layout

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

View file

@ -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

View file

@ -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

View file

@ -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
div !{content_index}
span Shit. I think I just made a theme kit for Fipamo
#index-display
#index-content
span= title
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"
}
}

View file

@ -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' }]
}

View file

@ -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;

View file

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

View file

@ -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

View file

@ -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
header
width: 100%;
height 600px;
border-top 5px $highlight solid
border-bottom 2px $tertiary solid
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
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;

View file

@ -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