display rework

[kengrimes.com/theme.git] / static / css / main.css

diff --git a/static/css/main.css b/static/css/main.css
index 9652062..e5f6948 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -13,106 +13,150 @@ h2 {
   text-decoration: underline;
   font-size: 1.33em;
 }
-ul.pagination {
-  display: flex;
-  justify-content: center;
-}
-ul.pagination > li {
-  margin: 0 0.2em;
-  display: inline;
-}
 body {
-  margin: 0 0;
-  display: flex;
-  flex-flow: column nowrap;
-  background-color: lightslategrey;
-}
-body > header {
   margin: 0;
-  padding: 0.93rem 1% 0 1%;
-  border-radius: 9.33rem 0 0 0;
   background-color: slategrey;
+}
+body > nav {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 100;
+  top: 0;
+}
+body > header {
+  padding: 0 0 1px 0;
   display: flex;
-  flex-flow: row wrap;
-  align-items: start;
   justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+  background-color: darkslategrey;
 }
-body > header > figure {
-  margin: 0;
-  display: flex;
-  border-radius: 90% 10% 1.3rem 1.3rem;
+body > main {
+  margin: 0 0 0 0;
+  padding: 0 2% 2% 2%;
+  background-color: slategrey;
+  font-size: 1.8rem;
+  font-family: sans;
+  color: #1f1f1f;
+}
+body > footer {
+  font-size: 0.8rem;
   background-color: darkslategrey;
-  border: 1rem double slategrey;
+  height: 4rem;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  color: lightslategrey;
 }
-body > header > figure > img {
-  border-radius: 50% 3% 3% 3%;
-  width: 128px;
+body > header > img {
+  margin: 0 3px 0 0;
   height: 128px;
+  border-radius: 50%;
+  box-shadow: 2px 1px black;
+  border: 1px solid black;
+  background-color: slategrey;
 }
-body > header > nav {
-  flex: 1 1 auto;
+body > header > div {
+  width: 256px;
+  font-size: 1.1rem;
+  font-family: fantasy;
+  box-shadow: 2px 1px black;
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 3px;
+  background-color: slategrey;
+  color: darkslategrey;
   text-align: center;
+  border: thin solid black;
 }
-body > header > nav > header {
-  font-size: 1.3rem;
-  font-family: fantasy;
-  color: slategrey;
-  background-color: darkslategrey;
-  border-radius: 1.3rem 1.3rem 0 0;
-  border: 0.8rem double slategrey;
+body > nav svg {
+  margin: 0 0;
+  padding: 0 0;
+  width: 8vh;
+  max-width: 12.5vw;
+  height: 8vh;
+  max-height: 12.5vw;
+  fill: darkslategrey;
+}
+body > nav a > summary {
+  display: none;
 }
-body > header > nav > nav {
+body > nav a > svg:hover,
+body > nav a > svg:active,
+body > nav svg.selected {
+  fill: #1f2f2f;
+}
+body > nav > div {
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
+  background-color: rgba(112, 128, 144, 0.8);
 }
-body > header > nav > footer {
-  font-size: 1.1rem;
+body > nav > footer {
+  font-size: 3vh;
   font-family: fantasy;
   color: slategrey;
   background-color: darkslategrey;
   border-radius: 0 0 1.3rem 1.3rem;
-  border: 0.8rem double slategrey;
+  text-align: center;
 }
-body > header > nav svg {
-  margin: 0 0;
-  width: 3rem;
-  height: 3rem;
-  fill: darkslategrey;
+div.speedy-cards {
+  display: flex;
+  justify-content: space-around;
+  flex-flow: row wrap;
+  font-size: 0.8em;
+}
+div.speedy-cards > a {
+  position: relative;
+  display: block;
+  text-decoration: none;
+  font-size: 5vmin;
+  font-weight: bold;
+  margin: 3vw;
+  width: 33vmin;
+  height: 33vmin;
+  box-shadow: 2px 1px black;
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 3px;
+  overflow: hidden;
+  background-color: lightslategrey;
 }
-body > header > nav a > summary {
+div.speedy-cards > a > div {
+  font-size: 3vmin;
+  font-weight: normal;
+}
+div.speedy-cards > a > img {
+  opacity: 0.2;
+  position: absolute;
+  top: 3vmin;
+  right: 1vmin;
+  width: 40%;
+  height: 40%;
+  background-size: 100% 100%;
+  border-radius: 50%;
+  border: 1px solid black;
+}
+div.speedy-cards > br {
+  /* Linebreaks are inserted and made invisible to make text browsers and
+   ARIA-readers break between anchors */
   display: none;
 }
-body > header > nav a > svg:hover,
-body > header > nav a > svg:active,
-body > header > nav svg.selected {
-  fill: #1f2f2f;
+div.pagination {
 }
-
-body > main {
-  margin: 0 0 0 0;
-  padding: 0 2% 2% 2%;
-  background-color: slategrey;
-  font-size: 1.8rem;
-  font-family: sans;
-  color: #1f1f1f;
+ul.pagination {
+  padding: 0;
+  list-style: none;
+  text-align: center;
 }
-body > main > article {
-  font-size: 0.8em;
-  padding: 0 2% 2% 2%;
-  border-radius: 1em 1em;
-  background-color: lightslategrey;
-  border-top: 1px solid black;
-  border-bottom: 1px solid grey;
+ul.pagination > li {
+  margin: 0 0.2em;
+  display: inline;
 }
-body > footer {
-  font-size: 0.8rem;
-  background-color: darkslategrey;
-  height: 4rem;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  justify-content: center;
-  color: lightslategrey;
+ul.pagination > li.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  text-decoration: none;
+  pointer-events: none;
 }
-