projects/fipamothemekit
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

1
package.json
View file

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

35
pug.config.js
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'
}
]
}
};

62
src/front/assets/css/base.css
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;
}

2
src/front/assets/css/base.css.map
View file

File diff suppressed because one or more lines are too long

2
src/front/assets/scripts/start.min.js vendored
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 = {};

2
src/front/assets/scripts/start.min.js.map
View file

File diff suppressed because one or more lines are too long

2
src/front/frame.pug
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")

23
src/front/index.pug
View file

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

65
src/styles/_structure.styl
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
position relative
width: 80%
height 80%
max-width 840px
min-height 500px
background $black
vertical-align top
color $white
margin 0 auto
span
custom-header(600, 2em, 1.5, $secondary)
.index
margin 30px
label
background $black
vertical-align top
color $white
span
custom-header(600, 1.5em, 2, $secondary)
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