major refactor, card pagination beta testing

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

diff --git a/static/css/main.css b/static/css/main.css
deleted file mode 100644 (file)
index 5ffbc24..0000000
--- a/static/css/main.css
+++ /dev/null
@@ -1,222 +0,0 @@
-:root {
-  --palette0: rgb(148,26,20);
-  --palette0-t: rgb(148,26,20,0.8);
-  --palette0-d: rgb(100,5,0);
-  --palette0-l: rgb(172,78,73);
-  --palette1: rgb(227,93,36);
-  --palette1-d: rgb(170,51,0);
-  --palette1-h: rgb(242,72,0);
-  --palette1-l: rgb(243,157,121);
-  --palette1-u: rgb(255,101,36);
-  --palette2: rgb(236,222,222);
-  --palette2-d: rgb(230,198,196);
-  --palette2-l: rgb(255,250,250);
-  --palette3: rgb(13,62,86);
-  --palette3-d: rgb(2,38,56);
-  --palette3-l: rgb(5,76,111);
-  
-  --color-bg: var(--palette2);
-  --color-bg-light: var(--palette2-l);
-  --color-bg-dark: var(--palette2-d);
-  --color-text: black;
-  --color-text-link: var(--palette3-l);
-  --color-text-active: var(--palette3-d);
-  --color-header: var(--palette0-t);
-  --color-header: var(--palette0-l);
-  --color-header-dark: var(--palette0);
-  --color-header-contrast: var(--palette3);
-  
-  background-color: var(--color-bg);
-  color: var(--color-text);
-}
-a {
-  color: var(--color-text-link);
-}
-a:hover,
-a:active {
-  color: var(--color-text-active);
-}
-h1 {
-  text-align: center;
-  font-size: 1.66em;
-}
-h2 {
-  text-decoration: underline;
-  font-size: 1.33em;
-}
-body {
-  margin: 0;
-}
-body > header {
-  padding: 0 0 1px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-flow: row wrap;
-  background-color: var(--color-header);
-}
-body > main {
-  margin: 0 1vw;
-  font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
-  /* font-size: 1.8rem; */
-  font-family: sans;
-}
-body > footer {
-  font-size: 0.8rem;
-  background-color: var(--color-header);
-  height: 4rem;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  justify-content: center;
-}
-body > header > img {
-  margin: 0 3px 0 0;
-  min-width: 128px;
-  min-height: 128px;
-  border-radius: 50%;
-  box-shadow: 2px 1px 2px black;
-  border: 1px solid black;
-  background-color: var(--color-header-contrast);
-}
-body > header > div {
-  min-width: 256px;
-  max-width: 50vw;
-  font-size: 1.1rem;
-  font-family: fantasy;
-  box-shadow: 2px 1px black;
-  border: 1px solid black;
-  border-radius: 3px;
-  padding: 3px;
-  background-color: var(--color-header-contrast);
-  color: var(--color-bg);
-  text-align: center;
-  border: thin solid black;
-}
-body > nav {
-  opacity: 0.8;
-}
-body > nav svg {
-  margin: 0 0;
-  padding: 0 0;
-  width: 3rem;
-  max-width: 12.5vw;
-  height: 3rem;
-  max-height: 12.5vw;
-  fill: var(--color-text-link);
-}
-body > nav a > summary {
-  display: none;
-}
-body > nav a > svg:hover,
-body > nav a > svg:active,
-body > nav svg.selected {
-  fill: var(--color-text-active);
-}
-body > nav > div {
-  display: flex;
-  justify-content: center;
-  flex-flow: row wrap;
-  background-color: var(--color-bg);
-}
-body > nav > footer {
-  font-size: 1.3rem;
-  font-family: fantasy;
-  background-color: var(--color-header-dark);
-  color: var(--color-bg);
-  border-radius: 0 0 1.3rem 1.3rem;
-  text-align: center;
-}
-@media screen and (orientation:landscape) {
-  body > main > article {
-    margin: 0 1vw;
-    padding: 0 1vw;
-    background-color: var(--color-bg-light);
-    border: 1px solid black;
-    border-radius: 3px;
-    box-shadow: 2px 1px 2px black;
-  }
-}
-body > main {
-  overflow-y: auto;
-}
-body > main > article > * {
-  overflow-y: auto;
-}
-@media screen and (orientation:portrait) {
-  body > nav {
-    position: -webkit-sticky;
-    position: sticky;
-    z-index: 100;
-    top: 0;
-  }
-  body > nav svg {
-    width: 6vh;
-    max-width: 3rem;
-    height: 6vh;
-    max-height: 3rem;
-  }
-  body > nav > footer {
-    font-size: 2vh;
-  }
-}
-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 2px black;
-  border: 1px solid black;
-  border-radius: 3px;
-  padding: 3px;
-  overflow: hidden;
-  background-color: var(--color-bg-dark);
-}
-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;
-}
-div.page-nav {
-  font-size: 0.8em;
-}
-ul.pagination {
-  padding: 0;
-  list-style: none;
-  text-align: center;
-}
-ul.pagination > li {
-  margin: 0 0.2em;
-  display: inline;
-}
-ul.pagination > li.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  text-decoration: none;
-  pointer-events: none;
-}