From 1622895cd467f59f25fe375f081aa59693ae4c8f Mon Sep 17 00:00:00 2001 From: Star Rauchenberger Date: Tue, 10 Oct 2023 22:23:24 -0400 Subject: Hey it looks like Four Island --- app/assets/stylesheets/main/entries.scss | 79 +++++++++++++--- app/assets/stylesheets/main/layout.scss | 151 ++++++++++++++++++++++--------- 2 files changed, 170 insertions(+), 60 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/main/entries.scss b/app/assets/stylesheets/main/entries.scss index 4d884fa..b2832e4 100644 --- a/app/assets/stylesheets/main/entries.scss +++ b/app/assets/stylesheets/main/entries.scss @@ -8,23 +8,73 @@ #blog-post { font-size: 16px; line-height: 24px; - margin: 0 3em; - - h2 { - font-size: 45px; - line-height: 48px; - margin-top: .5em; + margin: 0 1em; + + .blog-title { + h2 { + width: 100%; + margin-left: 10px; + margin-top: 0; + margin-bottom: 0; + color: #59770e; + border-bottom: 1px dotted #CCCCCC; + padding-bottom: 3px; + } } - h3 { - font-size: 37px; - line-height: 42px; - } + header { + display: flex; + + .post-calendar { + width: 45px; + height: 49px; + + &.post-date-1 { + background: image-url("date-bg-1.gif") no-repeat; + } + + &.post-date-2 { + background: image-url("date-bg-2.gif") no-repeat; + } + + &.post-date-3 { + background: image-url("date-bg-3.gif") no-repeat; + } + + &.post-date-4 { + background: image-url("date-bg-4.gif") no-repeat; + } + + .post-month { + font-size: 11px; + color: white; + text-align: center; + display: block; + line-height: 11px; + padding-top: 2px; + margin-left: -3px; + } + + .post-day { + font-size: 18px; + color: #999999; + text-align: center; + display: block; + line-height: 18px; + padding-top: 7px; + margin-left: -3px; + } + } - h2, h3 { - font-family: 'Slabo 27px', serif; - margin-bottom: 0; - font-weight: normal; + .post-author { + background: image-url("Hatkirby.ico") no-repeat; + padding-left: 20px; + margin-left: 10px; + float: left; + font-size: 95%; + font: 75%/150% sans-serif; + color: #999; + } } } @@ -80,7 +130,6 @@ .entry-content { hyphens: auto; word-wrap: break-word; - text-align: justify; font-family: 'Roboto', sans-serif; a { diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss index 774ec4c..180d1c7 100644 --- a/app/assets/stylesheets/main/layout.scss +++ b/app/assets/stylesheets/main/layout.scss @@ -1,51 +1,41 @@ body#main-body { - background-color: #bfefff; height: 100%; font-family: sans-serif; } #container { height: 100%; - margin: 7em auto 2em; + margin: 10px auto; 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; } + min-width: 910px; } #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; + background-image: image-url("fourisland_header.png"); + width: 900px; + height: 200px; + + h1 { + margin: 0; + + a { + display: block; + width: 900px; + height: 200px; + text-indent: -5000px; + text-decoration: none; + margin: 0; + } } } +#page-body { + display: flex; +} + #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 + width: 70%; } #content { @@ -70,10 +60,9 @@ body#main-body { #sidebar { box-sizing: border-box; - width: 25%; + width: 30%; font-size: .75em; color: black; - border-left: 1px solid #eee; margin-top: 1em; margin-bottom: 2em; font-family: sans-serif; @@ -81,21 +70,14 @@ body#main-body { #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; -} + padding: 0 1em; -.sidebar-module:nth-child(2n+2) { - background-color: #8fefab; + & + .sidebar-module { + margin-top: 1em; + } } .sidebar-module p { @@ -123,6 +105,85 @@ body#main-body { color: #352712; } +blockquote.bubble { + margin: 0; + border: 1px solid #c9c2c1; + background-color: #fff; + position: relative; + + div { + margin: 10px; + padding: 0; + } +} + +.bubble { + width: auto; + margin-bottom: 24px; + padding: 0 1em 1em; + + &.rounded { + margin-bottom: 10px; + border: 3px solid #fff; + background-color: #b7e0ff; + border-radius: 10px; + + blockquote { + border: 0; + background-color: transparent; + + div { + margin: 0 10px; + } + } + } + + &.pimped { + color: white; + border: 3px solid white; + background-color: #111; + } + + div.bquote blockquote { + margin: 0; + padding: 0; + border: 1px solid #c9c2c1; + background-color: white; + } +} + +cite.bubble { + font-style: normal; + position: relative; + margin: 0; + padding: 7px 0px 0px 15px; +} + +blockquote.bubble::after { + /* (B1-1) ATTACH TRANSPARENT BORDERS */ + content: ""; + border: 10px solid transparent; + + /* (B1-2) NECESSARY TO POSITION THE "TAIL" */ + position: absolute; +} + +/* (B2) BOTTOM "CALLOUT TAIL" */ +blockquote.bubble.bottom::after { + /* (B2-1) DOWN TRIANGLE */ + border-top-color: #b7e0ff; + border-bottom: 0; + + /* (B2-2) POSITION AT BOTTOM */ + bottom: -10px; + left: 3.5em; + margin-left: -20px; + + &.pimped { + border-top-color: black; + } +} + .breadcrumb { margin-left: 1em; -- cgit 1.4.1