back to parceljs for compiling, updated package.json scripts
Are0h
3 years ago
parent
ad763bf95f
commit
f944e3ed69
@ -1,8 +1,8 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
.parcel-cache
|
||||||
dist
|
dist
|
||||||
.nova
|
.nova
|
||||||
.cache
|
.cache
|
||||||
.DS_Store
|
.DS_Store
|
||||||
assets
|
assets
|
||||||
vendor
|
vendor
|
||||||
config.codekit3
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,18 +1,18 @@
|
|||||||
export default class Base {
|
export default class Base {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {
|
constructor() {
|
||||||
this.start();
|
this.start();
|
||||||
}
|
}
|
||||||
start() {
|
start() {
|
||||||
console.log('Connected like F.E.');
|
console.log("Connected like F.E.");
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,6 @@
|
|||||||
|
$primary: #151d26
|
||||||
|
$secondary : #FC6399
|
||||||
|
$tertiary : #e8c33e
|
||||||
|
$highlight : #7ED07E
|
||||||
|
$white : #ebe5d4
|
||||||
|
$black : #32302f
|
||||||
@ -1,5 +0,0 @@
|
|||||||
$primary = #151d26;
|
|
||||||
$secondary = #FC6399;
|
|
||||||
$highlight = #7ED07E;
|
|
||||||
$white = #ebe5d4;
|
|
||||||
$black = #32302f;
|
|
||||||
@ -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
|
||||||
|
|
||||||
|
|
||||||
@ -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%)
|
|
||||||
|
|
||||||
|
|
||||||
@ -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
|
||||||
@ -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
|
|
||||||
@ -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
|
||||||
@ -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
|
|
||||||
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -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%
|
|
||||||
@ -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
|
||||||
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
$bodyTypeSans = Helvetica, Arial, sans-serif;
|
|
||||||
$bodyTypeSerif = Georgia, Times, serif;
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
@use "sass:color"
|
||||||
|
|
||||||
|
//type
|
||||||
|
|
||||||
|
@import "_colors"
|
||||||
|
@import "_mixins"
|
||||||
|
@import "_typography"
|
||||||
|
@import "_normalize"
|
||||||
|
@import "_forms"
|
||||||
|
@import "_structure"
|
||||||
@ -1,48 +0,0 @@
|
|||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Typography
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
|
|
||||||
@import "_typography"
|
|
||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Colors
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
|
|
||||||
@import "_colors"
|
|
||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Mixins
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
|
|
||||||
@import '_mixins'
|
|
||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Normalize
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
@import '_normalize'
|
|
||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Main Structure
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
|
|
||||||
@import "_structure"
|
|
||||||
|
|
||||||
/**
|
|
||||||
-------------------------------
|
|
||||||
-- Forms
|
|
||||||
-------------------------------
|
|
||||||
**/
|
|
||||||
|
|
||||||
@import '_forms'
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue