summaryrefslogtreecommitdiff
path: root/bak/design/old/v9/_archives.scss
diff options
context:
space:
mode:
Diffstat (limited to 'bak/design/old/v9/_archives.scss')
-rw-r--r--bak/design/old/v9/_archives.scss525
1 files changed, 525 insertions, 0 deletions
diff --git a/bak/design/old/v9/_archives.scss b/bak/design/old/v9/_archives.scss
new file mode 100644
index 0000000..b5cb4af
--- /dev/null
+++ b/bak/design/old/v9/_archives.scss
@@ -0,0 +1,525 @@
+// container for archive intros
+.intro {
+ @include constrain_wide;
+ font-family: $fancy_serif;
+ @include breakpoint(alpha){
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+ grid-gap: 1rem;
+ }
+
+}
+// container for archive intros, narrow version
+.intro-narrow {
+ margin-top: 3rem;
+ @include constrain_narrow;
+ p {
+ @include fontsize(18);
+ font-style: italic;
+ }
+ h1 {
+ @include smcaps;
+ @include fontsize(18);
+ text-align: left;
+ }
+}
+.essay-intro {
+ font-family: $fancy_serif;
+ border-bottom: 3px double #efefef;
+ padding-bottom: 3rem;
+ margin-bottom: 4rem;
+ margin-top: 3rem;
+ p {
+ font-style: normal !important;
+ @include fontsize(18);
+ line-height: 1.5;
+ margin-top: 1.2rem !important;
+ &:first-of-type {
+ margin-top: 2rem !important;
+ }
+ }
+ a {
+ text-decoration: underline !important;
+ text-decoration-color: $orange !important;
+
+ }
+ ul {
+ padding-left: 1rem !important;
+ list-style-type: disc !important;
+ }
+ li {
+ margin-bottom: 4px !important;
+ }
+}
+.archive-list .essay-intro {
+ h2 {
+ @include fontsize(38);
+ }
+ h3 {
+ font-weight: normal;
+ font-family: $fancy_serif;
+ @include fontsize(22);
+ line-height: 1.3;
+ font-style: italic;
+ margin: .25rem 0 .5rem;
+ }
+}
+
+// container for archive grid items
+.archive-grid > article {
+ display: inline-block;
+ width: 32%;
+ vertical-align: top;
+}
+.archive-grid {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ @include constrain_wide;
+ display: grid;
+ margin-top: 3rem;
+ @include breakpoint(alpha){
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ grid-gap: .75rem;
+ }
+ @include breakpoint(beta){
+ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+ grid-gap: .75rem;
+ }
+}
+.archive-circle-grid {
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+ grid-gap: 4rem;
+ grid-row-gap: 3rem;
+ margin-top: 5rem;
+ img {
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ border: 6px solid #333;
+ object-fit: cover;
+ }
+}
+
+// wrapper for archive pages, makes sure there isn't a narrow col width
+.meta-archive {
+ @include constrain_wide;
+}
+.archive-intro {
+ @include constrain_narrow;
+ border-bottom: 3px double #efefef;
+ padding-bottom: 3rem;
+ margin-bottom: 4rem;
+ margin-top: 3rem;
+ ul {
+ font-family: $fancy_serif;
+ @include fontsize(24);
+ }
+}
+
+@supports (display:grid) {
+ .archive-grid > article {
+ width: auto;
+ }
+}
+// body class archive, article header (usually inherits h2)
+.archive .post-title {
+ font-family: $fancy_serif;
+ @include fontsize(26);
+ line-height: 1.3;
+ font-style: italic;
+ margin: .25rem 0 .5rem;
+ a {
+ @include plain_a;
+ }
+}
+// the date and location are small caps
+.post-date, .post-location {
+ @include smcaps;
+ @include fontsize(14);
+ font-weight: bold;
+ color: $secondary-link-color;
+ line-height: 1.2;
+ text-align: left;
+ margin: 0;
+}
+// slightly larger summary than a p in this context
+.post-summary {
+ font-family: $fancy_serif;
+ @include fontsize(16);
+ line-height: $archive_p_line_height;
+ margin-top: .25rem;
+ text-align: left;
+ margin: 0;
+}
+
+.archive-list {
+ @include constrain_narrow;
+ @include breakpoint(epsilon) {
+ }
+ text-align: left;
+ h1, .list-title {
+ text-align: left;
+ @include fancy_sans;
+ @include fontsize(36);
+ font-weight: normal;
+ }
+ span {
+ @include fancy_sans;
+ @include smcaps;
+ @include fontsize(13);
+ font-weight: bold;
+ color: #999;
+ }
+ ul {
+ padding: 0;
+ list-style-type: none;
+ }
+ a {
+ text-decoration: none;
+ color: lighten($body_font_color, 20);
+ &:hover {
+ color: $link_color;
+ }
+ }
+ h2, .list-hed {
+ font-family: $fancy_serif;
+ @include fontsize(32);
+ margin: 0;
+ line-height: 1.1;
+ }
+ p {
+ margin: 0;
+ @include fontsize(20);
+ font-style: italic;
+ }
+}
+// Specific pages vary slightly
+// Books
+.book-grid {
+ @include breakpoint(alpha){
+ grid-gap: .75rem;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ }
+ @include breakpoint(beta){
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ grid-gap: .75rem;
+ }
+ .post-title {
+ @include fontsize(22);
+ line-height: 1.4;
+ }
+ .author {
+ @include smcaps;
+ font-weight: 400;
+ @include fontsize(12);
+ text-align: left;
+ margin: 0;
+
+ }
+ .book-stars {
+ display: block;
+ }
+}
+
+// Dialogues
+.dialogue-grid {
+ .post-title {
+ font-style: normal;
+ @include fontsize(22);
+ line-height: 1.4;
+ }
+}
+// Dialogues, used in both archives and details
+.sci {
+ font-style: italic;
+ @include fontsize(18);
+}
+
+// figments
+.figments-grid {
+ @include constrain_narrow;
+ .post-title {
+ font-style: normal;
+ @include smcaps;
+ @include fontsize(16);
+ }
+}
+
+.wide-list {
+ @include constrain_wide;
+ li {
+ margin-top: 3rem;
+ margin-left: auto;
+ margin-top: auto;
+ margin-bottom: 3rem;
+ }
+ .permalink {
+ display: block;
+ text-align: left;
+ }
+ @include breakpoint(gamma) {
+ li {
+ display: flex;
+ }
+ .wide-wrapper {
+ flex: 3 0px;
+ order: 1;
+ }
+ a {
+ flex: 3 0px;
+ order: 2;
+ }
+ .post-summary p {
+ @include fontsize(20);
+ margin-right: 2rem;
+ }
+ }
+}
+
+// Homepage
+#home .header-wrapper {
+ margin-bottom: 0;
+}
+#home section {
+ @extend %clearfix;
+ @include constrain_wide;
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+}
+#home section.bio-short {
+ margin-bottom: 6rem;
+}
+@include breakpoint(gamma){
+ .recent {
+ max-width: 64%;
+ width: 64%;
+ float: left;
+ }
+ .popular {
+ max-width: 33%;
+ width: 33%;
+ float: right;
+ }
+}
+.banner {
+ margin-top: 0 !important;
+ .post-image {
+ overflow: hidden;
+ }
+ article {
+ position: relative;
+ }
+ figcaption {
+ border: none;
+ position: absolute;
+ margin: 0;
+ bottom: 0;
+ width: 100%;
+ z-index: 100;
+ background: rgb(0, 0, 0);
+ background: rgba(0, 0, 0, 0.6);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+ filter: alpha(opacity = 70);
+ font-weight: 400;
+ padding-bottom: 30px;
+ time {display: none;}
+ .btn {text-decoration: none; color: white; }
+ }
+ .hero-text-wrapper {
+ padding-top: 2rem;
+ @include constrain_narrow;
+ color: white;
+ font-family: $headline_font_serif;
+ .post-title, .post-subtitle {
+ font-style: normal;
+ text-align: center;
+ margin-bottom: 0;
+ line-height: 1;
+ @include fontsize(42);
+ a {
+ color: white;
+ margin-bottom: 0;
+ text-decoration: none;
+ }
+ }
+ .post-subtitle {
+ font-style: italic;
+ @include fontsize(22);
+ margin-top: .45rem;
+ }
+ .post-location {
+ text-align: center;
+ margin-top: .5rem;
+ .h-adr {
+ border-top: 1px solid #423f3f;
+ display: inline-block;
+ padding-top: .5rem;
+ }
+ }
+ a {
+ color: $body_font_light;
+ padding: 0;
+ border: none;
+ margin-top: .5rem;
+ }
+ }
+ .post-location {
+ color: lighten($body_font_light, 5);
+ a {
+ color: lighten($body_font_light, 5);
+ text-decoration: none;
+ @include fontsize(14);
+ }
+ }
+ .btn {
+ @include smcaps;
+ @include fancy_sans_bold;
+ @include fontsize(12);
+ line-height: 1;
+ display: block;
+ max-width: 40px;
+ background: #b53a04;
+ border-radius: .35em;
+ color: white !important;
+ text-transform: uppercase;
+ padding: .85rem 1rem .55rem !important;
+ text-align: center;
+ margin: 2rem auto 0;
+ }
+ @include breakpoint(gamma){
+ max-height: 900px;
+ .post-image {
+ max-height: 900px;
+ }
+ }
+}
+.homepage-map-img {
+ width: 350px;
+ height: auto;
+ @include breakpoint(delta){
+ float: left;
+ width: 350px;
+ margin-right: 2rem;
+ }
+
+}
+@include breakpoint(delta){
+ .addafter {
+ &:after {
+ content: "to the left";
+ }
+ }
+ .subcontent {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
+}
+.homepage-section-header {
+ @include fancy_sans;
+ @include fontsize(24);
+ font-weight: normal;
+ text-align: left;
+ @include breakpoint(gamma){
+ @include fontsize(28);
+ line-height: 1.4;
+ }
+}
+.popular, .recent {
+ .post-title {
+ @include fontsize(22);
+ font-weight: 400;
+ }
+ .post-image {
+ max-height: 12rem;
+ overflow: hidden;
+ }
+ img {
+ margin-top: -20%
+ }
+}
+.homepage-next {
+ margin: 0 auto;
+ text-align: center;
+ a {
+ @include fontsize(14);
+ @include fancy_sans;
+ @include smcaps;
+ font-weight: 500;
+ text-decoration: none;
+ padding: 12px 10px 12px;
+ border: $link_color 1px solid;
+ &:after {
+ content: "\21E2";
+ margin-left: 4px;
+ }
+ &:hover {
+ background: $link_color;
+ color: white;
+ }
+ }
+}
+.essay-archive {
+ li {
+ margin-bottom: 2.8rem;
+ }
+}
+.fancy-archive-list {
+ li { margin-bottom: 3.8rem }
+ p {
+ line-height: 1.3;
+ margin-top: 4px;
+ }
+ h3.p-summary {
+ @include fontsize(22);
+ font-weight: 300;
+ font-family: $headline_font_serif;
+ font-style: italic;
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ line-height: 1.2;
+ }
+ .post-location {
+ margin: .5rem 0 0 0;
+ }
+}
+.circle-img-wrapper {
+ width: 106px;
+ height: 106px;
+ float: left;
+ overflow: hidden;
+ border-radius: 50%;
+ border: 3px solid #666;
+ margin-right: .5rem;
+ img {
+ width: 160px;
+ max-width: 160px;
+ }
+ @include breakpoint(gamma) {
+ margin-left: -128px;
+ margin-top: -4px;
+ }
+}
+
+
+//.note-pad-top {
+// //make a field note among photos stand out more
+// margin-top: 8rem !important;
+// &:before {
+// margin-bottom: 2.5rem;
+// @include faded_line_after;
+// }
+//}
+//.note-pad-bottom {
+// //make a field note among photos stand out more
+// margin-bottom: 8rem !important;
+// &:after {
+// @include faded_line_after;
+// }
+//}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-17 06:31:31 +0000