X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/b44cad659024e2f4b94f1f4066c96b941c34300a..6a20801317dee91c4e0c23c4f4d914201b7e3489:/jekyll/css/application.css?ds=sidebyside diff --git a/jekyll/css/application.css b/jekyll/css/application.css index ffdcf3c..ee2fe3d 100644 --- a/jekyll/css/application.css +++ b/jekyll/css/application.css @@ -1,293 +1,25 @@ -/********************* - * Gontcharova Theme * - *********************/ - -body { - margin: 0; - background-color: #D1C5B0; - font-family: Helvetica, Arial, sans-serif; - display: flex; - flex-flow: row nowrap; - transition: all 0.5s ease-in-out; -} - -header { - margin-top: -20px; -} - -.content-wrapper { - margin: 100px 0 0 10px; - width: 45vw; -} - -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; -} - -h1 { - font-family: 'Bodoni 72', 'Century Schoolbook L', 'Rockwell Nova', serif; - font-weight: 300; - font-size: 48px; -} - -ul, p { - font-size: 16px; - font-weight: 300; +h1 canvas { + width: 64px; + height: 64px; + display: inline-block; + background-color: gainsboro; } 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; -} - -ul span, -p span { - font-style: oblique; - color: #9E7764; -} - -@media only screen and (max-width: 1024px) { - header a { - font-size: 72px; - } -} - -@media only screen and (max-width: 700px) { +@media (prefers-color-scheme: dark) { body { - flex-flow: column wrap; - } - - header { - width: 45vw; - } - - .content-wrapper { - margin: 20px; - width: auto; - } -} - -/************ - * Tapestry * - ************/ - -.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; } - -.tapestry { - order: -1; -} - -.tapestry, -.tapestry div { - transition: all 0.5s ease-in-out; -} - -/* Large Tapestry */ - -.tapestry { - max-width: 42vw; - max-height: 42vw; - display: flex; - flex-flow: row wrap; - margin: 100px 0 0 100px; -} - - -.red { - width: 14vw; - height: 14vw; -} - -.red:hover { - margin: 3.5vw; - width: 7vw; - height: 7vw; -} - -.brown, -.orangered, -.grey { - width: 14vw; - height: 28vw; -} - -.grey:hover { - width:7vw; -} - -.sand { - width: 42vw; - height: 14vw; -} - -.sand:hover { - height: 2vw; -} - -.redbrown { - width: 7vw; - height: 14vw; -} - -.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; - } - - .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; + color: white; + background-color: black; } - .sand { - width: 8vw; - height: 32vw; + a { + color: #5dc1fd; } - .sand:hover { - width: 10vw; - height: 6vw; + a:visited { + color: #ed6eff; } }