back to parceljs for compiling, updated package.json scripts

This commit is contained in:
Are0h 2022-01-31 15:30:39 -08:00
parent ad763bf95f
commit f944e3ed69
18 changed files with 10687 additions and 573 deletions

2
.gitignore vendored
View file

@ -1,8 +1,8 @@
node_modules
.parcel-cache
dist
.nova
.cache
.DS_Store
assets
vendor
config.codekit3

10148
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

24
package.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "fipamo-theme-kit",
"version": "1.0.0",
"private": true,
"dependencies": {
"parcel": "^2.2.1",
"sass": "^1.49.0"
},
"scripts": {
"watch": "npx parcel watch $npm_package_config_theme_path/styles/base.sass --dist-dir $npm_package_config_theme_dir/assets/css --public-url /assets/css & npx parcel watch $npm_package_config_theme_path/com/Start.js --dist-dir $npm_package_config_theme_dir/assets/scripts --public-url /assets/scripts",
"build": "sass src/styles:public/assets/css & npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
"dev": "php -S localhost:$npm_package_config_port"
},
"license": "UNLICENSED",
"config": {
"port": "1414",
"current_theme": "fipamo-default",
"theme_path": "src/themes/theme-$npm_package_config_current_theme",
"theme_dir": "src/themes/theme-$npm_package_config_current_theme/$npm_package_config_current_theme"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.2.1"
}
}

View file

@ -6,7 +6,7 @@ export default class Base {
this.start();
}
start() {
console.log('Connected like F.E.');
console.log("Connected like F.E.");
}
//--------------------------
// methods

View file

@ -0,0 +1,6 @@
$primary: #151d26
$secondary : #FC6399
$tertiary : #e8c33e
$highlight : #7ED07E
$white : #ebe5d4
$black : #32302f

View file

@ -1,5 +0,0 @@
$primary = #151d26;
$secondary = #FC6399;
$highlight = #7ED07E;
$white = #ebe5d4;
$black = #32302f;

View file

@ -0,0 +1,67 @@
form
display: inline-block
a
color: $primary
p
background: $tertiary
color: $primary
padding: 5px
display: block
border-radius: 5px
text-align: left
input[type=email], input[type=password], input[type=text]
border: 0
border-radius: 5px
padding: 5px
margin: 10px 5px 0 0
font: 18px $baseType
display: inline-block
background: $primary
color: $tertiary
textarea
border: 0
border-radius: 3px
color: $white
font: 15px $baseType
background: $primary
button, input[type=submit]
background: $highlight
color: $primary
font: 20px $baseType
border-radius: 5px
position: relative
cursor: pointer
border: 0
padding: 10px 0 5px 0
@include object_transitions(.3s)
select
font: 14px $baseType
border: 1px solid $secondary
-webkit-appearance: none
-moz-appearance: none
appearance: none
color: $primary
::-webkit-input-placeholder
font: 25px $baseType
color: $white
:-moz-placeholder
/* Firefox 18- */
font: 25px $baseType
color: $white
::-moz-placeholder
/* Firefox 19+ */
font: 15px $baseType
color: $white
:-ms-input-placeholder
font: 25px $baseType
color: $white

View file

@ -1,58 +0,0 @@
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 $secondary
color $white
font 14px $bodyTypeSans
border-radius 5px
position relative
cursor pointer
border 0
padding 5px 5px 0 5px
object-transitions(.3s)
&:hover
background lighten($secondary, 5)
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%)

View file

@ -0,0 +1,16 @@
@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
@mixin object-transitions($rate)
-moz-transition: all $rate linear
-webkit-transition: all $rate linear
-o-transition: all $rate linear
transition: all $rate linear
@mixin background-opacity($rgb_value, $opacity)
background: rgba($rgb_value, $opacity)
@mixin custom-header($weight, $size, $line_height, $color)
font: $weight $size/$line_height $bodyTypeSans
color: $color

View file

