getting the initial stuff in there until I sort out the defaults
This commit is contained in:
Are0h
parent
0cf83844fa
commit
45626c8847
22 changed files with 3352 additions and 0 deletions
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
dist
|
||||
.cache
|
||||
.DS_Store
|
||||
assets
|
||||
19
frame.pug
Normal file
19
frame.pug
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
doctype html
|
||||
html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
||||
head
|
||||
title= title
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
meta(name="keywords" content="creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek")
|
||||
meta(name="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.")
|
||||
meta(http-equiv="content-type", content="text/html; charset=utf-8")
|
||||
meta(property="og:image" content=image)
|
||||
meta(name="twitter:image" content=image)
|
||||
link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
|
||||
body
|
||||
#loader
|
||||
i.fa.fa-cog.fa-spin.fa-4x.fa-fw
|
||||
.main-container#main-content
|
||||
block main-content
|
||||
script(src='/assets/scripts/start.min.js' type="text/javascript")
|
||||
|
||||
|
||||
35
index.pug
Normal file
35
index.pug
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
extends frame
|
||||
|
||||
block main-content
|
||||
section#index-content
|
||||
header.columns#header
|
||||
#float-bg
|
||||
img(src='/assets/images/eye-beamz.png')
|
||||
#header-one.column
|
||||
#header-two.column
|
||||
label#the-title
|
||||
a(href="/") thetwelfthhouse
|
||||
#the-intro
|
||||
| I'm Ro. I am a
|
||||
a(href='/work') freelancer
|
||||
|,
|
||||
a(href='/blog/page/1') thinker
|
||||
|,
|
||||
a(href='https://playvicious.social' target="_blank") masto admin
|
||||
|,
|
||||
a(href='/fipamo') a pack rat
|
||||
|, and I'm kinda trying to
|
||||
a(href="https://www.patreon.com/Are0h" target="_blank") save the world.
|
||||
#index-display
|
||||
#recent-title.index-block
|
||||
| "Boards do not hit back" © Bruce Lee
|
||||
//svg(viewBox="0 0 20 20" class="icons")
|
||||
use(xlink:href='/assets/images/sprite.svg#entypo-air')
|
||||
#index-content
|
||||
div !{content_index}
|
||||
span Shit. I think I just made a theme kit for Fipamo
|
||||
br
|
||||
| Not perfect, but it's workable...
|
||||
-var count = bucket[2].item
|
||||
p= count
|
||||
|
||||
2174
package-lock.json
generated
Normal file
2174
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
11
package.json
Normal file
11
package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
|
||||
{"scripts":{
|
||||
"dev": "stylus -w -m -o assets/css src/styles/base.styl & parcel watch src/com/Start.jsx --out-dir assets/scripts --out-file start.min.js & parcel index.pug page.pug"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^4.1.10",
|
||||
"pug": "^2.0.4",
|
||||
"stylus": "^0.54.7"
|
||||
}
|
||||
}
|
||||
10
page.pug
Normal file
10
page.pug
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
extends frame
|
||||
|
||||
block main-content
|
||||
section#index-content
|
||||
#index-display
|
||||
#recent-title.index-block
|
||||
|
||||
#index-content
|
||||
div !{content_page}
|
||||
span YAAAAAAAHS KHAALEEEEESI
|
||||
8
pug.config.js
Normal file
8
pug.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
module.exports = {
|
||||
locals: {
|
||||
title: "Fipamo Theme Kit",
|
||||
content_index: "This is some page content... for your broke ass",
|
||||
content_page: "This is some page content... for your broke ass",
|
||||
bucket: [{item: "one"}, {item: "two"}, {item: "three"}]
|
||||
}
|
||||
};
|
||||
25
src/com/Base.jsx
Normal file
25
src/com/Base.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
|
||||
export default class Base {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
|
||||
//TODO: Flip to unified structure defined in BMG, brah
|
||||
constructor() {
|
||||
|
||||
this.start();
|
||||
}
|
||||
start() {
|
||||
console.log("I knoooooooow you see it... ");
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
|
||||
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
|
||||
}
|
||||
6
src/com/Start.jsx
Normal file
6
src/com/Start.jsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import Base from './Base.jsx'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
var base = new Base();
|
||||
}, false);
|
||||
95
src/styles/base.styl
Normal file
95
src/styles/base.styl
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/**
|
||||
-------------------------------
|
||||
-- Bulma
|
||||
-------------------------------
|
||||
**/
|
||||
//@import '/../../node_modules/bulma.styl/bulma.styl'
|
||||
//@import "../../../../node_modules/bulma.styl/stylus/utilities/_all"
|
||||
//@import "../../../../node_modules/bulma.styl/stylus/grid/columns"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Typography
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import "main/_typography"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Colors
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import "main/_colors"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Mixins
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import 'main/_mixins'
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Normalize
|
||||
-------------------------------
|
||||
**/
|
||||
@import 'main/_normalize'
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Main Structure
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import "main/_structure"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Index
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import "main/_index"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Fipamo
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import "main/_fipamo"
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Folio
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import 'main/_folio'
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Admin
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import 'main/_admin'
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Forms
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import 'main/_forms'
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Blog
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@import 'main/_blog'
|
||||
197
src/styles/main/_admin.styl
Normal file
197
src/styles/main/_admin.styl
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
#admin-index-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
|
||||
#admin-index-display
|
||||
padding 20px
|
||||
width 100%
|
||||
max-width 1024px
|
||||
z-index 10
|
||||
position relative
|
||||
#admin-login
|
||||
width 300px
|
||||
#admin-index-title
|
||||
color $white
|
||||
font 400 2em $titleType
|
||||
vertical-align top
|
||||
.admin-menu-main
|
||||
.admin-nav
|
||||
span
|
||||
display inline-block
|
||||
padding 0 0 0 5px
|
||||
.index-block
|
||||
width 50%
|
||||
display inline-block
|
||||
vertical-align top
|
||||
margin-bottom 50px
|
||||
|
||||
#blog-edit
|
||||
label
|
||||
font 600 1em $titleType
|
||||
color $white
|
||||
textarea#entry_title
|
||||
width 100%
|
||||
background none
|
||||
color $tertiary
|
||||
font 500 2em $titleType
|
||||
textarea#entry_text
|
||||
width 100%
|
||||
height 600px
|
||||
padding 10px
|
||||
|
||||
#blog-meta
|
||||
label
|
||||
font 600 1em $titleType
|
||||
color $white
|
||||
input, button
|
||||
width 100%
|
||||
input
|
||||
color $secondary
|
||||
background $black
|
||||
#featured-click
|
||||
display none
|
||||
|
||||
#blog-index-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
#blog-hub-display
|
||||
#blog-hub-title
|
||||
font 400 2em $titleType
|
||||
color $white
|
||||
|
||||
#saved-index-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
#saved-hub-display
|
||||
#saved-hub-title, #saved-hub-main
|
||||
label
|
||||
font 400 2em $titleType
|
||||
color $white
|
||||
textarea
|
||||
width 90%
|
||||
button
|
||||
padding 5px
|
||||
|
||||
|
||||
|
||||
#post-edit-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
header#header
|
||||
#header-one
|
||||
#blog-edit
|
||||
margin 100px 0 0 0
|
||||
position relative
|
||||
label
|
||||
font 600 1em $titleType
|
||||
color $white
|
||||
display block
|
||||
#entry_title
|
||||
width 90%
|
||||
background none
|
||||
font 400 2em $titleType
|
||||
color $tertiary
|
||||
#entry_text
|
||||
width 90%
|
||||
height 500px
|
||||
padding 10px
|
||||
pre
|
||||
background $black
|
||||
code
|
||||
white-space pre-wrap
|
||||
color $tertiary
|
||||
#header-two
|
||||
label
|
||||
font 600 1em $titleType
|
||||
color $white
|
||||
#featured-image-drop
|
||||
border-radius 3px
|
||||
border 1px dashed $white
|
||||
width 100%
|
||||
font 600 .5em $titleType
|
||||
height 100px
|
||||
text-align center
|
||||
vertical-align middle
|
||||
line-height 100px
|
||||
overflow hidden
|
||||
img
|
||||
width 100%
|
||||
|
||||
#blog-meta
|
||||
margin 100px 0 0 0
|
||||
position relative
|
||||
#featured-click
|
||||
display none
|
||||
#entry_tags, button
|
||||
width 100%
|
||||
|
||||
|
||||
.folio-project-form
|
||||
display inline-block
|
||||
width 56%
|
||||
|
||||
input[type=email], input[type=password], input[type=text], select
|
||||
width 400px
|
||||
select
|
||||
margin: 10px 0 0 0
|
||||
|
||||
textarea
|
||||
width 400px
|
||||
height 133px
|
||||
|
||||
.folio-hub
|
||||
padding 20px
|
||||
|
||||
span
|
||||
margin 10px 10px 0 0
|
||||
.btn-add-project span
|
||||
font 20px $bodyType
|
||||
margin: -35px 0 0 40px;
|
||||
display block
|
||||
height: 50px
|
||||
|
||||
.project-list
|
||||
width 95%
|
||||
span.drag-handle
|
||||
padding: 10px;
|
||||
color $tertiary
|
||||
cursor pointer
|
||||
.project-item
|
||||
width: 100%;
|
||||
display: inline-block
|
||||
background lightness($primary, 20%)
|
||||
padding: 5px
|
||||
margin-bottom 10px
|
||||
border-radius: 5px;
|
||||
object-transitions(.3s)
|
||||
.project-item:hover
|
||||
background lightness($primary, 30%)
|
||||
|
||||
.upload-list
|
||||
color lightness($primary, 80%)
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 260px
|
||||
height 330px
|
||||
margin 45px 0 0
|
||||
|
||||
.thumb
|
||||
height 50px
|
||||
overflow hidden
|
||||
border-radius 3px
|
||||
margin 10px 5px 0 0
|
||||
|
||||
.upload-drop
|
||||
width 400px
|
||||
height 70px
|
||||
background $form-background
|
||||
color lightness($primary, 80%)
|
||||
text-align center
|
||||
padding 40px 0 0
|
||||
font-size 12px
|
||||
text-transform uppercase
|
||||
border-radius 3px
|
||||
65
src/styles/main/_blog.styl
Normal file
65
src/styles/main/_blog.styl
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
#blog-content
|
||||
|
||||
#blog-display
|
||||
#blog-list
|
||||
.blog-entry
|
||||
display inline-block
|
||||
height 500px;
|
||||
width 50%
|
||||
background-size cover
|
||||
background $black
|
||||
position relative
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 250px;
|
||||
label
|
||||
background $secondary
|
||||
padding 5px
|
||||
border-radius 3px
|
||||
|
||||
|
||||
#post-content
|
||||
width 100%
|
||||
margin -10px 0 0 0
|
||||
#header-post
|
||||
width 100%
|
||||
min-height 350px
|
||||
background $black
|
||||
position relative
|
||||
padding 0
|
||||
margin 0
|
||||
img
|
||||
padding 0
|
||||
margin 0
|
||||
position relative
|
||||
display block
|
||||
width 100%
|
||||
#header-one
|
||||
position relative
|
||||
width 80%
|
||||
margin 0 auto
|
||||
padding 30px 0 0 0
|
||||
|
||||
label#the-title a
|
||||
font 500 2em $titleType
|
||||
width 97px
|
||||
height 115px
|
||||
color $secondary
|
||||
text-decoration none
|
||||
display block
|
||||
word-break: break-all
|
||||
margin 10px 0 0 10px
|
||||
span#post-title
|
||||
font 200 4.5em/1em $titleType
|
||||
color $white
|
||||
margin 20px 0 0 10px
|
||||
padding 20px 0 80px 0
|
||||
display block
|
||||
|
||||
|
||||
#post-display
|
||||
color $tertiary
|
||||
width 80%
|
||||
margin 50px auto
|
||||
font 400 1.5em $bodyType
|
||||
padding-bottom 50px
|
||||
8
src/styles/main/_colors.styl
Normal file
8
src/styles/main/_colors.styl
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
$primary = #2B8CAF;
|
||||
$secondary = #EB6B99;
|
||||
$tertiary = #EBDFCE;
|
||||
$highlight = #BAF273;
|
||||
$white = #eee;
|
||||
$black = #32302f;
|
||||
|
||||
//Bulma overrides
|
||||
71
src/styles/main/_fipamo.styl
Normal file
71
src/styles/main/_fipamo.styl
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
#bm-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
#header-one, #header-two
|
||||
label#the-title
|
||||
a(href="/") thetwelfthhouse
|
||||
#header-two
|
||||
font 400 1.5em $bodyType
|
||||
#bookmark-display
|
||||
padding 0
|
||||
.bookmark-list
|
||||
.bookmark-entry
|
||||
background lightness($primary, 15%)
|
||||
width 50%
|
||||
height 500px
|
||||
background-size cover
|
||||
overflow hidden
|
||||
display inline-block
|
||||
vertical-align top
|
||||
//border-radius 3px
|
||||
padding 10px
|
||||
.bookmark-info
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
width 100%
|
||||
height 100%
|
||||
label
|
||||
display block
|
||||
font-size .5em
|
||||
padding 10px
|
||||
background $primary
|
||||
border-radius 5px
|
||||
#paginate-control
|
||||
width 100%
|
||||
height 300px
|
||||
background lightness($primary, 30%)
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
#paginate
|
||||
|
||||
margin 0 auto
|
||||
a, label
|
||||
display inline-block
|
||||
vertical-align top
|
||||
label
|
||||
padding 5px
|
||||
color $tertiary
|
||||
font-size 2.2em
|
||||
a
|
||||
padding 20px
|
||||
margin-top 4px
|
||||
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@media only screen and (max-width: 768px)
|
||||
#bm-content
|
||||
#bookmark-display
|
||||
.bookmark-list
|
||||
.bookmark-entry
|
||||
width 100%
|
||||
|
||||
|
||||
96
src/styles/main/_folio.styl
Normal file
96
src/styles/main/_folio.styl
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
#work-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
#header
|
||||
#header-two
|
||||
p
|
||||
font 400 1.5em $bodyType
|
||||
span
|
||||
color $secondary
|
||||
#work-display
|
||||
padding 0
|
||||
margin 0 0 40px 0
|
||||
opacity 0
|
||||
|
||||
|
||||
#work-list
|
||||
|
||||
.work-item
|
||||
width 50%
|
||||
height 300px
|
||||
display inline-block
|
||||
vertical-align top
|
||||
background-size cover
|
||||
background-color $tertiary
|
||||
color $tertiary
|
||||
span
|
||||
font 600 .7em $titleType
|
||||
|
||||
#work-contact
|
||||
#contact-form
|
||||
opacity 1
|
||||
label
|
||||
font 600 .8em $titleType
|
||||
color $highlight
|
||||
margin 0 0 15px 0
|
||||
display block
|
||||
#request-form
|
||||
input[type=email], input[type=password], input[type=text]
|
||||
width 100%
|
||||
margin 0 10px 10px 0
|
||||
|
||||
select
|
||||
width 100%
|
||||
margin-bottom: 10px;
|
||||
|
||||
textarea
|
||||
width: 100%
|
||||
#contact-info
|
||||
label#request-status
|
||||
font 600 .8em $titleType
|
||||
color $highlight
|
||||
margin 0 0 15px 0
|
||||
display block
|
||||
text-transform uppercase
|
||||
p
|
||||
font 400 1em $bodyType
|
||||
color $tertiary
|
||||
i
|
||||
color $highlight
|
||||
|
||||
|
||||
#project-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto
|
||||
#project-display
|
||||
padding: 0 20px 20px 20px
|
||||
|
||||
#project-info
|
||||
span
|
||||
font 400 2em $titleType
|
||||
color $white
|
||||
#project-desc
|
||||
font 300 1.2em $bodyType
|
||||
color $tertiary
|
||||
#project-images
|
||||
margin 10px 0 0 0
|
||||
opacity 1
|
||||
.folio-image
|
||||
width 100%
|
||||
margin 0 0 50px 0
|
||||
opacity 0
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
#work-content
|
||||
#work-list
|
||||
.work-item
|
||||
width 100%
|
||||
|
||||
54
src/styles/main/_forms.styl
Normal file
54
src/styles/main/_forms.styl
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
form
|
||||
display inline-block
|
||||
|
||||
input[type=email], input[type=password], input[type=text]
|
||||
border 0
|
||||
border-radius 5px
|
||||
padding 5px
|
||||
margin 10px 5px 0 0
|
||||
font 15px 'RobotoMono'
|
||||
display inline-block
|
||||
|
||||
textarea
|
||||
border 0
|
||||
border-radius 3px
|
||||
color $type02
|
||||
font 15px 'RobotoMono'
|
||||
|
||||
button, input[type=submit]
|
||||
background $highlight
|
||||
color $primary
|
||||
font 14px 'RobotoMono'
|
||||
border-radius 5px
|
||||
position relative
|
||||
cursor pointer
|
||||
border 0
|
||||
|
||||
select
|
||||
font 14px 'RobotoMono'
|
||||
border 1px solid $secondary
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
appearance none
|
||||
// background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #000;
|
||||
color $primary
|
||||
|
||||
::-webkit-input-placeholder
|
||||
font 14px 'RobotoMono'
|
||||
color lightness($black, 50%)
|
||||
|
||||
:-moz-placeholder
|
||||
/* Firefox 18- */
|
||||
font 14px 'RobotoMono'
|
||||
color lightness($black, 50%)
|
||||
|
||||
::-moz-placeholder
|
||||
/* Firefox 19+ */
|
||||
font 14px 'RobotoMono'
|
||||
color lightness($black, 50%)
|
||||
|
||||
:-ms-input-placeholder
|
||||
font 14px 'RobotoMono'
|
||||
color lightness($black, 50%)
|
||||
|
||||
|
||||
25
src/styles/main/_index.styl
Normal file
25
src/styles/main/_index.styl
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
#index-content
|
||||
width 100%
|
||||
max-width 1024px
|
||||
margin 0 auto;
|
||||
header
|
||||
#header-one
|
||||
#header-two
|
||||
#the-intro
|
||||
margin 80px 0 0 0
|
||||
#index-display
|
||||
padding 20px
|
||||
width 100%
|
||||
max-width 1024px
|
||||
font-size 1em
|
||||
z-index 10
|
||||
position relative
|
||||
#recent-title
|
||||
color $white
|
||||
font 400 2em $titleType
|
||||
vertical-align top
|
||||
.index-block
|
||||
width 50%
|
||||
display inline-block
|
||||
vertical-align top
|
||||
margin-bottom 50px
|
||||
12
src/styles/main/_mixins.styl
Normal file
12
src/styles/main/_mixins.styl
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur)
|
||||
text-shadow: offsetX offsetY blur rgba(rgb-value, opacity);
|
||||
|
||||
|
||||
object-transitions(rate)
|
||||
-moz-transition:all rate linear;
|
||||
-webkit-transition:all rate linear;
|
||||
-o-transition:all rate linear;
|
||||
transition:all rate linear;
|
||||
|
||||
background-opacity(rgb-value, opacity)
|
||||
background: rgba(rgb-value, opacity);
|
||||
196
src/styles/main/_normalize.styl
Normal file
196
src/styles/main/_normalize.styl
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
html
|
||||
line-height 1.15
|
||||
-ms-text-size-adjust 100%
|
||||
-webkit-text-size-adjust 100%
|
||||
|
||||
body
|
||||
margin 0
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section
|
||||
display block
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
margin 0.67em 0
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main
|
||||
display block
|
||||
|
||||
figure
|
||||
margin 1em 40px
|
||||
|
||||
hr
|
||||
box-sizing content-box
|
||||
height 0
|
||||
overflow visible
|
||||
|
||||
pre
|
||||
font-family monospace, monospace
|
||||
font-size 1em
|
||||
a
|
||||
background-color transparent
|
||||
-webkit-text-decoration-skip objects
|
||||
|
||||
a:active,
|
||||
a:hover
|
||||
outline-width 0
|
||||
|
||||
abbr[title]
|
||||
border-bottom none
|
||||
text-decoration underline
|
||||
text-decoration underline dotted
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight inherit
|
||||
font-weight bolder
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp
|
||||
font-family monospace, monospace
|
||||
font-size 1em
|
||||
|
||||
dfn
|
||||
font-style italic
|
||||
|
||||
mark
|
||||
background-color #ff0
|
||||
color #000
|
||||
|
||||
small
|
||||
font-size 80%
|
||||
|
||||
sub,
|
||||
sup
|
||||
font-size 60%
|
||||
line-height 0
|
||||
position relative
|
||||
vertical-align baseline
|
||||
|
||||
sub
|
||||
bottom -0.25em
|
||||
|
||||
sup
|
||||
top -0.55em
|
||||
background lightness($primary, 80%)
|
||||
color $primary
|
||||
border-radius: 2px;
|
||||
padding 0 2px 0 2px
|
||||
margin: 0 2px 0 0
|
||||
|
||||
audio,
|
||||
video
|
||||
display inline-block
|
||||
|
||||
audio
|
||||
&:not([controls])
|
||||
display none
|
||||
height 0
|
||||
|
||||
img
|
||||
border-style none
|
||||
|
||||
svg
|
||||
&:not(:root)
|
||||
overflow hidden
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family sans-serif
|
||||
font-size 100%
|
||||
line-height 1.15
|
||||
margin 0
|
||||
|
||||
button,
|
||||
input
|
||||
overflow visible
|
||||
|
||||
button,
|
||||
select
|
||||
text-transform none
|
||||
|
||||
button, html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
-webkit-appearance button
|
||||
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner,
|
||||
button::-moz-focus-inner
|
||||
border-style none
|
||||
padding 0
|
||||
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring,
|
||||
button:-moz-focusring
|
||||
outline 1px dotted ButtonText
|
||||
|
||||
fieldset
|
||||
border 1px solid #c0c0c0
|
||||
margin 0 2px
|
||||
padding 0.35em 0.625em 0.75em
|
||||
|
||||
legend
|
||||
box-sizing border-box
|
||||
color inherit
|
||||
display table
|
||||
max-width 100%
|
||||
padding 0
|
||||
white-space normal
|
||||
|
||||
progress
|
||||
display inline-block
|
||||
vertical-align baseline
|
||||
|
||||
textarea
|
||||
overflow auto
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
box-sizing border-box
|
||||
padding 0
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button
|
||||
height auto
|
||||
|
||||
[type="search"]
|
||||
-webkit-appearance textfield
|
||||
outline-offset -2px
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance none
|
||||
|
||||
::-webkit-file-upload-button
|
||||
-webkit-appearance button
|
||||
font inherit
|
||||
|
||||
details,
|
||||
menu
|
||||
display block
|
||||
|
||||
summary
|
||||
display list-item
|
||||
|
||||
canvas
|
||||
display inline-block
|
||||
|
||||
template
|
||||
display none
|
||||
|
||||
[hidden]
|
||||
display none
|
||||
163
src/styles/main/_structure.styl
Normal file
163
src/styles/main/_structure.styl
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
html
|
||||
background url('../images/bg-teal-pattern.png')
|
||||
font 300 1em $bodyType
|
||||
color $tertiary
|
||||
|
||||
a
|
||||
font 300 1em $titleType
|
||||
color $highlight
|
||||
text-decoration underline
|
||||
object-transitions(.1s)
|
||||
|
||||
a:hover
|
||||
color lightness($highlight, 90%)
|
||||
background $primary
|
||||
|
||||
svg.icons
|
||||
width 20px
|
||||
fill $secondary
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color $secondary !important
|
||||
font-weight 600 !important
|
||||
|
||||
#loader
|
||||
position fixed
|
||||
z-index 2000
|
||||
height 100%
|
||||
width 100%
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
i
|
||||
color $tertiary
|
||||
|
||||
.blog-container
|
||||
width 100%
|
||||
.main-container
|
||||
margin 0 auto
|
||||
z-index 10
|
||||
position relative
|
||||
section
|
||||
header
|
||||
width 100%
|
||||
max-width 1024px
|
||||
#float-bg
|
||||
background url('../images/bg-teal-pattern.png')
|
||||
position absolute
|
||||
z-index 5
|
||||
//height 100%
|
||||
//width 100%
|
||||
//display flex
|
||||
//align-items center
|
||||
//justify-content center
|
||||
isolation isolate
|
||||
opacity 0
|
||||
left 20%
|
||||
img
|
||||
width 250px
|
||||
mix-blend-mode multiply
|
||||
|
||||
|
||||
|
||||
position relative
|
||||
width 100%
|
||||
font-size 1em
|
||||
padding 20px
|
||||
opacity 0
|
||||
color $tertiary
|
||||
|
||||
#header-one, #header-two
|
||||
z-index 10
|
||||
position relative
|
||||
label#the-title a
|
||||
font 500 2em $titleType
|
||||
width 97px
|
||||
height 100px;
|
||||
color $secondary
|
||||
text-decoration none
|
||||
display block
|
||||
word-break: break-all;
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
**/
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
.main-container
|
||||
.content
|
||||
#the-intro
|
||||
font-size: 31px;
|
||||
line-height: 35px;
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
.main-container
|
||||
.content
|
||||
#the-intro
|
||||
font-size: 25px;
|
||||
line-height: 33px;
|
||||
#index-display
|
||||
span, a
|
||||
font 400 1.2em $bodyType
|
||||
|
||||
|
||||
@media only screen and (max-width: 375px)
|
||||
|
||||
.main-container
|
||||
.header
|
||||
width 90%
|
||||
.header-desc
|
||||
h1
|
||||
line-height: 1rem;
|
||||
font-size: 3.3rem;
|
||||
span a
|
||||
color $white
|
||||
width 250px
|
||||
font-weight 300
|
||||
display inline-block
|
||||
word-break: break-all;
|
||||
font 300 7em/1em $titleType
|
||||
text-decoration none
|
||||
margin 0 0 50px 0
|
||||
#the-intro
|
||||
color $secondary
|
||||
opacity 0
|
||||
font 400 1.8em $titleType
|
||||
display inline-block
|
||||
width 95%
|
||||
#item-intro
|
||||
width 95%
|
||||
label
|
||||
font-size 2em
|
||||
|
||||
.content
|
||||
#the-intro
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
#index-display
|
||||
label
|
||||
font-size 7em
|
||||
#recent-work, #recent-blog
|
||||
float none
|
||||
display block
|
||||
margin 0 auto
|
||||
text-align left
|
||||
padding-bottom 30px
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
.main-container
|
||||
.header
|
||||
.header-desc
|
||||
h1
|
||||
line-height: 1rem;
|
||||
font-size: 2.9rem;
|
||||
|
||||
.content
|
||||
#the-intro
|
||||
font-size: 19px;
|
||||
line-height: 28px;
|
||||
70
src/styles/main/_typography.styl
Normal file
70
src/styles/main/_typography.styl
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
@font-face
|
||||
font-weight 400
|
||||
font-style normal
|
||||
font-family 'AlteHaasGrotesk'
|
||||
src url('fonts/app/AlteHaasGroteskRegular.eot'),
|
||||
url('fonts/app/AlteHaasGroteskRegular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/AlteHaasGroteskRegular.woff2') format('woff2'),
|
||||
url('fonts/app/AlteHaasGroteskRegular.woff') format('woff'),
|
||||
url('fonts/app/AlteHaasGroteskRegular.ttf') format('truetype'),
|
||||
url('fonts/app/AlteHaasGroteskRegular.svg?#AlteHaasGrotesk') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 600
|
||||
font-style normal
|
||||
font-family 'AlteHaasGrotesk'
|
||||
src url('fonts/app/AlteHaasGroteskBold.eot'),
|
||||
url('fonts/app/AlteHaasGroteskBold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/AlteHaasGroteskBold.woff2') format('woff2'),
|
||||
url('fonts/app/AlteHaasGroteskBold.woff') format('woff'),
|
||||
url('fonts/app/AlteHaasGroteskBold.ttf') format('truetype'),
|
||||
url('fonts/app/AlteHaasGroteskBold.svg?#AlteHaasGrotesk') format('svg')
|
||||
|
||||
@font-face
|
||||
font-family 'RobotoMono'
|
||||
src url('fonts/app/RobotoMono-Thin.eot'),
|
||||
url('fonts/app/RobotoMono-Thin.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/RobotoMono-Thin.woff2') format('woff2'),
|
||||
url('fonts/app/RobotoMono-Thin.woff') format('woff'),
|
||||
url('fonts/app/RobotoMono-Thin.ttf') format('truetype'),
|
||||
url('fonts/app/RobotoMono-Thin.svg?#RobotoMono') format('svg');
|
||||
font-weight 200;
|
||||
font-style normal;
|
||||
|
||||
@font-face
|
||||
font-family 'RobotoMono'
|
||||
src url('fonts/app/RobotoMono-Light.eot'),
|
||||
url('fonts/app/RobotoMono-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/RobotoMono-Light.woff2') format('woff2'),
|
||||
url('fonts/app/RobotoMono-Light.woff') format('woff'),
|
||||
url('fonts/app/RobotoMono-Light.ttf') format('truetype'),
|
||||
url('fonts/app/RobotoMono-Light.svg?#RobotoMono') format('svg');
|
||||
font-weight 300;
|
||||
font-style normal;
|
||||
|
||||
@font-face
|
||||
font-family 'RobotoMono'
|
||||
src url('fonts/app/RobotoMono-Regular.eot'),
|
||||
url('fonts/app/RobotoMono-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/RobotoMono-Regular.woff2') format('woff2'),
|
||||
url('fonts/app/RobotoMono-Regular.woff') format('woff'),
|
||||
url('fonts/app/RobotoMono-Regular.ttf') format('truetype'),
|
||||
url('fonts/app/RobotoMono-Regular.svg?#RobotoMono') format('svg');
|
||||
font-weight 400;
|
||||
font-style normal;
|
||||
|
||||
@font-face
|
||||
font-family 'RobotoMono'
|
||||
src url('fonts/app/RobotoMono-Bold.eot'),
|
||||
url('fonts/app/RobotoMono-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/app/RobotoMono-Bold.woff2') format('woff2'),
|
||||
url('fonts/app/RobotoMono-Bold.woff') format('woff'),
|
||||
url('fonts/app/RobotoMono-Bold.ttf') format('truetype'),
|
||||
url('fonts/app/RobotoMono-Bold.svg?#RobotoMono') format('svg');
|
||||
font-weight 600;
|
||||
font-style normal;
|
||||
|
||||
|
||||
$titleType = 'RobotoMono', Helvetica, Arial, sans-serif;
|
||||
$bodyType = 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
|
||||
|
||||
7
theme.json
Normal file
7
theme.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "default-light",
|
||||
"display-name":"Fipamo Oh Won Light",
|
||||
"author": "Are0h",
|
||||
"description": "The most dangerous default theme in the known universe.",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
Loading…
Reference in a new issue