diff options
Diffstat (limited to 'src/main.scss')
-rw-r--r-- | src/main.scss | 300 |
1 files changed, 200 insertions, 100 deletions
diff --git a/src/main.scss b/src/main.scss index d32d6ee..0c5f0d5 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,159 +1,229 @@ +@import url(https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC); + +* { + box-sizing: border-box; +} + body { margin: 0; padding: 0; - font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; + background: rgb(255,255,240); + + 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; + } + &.feed { + background-position: center left; + background-repeat: no-repeat; + background-image: url(feed.svg); + background-size: 0.65em 0.65em; + padding-left: 0.8em; + } + } } header { - width: 100%; + width: 20%; + position: fixed; + height: 100%; + left: 0; + top: 0; + + display: flex; + flex-direction: column; + + text-align: center; + font-family: 'Patrick Hand SC', sans-serif; + + 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; + padding: 0; + li { + display: block; + font-size: 2em; + margin: 0.25em 0.5em; - &:hover, &:focus { - background-color: white; - } - &:hover, &:visited { - color: GoldenRod; - } - &:active { - color: Black; - } - } + 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; - form { - padding: 0.2em 0; - font-size: 40px; - display: block; + 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, footer { + width: 80%; + margin-left: 20%; + + font-family: 'Neucha', sans-serif; + padding: 1em; +} + article { - max-width: 6.5in; - margin: 0 auto; + overflow: hidden; .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; } + .tag.ap { background: #C00000; } + .tag.wb { background: #CC3399; } + .tag.fr { background: #003300; } + .tag.pf { background: #FF0000; } + .tag.ld { background: #CCCC00; } - border-bottom: solid 1px #333333; + border-bottom: solid 1px #c9cacc; } footer { - max-width: 6.5in; - margin: 0 auto; - padding: 1em 0; - font-size: 60%; + font-size: 70%; p { margin: 0; } } + +/* Index pages ****************************************************************/ + body.index { + @mixin card-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + } + + @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) + } + } + article { - ul { - list-style: none; - display: table; + @include card-container; + font-family: 'Patrick Hand SC', sans-serif; + + & > h1 { + display: block; + width: 100%; + text-align: center; + margin: 0; + } + & > ul { + @include card-container; + width: 100%; padding: 0; + margin: 0; li { - display: table-row; - line-height: 1.3em; - & > * { - display: table-cell; - padding-right: 0.1em; - } + @include card; } } - a.external { - background-position: center right; - background-repeat: no-repeat; - background-image: url(external.svg); - background-size: 12px 12px; - padding-right: 13px; + & > section { + @include card; + h2 { + margin-top: 0; + } + 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; + } + } + } } } } +/* D&D-style pages ************************************************************/ + body.dnd { background: url(dnd/background.png) repeat-y; background-size: 100%; @@ -222,3 +292,33 @@ 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; + + p { + float: left; + margin: 0.25em -100% 0.25em 0.25em; + } + h1 { + text-align: center; + margin: 0.25em 0; + } + iframe { + width: 100%; + height: 100%; + } + } +} |