getting the initial stuff in there until I sort out the defaults
Are0h
5 years ago
parent
0cf83844fa
commit
45626c8847
@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.cache
|
||||||
|
.DS_Store
|
||||||
|
assets
|
||||||
@ -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")
|
||||||
|
|
||||||
|
|
||||||
@ -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
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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
|
||||||
@ -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"}]
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -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
|
||||||
|
//--------------------------
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Base from './Base.jsx'
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
|
var base = new Base();
|
||||||
|
}, false);
|
||||||
@ -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'
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
$primary = #2B8CAF;
|
||||||
|
$secondary = #EB6B99;
|
||||||
|
$tertiary = #EBDFCE;
|
||||||
|
$highlight = #BAF273;
|
||||||
|
$white = #eee;
|
||||||
|
$black = #32302f;
|
||||||
|
|
||||||
|
//Bulma overrides
|
||||||
@ -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%
|
||||||
|
|
||||||
|
|
||||||
@ -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%
|
||||||
|
|
||||||
@ -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%)
|
||||||
|
|
||||||
|
|
||||||
@ -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
|
||||||
@ -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);
|
||||||
@ -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
|
||||||
@ -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;
|
||||||
@ -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;
|
||||||
|
|
||||||
@ -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 New Issue