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

develop
Are0h 5 years ago
parent da63aed9e2
commit f177fe1718

1
.gitignore vendored

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

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

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

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

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

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

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

@ -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 position relative
//min-height 500px; width: 80%
width 49.9% height 80%
display inline-flex max-width 840px
vertical-align: top min-height 500px
//align-items center background $black
justify-content center vertical-align top
background $black color $white
.left margin 0 auto
border-right 1px $highlight solid span
custom-header(600, 2em, 1.5, $secondary)
.inner .index
position relative margin 30px
width: 80% label
height 80%
margin 30px 0 30px 0
background $black background $black
vertical-align top
color $white color $white
span font-size 1.5em
custom-header(600, 1.5em, 2, $secondary) 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

Loading…
Cancel
Save