summaryrefslogtreecommitdiff
path: root/src/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/main.scss')
-rw-r--r--src/main.scss300
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%;
+ }
+ }
+}
generated by cgit v1.1-4-g5e80 at 2024-04-24 17:54:59 +0000