From 61ac134ab6fc68166b2fddeec16914d28e40aa26 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 21:05:44 -0500 Subject: Re-do CSS. I also add a few
tags, and added classes to a couple of s. I moved the dnd CSS to a separate file that is currently unused. I assume I'll add it back soon. --- lib/page.rb | 4 +- lib/page_index.rb | 5 +- src/main-dnd.scss | 68 ++++++++++++ src/main.scss | 307 +++++++++++++++++++++++++----------------------------- 4 files changed, 215 insertions(+), 169 deletions(-) create mode 100644 src/main-dnd.scss diff --git a/lib/page.rb b/lib/page.rb index b349dc8..ebc123b 100644 --- a/lib/page.rb +++ b/lib/page.rb @@ -91,11 +91,11 @@ class Page end def index_link(cururl, depth) # FIXME: This code is super gross. - ret = " * #{atom_title}" + ret += "\">#{atom_title}" atom_categories.each do |t| ret += t.html end diff --git a/lib/page_index.rb b/lib/page_index.rb index 43bf367..585fd57 100644 --- a/lib/page_index.rb +++ b/lib/page_index.rb @@ -57,7 +57,7 @@ class IndexPage < LocalPage def index_link(cururl, depth) ret = '' unless depth <= 1 - ret += "[#{atom_title}](#{cururl.route_to(url)})\n\n" + ret += "
[#{atom_title}](#{cururl.route_to(url)})\n\n" end for page in index_pages.select{|page|not page.is_a?(IndexPage)}.sort_by{|page|page.atom_published} ret += page.index_link(cururl, depth+1) @@ -67,6 +67,9 @@ class IndexPage < LocalPage ret += page.index_link(cururl, depth+1) end ret += "\n" + unless depth <= 1 + ret += "
\n\n" + end return ret.gsub(/\n\n+/, "\n\n") end def index_title diff --git a/src/main-dnd.scss b/src/main-dnd.scss new file mode 100644 index 0000000..712ae04 --- /dev/null +++ b/src/main-dnd.scss @@ -0,0 +1,68 @@ +body.dnd { + background: url(dnd/background.png) repeat-y; + background-size: 100%; + + /* This bit mostly taken from the defaults of org-mode export */ + article { + font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; + font-size: 12pt; + + table { + border-spacing: 0; + &, tr:last-child td, tr:last-child th { + border-bottom: solid 1px black; + } + &, tr:first-child td, tr:first-child th { + border-top: solid 1px black; + } + td, th { + padding: 6px; + } + } + + p { text-align: justify; } + .title { text-align: center; } + .todo { color: red; } + .done { color: green; } + .target { } + .timestamp { color: #bebebe; } + .timestamp-kwd { color: #5f9ea0; } + .right {margin-left:auto; margin-right:0px; text-align:right;} + .left {margin-left:0px; margin-right:auto; text-align:left;} + .center {margin-left:auto; margin-right:auto; text-align:center;} + p.verse { margin-left: 3% } + pre { + border: 1pt solid #AEBDCC; + background-color: #F3F5F7; + padding: 5pt; + //font-family: courier, monospace; + font-size: 90%; + overflow:auto; + } + table { border-collapse: collapse; } + td, th { vertical-align: top; } + th.right { text-align:center; } + th.left { text-align:center; } + th.center { text-align:center; } + td.right { text-align:right; } + td.left { text-align:left; } + td.center { text-align:center; } + dt { font-weight: bold; } + div.figure { padding: 0.5em; } + div.figure p { text-align: center; } + div.inlinetask { + padding:10px; + border:2px solid gray; + margin:10px; + background: #ffffcc; + } + textarea { overflow-x: auto; } + .linenr { font-size:smaller } + .code-highlighted {background-color:#ffff00;} + .org-info-js_info-navigation { border-style:none; } + #org-info-js_console-label { font-size:10px; font-weight:bold; + white-space:nowrap; } + .org-info-js_search-highlight {background-color:#ffff00; color:#000000; + font-weight:bold; } + } +} diff --git a/src/main.scss b/src/main.scss index d32d6ee..740f854 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,127 +1,118 @@ +@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC); + body { margin: 0; padding: 0; - font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; + background: rgb(255,255,240); + + font-family: 'Patrick Hand SC', sans-serif; + a { + text-decoration: none; + color: #1963b6; + &:hover, &:focus { + text-decoration: underline; + } + &:visited { + color: #460fb3; + } + + &.external { + background-position: center right; + background-repeat: no-repeat; + background-image: url(external.svg); + background-size: 12px 12px; + padding-right: 13px; + } + } } header { - width: 100%; + width: 20%; + margin: 0 -50% 0 0; + float: left; + + display: flex; + flex-direction: column; + + text-align: center; + + background-color: rgb(200,200,160); h1 { + background-color: #ce795e; + padding: 0.5em 0; margin: 0; - background-color: rgba(0, 0, 0, 0.6); - padding: 4px; - padding-bottom: 0; - - text-align: middle; - a:first-child { - font-size: 50px; - color: white; - } - &, a:not(:first-child) { - color: white; - font-size: 15px; - color: white; - } a { - text-decoration: none; - } - a:hover, a:focus { - text-decoration: underline; + color: black !important; } } nav { - /* layout */ - line-height: 1; - width: 100%; ul { - padding: 0; + display: flex; + flex-direction: column; margin: 0; - list-style: none; - } - li { - display: inline-block; - } - a { - display: block; - } - - /* pretty */ - background-color: Maroon; - a { - padding: 0.2em 1em; - font-size: 40px; - color: GoldenRod; - text-decoration: none; - - &:hover, &:focus { - background-color: white; - } - &:hover, &:visited { - color: GoldenRod; - } - &:active { - color: Black; - } - } - - form { - padding: 0.2em 0; - font-size: 40px; - display: block; + padding: 0; + li { + display: block; + font-size: 2em; + margin: 0.25em 0.5em; + + border: 2px solid #41403e; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius: 15px 255px; + + background-color: rgb(240,240,240); + transition: background-color 0.5s ease; + &:hover { + background-color: rgb(200,200,200); + } - input { - font-size: 25px; - border: solid 1px #333333; - vertical-align: middle; - } - input[type="search"] { - max-width: 10em; - } - input:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - input:not(:last-child) { - border-right: 0; - } - input:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + form { + display: inline-block; + width: calc(100% - 0.5em); + line-height: 0; + margin: 0.25em 0; + input { + width: 100%; + } + } } } } } -article { - max-width: 6.5in; +article, footer { + width: 60%; margin: 0 auto; +} +article { .tag { font-size: 60%; - // this should work! - font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; - color: white; - text-decoration: none; + color: white !important; text-align: center; + margin-left: 2px; padding: 4px 7px 5px 7px; - border-radius: 2px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius: 15px 255px; } .tag.ff { background: FireBrick; } .tag.ss { background: SeaGreen; } .tag.es { background: DarkViolet; } .tag.hb { background: DimGray; } .tag.dm { background: DarkSlateGray; } - .tag.wp { background: GhostWhite; color: black; } + .tag.wp { background: GhostWhite; color: black !important; border-color: Gray; border: solid 1.2px LightGray; } - border-bottom: solid 1px #333333; + border-bottom: solid 1px #c9cacc; } footer { - max-width: 6.5in; - margin: 0 auto; padding: 1em 0; font-size: 60%; p { @@ -129,96 +120,80 @@ footer { } } + +/* Index pages ****************************************************************/ + body.index { - article { - ul { - list-style: none; - display: table; - padding: 0; - li { - display: table-row; - line-height: 1.3em; - & > * { - display: table-cell; - padding-right: 0.1em; - } - } - } - a.external { - background-position: center right; - background-repeat: no-repeat; - background-image: url(external.svg); - background-size: 12px 12px; - padding-right: 13px; - } + @mixin card-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; } -} -body.dnd { - background: url(dnd/background.png) repeat-y; - background-size: 100%; + @mixin card { + display: block; + background-color: white; + border: 2px solid #e6e7e9; + padding: 1em; + margin: 1em; + + box-shadow: 15px 28px 25px -18px rgba(0,0,0,.2); + transition: box-shadow .5s ease; + &:hover { + box-shadow:2px 8px 4px -6px rgba(0,0,0,.3) + } + } - /* This bit mostly taken from the defaults of org-mode export */ article { - font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; - font-size: 12pt; + @include card-container; - table { - border-spacing: 0; - &, tr:last-child td, tr:last-child th { - border-bottom: solid 1px black; + & > h1 { + display: block; + width: 100%; + text-align: center; + margin: 0; + } + & > ul { + @include card-container; + width: 100%; + padding: 0; + margin: 0; + li { + @include card; } - &, tr:first-child td, tr:first-child th { - border-top: solid 1px black; + } + & > section { + @include card; + h2 { + margin-top: 0; } - td, th { - padding: 6px; + ul { + display: flex; + flex-direction: column; + + padding: 0; + margin: 0; + li { + display: flex; + flex-direction: row; + justify-content: space-between; + + padding: 0.5em 0; + border-top: 1px dashed #d9d9d8; + .link-main { + display: inline-block; + max-width: 12em; + line-height: 1.5em; + } + .link-categories { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-items: flex-start; + } + } } } - - p { text-align: justify; } - .title { text-align: center; } - .todo { color: red; } - .done { color: green; } - .target { } - .timestamp { color: #bebebe; } - .timestamp-kwd { color: #5f9ea0; } - .right {margin-left:auto; margin-right:0px; text-align:right;} - .left {margin-left:0px; margin-right:auto; text-align:left;} - .center {margin-left:auto; margin-right:auto; text-align:center;} - p.verse { margin-left: 3% } - pre { - border: 1pt solid #AEBDCC; - background-color: #F3F5F7; - padding: 5pt; - //font-family: courier, monospace; - font-size: 90%; - overflow:auto; - } - table { border-collapse: collapse; } - td, th { vertical-align: top; } - th.right { text-align:center; } - th.left { text-align:center; } - th.center { text-align:center; } - td.right { text-align:right; } - td.left { text-align:left; } - td.center { text-align:center; } - dt { font-weight: bold; } - div.figure { padding: 0.5em; } - div.figure p { text-align: center; } - div.inlinetask { - padding:10px; - border:2px solid gray; - margin:10px; - background: #ffffcc; - } - textarea { overflow-x: auto; } - .linenr { font-size:smaller } - .code-highlighted {background-color:#ffff00;} - .org-info-js_info-navigation { border-style:none; } - #org-info-js_console-label { font-size:10px; font-weight:bold; - white-space:nowrap; } - .org-info-js_search-highlight {background-color:#ffff00; color:#000000; - font-weight:bold; } } } -- cgit v1.1-4-g5e80