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

1
package.json
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"
} }

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

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

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') { 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 = {};

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

23
src/front/index.pug
View file

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

65
src/styles/_structure.styl
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 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