summaryrefslogtreecommitdiff
path: root/bak/design/old/v9/_details.scss
diff options
context:
space:
mode:
Diffstat (limited to 'bak/design/old/v9/_details.scss')
-rw-r--r--bak/design/old/v9/_details.scss601
1 files changed, 601 insertions, 0 deletions
diff --git a/bak/design/old/v9/_details.scss b/bak/design/old/v9/_details.scss
new file mode 100644
index 0000000..53e819f
--- /dev/null
+++ b/bak/design/old/v9/_details.scss
@@ -0,0 +1,601 @@
+.detail {
+ #article {
+ padding-bottom: 2rem;
+ border-bottom: 3px double #efefef;
+ }
+ article {
+ font-family: $fancy_serif;
+ @include constrain_narrow;
+ margin-top: 4rem;
+ h1 {
+ font-family: $fancy_serif;
+ line-height: 1em;
+ letter-spacing: -1px;
+ @include fontsize(48);
+ font-weight: normal;
+ margin-bottom: .25rem
+ }
+ ul {
+ text-align: left;
+ @include fontsize(18);
+ }
+ }
+ .post-subtitle {
+ font-style: italic;
+ font-size: 1.4rem;
+ line-height: 1.25;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .post-subtitle-segundo {
+ @include fancy_sans;
+ @include smcaps;
+ @include fontsize(13);
+ font-weight: bold;
+ color: #999;
+
+ }
+ .post-linewrapper {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ display: inline-block;
+ border-top: 1px solid #efefef;
+ }
+ .post-location {
+ color: #b6b6b6;
+ text-align: center;
+ a {
+ color: #b6b6b6;
+ text-decoration: underline;
+ text-decoration-color: $orange;
+ }
+ @include breakpoint(gamma) {
+ text-align: left;
+ }
+ }
+ .post-date {
+ text-align: center;
+ @include breakpoint(alpha) {
+ text-align: left;
+ }
+ }
+ .map {
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ }
+ .post-header {
+ @include fancy_sans;
+ @include fontsize(18);
+ color: lighten($body_font_color, 20);
+ padding-bottom: 2.6rem;
+ border-bottom: 1px solid #efefef;
+ @include breakpoint(alpha) {
+ text-align: left;
+ }
+ time {
+ }
+ }
+ p:first-of-type {
+ margin-top: 2.6rem;
+ }
+ h4, h5 {
+ @include fancy_sans;
+ margin: 3rem 0 0 0;
+ }
+ h4 + p, .afterward h4 + p {
+ margin-top: .125rem;
+ }
+ h5 {
+ margin: 0
+ }
+ .afterward {
+ p {font-style: italic;}
+ h4 {
+ margin-bottom: 0;
+ }
+ }
+ p.small {
+ @include fontsize(18);
+ }
+ .sci {
+ text-align: center;
+ @include fontsize(24);
+ font-weight: 400;
+ margin: 0;
+
+ }
+ .sci:nth-child(3) {
+ @include fontsize(18);
+ margin-bottom: 2rem;
+ }
+ ul {
+ list-style: circle;
+ margin-left: 2.5em;
+ list-style-position: outside;
+ margin-bottom: 2.4em;
+ }
+ // Ack, id selector, so wrong, but easy handles the slightly different footer
+ // in the dialogue section that lists all the sightings
+ #endnode {
+ h5 {
+ @include fontsize(14);
+ @include smcaps;
+ @include fancy_sans;
+ margin-bottom: 1rem;
+ margin-top: 2rem;
+ }
+ ul {
+ margin-bottom: 2em;
+ list-style-type: none;
+ padding: 0;
+ li {
+ color: lighten($body_font_color, 30);
+ margin-bottom: 0;
+ margin-top: 0;
+ &:before {
+ content: "\2022";
+ color: lighten($body_font_color, 30);
+ margin-right: .35rem;
+ }
+ }
+ }
+ }
+ #detail-map-canvas {
+ height: 400px;
+ width: 98vw;
+ position: relative;
+ left: 49%;
+ right: 49%;
+ margin-left: -48vw;
+ margin-right: -49vw;
+ }
+}
+.post-dateline {
+ display: inline-block;
+ margin-top: 0em;
+ padding-top: 1rem;
+ padding-bottom: 2.6rem;
+ border-top: 1px solid #efefef;
+}
+header.tight {
+ margin-bottom: 3rem;
+ * {
+ margin: 0;
+ text-align: center;
+ }
+ h1 {
+ margin-bottom: 1rem;
+ }
+ h2 {
+ display: inline-block;
+ border-top: 1px solid darken(#efefef, 10);
+ padding-top: 1rem;
+ }
+ h3 {
+ margin-top: .35rem;
+ }
+}
+h4.post-source {
+ @include fontsize(14);
+ @include smcaps;
+ padding-bottom: 0em;
+ margin-bottom: 0;
+ margin-top: 0;
+ font-weight: bold;
+ color: #b6b6b6;
+ a {
+ color: #b6b6b6;
+ &:hover {
+ color: $link_color;
+ }
+ }
+}
+.post-location {
+ h3 {
+ display: inline;
+ @include fontsize(14);
+ }
+ a {
+ color: $secondary_link_color;
+ text-decoration: none;
+ }
+}
+.post-essay ~ p:first-child:first-letter {
+ @include fancy_sans;
+ font-size: 75px;
+ line-height: 60px;
+ padding-top: 4px;
+ padding-right: 8px;
+ padding-left: 3px;
+}
+//### GUIDE STUFF ###
+.product-card {
+ margin: 5rem 0;
+}
+.detail .product-link {
+ a {
+ display: block;
+ padding: 1rem;
+ background: #249bd6;
+ color: white;
+ text-transform: uppercase;
+ font-size: 16px;
+ text-decoration: none;
+ }
+}
+.buy-btn {
+ @include fancy_sans;
+ display: block;
+ padding: .5rem 1rem;
+ background: #249bd6;
+ color: white;
+ text-transform: uppercase;
+ @include fontsize(16);
+ text-decoration: none;
+ margin-right: 1rem;
+}
+.buy-btn-wrapper {
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ align-content: space-between;
+ h4 {
+ margin: 0 1.5rem 0 0;
+ line-height: normal;
+ &:after {
+ content: ":";
+ }
+ }
+ h5 {
+ margin-right: 1rem;
+ }
+}
+.post-guide .buy-btn-wrapper {
+ margin-top: 4rem;
+ justify-content: center;
+}
+.detail .post-guide {
+ h3 {
+ @include fontsize(27);
+ margin: 4rem 0 .5rem 0;
+ & + p {
+ margin-top: 0;
+ }
+ }
+}
+//### PAGE NAVIGATION ###
+.nav-wrapper {
+ @include constrain_narrow();
+ border-bottom: 3px double #efefef;
+}
+#page-navigation {
+ margin: 2em auto;
+ text-align: center;
+ display: table;
+ ul {
+ list-style-type: none;
+ margin: 0 auto;
+ width: 100%;
+ text-align: center;
+ padding: 0;
+ }
+ li {
+ margin: 6px auto;
+ clear: both;
+ line-height: 24px;
+ text-align: center;
+ }
+ span {
+ @include fancy_sans;
+ @include fontsize(14);
+ min-width: 70px;
+ display: block;
+ text-align: right;
+ margin-right: 10px;
+ float: left;
+ }
+ a {
+ display: block;
+ float: left;
+ font-family: $fancy_serif;
+ text-align: left;
+ font-style: italic;
+ color: $brown;
+ text-decoration: none;
+ }
+}
+
+.article-afterward {
+ @extend %clearfix;
+ @include constrain_narrow;
+ padding-bottom: 2rem;
+ .article-card-mini {
+ margin-bottom: 0
+ }
+ .hedtinycaps {
+ display: inline-block;
+ margin-bottom: 2.5rem;
+ border-bottom: 2px solid #efefef;
+ }
+ @include breakpoint(gamma) {
+ @include constrain(960px);
+ }
+}
+.related-bottom {
+ @extend %clearfix;
+ &:after {
+ display: block;
+ content: '';
+ @include constrain_narrow;
+ height: 30px;
+ border-bottom: 3px double #efefef;
+ }
+}
+.article-card-list {
+ padding: 0 !important;
+ margin: 0 !important;
+ list-style-type: none !important;
+ margin: 0 auto !important;
+}
+.article-card-mini, .detail .article-card-mini {
+ margin-left: 0;
+ margin-right: 0;
+ margin-bottom: 2rem;
+ max-width: 100%;
+ a { text-decoration: none;}
+ .post-title {
+ @include fontsize(20);
+ text-align: center;
+ line-height: 1.2;
+ margin: 0;
+ }
+ .post-subtitle {
+ @include fontsize(18);
+ text-align: center;
+ font-family: $fancy_serif;
+ font-style: italic;
+ font-weight: normal;
+ margin: .25rem auto 0;
+ }
+ .post-summary, .post-date{
+ text-align: center;
+ display: inline-block;
+ line-height: 0.6 !important;
+ color: #b6b6b6;
+ }
+ @include breakpoint(omega) {
+ margin: 0 auto;
+ max-width: 70%;
+ margin-bottom: 0;
+ }
+ @include breakpoint(alpha) {
+ max-width: 50%;
+ }
+ @include breakpoint(beta) {
+ max-width: 47%;
+ float: left;
+ margin-right: 1rem;
+ margin-bottom: 1.5rem;
+ }
+ @include breakpoint(gamma) {
+ max-width: 230px;
+ float: left;
+ margin-right: .5rem;
+ }
+}
+.post-mini-image {
+ max-height: 220px;
+ overflow: hidden;
+ @include breakpoint(beta) {
+ margin-bottom: 1rem;
+ }
+ img {
+ margin-top: -20%;
+ }
+}
+
+
+.entry-footer {
+ @extend %clearfix;
+ @include constrain_narrow;
+ border-bottom: 3px double #efefef;
+ margin-top: 2em;
+ text-align: left;
+ h3 {
+ @include smcaps;
+ @include fontsize(16);
+ }
+ h3 + ul {
+ padding: 0;
+ }
+ li {
+ margin: .25em 0;
+ list-style-type: none;
+ }
+ li ul {
+ columns: 2 auto;
+ list-style-type: none;
+ margin-left: .5rem;
+ padding: 0;
+ }
+ li ul li:before {
+ content: "\2022";
+ margin-right: .45rem;
+ color: lighten($body_font_color, 40);
+ }
+ .grouper {
+ margin-top: 1em;
+ }
+ a {
+ text-decoration: none;
+ color: lighten($body_font_color, 20);
+ }
+ #wildlife li ul li {
+ color: lighten($body_font_color, 40);
+ a {
+ color: lighten($body_font_color, 10);
+ }
+ }
+ @include breakpoint(beta) {
+ padding-bottom: 2rem;
+ #wildlife {
+ max-width: 55%;
+ float: left;
+ margin-right: 1.2rem;
+ }
+ #recommended-reading{
+ ul {
+ list-style-type: none;
+ }
+ img {
+ max-width: 180px;
+ }
+ }
+ }
+ aside {
+ @extend %clearfix;
+ }
+}
+#field_notes {
+ @include breakpoint(beta) {
+ max-width: 33%;
+ float: left;
+ margin-top: .15em;
+ margin-left: 7em;
+ }
+ li:before {
+ content: "\2022";
+ margin-right: .35rem;
+ color: $body_font_light;
+ }
+}
+.rr-clear {
+ clear: left;
+}
+
+//### FOOTNOTES ###
+.footnote {
+ margin: 1em auto 0 auto;
+ padding: 0;
+ list-style-type: none;
+ p {
+ font-size: 1rem;
+ line-height: 1.4;
+ margin-top: 0 !important;
+ }
+ hr {display: none;}
+ ol {
+ padding-left: 1em;
+ @include breakpoint(alpha) {
+ margin-left: 1em;
+ }
+ }
+}
+sup {
+ line-height: 1;
+ .footnote-ref {
+ padding: 4px 3px;
+
+ }
+}
+
+//### Figments ###
+.downloads {
+ list-style-type: none;
+}
+
+// ### Books ###
+.book {
+ &:after {
+ display: block;
+ content: '';
+ height: 30px;
+ border-bottom: 3px solid #efefef;
+ width: 200px;
+ margin: 0 auto 3rem auto;
+ padding-left: 30px;
+ }
+}
+.book-metadata {
+ text-align: left;
+ @include fancy_sans;
+ dd {
+ display: inline;
+ margin: 0;
+ }
+ dd:after{
+ display: block;
+ content: '';
+ }
+ dt{
+ display: inline-block;
+ }
+ dt:after {
+ content: ":";
+ }
+}
+.thoughts, .highlights, .meta-cover, .dis {
+ @include constrain_narrow;
+ font-family: $fancy_serif;
+ text-align: left;
+ p {
+ max-width: 100%;
+ }
+}
+.book-cover-wrapper {
+ @include constrain_wide;
+ img {
+ float: left;
+ max-width: 20rem;
+ }
+}
+.thoughts {
+ margin-top: 4rem;
+ p:first-of-type {
+ margin-top: 0;
+ }
+}
+.thoughts h5, .highlights h4 {
+ font-weight: 500;
+ letter-spacing: 1px;
+ margin: 3em 0 .5em 0;
+ @include fancy_sans;
+ @include smcaps;
+ @include fontsize(14);
+}
+.highlights div:first-of-type p:first-of-type {
+ margin-top: 0;
+}
+.book-highlight p:last-of-type {
+ margin-bottom: 0;
+}
+.book p:last-of-type, .highlights div:first-of-type p:last-of-type{
+ margin-top: 8px;
+}
+.highlink {
+ @include fontsize(20);
+ margin-right: .5rem;
+ float: left;
+ line-height: 1.6;
+ text-decoration: none;
+ color: lighten($body_font_color, 60);
+ @include breakpoint(alpha) {
+ margin-top: 1px;
+ }
+ &:visited {
+ color: lighten($body_font_color, 60);
+ }
+}
+.foot {
+ margin-top: 16px;
+ @include fancy_sans;
+ @include fontsize(16);
+}
+.dis {
+ @include fontsize(16);
+ text-align: center;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-17 12:28:13 +0000