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. --- src/main.scss | 307 +++++++++++++++++++++++++++------------------------------- 1 file changed, 141 insertions(+), 166 deletions(-) (limited to 'src/main.scss') 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.2.3 From f9a30d866ce2e915d67cbce8e5b52aff73c4e269 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 23:13:29 -0500 Subject: CSS: opportunistically shorten index sections vertically --- src/main.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index 740f854..98adccb 100644 --- a/src/main.scss +++ b/src/main.scss @@ -128,6 +128,7 @@ body.index { display: flex; flex-direction: row; flex-wrap: wrap; + align-items: flex-start; } @mixin card { -- cgit v1.2.3 From e4de57c4077f74ec027e05d23dfee2d4b842276b Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 23:14:08 -0500 Subject: use Neucha as the font for prose text --- src/main.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index 98adccb..f85003b 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,11 +1,10 @@ -@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC); +@import url(https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC); body { margin: 0; padding: 0; background: rgb(255,255,240); - font-family: 'Patrick Hand SC', sans-serif; a { text-decoration: none; color: #1963b6; @@ -35,6 +34,7 @@ header { flex-direction: column; text-align: center; + font-family: 'Patrick Hand SC', sans-serif; background-color: rgb(200,200,160); @@ -87,6 +87,7 @@ header { article, footer { width: 60%; margin: 0 auto; + font-family: 'Neucha', sans-serif; } article { @@ -147,6 +148,7 @@ body.index { article { @include card-container; + font-family: 'Patrick Hand SC', sans-serif; & > h1 { display: block; -- cgit v1.2.3 From f3f07b1f02a7303056290b963cf10335d5fc72e2 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 23:31:09 -0500 Subject: minor style touch-ups --- src/main.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index f85003b..89044e5 100644 --- a/src/main.scss +++ b/src/main.scss @@ -91,6 +91,8 @@ article, footer { } article { + overflow: hidden; + .tag { font-size: 60%; color: white !important; @@ -115,7 +117,7 @@ article { footer { padding: 1em 0; - font-size: 60%; + font-size: 70%; p { margin: 0; } -- cgit v1.2.3 From c98b7cbc4e51b0c566fa0cfb5021dbcb50cd2c99 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 23:31:29 -0500 Subject: bring back dnd-style --- src/main.scss | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index 89044e5..3972b74 100644 --- a/src/main.scss +++ b/src/main.scss @@ -202,3 +202,74 @@ body.index { } } } + +/* D&D-style pages ************************************************************/ + +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; } + } +} -- cgit v1.2.3 From 96f557180f7b61750e312b057d443a946c418fda Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 22 Dec 2017 23:54:44 -0500 Subject: add a feed icon --- src/main.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index 3972b74..9860aa0 100644 --- a/src/main.scss +++ b/src/main.scss @@ -22,6 +22,13 @@ body { background-size: 12px 12px; padding-right: 13px; } + &.feed { + background-position: center left; + background-repeat: no-repeat; + background-image: url(feed.svg); + background-size: 0.65em 0.65em; + padding-left: 0.8em; + } } } -- cgit v1.2.3 From b06c4252293fce3171cd8d9f43cf061f1fdedeb1 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Sat, 23 Dec 2017 00:02:34 -0500 Subject: clean up nav/body page layout --- src/main.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index 9860aa0..be00d49 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,5 +1,9 @@ @import url(https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC); +* { + box-sizing: border-box; +} + body { margin: 0; padding: 0; @@ -34,8 +38,10 @@ body { header { width: 20%; - margin: 0 -50% 0 0; - float: left; + position: fixed; + height: 100%; + left: 0; + top: 0; display: flex; flex-direction: column; @@ -92,9 +98,11 @@ header { } article, footer { - width: 60%; - margin: 0 auto; + width: 80%; + margin-left: 20%; + font-family: 'Neucha', sans-serif; + padding: 1em; } article { @@ -123,7 +131,6 @@ article { } footer { - padding: 1em 0; font-size: 70%; p { margin: 0; -- cgit v1.2.3 From efbd3731c986a8555869c184cda69ff9b910ce9f Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Sat, 23 Dec 2017 15:52:22 -0500 Subject: pdf support --- src/main.scss | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index be00d49..cdbc200 100644 --- a/src/main.scss +++ b/src/main.scss @@ -287,3 +287,29 @@ body.dnd { font-weight:bold; } } } + +/* D&D-style pages ************************************************************/ + +body.pdf { + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + + display: flex; + flex-direction: column; + + article { + flex-grow: 2; + padding: 0; + + h1 { + text-align: center; + margin: 0.25em 0; + } + iframe { + width: 100%; + height: 100%; + } + } +} -- cgit v1.2.3 From bdb62265c5e0f8cbaa647479e10549f324e0712c Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Sat, 23 Dec 2017 21:40:58 -0500 Subject: CSS: Improve display of tags on PDF pages --- src/main.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index cdbc200..fadd75b 100644 --- a/src/main.scss +++ b/src/main.scss @@ -303,6 +303,10 @@ body.pdf { flex-grow: 2; padding: 0; + p { + float: left; + margin: 0.25em -100% 0.25em 0.25em; + } h1 { text-align: center; margin: 0.25em 0; -- cgit v1.2.3 From 0e7425ea2652fedfdf4e3074d515a380a02e725a Mon Sep 17 00:00:00 2001 From: AndrewMurrell Date: Mon, 25 Dec 2017 00:49:31 -0500 Subject: Added FR, PF, LD tags and colors to all new tags. --- src/main.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/main.scss') diff --git a/src/main.scss b/src/main.scss index fadd75b..0c5f0d5 100644 --- a/src/main.scss +++ b/src/main.scss @@ -126,6 +126,11 @@ article { .tag.hb { background: DimGray; } .tag.dm { background: DarkSlateGray; } .tag.wp { background: GhostWhite; color: black !important; border-color: Gray; border: solid 1.2px LightGray; } + .tag.ap { background: #C00000; } + .tag.wb { background: #CC3399; } + .tag.fr { background: #003300; } + .tag.pf { background: #FF0000; } + .tag.ld { background: #CCCC00; } border-bottom: solid 1px #c9cacc; } -- cgit v1.2.3