From 1fb650f48213117fb3ad3eedc6c041d7269adf05 Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Fri, 30 Jun 2017 18:23:20 -0400 Subject: Split up stylesheets for each layout --- app/assets/stylesheets/main/entries.scss | 60 ++++++++++++++ app/assets/stylesheets/main/layout.scss | 136 +++++++++++++++++++++++++++++++ app/assets/stylesheets/main/records.scss | 63 ++++++++++++++ 3 files changed, 259 insertions(+) create mode 100644 app/assets/stylesheets/main/entries.scss create mode 100644 app/assets/stylesheets/main/layout.scss create mode 100644 app/assets/stylesheets/main/records.scss (limited to 'app/assets/stylesheets/main') diff --git a/app/assets/stylesheets/main/entries.scss b/app/assets/stylesheets/main/entries.scss new file mode 100644 index 0000000..038273d --- /dev/null +++ b/app/assets/stylesheets/main/entries.scss @@ -0,0 +1,60 @@ +// Place all the styles related to the Entries controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ + +@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); +@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); + +#blog-post { + font-size: 16px; + line-height: 24px; + margin: 0 3em; + + h2 { + font-size: 45px; + line-height: 48px; + margin-top: .5em; + } + + h3 { + font-size: 37px; + line-height: 42px; + } + + h2, h3 { + font-family: 'Slabo 27px', serif; + margin-bottom: 0; + font-weight: normal; + } + + #blog-content { + hyphens: auto; + word-wrap: break-word; + font-family: 'Roboto', sans-serif; + text-align: justify; + + a { + text-decoration: none; + font-weight: bold; + + &, &:visited { + color: #ee2c2c; + } + + &:hover { + text-decoration: underline; + color: #9ea1ad; + } + } + + li { + & + li { + margin-top: 1em; + } + } + + img { + max-width: 100%; + } + } +} diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss new file mode 100644 index 0000000..ebd4c87 --- /dev/null +++ b/app/assets/stylesheets/main/layout.scss @@ -0,0 +1,136 @@ +body#main-body { + background-color: #bfefff; + height: 100%; +} + +#container { + height: 100%; + margin: 7em auto 0; + width: 75%; /* 66% */ + box-sizing: border-box; + min-width: 890px; + display: flex; + flex-direction: row-reverse; +} + +@keyframes trottingPonies { + from { background-position-x: 0px; } + to { background-position-x: -1280px; } +} + +#banner { + background-image: image-url("walk_cycle.png"); + background-repeat: repeat-x; + animation: trottingPonies 1s steps(16) infinite; + width: 100%; + padding: 1em; + box-sizing: border-box; + text-indent: -9999px; + height: 80px; + margin-bottom: -80px; + position: relative; + top: -70px; + + a { + display: block; + width: 100%; + height: 55px; + } +} + +#main { + background-color: white; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); + width: 75%; + min-width: 720px +} + +#content { + box-sizing: border-box; + padding-top: 1em; +} + +#flash { + width: 100%; + text-align: center; + padding: .25em; + font-weight: bold +} + +.flash-notice { + background-color: #fffde8; +} + +.flash-alert { + background-color: #ff6a6a; +} + +#sidebar { + box-sizing: border-box; + width: 25%; + font-size: .75em; + color: black; + border-left: 1px solid #eee; + margin-top: 1em; + margin-bottom: 2em; +} + +#sidebar h2 { + font-size: 1em; + margin: 0; +} + +.sidebar-module { + padding: 1em; + margin-top: 1em; + box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); +} + +.sidebar-module:nth-child(2n+1) { + background-color: #feff8f; +} + +.sidebar-module:nth-child(2n+2) { + background-color: #8fefab; +} + +.sidebar-module p { + margin-bottom: 0; +} + +.sidebar-module ul { + padding-left: 0; + margin-bottom: 0; +} + +.sidebar-module li { + list-style-type: none; +} + +.sidebar-module a { + text-decoration: none; +} + +.sidebar-module a:hover { + text-decoration: underline; +} + +.sidebar-module a:visited { + color: #352712; +} + +.breadcrumb { + margin-left: 1em; + + a, a:visited { + color: #555d66; + text-decoration: none; + font-size: .75em; + } + + a:hover { + text-decoration: underline; + } +} diff --git a/app/assets/stylesheets/main/records.scss b/app/assets/stylesheets/main/records.scss new file mode 100644 index 0000000..dd4eac1 --- /dev/null +++ b/app/assets/stylesheets/main/records.scss @@ -0,0 +1,63 @@ +// Place all the styles related to the Records controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ + +@import url('https://fonts.googleapis.com/css?family=Inconsolata'); + +#records { + padding: 0; + margin: 0 1em; + + & > li { + display: block; + padding: .25em 0; + + .description { + a { + text-decoration: none; + color: #352712; + font-family: 'Inconsolata', monospace; + + &:hover { + text-decoration: underline; + } + + &:visited { + color: #352712; + } + } + } + + .tags { + margin: .25em; + display: flex; + padding-left: 0; + + li { + display: inline; + font-size: .75em; + font-family: 'Inconsolata', monospace; + padding: .25em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + &.record-date { + background-color: #fef1bf; + } + + &.entry-type { + text-transform: uppercase; + + &.entry-type-blog { + background-color: #90fefb; + } + } + + & + li { + margin-left: 1em; + } + } + } + } +} -- cgit 1.4.1