diff options
Diffstat (limited to 'src/main.scss')
-rw-r--r-- | src/main.scss | 307 |
1 files changed, 141 insertions, 166 deletions
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; } } } |