@ -1,16 +0,0 @@
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);
custom-header(weight, size, line-height, color)
font: weight size/line-height $bodyTypeSans
color: color

View file

@ -0,0 +1,197 @@
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
line-height: 1em
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: $primary
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

View file

@ -1,197 +0,0 @@
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
line-height 1em
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

View file

@ -0,0 +1,184 @@
html, body
font: 400 1em $baseType
height: 100%
body
background: $primary
a
text-decoration: none
color: $tertiary
border-bottom: 1px $secondary solid
&:hover
color: $secondary
border-bottom: 1px $tertiary solid
#main
width: 100%
height: 100%
background: $primary
header
width: 100%
height: 100%
background-size: cover
background: $black
border-top: 2px $tertiary solid
#cover
position: relative
height: 100%
width: 100%
.that-logo
width: 300px
height: 300px
display: block
position: absolute
z-index: 1000
margin: -50px 0 0 -50px
cursor: pointer
.wrapper
width: 100%
max-width: 1024px
min-height: 400px
margin: 0 auto
article.index
padding: 20px
div
span
color: #fff
display: inline-block
vertical-align: top
width: 15%
font-family: $monoType
font-size: .8em
div
width: 80%
color: $white
font-weight: 800
font-size: 2em
margin: -5px 0 0 0
padding: 0
display: inline-block
overflow: hidden
p
padding: 0
margin: 0
#recent-links
a
font-size: 2em
font-weight: 800
display: inline-block
margin: -8px 0 10px 0
label
color: $secondary
font-weight: 800
font-size: 3.5em
display: block
margin: 60px 0 20px 15%
article.page
width: 100%
#title
background: $secondary
color: $tertiary
padding: 40px
font-size: 3em
font-weight: 800
#page_desc
padding: 40px
color: $secondary
font-size: 1.5em
img
width: 90%
margin: 0 auto
display: block
article#archive
.archive-item
width: 50%
display: inline-block
vertical-align: top
margin-bottom: 100px
span.year
width: 100%
font-size: 2em
.archive-month
margin: 0 0 20px 0
font-size: 1em
span.month
width: 100%
font-size: 1.5em
display: block
a
font-size: .8em
font-weight: 400
footer
background: $secondary
overflow: hidden
.inner
width: 80%
max-width: 964px
margin: 0 auto
padding: 20px
color: $white
//Responsive
@media only screen and (max-width: 768px)
#main
.wrapper
article.index
div
span
font-size: .64em
width: 14%
div
font-size: 1.7em
#recent-links
a
font-size: 1.7em
label
font-size: 3em
margin: 50px 0 20px 14%
article.page
#title
font-size: 2.5em
#page_desc
padding: 30px
color: $secondary
font-size: 1.4em
img
width: 100%
margin: 0 auto
display: block
@media only screen and (max-width: 480px)
#main
.wrapper
article.index
div
span
font-size: .64em
width: 100%
div
font-size: 1.6em
width: 100%
#recent-links
a
font-size: 1.5em
label
font-size: 3em
margin: 40px 0 20px 0
article.page
#title
font-size: 1.8em
#page_desc
padding: 30px
color: $secondary
font-size: 1.2em
img
width: 100%
margin: 0 auto
display: block

View file

