finazling overall index design, added pug assets folder to ignore, added menu and recent post array to local variables for testing and set up

This commit is contained in:
Are0h 2020-05-13 12:35:14 -07:00
parent da63aed9e2
commit f177fe1718
10 changed files with 134 additions and 65 deletions

1
.gitignore vendored
View file

@ -2,3 +2,4 @@ node_modules
dist dist
.cache .cache
.DS_Store .DS_Store
assets

View file

@ -12,7 +12,6 @@
"node": ">=10.16.0" "node": ">=10.16.0"
}, },
"devDependencies": { "devDependencies": {
"cssnano": "^4.1.10",
"pug": "^2.0.4", "pug": "^2.0.4",
"stylus": "^0.54.7" "stylus": "^0.54.7"
} }

View file

@ -1,11 +1,12 @@
module.exports = { module.exports = {
locals: { locals: {
title: 'This is Fipamo', title: 'This is Fipamo',
welcome_message: 'Hey there',
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.',
base_path: '', base_path: '/src/front/',
default_bg: '/assets/images/global/default-bg.jpg', default_bg: '/assets/images/global/default-bg.jpg',
default_avi: '/assets/images/global/default-avi.png', default_avi: '/assets/images/global/default-avi.png',
content_index: content_index:
@ -31,6 +32,38 @@ module.exports = {
slug: 'page-three', slug: 'page-three',
uuid: 'b60d6843-e957-43ac-8425-65145142236d' uuid: 'b60d6843-e957-43ac-8425-65145142236d'
} }
],
recent_posts: [
{
title: 'Teyonah Parris',
slug: 'teyonah-parris',
feature: 'content/blog-images/2018/11/chi-raq.jpg',
created: '2018 Nov 11th'
},
{
title: 'Aja Naomi-King',
slug: 'aja-naomi-king',
feature: 'content/blog-images/2018/11/chi-raq.jpg',
created: '2018 Nov 11th'
},
{
title: 'Sonequa Martin-Green',
slug: 'sonequa-martin-green',
feature: 'content/blog-images/2018/11/chi-raq.jpg',
created: '2018 Nov 11th'
},
{
title: 'Jameela Jamil',
slug: 'jameela-jamil',
feature: 'content/blog-images/2018/11/chi-raq.jpg',
created: '2018 Nov 11th'
},
{
title: "I'm so behind",
slug: 'im-so-behind',
feature: 'content/blog-images/2018/11/chi-raq.jpg',
created: '2018 Nov 11th'
}
] ]
} }
}; };

View file

