X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/23760dda4174ba8eced33991c1294fd529e8ad42..27a68ff2b1f5f7792611955fba42e39306459cd2:/jekyll/css/application.css diff --git a/jekyll/css/application.css b/jekyll/css/application.css index f8b1bf2..2d9676d 100644 --- a/jekyll/css/application.css +++ b/jekyll/css/application.css @@ -1,144 +1,297 @@ -body {background-color: #fff} -a.logo {display: block; margin: 1.538em 0 0 1.538em; width: 44.615em; height: 7.692em; background-image: url(/img/header.gif)} -a.logo span {display:none} -em {color:#99a3a4} +/********************* + * Gontcharova Theme * + *********************/ -nav ul{ - list-style: none; - margin: 1.536em; +body { + margin: 0; + background-color: #DFD8CC; + font-family: Helvetica, Arial, sans-serif; + display: flex; + flex-flow: row nowrap; + transition: all 0.5s ease-in-out; } -nav ul li{ - display: inline; - font-family: 'Oswald', sans-serif; - text-transform: uppercase; - font-weight: 400; - font-size: 2.769em; - margin: 0.555em; +header { + margin-top: -20px; } -nav ul li a{ - color: #54575a; - text-decoration: none; +.content-wrapper { + margin: 100px 0 0 10px; + width: 45vw; } -nav ul li a:hover, -nav ul li a:active, -nav ul li a:focus { - color: #74777a; +header a, header a:visited { + font-family: 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, Freesans, sans-serif; + font-weight: 100; + font-size: 96px; + text-transform: uppercase; text-decoration: none; + color: black; } -.main-container { - margin: 3.077em 0; +h1 { + font-family: 'Bodoni 72', 'Century Schoolbook L', 'Rockwell Nova', serif; + font-weight: 300; + font-size: 48px; } -.postcontainer{ - margin: 2em 0; - font-family: 'Signika', sans-serif; - letter-spacing: 0.05em; +ul, p { + font-size: 16px; font-weight: 300; - color: #03090f; } -.postcontainer h1{ - font-family: 'Oswald', sans-serif; - text-transform: uppercase; - font-weight: 300; - color: #d30058; - margin: 0.666em 1.333em 0; +ul { + list-style: square; +} + +ul a, +p a { + text-transform: lowercase; + font-weight: 600; + color: #C7434B; +} + +ul a:visited, +p a:visited { + color: #551C22; +} + +ul a:hover, +p a:hover { + color: #933B3C; +} + +ul a:active, +p a:active { + color: #A9938F; } -.postcontainer.blue h1 {color: #0081cb} -.postcontainer.green h1 {color: #43da30} -.postcontainer.grey h1 {color: #9e978e} -.postcontainer.yellow h1 {color: #ffda00} -.postcontainer.orange h1 {color: #fd3839} -.postcontainer.red h1 {color: #f32240} -.postcontainer.cyan h1 {color: #74d0eb} -.postcontainer.purple h1 {color: #400098} +ul span, +p span { + font-style: oblique; + color: #9E7764; +} -.post-meta { - margin-left: 3.077em; +@media only screen and (max-width: 1024px) { + header a { + font-size: 72px; + } } -.post-meta > div { - display: inline-block; - font-size: 1.077em; +@media only screen and (max-width: 700px) { + body { + flex-flow: column wrap; + } + + header { + width: 45vw; + } + + .content-wrapper { + margin: 20px; + width: auto; + } } -.post-meta .post-date{width: 5.714em} -.post-date a {color:#99a3a4} -.post-tags a {color:#d30058; text-decoration: underline} +video { + width: 100%; +} -.postcontainer.blue .post-tags a {color: #0081cb} -.postcontainer.green .post-tags a {color: #43da30} -.postcontainer.grey .post-tags a {color: #9e978e} -.postcontainer.yellow .post-tags a {color: #ffda00} -.postcontainer.orange .post-tags a {color: #fd3839} -.postcontainer.red .post-tags a {color: #f32240} -.postcontainer.cyan .post-tags a {color: #74d0eb} -.postcontainer.purple .post-tags a {color: #400098} +/************ + * Tapestry * + ************/ -.post-image {height: 36.923em; background-color: #d30058; margin-top: 3.077em} +.orangered { background-color: #C84A0A; } +.red { background-color: #C7434B; } +.brown { background-color: #551C22; } +.redbrown { background-color: #933B3C; } +.lightbrown { background-color: #9E7764; } +.grey { background-color: #A9938F; } +.sand { background-color: #D2BE9A; } -.postcontainer.blue .post-image {background-color: #0081cb} -.postcontainer.green .post-image {background-color: #43da30} -.postcontainer.grey .post-image {background-color: #9e978e} -.postcontainer.yellow .post-image {background-color: #ffda00} -.postcontainer.orange .post-image {background-color: #fd3839} -.postcontainer.red .post-image {background-color: #f32240} -.postcontainer.cyan .post-image {background-color: #74d0eb} -.postcontainer.purple .post-image {background-color: #400098} +.tapestry { + order: -1; +} -.postcontent {margin: 1.538em 3.077em; - -webkit-column-width: 36.923em; - -moz-column-width: 36.923em; - column-width: 36.923em; - -webkit-column-gap: 6.154em; - -moz-column-gap: 6.154em; - column-gap: 6.154em; +.tapestry, +.tapestry div { + transition: all 0.5s ease-in-out; } -.postcontent p, .postcontent li{ - font-size: 1.077em; - line-height: 1.6em; - padding: 8px 0; +/* Large Tapestry */ + +.tapestry { + max-width: 42vw; + max-height: 42vw; + display: flex; + flex-flow: row wrap; + margin: 100px 0 0 100px; } -.postcontent strong{ - font-weight: 400; + +.red { + width: 14vw; + height: 14vw; } -.go-to-top {color:#99a3a4; margin: 1.538em 3.077em; display: block} +.red:hover { + margin: 3.5vw; + width: 7vw; + height: 7vw; +} -.main-container section, -.main-container aside{ text-align: left} +.brown, +.orangered, +.grey { + width: 14vw; + height: 28vw; +} -/* List pages */ +.grey:hover { + width:7vw; +} -.related {margin: 0 3.077em} -.related ul {margin: 0 1.538em} -.related li {font-size: 1.077em; font-family: "Lato"} -.related a {color: #d30058} +.sand { + width: 42vw; + height: 14vw; +} -.related a.blue {color: #0081cb} -.related a.green {color: #43da30} -.related a.grey {color: #9e978e} -.related a.yellow {color: #ffda00} -.related a.orange {color: #fd3839} -.related a.red {color: #f32240} -.related a.cyan {color: #74d0eb} -.related a.purple {color: #400098} +.sand:hover { + height: 2vw; +} -.related h1{ - font-family: 'Oswald', sans-serif; - text-transform: uppercase; - font-weight: 300; - padding-bottom: 0.666em; - color:#99a3a4; +.redbrown { + width: 7vw; + height: 14vw; } -/* Paginator */ +.redbrown:hover { + margin-bottom: 7vw; +} + +.lightbrown { + width: 7vw; + height: 7vw; +} + +.lightbrown:hover { + height: 28vw; +} + +.brown { + display: flex; + flex-flow: row wrap; + align-content: flex-end; + align-items: flex-end; +} + +@media only screen and (max-width: 1024px) { + .tapestry { + max-width: 32vw; + } + + .red { + width: 32vw; + height: 4vw; + } + + .red:hover { + margin: 0; + width: 64vw; + height: 16vw; + } + + .orangered { + width: 16vw; + height: 20vw; + } + + .brown { + width: 32vw; + height: 16vw; + } + + .redbrown { + width: 16vw; + height: 16vw; + position: relative; + top: -16vw; + left: 16vw; + } + + .lightbrown { + width: 8vw; + height: 8vw; + } -.paginator {font-size: 1.077em; margin: 2.857em; font-family: "Lato", sans-serif} + .grey { + height: 16vw; + width: 24vw; + } + + .sand { + width: 8vw; + height: 32vw; + } +} + +@media only screen and (max-width: 700px) { + .tapestry { + max-width: 80vw; + max-height: 8vw; + margin: 0px; + flex-flow: column wrap; + } + + .red { + width: 4vw; + height: 4vw; + } + + .red:hover { + width: 24vw; + height: 24vw; + } + + .orangered { + width: 16vw; + height: 8vw; + } + + .brown { + width: 32vw; + height: 8vw; + } + + .redbrown { + width: 24vw; + height: 4vw; + position: relative; + top: 0; + left: 0; + } + + .lightbrown { + width: 8vw; + height: 32vw; + } + + .lightbrown:hover { + height: 1vw; + } + + .grey { + height: 4vw; + width: 38vw; + } + + .sand { + width: 8vw; + height: 32vw; + } + + .sand:hover { + width: 10vw; + height: 6vw; + } +}