forked from projects/fipamo
responsive for dash index plugged in
This commit is contained in:
parent
2f5d121284
commit
c62fbf27c5
7 changed files with 169 additions and 216 deletions
|
@ -1599,33 +1599,31 @@ svg.icons {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main-container section header {
|
.main-container section header {
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.main-container section header #header-wrapper {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 50px auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-one,
|
.main-container section header #wrapper {
|
||||||
.main-container section header #header-wrapper #header-two {
|
padding: 0.75rem;
|
||||||
z-index: 10;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-one #the-logo,
|
.main-container section header #wrapper #left,
|
||||||
.main-container section header #header-wrapper #header-two #the-logo {
|
.main-container section header #wrapper #right {
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.main-container section header #wrapper #left #the-logo,
|
||||||
|
.main-container section header #wrapper #right #the-logo {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-two {
|
.main-container section header #wrapper #right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: #f2f1ef;
|
color: #f2f1ef;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-two a {
|
.main-container section header #wrapper #right a {
|
||||||
text-decoration-color: #fc6399;
|
text-decoration-color: #fc6399;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-two label#the-title {
|
.main-container section header #wrapper #right label#the-title {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #f5ab35;
|
color: #f5ab35;
|
||||||
|
@ -1633,7 +1631,7 @@ svg.icons {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 0.8;
|
line-height: 0.8;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-two #dash-menu {
|
.main-container section header #wrapper #right #dash-menu {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
|
@ -1656,77 +1654,18 @@ svg.icons {
|
||||||
background-color: #fc6399;
|
background-color: #fc6399;
|
||||||
color: #f2f1ef;
|
color: #f2f1ef;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 640px) {
|
@media only screen and (max-width: 800px) {
|
||||||
.main-container .content #the-intro {
|
.main-container section header #wrapper #left,
|
||||||
font-size: 31px;
|
.main-container section header #wrapper #right {
|
||||||
line-height: 35px;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 480px) {
|
@media only screen and (max-width: 480px) {
|
||||||
.main-container .content #the-intro {
|
.main-container section header #wrapper #left {
|
||||||
font-size: 25px;
|
width: 30%;
|
||||||
line-height: 33px;
|
|
||||||
}
|
}
|
||||||
.main-container .content #index-display span,
|
.main-container section header #wrapper #right {
|
||||||
.main-container .content #index-display a {
|
width: 70%;
|
||||||
font: 400 1.2em $bodyType;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
.main-container .header {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
.main-container .header .header-desc h1 {
|
|
||||||
line-height: 1rem;
|
|
||||||
font-size: 3.3rem;
|
|
||||||
}
|
|
||||||
.main-container .header .header-desc span a {
|
|
||||||
color: #f2f1ef;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.main-container .header .header-desc #the-intro {
|
|
||||||
color: #b2cce5;
|
|
||||||
opacity: 0;
|
|
||||||
font: 400 1.8em $titleType;
|
|
||||||
display: inline-block;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
.main-container .header .header-desc #item-intro {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
.main-container .header .header-desc #item-intro label {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
.main-container .content #the-intro {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 33px;
|
|
||||||
}
|
|
||||||
.main-container .content #index-display label {
|
|
||||||
font-size: 7em;
|
|
||||||
}
|
|
||||||
.main-container .content #index-display #recent-work,
|
|
||||||
.main-container .content #index-display #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;
|
|
||||||
}
|
|
||||||
.main-container .content #the-intro {
|
|
||||||
font-size: 19px;
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
@ -1853,7 +1792,7 @@ svg.icons {
|
||||||
float: right;
|
float: right;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-family: "Apercu-mono";
|
font-family: 'Apercu-mono';
|
||||||
font-size: 0.5em;
|
font-size: 0.5em;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
color: #161d23;
|
color: #161d23;
|
||||||
|
@ -1889,6 +1828,35 @@ svg.icons {
|
||||||
height: 275px;
|
height: 275px;
|
||||||
margin: 15px 0 0 0;
|
margin: 15px 0 0 0;
|
||||||
}
|
}
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
|
||||||
|
width: 48.9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 640px) {
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
|
||||||
|
width: 48.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Settings
|
-- Settings
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -17,11 +17,11 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
||||||
.main-container#main-content
|
.main-container#main-content
|
||||||
section#dash-index-content
|
section#dash-index-content
|
||||||
header#header
|
header#header
|
||||||
#header-wrapper.columns
|
#wrapper
|
||||||
#header-one.column
|
#left
|
||||||
a(href="/@/dashboard")
|
a(href="/@/dashboard")
|
||||||
img#the-logo(src="/dash/assets/images/the-logo.svg")
|
img#the-logo(src="/dash/assets/images/the-logo.svg")
|
||||||
#header-two.column
|
#right
|
||||||
label#the-title= welcome
|
label#the-title= welcome
|
||||||
-if(user_status)
|
-if(user_status)
|
||||||
include partials/dash-nav
|
include partials/dash-nav
|
||||||
|
|
|
@ -3,72 +3,72 @@
|
||||||
-- Bulma
|
-- Bulma
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all';
|
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all'
|
||||||
@import '../../../../node_modules/bulma.styl/stylus/grid/columns';
|
@import '../../../../node_modules/bulma.styl/stylus/grid/columns'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Colors
|
-- Colors
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_colors';
|
@import 'main/_colors'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Mixins
|
-- Mixins
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_mixins';
|
@import 'main/_mixins'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Normalize
|
-- Normalize
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_normalize';
|
@import 'main/_normalize'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Typography
|
-- Typography
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_typography';
|
@import 'main/_typography'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Main Structure
|
-- Main Structure
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_structure';
|
@import 'main/_structure'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Index
|
-- Index
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_index';
|
@import 'main/_index'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Settings
|
-- Settings
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_settings';
|
@import 'main/_settings'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Navigation
|
-- Navigation
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_navigation';
|
@import 'main/_navigation'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Forms
|
-- Forms
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_forms';
|
@import 'main/_forms'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Blog
|
-- Blog
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_posts';
|
@import 'main/_posts'
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
-- Editor
|
-- Editor
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@import 'main/_editor';
|
@import 'main/_editor'
|
||||||
@import 'main/_editor-highlight';
|
@import 'main/_editor-highlight'
|
||||||
|
|
|
@ -74,53 +74,60 @@
|
||||||
#recent-list
|
#recent-list
|
||||||
padding 0.75em
|
padding 0.75em
|
||||||
position relative
|
position relative
|
||||||
|
|
||||||
.recent-header
|
.recent-header
|
||||||
height 50px
|
height 50px
|
||||||
|
|
||||||
h3
|
h3
|
||||||
vertical-align: top
|
vertical-align top
|
||||||
display inline-block
|
display inline-block
|
||||||
width: 50%
|
width 50%
|
||||||
|
|
||||||
.index-menu
|
.index-menu
|
||||||
width: 50%
|
width 50%
|
||||||
text-align: right
|
text-align right
|
||||||
vertical-align: top
|
vertical-align top
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 24px 0 24px 0
|
margin 24px 0 24px 0
|
||||||
right 10px
|
right 10px
|
||||||
color $white
|
color $white
|
||||||
|
|
||||||
a
|
a
|
||||||
text-decoration-color: $highlight
|
text-decoration-color $highlight
|
||||||
|
|
||||||
a.post-link
|
a.post-link
|
||||||
font-size 1.5em
|
font-size 1.5em
|
||||||
font-weight 300
|
font-weight 300
|
||||||
display inline-block
|
display inline-block
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
vertical-align top
|
vertical-align top
|
||||||
text-decoration: none
|
text-decoration none
|
||||||
position relative
|
position relative
|
||||||
|
|
||||||
label
|
label
|
||||||
font-size: .7em
|
font-size 0.7em
|
||||||
font-weight: 700
|
font-weight 700
|
||||||
color $primary - 60%
|
color $primary - 60%
|
||||||
padding 5px
|
padding 5px
|
||||||
vertical-align: top
|
vertical-align top
|
||||||
display: inline-block
|
display inline-block
|
||||||
width: 60%
|
width 60%
|
||||||
|
|
||||||
span
|
span
|
||||||
float: right
|
float right
|
||||||
vertical-align: top
|
vertical-align top
|
||||||
display: inline-block
|
display inline-block
|
||||||
font-family: "Apercu-mono"
|
font-family 'Apercu-mono'
|
||||||
font-size: .5em
|
font-size 0.5em
|
||||||
padding: 7px
|
padding 7px
|
||||||
color $primary - 60%
|
color $primary - 60%
|
||||||
|
|
||||||
div
|
div
|
||||||
width 100%
|
width 100%
|
||||||
background: $white;
|
background $white
|
||||||
position: absolute
|
position absolute
|
||||||
bottom: 0
|
bottom 0
|
||||||
border-radius: 0 0 3px 3px
|
border-radius 0 0 3px 3px
|
||||||
|
|
||||||
a:nth-child(3)
|
a:nth-child(3)
|
||||||
width 100%
|
width 100%
|
||||||
|
@ -144,4 +151,45 @@
|
||||||
a:nth-child(7)
|
a:nth-child(7)
|
||||||
width 49%
|
width 49%
|
||||||
height 275px
|
height 275px
|
||||||
margin: 15px 0 0 0
|
margin 15px 0 0 0
|
||||||
|
|
||||||
|
/**
|
||||||
|
-------------------------------
|
||||||
|
-- Responsive
|
||||||
|
-------------------------------
|
||||||
|
* */
|
||||||
|
@media only screen and (max-width: 768px)
|
||||||
|
#dash-index-content
|
||||||
|
#dash-index
|
||||||
|
#dash-index-wrapper
|
||||||
|
#dash-recent
|
||||||
|
#recent-list
|
||||||
|
a:nth-child(4), a:nth-child(6)
|
||||||
|
width 48.9%
|
||||||
|
|
||||||
|
@media only screen and (max-width: 640px)
|
||||||
|
#dash-index-content
|
||||||
|
#dash-index
|
||||||
|
#dash-index-wrapper
|
||||||
|
#dash-recent
|
||||||
|
#recent-list
|
||||||
|
a:nth-child(4), a:nth-child(6)
|
||||||
|
width 48.5%
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px)
|
||||||
|
#dash-index-content
|
||||||
|
#dash-index
|
||||||
|
#dash-index-wrapper
|
||||||
|
#dash-recent
|
||||||
|
#recent-list
|
||||||
|
.recent-header
|
||||||
|
h3
|
||||||
|
width 40%
|
||||||
|
|
||||||
|
.index-menu
|
||||||
|
width 60%
|
||||||
|
|
||||||
|
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
||||||
|
width 100%
|
||||||
|
margin 15px 0 0 0
|
||||||
|
height 400px
|
||||||
|
|
|
@ -40,24 +40,22 @@ svg.icons
|
||||||
|
|
||||||
section
|
section
|
||||||
header
|
header
|
||||||
width 100%
|
|
||||||
height 100px
|
|
||||||
margin 0
|
|
||||||
padding 0
|
|
||||||
|
|
||||||
#header-wrapper
|
|
||||||
width 100%
|
width 100%
|
||||||
max-width 900px
|
max-width 900px
|
||||||
margin 50px auto
|
margin 0 auto
|
||||||
|
|
||||||
#header-one, #header-two
|
#wrapper
|
||||||
z-index 10
|
padding 0.75rem
|
||||||
position relative
|
|
||||||
|
#left, #right
|
||||||
|
width 50%
|
||||||
|
display inline-block
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
#the-logo
|
#the-logo
|
||||||
width 40px
|
width 40px
|
||||||
|
|
||||||
#header-two
|
#right
|
||||||
text-align right
|
text-align right
|
||||||
color $white
|
color $white
|
||||||
|
|
||||||
|
@ -105,82 +103,21 @@ svg.icons
|
||||||
-- Responsive
|
-- Responsive
|
||||||
-------------------------------
|
-------------------------------
|
||||||
* */
|
* */
|
||||||
@media only screen and (max-width: 640px)
|
@media only screen and (max-width: 800px)
|
||||||
.main-container
|
.main-container
|
||||||
.content
|
section
|
||||||
#the-intro
|
header
|
||||||
font-size 31px
|
#wrapper
|
||||||
line-height 35px
|
#left, #right
|
||||||
|
display inline-block
|
||||||
|
|
||||||
@media only screen and (max-width: 480px)
|
@media only screen and (max-width: 480px)
|
||||||
.main-container
|
.main-container
|
||||||
.content
|
section
|
||||||
#the-intro
|
header
|
||||||
font-size 25px
|
#wrapper
|
||||||
line-height 33px
|
#left
|
||||||
|
width 30%
|
||||||
|
|
||||||
#index-display
|
#right
|
||||||
span, a
|
width 70%
|
||||||
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
|
|
||||||
|
|
Loading…
Reference in a new issue