projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

responsive for dash index plugged in

Browse source
This commit is contained in:
Ro 2019-03-03 11:49:03 -05:00
parent 2f5d121284
commit c62fbf27c5
7 changed files with 169 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
themes/dash/assets/css/dash.css
View file

@ -1599,33 +1599,31 @@ svg.icons {
position: relative;
}
.main-container section header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.main-container section header #header-wrapper {
width: 100%;
max-width: 900px;
margin: 50px auto;
margin: 0 auto;
}
.main-container section header #header-wrapper #header-one,
.main-container section header #header-wrapper #header-two {
z-index: 10;
position: relative;
.main-container section header #wrapper {
padding: 0.75rem;
}
.main-container section header #header-wrapper #header-one #the-logo,
.main-container section header #header-wrapper #header-two #the-logo {
.main-container section header #wrapper #left,
.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;
}
.main-container section header #header-wrapper #header-two {
.main-container section header #wrapper #right {
text-align: right;
color: #f2f1ef;
}
.main-container section header #header-wrapper #header-two a {
.main-container section header #wrapper #right a {
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-weight: 400;
color: #f5ab35;
@ -1633,7 +1631,7 @@ svg.icons {
display: block;
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;
}
::-moz-selection {
@ -1656,77 +1654,18 @@ svg.icons {
background-color: #fc6399;
color: #f2f1ef;
}
@media only screen and (max-width: 640px) {
.main-container .content #the-intro {
font-size: 31px;
line-height: 35px;
@media only screen and (max-width: 800px) {
.main-container section header #wrapper #left,
.main-container section header #wrapper #right {
display: inline-block;
}
}
@media only screen and (max-width: 480px) {
.main-container .content #the-intro {
font-size: 25px;
line-height: 33px;
.main-container section header #wrapper #left {
width: 30%;
}
.main-container .content #index-display span,
.main-container .content #index-display a {
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;
.main-container section header #wrapper #right {
width: 70%;
}
}
/**
@ -1853,7 +1792,7 @@ svg.icons {
float: right;
vertical-align: top;
display: inline-block;
font-family: "Apercu-mono";
font-family: 'Apercu-mono';
font-size: 0.5em;
padding: 7px;
color: #161d23;
@ -1889,6 +1828,35 @@ svg.icons {
height: 275px;
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

2
themes/dash/assets/css/dash.css.map
View file

File diff suppressed because one or more lines are too long

6
themes/dash/frame.pug
View file

@ -17,11 +17,11 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
.main-container#main-content
section#dash-index-content
header#header
#header-wrapper.columns
#header-one.column
#wrapper
#left
a(href="/@/dashboard")
img#the-logo(src="/dash/assets/images/the-logo.svg")
#header-two.column
#right
label#the-title= welcome
-if(user_status)
include partials/dash-nav

28
themes/dash/src/styles/dash.styl
View file

@ -3,72 +3,72 @@
-- Bulma
-------------------------------
* */
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all';
@import '../../../../node_modules/bulma.styl/stylus/grid/columns';
@import '../../../../node_modules/bulma.styl/stylus/utilities/_all'
@import '../../../../node_modules/bulma.styl/stylus/grid/columns'
/**
-------------------------------
-- Colors
-------------------------------
* */
@import 'main/_colors';
@import 'main/_colors'
/**
-------------------------------
-- Mixins
-------------------------------
* */
@import 'main/_mixins';
@import 'main/_mixins'
/**
-------------------------------
-- Normalize
-------------------------------
* */
@import 'main/_normalize';
@import 'main/_normalize'
/**
-------------------------------
-- Typography
-------------------------------
* */
@import 'main/_typography';
@import 'main/_typography'
/**
-------------------------------
-- Main Structure
-------------------------------
* */
@import 'main/_structure';
@import 'main/_structure'
/**
-------------------------------
-- Index
-------------------------------
* */
@import 'main/_index';
@import 'main/_index'
/**
-------------------------------
-- Settings
-------------------------------
* */
@import 'main/_settings';
@import 'main/_settings'
/**
-------------------------------
-- Navigation
-------------------------------
* */
@import 'main/_navigation';
@import 'main/_navigation'
/**
-------------------------------
-- Forms
-------------------------------
* */
@import 'main/_forms';
@import 'main/_forms'
/**
-------------------------------
-- Blog
-------------------------------
* */
@import 'main/_posts';
@import 'main/_posts'
/**
-------------------------------
-- Editor
-------------------------------
* */
@import 'main/_editor';
@import 'main/_editor-highlight';
@import 'main/_editor'
@import 'main/_editor-highlight'

94
themes/dash/src/styles/main/_index.styl
View file

@ -74,53 +74,60 @@
#recent-list
padding 0.75em
position relative
.recent-header
height 50px
h3
vertical-align: top
vertical-align top
display inline-block
width: 50%
width 50%
.index-menu
width: 50%
text-align: right
vertical-align: top
width 50%
text-align right
vertical-align top
display inline-block
margin 24px 0 24px 0
right 10px
color $white
a
text-decoration-color: $highlight
text-decoration-color $highlight
a.post-link
font-size 1.5em
font-weight 300
display inline-block
border-radius 3px
vertical-align top
text-decoration: none
text-decoration none
position relative
label
font-size: .7em
font-weight: 700
font-size 0.7em
font-weight 700
color $primary - 60%
padding 5px
vertical-align: top
display: inline-block
width: 60%
vertical-align top
display inline-block
width 60%
span
float: right
vertical-align: top
display: inline-block
font-family: "Apercu-mono"
font-size: .5em
padding: 7px
float right
vertical-align top
display inline-block
font-family 'Apercu-mono'
font-size 0.5em
padding 7px
color $primary - 60%
div
width 100%
background: $white;
position: absolute
bottom: 0
border-radius: 0 0 3px 3px
background $white
position absolute
bottom 0
border-radius 0 0 3px 3px
a:nth-child(3)
width 100%
@ -144,4 +151,45 @@
a:nth-child(7)
width 49%
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

107
themes/dash/src/styles/main/_structure.styl
View file

@ -40,24 +40,22 @@ svg.icons
section
header
width 100%
height 100px
margin 0
padding 0
#header-wrapper
width 100%
max-width 900px
margin 50px auto
margin 0 auto
#header-one, #header-two
z-index 10
position relative
#wrapper
padding 0.75rem
#left, #right
width 50%
display inline-block
vertical-align top
#the-logo
width 40px
#header-two
#right
text-align right
color $white
@ -105,82 +103,21 @@ svg.icons
-- Responsive
-------------------------------
* */
@media only screen and (max-width: 640px)
@media only screen and (max-width: 800px)
.main-container
.content
#the-intro
font-size 31px
line-height 35px
section
header
#wrapper
#left, #right
display inline-block
@media only screen and (max-width: 480px)
.main-container
.content
#the-intro
font-size 25px
line-height 33px
section
header
#wrapper
#left
width 30%
#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
#right
width 70%