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/images/Hatkirby.ico | Bin 0 -> 1150 bytes app/assets/images/date-bg-1.gif | Bin 0 -> 2322 bytes app/assets/images/date-bg-2.gif | Bin 0 -> 2322 bytes app/assets/images/date-bg-3.gif | Bin 0 -> 2322 bytes app/assets/images/date-bg-4.gif | Bin 0 -> 2322 bytes app/assets/images/fourisland_header.png | Bin 0 -> 24386 bytes app/assets/images/tip-pimped.gif | Bin 0 -> 102 bytes app/assets/images/tip-rounded.gif | Bin 0 -> 102 bytes app/assets/images/tip.gif | Bin 0 -> 64 bytes app/assets/stylesheets/main/entries.scss | 79 +++++++++++++--- app/assets/stylesheets/main/layout.scss | 151 ++++++++++++++++++++++--------- app/views/blogs/_blog.html.haml | 10 +- app/views/layouts/application.html.haml | 39 ++++---- 13 files changed, 201 insertions(+), 78 deletions(-) create mode 100755 app/assets/images/Hatkirby.ico create mode 100755 app/assets/images/date-bg-1.gif create mode 100755 app/assets/images/date-bg-2.gif create mode 100755 app/assets/images/date-bg-3.gif create mode 100755 app/assets/images/date-bg-4.gif create mode 100644 app/assets/images/fourisland_header.png create mode 100755 app/assets/images/tip-pimped.gif create mode 100755 app/assets/images/tip-rounded.gif create mode 100755 app/assets/images/tip.gif diff --git a/app/assets/images/Hatkirby.ico b/app/assets/images/Hatkirby.ico new file mode 100755 index 0000000..fbc13bd Binary files /dev/null and b/app/assets/images/Hatkirby.ico differ diff --git a/app/assets/images/date-bg-1.gif b/app/assets/images/date-bg-1.gif new file mode 100755 index 0000000..cb7a771 Binary files /dev/null and b/app/assets/images/date-bg-1.gif differ diff --git a/app/assets/images/date-bg-2.gif b/app/assets/images/date-bg-2.gif new file mode 100755 index 0000000..49efaef Binary files /dev/null and b/app/assets/images/date-bg-2.gif differ diff --git a/app/assets/images/date-bg-3.gif b/app/assets/images/date-bg-3.gif new file mode 100755 index 0000000..60a6888 Binary files /dev/null and b/app/assets/images/date-bg-3.gif differ diff --git a/app/assets/images/date-bg-4.gif b/app/assets/images/date-bg-4.gif new file mode 100755 index 0000000..685e5c1 Binary files /dev/null and b/app/assets/images/date-bg-4.gif differ diff --git a/app/assets/images/fourisland_header.png b/app/assets/images/fourisland_header.png new file mode 100644 index 0000000..becd0b1 Binary files /dev/null and b/app/assets/images/fourisland_header.png differ diff --git a/app/assets/images/tip-pimped.gif b/app/assets/images/tip-pimped.gif new file mode 100755 index 0000000..f3f604e Binary files /dev/null and b/app/assets/images/tip-pimped.gif differ diff --git a/app/assets/images/tip-rounded.gif b/app/assets/images/tip-rounded.gif new file mode 100755 index 0000000..d0308a6 Binary files /dev/null and b/app/assets/images/tip-rounded.gif differ diff --git a/app/assets/images/tip.gif b/app/assets/images/tip.gif new file mode 100755 index 0000000..4713f05 Binary files /dev/null and b/app/assets/images/tip.gif differ 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; diff --git a/app/views/blogs/_blog.html.haml b/app/views/blogs/_blog.html.haml index 91b1d20..317ef1f 100644 --- a/app/views/blogs/_blog.html.haml +++ b/app/views/blogs/_blog.html.haml @@ -1,3 +1,9 @@ %article#blog-post - %h2#blog-title= blog.title - %section#blog-content.entry-content= blog.body.html_safe + %header + .post-calendar{ class: "post-date-#{(blog.published_at.year - 2007) % 4 + 1}" } + %span.post-month= blog.published_at.strftime("%^b") + %span.post-day= blog.published_at.day + .blog-title + %h2= blog.title + .post-author Hatkirby + %blockquote#blog-content.entry-content.bubble.rounded.bottom= blog.body.html_safe diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index db45235..d529af6 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -11,19 +11,26 @@ - if flash[:notice] %div#flash.flash-notice= flash[:notice] #container - #sidebar - .sidebar-module - %h2 I'm Starlight. - %p Coding is what I do. I make a lot of things, including Twitter bots. I really like Pokémon, and I write about it a lot. - %p B.S. in CS, Carnegie Mellon 2017 - .sidebar-module - %h2 Meta - %ul - - if not user_signed_in? - %li= link_to "Log in", new_user_session_path - - if user_signed_in? - %li= link_to "Admin", admin_url - %li= link_to "Log out", destroy_user_session_path, method: :delete - #main - %header#banner= link_to "feffernoo.se", root_url - #content= yield + #page-header + %header#banner + %h1= link_to "Four Island", root_url + #page-body + #sidebar + .sidebar-module + %blockquote.pimped.bubble.rounded.bottom + %h2 I'm Hatkirby. + %p Coding is what I do. I make a lot of things, including Twitter bots. I really like Pokémon, and I write about it a lot. + %p B.S. in CS, Carnegie Mellon 2017 + %cite.bubble + Hatkirby on Four Island + .sidebar-module + .bubble.rounded + %h2 Meta + %ul + - if not user_signed_in? + %li= link_to "Log in", new_user_session_path + - if user_signed_in? + %li= link_to "Admin", admin_url + %li= link_to "Log out", destroy_user_session_path, method: :delete + #main + #content= yield -- cgit 1.4.1