@ -227,7 +227,7 @@ html {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font: 400 1.1em/1.1em Helvetica, Arial, sans-serif; font: 400 1.3em/1.1em Helvetica, Arial, sans-serif;
} }
body { body {
color: #fff; color: #fff;
@ -240,6 +240,18 @@ body {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
a {
color: #7ed07e;
text-decoration: none;
border-bottom: 1px solid #d5cfba;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a:hover {
border-bottom: 1px solid #fc6399;
}
svg.icons { svg.icons {
width: 25px; width: 25px;
fill: #d5cfba; fill: #d5cfba;
@ -250,20 +262,21 @@ header {
position: relative; position: relative;
transform-style: inherit; transform-style: inherit;
width: 100vw; width: 100vw;
text-align: center;
color: #d5cfba; color: #d5cfba;
border-bottom: 1px #7ed07e solid; border-bottom: 1px #d5cfba solid;
border-top: 5px #7ed07e solid; border-top: 5px #7ed07e solid;
} }
header h1 { header span {
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: #34495e; font-weight: 100;
border-radius: 40px;
padding: 15px 20px 10px 20px; padding: 15px 20px 10px 20px;
font-size: 14em;
line-height: 1;
color: #7ed07e;
} }
header .menu { header .menu {
width: 100%; width: 100%;
@ -298,30 +311,37 @@ header::before {
width: 100%; width: 100%;
color: #32302f; color: #32302f;
} }
.container article .right, .container article {
.container article .left {
width: 49.9%;
display: inline-flex;
vertical-align: top;
justify-content: center;
background: #32302f;
}
.container article .left {
border-right: 1px #7ed07e solid;
}
.container article .inner {
position: relative; position: relative;
width: 80%; width: 80%;
height: 80%; height: 80%;
margin: 30px 0 30px 0; max-width: 840px;
min-height: 500px;
background: #32302f; background: #32302f;
vertical-align: top; vertical-align: top;
color: #d5cfba; color: #d5cfba;
margin: 0 auto;
} }
.container article .inner span { .container article span {
font: 600 1.5em/2 Helvetica, Arial, sans-serif; font: 600 2em/1.5 Helvetica, Arial, sans-serif;
color: #fc6399; color: #fc6399;
} }
.container article .index {
margin: 30px;
}
.container article .index label {
background: #32302f;
color: #d5cfba;
font-size: 1.5em;
line-height: 1.3;
}
.container article .index a {
font-size: 1.5em;
line-height: 1.3;
margin-bottom: 10px;
margin-right: 10px;
font-weight: 400;
}
.container section { .container section {
color: #d5cfba; color: #d5cfba;
} }

File diff suppressed because one or more lines are too long

View file

@ -198,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 + ':' + "52397" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "64438" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
checkedAssets = {}; checkedAssets = {};

File diff suppressed because one or more lines are too long

View file

@ -20,7 +20,7 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
| LINKZ | LINKZ
br br
| LINKZ | LINKZ
h1 Hello There span= welcome_message
script(src='/assets/scripts/start.min.js' type="text/javascript") script(src='/assets/scripts/start.min.js' type="text/javascript")

View file

@ -2,16 +2,19 @@ extends frame
block main-content block main-content
article article
.left .index
.inner
span= title span= title
div !{content_index} p !{content_index}
.right
.inner
span Recent span Recent
//button br
svg(viewBox="0 0 20 20" class="icons") - var index = 0;
use(xlink:href='/assets/images/global/sprite.svg#entypo-plus' data-action='') - for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].slug)= recent_posts[index].title
label= recent_posts[index].created
br
br
a(href='/archives') Post Archive
label The whole dirty.
footer footer
| © 2020 Fipamo by PV | © 2020 Fipamo by PV

View file

@ -4,7 +4,7 @@ html
width 100% width 100%
height 100% height 100%
overflow hidden overflow hidden
font 400 1.1em/1.1em $bodyTypeSans font 400 1.3em/1.1em $bodyTypeSans
body body
color white color white
@ -17,6 +17,14 @@ body
overflow-y scroll overflow-y scroll
overflow-x hidden overflow-x hidden
a
color $highlight
text-decoration none
border-bottom 1px solid $white
object-transitions(.2s)
&:hover
border-bottom 1px solid $secondary
svg.icons svg.icons
width 25px width 25px
fill $white fill $white
@ -27,19 +35,21 @@ header
position relative position relative
transform-style inherit transform-style inherit
width 100vw width 100vw
text-align center //text-align center
color $white color $white
border-bottom 1px $highlight solid border-bottom 1px $white solid
border-top 5px $highlight solid border-top 5px $highlight solid
h1 span
margin 0 margin 0
position absolute position absolute
top 50% top 50%
left 50% left 50%
transform translate(-50%, -50%) transform translate(-50%, -50%)
background $primary font-weight: 100
border-radius 40px
padding 15px 20px 10px 20px padding 15px 20px 10px 20px
font-size 14em
line-height 1
color $highlight
.menu .menu
width: 100% width: 100%
text-align: left text-align: left
@ -55,7 +65,6 @@ header::before
right 0 right 0
bottom 0 bottom 0
display block display block
//background url('/assets/images/global/default-bg.jpg')
background-size cover background-size cover
transform-origin center center 0 transform-origin center center 0
transform translateZ(-1px) scale(2) transform translateZ(-1px) scale(2)
@ -73,27 +82,31 @@ header::before
//padding 40px //padding 40px
color $black color $black
article article
.right, .left
//min-height 500px;
width 49.9%
display inline-flex
vertical-align: top
//align-items center
justify-content center
background $black
.left
border-right 1px $highlight solid
.inner
position relative position relative
width: 80% width: 80%
height 80% height 80%
margin 30px 0 30px 0 max-width 840px
min-height 500px
background $black background $black
vertical-align top vertical-align top
color $white color $white
margin 0 auto
span span
custom-header(600, 1.5em, 2, $secondary) custom-header(600, 2em, 1.5, $secondary)
.index
margin 30px
label
background $black
color $white
font-size 1.5em
line-height 1.3
a
font-size 1.5em
line-height 1.3
margin-bottom 10px
margin-right 10px
font-weight 400
section section
color $white color $white