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
.cache
.DS_Store
assets

View file

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

View file

@ -1,11 +1,12 @@
module.exports = {
locals: {
title: 'This is Fipamo',
welcome_message: 'Hey there',
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.',
base_path: '',
base_path: '/src/front/',
default_bg: '/assets/images/global/default-bg.jpg',
default_avi: '/assets/images/global/default-avi.png',
content_index:
@ -31,6 +32,38 @@ module.exports = {
slug: 'page-three',
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%;
height: 100%;
overflow: hidden;
font: 400 1.1em/1.1em Helvetica, Arial, sans-serif;
font: 400 1.3em/1.1em Helvetica, Arial, sans-serif;
}
body {
color: #fff;
@ -240,6 +240,18 @@ body {
overflow-y: scroll;
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 {
width: 25px;
fill: #d5cfba;
@ -250,20 +262,21 @@ header {
position: relative;
transform-style: inherit;
width: 100vw;
text-align: center;
color: #d5cfba;
border-bottom: 1px #7ed07e solid;
border-bottom: 1px #d5cfba solid;
border-top: 5px #7ed07e solid;
}
header h1 {
header span {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #34495e;
border-radius: 40px;
font-weight: 100;
padding: 15px 20px 10px 20px;
font-size: 14em;
line-height: 1;
color: #7ed07e;
}
header .menu {
width: 100%;
@ -298,30 +311,37 @@ header::before {
width: 100%;
color: #32302f;
}
.container article .right,
.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 {
.container article {
position: relative;
width: 80%;
height: 80%;
margin: 30px 0 30px 0;
max-width: 840px;
min-height: 500px;
background: #32302f;
vertical-align: top;
color: #d5cfba;
margin: 0 auto;
}
.container article .inner span {
font: 600 1.5em/2 Helvetica, Arial, sans-serif;
.container article span {
font: 600 2em/1.5 Helvetica, Arial, sans-serif;
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 {
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') {
var hostname = "" || location.hostname;
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) {
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
br
| LINKZ
h1 Hello There
span= welcome_message
script(src='/assets/scripts/start.min.js' type="text/javascript")

View file

@ -2,16 +2,19 @@ extends frame
block main-content
article
.left
.inner
.index
span= title
div !{content_index}
.right
.inner
p !{content_index}
span Recent
//button
svg(viewBox="0 0 20 20" class="icons")
use(xlink:href='/assets/images/global/sprite.svg#entypo-plus' data-action='')
br
- var index = 0;
- 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
| © 2020 Fipamo by PV

View file

@ -4,7 +4,7 @@ html
width 100%
height 100%
overflow hidden
font 400 1.1em/1.1em $bodyTypeSans
font 400 1.3em/1.1em $bodyTypeSans
body
color white
@ -17,6 +17,14 @@ body
overflow-y scroll
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
width 25px
fill $white
@ -27,19 +35,21 @@ header
position relative
transform-style inherit
width 100vw
text-align center
//text-align center
color $white
border-bottom 1px $highlight solid
border-bottom 1px $white solid
border-top 5px $highlight solid
h1
span
margin 0
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
background $primary
border-radius 40px
font-weight: 100
padding 15px 20px 10px 20px
font-size 14em
line-height 1
color $highlight
.menu
width: 100%
text-align: left
@ -55,7 +65,6 @@ header::before
right 0
bottom 0
display block
//background url('/assets/images/global/default-bg.jpg')
background-size cover
transform-origin center center 0
transform translateZ(-1px) scale(2)
@ -73,27 +82,31 @@ header::before
//padding 40px
color $black
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
width: 80%
height 80%
margin 30px 0 30px 0
max-width 840px
min-height 500px
background $black
vertical-align top
color $white
margin 0 auto
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
color $white