are0h
/
FipamoThemeKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

tweaking css for new layout

Browse Source
develop
Are0h 5 years ago
parent f17bf28d71
commit 2b963e69ee
12 changed files with 116 additions and 609 deletions
Show Stats Download Patch File Download Diff File

572
assets/css/base.css
Unescape Escape 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 {
width: 100%;
max-width: 1024px;
position: relative;
.main-container header {
width: 100%;
font-size: 1em;
padding: 20px;
opacity: 0;
color: #ebdfce;
}
.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 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;
height: 600px;
border-top: 5px #7ed07e solid;
border-bottom: 2px #f9690e solid;
}
.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 {
overflow: hidden;
}
.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 */

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
Unescape Escape 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

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

File diff suppressed because one or more lines are too long

9
index.pug
Unescape Escape 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-content
span= title
div !{content_index}

19
package.json
Unescape Escape 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
Unescape Escape 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' }]
}

10
src/styles/_colors.styl
Unescape Escape 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;

1
src/styles/_index.styl
Unescape Escape View File

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

4
src/styles/_mixins.styl
Unescape Escape 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

79
src/styles/_structure.styl
Unescape Escape 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
@ -16,68 +16,27 @@ a:hover
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
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;
overflow hidden
#index-content
span
custom-header(600, 2em, 2, $secondary)
div

5
src/styles/_typography.styl
Unescape Escape 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

Write Preview
Loading…
Cancel
Save