back to parceljs for compiling, updated package.json scripts
parent
ad763bf95f
commit
f944e3ed69
@ -1,8 +1,8 @@
|
||||
node_modules
|
||||
.parcel-cache
|
||||
dist
|
||||
.nova
|
||||
.cache
|
||||
.DS_Store
|
||||
assets
|
||||
vendor
|
||||
config.codekit3
|
||||
vendor
|
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 {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.start();
|
||||
}
|
||||
start() {
|
||||
console.log('Connected like F.E.');
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.start();
|
||||
}
|
||||
start() {
|
||||
console.log("Connected like F.E.");
|
||||
}
|
||||
//--------------------------
|
||||
// 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