css/wip

index.css

@@ -1,12 +1,64 @@
-@viewport {
-width: device-width;
-zoom: 1;
+@media screen and (max-width: 1200px) {
+
+html {
+font-size: 2em;
+}
+
+}
+
+/*
+* { border: 1px solid; }
+/*
+header  { background: #800000; }
+nav     { background: #008000; }
+section { background: #000080; }
+/**/
+
+* {
+box-sizing: border-box;
+//margin: 0;
+//padding: 0;
 }
 
 html {
 background: rgb(0,0,0);
 color: rgb(160,160,160);
 font-family: sans;
+font-size: 1.25em;
+}
+
+body {
+margin: 0 auto;
+position: relative;
+}
+
+header {
+background-image: url("debian.jpeg");
+background-position: center;
+background-size: cover;
+padding: 1vh 1vw 0 1vw;
+position: absolute;
+width: 100%;
+z-index: 1;
+}
+
+section {
+min-height: 100vh;
+padding: 7em 1vw 1vh 1vw;
+position: absolute;
+top: 0;
+width: 100%;
+}
+section:not(:target) {
+display: none;
+}
+section:target {
+display: block;
+}
+
+nav {
+display: flex;
+flex-wrap: wrap;
 }
 
 img {
@@ -16,43 +68,24 @@ border-radius: 1em;
 height: 8em;
 }
 
-.tabs {
-position: relative;
+a {
+text-decoration: none;
 }
-.tab {
-float: left;
-}
-.tab input {
-display: none;
-}
-.tab label {
+
+nav a {
 background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
 border-color: rgb(128,128,128);
 border-radius: .5em;
 border-style: solid;
 border-width: 1px 1px 0 1px;
-color: rgb(128,128,0);
-cursor: pointer;
-display: flex;
+#color: rgb(128,128,0);
 font-weight: bold;
-padding: .5em 1em;
-text-decoration: underline;
-transition: all .5s;
+padding: .25em .5em;
+//transition: all .5s;
 }
-.tab label:hover {
-font-size: 1.1em;
-}
-.tab_content {
-display: none;
-}
-input:checked ~ label {
+nav a.active {
 background: linear-gradient(rgba(128,128,128,1), rgba(128,128,128,0));
 }
-input:checked ~ label ~ .tab_content {
-display: block;
-left: 0;
-position: absolute;
-}
 
 a {
 color: rgb(0,192,192);
@@ -80,3 +113,16 @@ border: 1px solid;
 border-color: rgb(192,192,192);
 text-align: center;
 }
+
+.cards {
+display: flex;
+}
+.card {
+list-style: none;
+margin: 0 1em;
+text-align: center;
+}
+.card img {
+border: none;
+height: 4em;
+}