Update style

[rbdr/r.bdr.sh] / jekyll / css / application.css

diff --git a/jekyll/css/application.css b/jekyll/css/application.css
index 0700e2e6be4aae6871647ccc68677ea049b40243..ee2fe3d24c6836fa777d56566437e8f6d75f1b44 100644 (file)
--- a/jekyll/css/application.css
+++ b/jekyll/css/application.css
@@ -1,297 +1,25 @@
-/*********************
- * Gontcharova Theme *
- *********************/
-
-body {
-  margin: 0;
-  background-color: #FFF5E3;
-  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;
-  }
-}
-
-video {
-  width: 100%;
-}
-
-/************
- * 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;
   }
 }