diff options
Diffstat (limited to 'out/main.css')
-rw-r--r-- | out/main.css | 233 |
1 files changed, 145 insertions, 88 deletions
diff --git a/out/main.css b/out/main.css index 511cb85..278d4f5 100644 --- a/out/main.css +++ b/out/main.css @@ -1,83 +1,93 @@ +@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: ivory; } + body a { + text-decoration: none; + color: #1963b6; } + body a:hover, body a:focus { + text-decoration: underline; } + body a:visited { + color: #460fb3; } + body a.external { + background-position: center right; + background-repeat: no-repeat; + background-image: url(external.svg); + background-size: 12px 12px; + padding-right: 13px; } + body a.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: #c8c8a0; } header h1 { - margin: 0; - background-color: rgba(0, 0, 0, 0.6); - padding: 4px; - padding-bottom: 0; - text-align: middle; } - header h1 a:first-child { - font-size: 50px; - color: white; } - header h1, header h1 a:not(:first-child) { - color: white; - font-size: 15px; - color: white; } + background-color: #ce795e; + padding: 0.5em 0; + margin: 0; } header h1 a { - text-decoration: none; } - header h1 a:hover, header h1 a:focus { - text-decoration: underline; } - header nav { - /* layout */ - line-height: 1; - width: 100%; - /* pretty */ - background-color: Maroon; } - header nav ul { - padding: 0; - margin: 0; - list-style: none; } - header nav li { - display: inline-block; } - header nav a { - display: block; } - header nav a { - padding: 0.2em 1em; - font-size: 40px; - color: GoldenRod; - text-decoration: none; } - header nav a:hover, header nav a:focus { - background-color: white; } - header nav a:hover, header nav a:visited { - color: GoldenRod; } - header nav a:active { - color: Black; } - header nav form { - padding: 0.2em 0; - font-size: 40px; - display: block; } - header nav form input { - font-size: 25px; - border: solid 1px #333333; - vertical-align: middle; } - header nav form input[type="search"] { - max-width: 10em; } - header nav form input:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; } - header nav form input:not(:last-child) { - border-right: 0; } - header nav form input:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; } + color: black !important; } + header nav ul { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; } + header nav ul 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: #f0f0f0; + transition: background-color 0.5s ease; } + header nav ul li:hover { + background-color: #c8c8c8; } + header nav ul li form { + display: inline-block; + width: calc(100% - 0.5em); + line-height: 0; + margin: 0.25em 0; } + header nav ul li form 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; - border-bottom: solid 1px #333333; } + overflow: hidden; + border-bottom: solid 1px #c9cacc; } article .tag { font-size: 60%; - 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; } article .tag.ff { background: FireBrick; } article .tag.ss { @@ -90,33 +100,80 @@ article { background: DarkSlateGray; } article .tag.wp { background: GhostWhite; - color: black; } + color: black !important; + border-color: Gray; + border: solid 1.2px LightGray; } footer { - max-width: 6.5in; - margin: 0 auto; - padding: 1em 0; - font-size: 60%; } + font-size: 70%; } footer p { margin: 0; } -body.index article ul { - list-style: none; - display: table; - padding: 0; } - body.index article ul li { - display: table-row; - line-height: 1.3em; } - body.index article ul li > * { - display: table-cell; - padding-right: 0.1em; } -body.index article a.external { - background-position: center right; - background-repeat: no-repeat; - background-image: url(external.svg); - background-size: 12px 12px; - padding-right: 13px; } +/* Index pages ****************************************************************/ +body.index article { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + font-family: 'Patrick Hand SC', sans-serif; } + body.index article > h1 { + display: block; + width: 100%; + text-align: center; + margin: 0; } + body.index article > ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + width: 100%; + padding: 0; + margin: 0; } + body.index article > ul li { + display: block; + background-color: white; + border: 2px solid #e6e7e9; + padding: 1em; + margin: 1em; + box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2); + transition: box-shadow .5s ease; } + body.index article > ul li:hover { + box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3); } + body.index article > section { + display: block; + background-color: white; + border: 2px solid #e6e7e9; + padding: 1em; + margin: 1em; + box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2); + transition: box-shadow .5s ease; } + body.index article > section:hover { + box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3); } + body.index article > section h2 { + margin-top: 0; } + body.index article > section ul { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; } + body.index article > section ul li { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0.5em 0; + border-top: 1px dashed #d9d9d8; } + body.index article > section ul li .link-main { + display: inline-block; + max-width: 12em; + line-height: 1.5em; } + body.index article > section ul li .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%; |