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
parent
da63aed9e2
commit
f177fe1718
10 changed files with 134 additions and 65 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -2,3 +2,4 @@ node_modules
|
|||
dist
|
||||
.cache
|
||||
.DS_Store
|
||||
assets
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
"node": ">=10.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^4.1.10",
|
||||
"pug": "^2.0.4",
|
||||
"stylus": "^0.54.7"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
2
src/front/assets/scripts/start.min.js
vendored
2
src/front/assets/scripts/start.min.js
vendored
|
|
@ -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
|
|
@ -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")
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue