summaryrefslogtreecommitdiff
path: root/bak/design/old/v9/_images.scss
diff options
context:
space:
mode:
authorlxf <sng@luxagraf.net>2021-11-06 09:44:22 -0400
committerlxf <sng@luxagraf.net>2021-11-06 09:44:22 -0400
commit2c291d0bdfad485f3e7605d6b39433894e75a687 (patch)
treef9a73a0e1cbcd51d7ccc0fb99296049c66babe16 /bak/design/old/v9/_images.scss
parentd9f51299809bfb6b3ac589b7c42016d0ef240299 (diff)
moved design to bak because I don't need to access it much
Diffstat (limited to 'bak/design/old/v9/_images.scss')
-rw-r--r--bak/design/old/v9/_images.scss108
1 files changed, 108 insertions, 0 deletions
diff --git a/bak/design/old/v9/_images.scss b/bak/design/old/v9/_images.scss
new file mode 100644
index 0000000..4c0951c
--- /dev/null
+++ b/bak/design/old/v9/_images.scss
@@ -0,0 +1,108 @@
+.picwide, .cluster, .pic960 {
+ // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+ // I tweaked it slightly to add a bit of margin
+ width: 96vw;
+ position: relative;
+ left: 48%;
+ right: 48%;
+ margin-left: -46vw;
+ margin-right: -50vw;
+ @include breakpoint(gamma) {
+ width: 98vw;
+ position: relative;
+ left: 49%;
+ right: 49%;
+ margin-left: -48.5vw;
+ margin-right: -49.5vw;
+ }
+ @include breakpoint(epsilon) {
+ $margin: ($max_width - $narrow-max-width)/2;
+ left: 0;
+ right: 0;
+ margin-left: -$margin;
+ margin-left: -$margin;
+ width: $max_width;
+ max-width: $max_width;
+ }
+}
+p + .picwide {
+ margin-top: 1.5rem;
+ @include breakpoint(gamma) {
+ margin-top: 2.5rem;
+ }
+}
+.picwide + p {
+ margin-top: 1.5rem;
+ @include breakpoint(gamma) {
+ margin-top: 2.5rem;
+ }
+}
+.cluster {
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+ @include breakpoint(gamma) {
+ margin-bottom: 3rem;
+ margin-top: 3rem;
+ }
+}
+.row-2 {
+ a:last-of-type img, figure:last-of-type {
+ width: 49.7%;
+ float: right;
+ margin-right: 0;
+ }
+ a:first-of-type img, figure:first-of-type {
+ width: 49.7%;
+ float: left;
+ margin-left: 0;
+ margin-right: .3%;
+ }
+ &:after {
+ @extend %clearfix;
+ margin-bottom: .5rem;
+ }
+ figure:first-of-type img, figure:last-of-type img {
+ width: 100%;
+ }
+}
+.banner .post-image {
+ // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+ // I tweaked it slightly to add a bit of margin
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+}
+.embed-wrapper {
+ @include constrain_wide;
+ @include breakpoint(gamma) {
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+.embed-container {
+ position: relative;
+ padding-bottom: 56.25%;
+ height: 0;
+ overflow: hidden;
+ max-width: 100%;
+ margin-bottom: 1rem;
+}
+.embed-container iframe, .embed-container object, .embed-container embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.pullpicleft {
+ display: none;
+ @include breakpoint(gamma) {
+ display: block;
+ float: left;
+ margin-left: -280px;
+ padding-right: 1rem;
+ }
+}