@ -1,228 +0,0 @@
html
margin 0
padding 0
width 100%
height 100%
overflow hidden
font 400 1.2em/1.4em $bodyTypeSans
body
background $white
margin 0
padding 0
perspective 1px
transform-style preserve-3d
height 100%
width 100%
overflow-y scroll
overflow-x hidden
a
color $primary
text-decoration none
border-bottom 1px solid $highlight
object-transitions(.2s)
&:hover
border-bottom 1px solid $secondary
code
background $black
color $highlight
border-radius 3px
padding 3px
pre
background $black
color $highlight
border-radius 3px
padding 3px
code
color $secondary
background none
svg.icons
width 25px
fill $white
header
background $primary
height 90%
width 100%
border-top $white 3px solid
nav
width 97%
margin 10px auto
color $primary
.left,.right
width 50%
display inline-block
vertical-align top
.left
a.logo-link
border-bottom none
margin 0 0 20px 0
display block
#logo
width 50px
border-bottom none
.right
text-align right
a.menu-link
background $secondary
margin-bottom 4px
padding 3px
border-radius 2px
display inline-block
font-size 0.8em
border-bottom none
&:hover
background $secondary + 50%
.container
z-index 2
background $white
line-height 30px
font-weight lighter
width 100%
//padding 40px
color $black
article
position relative
width: 80%
height 80%
max-width 840px
//min-height 500px
background $white
vertical-align top
color $black
margin 0 auto
//.index, .page
//margin 30px
.index, .page
padding 0 0 15px 0
img
display block
width 100%
h1
color $primary
p
font 300 1.25em/1.6em $bodyTypeSans
//meta datea for page
.meta
font 500 0.8em/1.3em $bodyTypeSans
padding 5px 0 0 0
border-top 1px solid $primary
background $white + 10%
a
font-size: 0.8em
font-weight 400
//archive styling
.archive-item
padding 15px 0 20px 0
span.year
font-size 1.5em
font-weight 500
padding 5px
display block
color $primary
.archive-month
display inline-block
vertical-align top
width 30%
padding 5px
span.month
color $secondary
font-size 1.5em
font-weight 300
padding 5px
display block
section
padding 0 0 20px 0
background $primary
a
color $white
.index-lists, .page-title
max-width 840px
span
custom-header(600, 2em, 1.5, $white)
width 80%
margin 0 auto
padding 20px 0 0 0
.recent, .featured
display inline-block
width 50%
vertical-align top
label
background $black
color $white
font-size 1.5em
line-height 1.3
footer
background $white - 5%
padding 10px
color $primary
font-size 0.8em
font-weight 600
height 100px
.inner
margin 20px auto
width 80%
max-width 840px
a
color $secondary
/**
-------------------------------
-- Responsive
-------------------------------
**/
@media only screen and (max-width: 640px)
header
nav
width 98%
span
font-size 2.5em
.container
article
.index, .page
.archive-item
.archive-month
width 45%
@media only screen and (max-width: 480px)
header
nav
width 96%
.container
article
.index, .page
margin 0
p
font 300 1em/1.6em $bodyTypeSans
section
.index-lists
.recent, .featured
width 100% !important
@media only screen and (max-width: 375px)
header
nav
width 95%
.container
article
.index, .page
margin 0
p
font 300 0.9em/1.7em $bodyTypeSans
.archive-item
.archive-month
width 95%

View file

@ -0,0 +1,18 @@
$baseType: Helvetica, Arial, sans-serif
$monoType: "Lucida Console", Monaco, monospace
h1, h2, h3
color: $white
h1
font-size: 2em
font-weight: 400
h2
font-size: 1.75em
font-weight: 400
h3
font-size: 1.5em
font-weight: 300

View file

@ -1,4 +0,0 @@
$bodyTypeSans = Helvetica, Arial, sans-serif;
$bodyTypeSerif = Georgia, Times, serif;

View file

@ -0,0 +1,10 @@
@use "sass:color"
//type
@import "_colors"
@import "_mixins"
@import "_typography"
@import "_normalize"
@import "_forms"
@import "_structure"

View file

@ -1,48 +0,0 @@
/**
-------------------------------
-- Typography
-------------------------------
**/
@import "_typography"
/**
-------------------------------
-- Colors
-------------------------------
**/
@import "_colors"
/**
-------------------------------
-- Mixins
-------------------------------
**/
@import '_mixins'
/**
-------------------------------
-- Normalize
-------------------------------
**/
@import '_normalize'
/**
-------------------------------
-- Main Structure
-------------------------------
**/
@import "_structure"
/**
-------------------------------
-- Forms
-------------------------------
**/
@import '_forms'