From 1fb650f48213117fb3ad3eedc6c041d7269adf05 Mon Sep 17 00:00:00 2001
From: Kelly Rauchenberger <fefferburbia@gmail.com>
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