From: Ruben Beltran del Rio Date: Wed, 12 Aug 2020 20:05:44 +0000 (+0200) Subject: Add new design X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/commitdiff_plain/b44cad659024e2f4b94f1f4066c96b941c34300a Add new design --- diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html index 701a309..c78cad7 100644 --- a/jekyll/_layouts/default.html +++ b/jekyll/_layouts/default.html @@ -24,10 +24,22 @@ --> -
- Unlimited Pizza -
- {{ content }} - +
+
+ Unlimited Pizza +
+ {{ content }} +
+ diff --git a/jekyll/css/application.css b/jekyll/css/application.css index 770d614..ffdcf3c 100644 --- a/jekyll/css/application.css +++ b/jekyll/css/application.css @@ -1,124 +1,293 @@ -html { - font-size: 10px; -} +/********************* + * Gontcharova Theme * + *********************/ body { margin: 0; - background-color: white; - font-family: times, 'Times New Roman', serif; + 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, h2 { - display: inline-block; - margin-left: 1rem; +h1 { + font-family: 'Bodoni 72', 'Century Schoolbook L', 'Rockwell Nova', serif; font-weight: 300; + font-size: 48px; } -header { - margin: -0.3em 0 0 -0.1em; - font-size: 9.6em; - font-style: italic; - text-transform: uppercase; +ul, p { + font-size: 16px; + font-weight: 300; } -h1, h2 { - font-size: 4.8em; +ul { + list-style: square; } -a { - color: blue; +ul a, +p a { + text-transform: lowercase; + font-weight: 600; + color: #C7434B; } -a:visited { - color: purple; +ul a:visited, +p a:visited { + color: #551C22; } -ul, p { - font-size: 1.8rem; - line-height: 1.28em; - margin-left: 1em; - max-width: 50em; - font-family: 'Helvetica Neue', Arial, sans-serif; +ul a:hover, +p a:hover { + color: #933B3C; } -li { - display: block; +ul a:active, +p a:active { + color: #A9938F; } -li p { - display: inline-block; - line-height: 1.82em; - margin: 0; +ul span, +p span { + font-style: oblique; + color: #9E7764; } -span { - display: inline; - color: grey; +@media only screen and (max-width: 1024px) { + header a { + font-size: 72px; + } } -img, -video { - display: block; - max-width: 100vw; +@media only screen and (max-width: 700px) { + body { + flex-flow: column wrap; + } + + header { + width: 45vw; + } + + .content-wrapper { + margin: 20px; + width: auto; + } } -header a, h1, h2, p { - background-color: white; +/************ + * 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; } -/* Dark mode overrides */ -@media (prefers-color-scheme: dark) { - body { - background-color: black; - color: white; +.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; } - header a, header a:visited { - color: white; + .red { + width: 32vw; + height: 4vw; } - a { - color: #53FFFF; + .red:hover { + margin: 0; + width: 64vw; + height: 16vw; } - a:visited { - color: #FF55FF; + .orangered { + width: 16vw; + height: 20vw; } - a[href^="telnet"] { - color: #55FF55; + .brown { + width: 32vw; + height: 16vw; } - span { - color: #FFEC27; + .redbrown { + width: 16vw; + height: 16vw; + position: relative; + top: -16vw; + left: 16vw; } - header a, h1, h2, p { - background-color: black; + .lightbrown { + width: 8vw; + height: 8vw; } -} -/* - * Mini header - */ -@media (max-width: 600px) { - header { - font-size: 4.8em; + .grey { + height: 16vw; + width: 24vw; + } + + .sand { + width: 8vw; + height: 32vw; } } -/* - * Breadsticks - */ -canvas.background { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: -1; +@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; + } } diff --git a/jekyll/index.html b/jekyll/index.html index 0464188..ad338b0 100644 --- a/jekyll/index.html +++ b/jekyll/index.html @@ -4,7 +4,7 @@ title: /index.html description: "unlimited.pizza - ruben beltran del río surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza" ---
-

Projects

+

Projects.

-