main-site

style.css (5101B)

---

 :root {
     --bg-dark: #000;
     --bg: #222;
     --bg-base: #333;
     --fg: #ccc;
     --link: #fff;
     --border: #777;
     --comment: #999;
     --ascii-b: #444;
 
     scrollbar-color: var(--link) var(--bg-dark);
     height: 100%;
 }
 
 .index {
     align-content: center;
 }
 
 body {
     background-color: var(--bg);
     color: var(--fg);
     padding: 1em;
 
     line-height: 1.6;
     font-size: 1.2em;
     padding: 0 10px;
     padding: 0em 10px;
     margin: 0 auto;
     margin-bottom: 8em;
 }
 
 @media only screen and (min-width: 600px) {
 .article {
     display: grid;
     grid-template-columns: 16em auto;
 }
 
 body {
     min-width: 1000px;
     width: 80%;
 }
 }
 
 @media only screen and (max-width: 600px) {
 body {
     min-width: 0;
     margin: 0;
 }
 
 main {
     padding: 0 !important;
     width: 100%;
 }
 
 .article main {
     padding-top: 0;
 }
 
 .sidenav h1 {
     font-size: 1.6em;
 }
 }
 
 h1 {
     margin: 0;
 }
 
 .sidenav {
     padding: 0;
     padding-top: 1em;
 }
 
 .sidenav ul {
     list-style-type: none;
     padding-left: 1em;
 }
 
 .sidenav li:hover {
     color: var(--link);
 }
 
 .sidenav a {
     display: block;
     padding: 0 0.6em;
 }
 
 .sidenav a.active {
     background-color: var(--bg-dark) !important;
 }
 
 .sidenav a:hover {
     background-color: var(--bg);
 }
 
 .sidenav p {
     margin: 0;
 }
 
 
 main {
     max-width: 1000px;
     padding: 3em;
 }
 
 main.index {
     margin: 0 auto;
 }
 
 h1.title {
     text-align: center;
     font-size: 3em;
     margin: 0.2em;
     margin-bottom: 0em;
 }
 
 div.icons {
     display: flex;
     justify-content: center;
     height: 1.6em;
     margin-bottom: 1.6em;
     gap: 1em;
 }
 
 div.icons svg {
     height: 100%;
     fill: var(--fg);
 }
 
 div.icons svg:hover {
     fill: var(--link);
 }
 
 pre a {
     color: inherit;
 }
 
 a {
     color: var(--link);
     font-weight: bold;
 }
 
 nav a {
     font-weight: normal;
 }
 
 nav h3 a {
     font-weight: bold;
 }
 
 p {
     text-align: justify;
     /*
     font-family: 'Brush Script MT', cursive;
     font-family: 'Times New Roman';
     text-align: center;
     */
 }
 
 a:not(:hover) {
     text-decoration: none;
 }
 
 .links {
     /* margin: 0 auto; */
     max-width: 400px;
     border: 2px solid var(--border);
 }
 
 .links:hover {
     border: 2px solid var(--comment);
 }
 
 .links ul {
     list-style: none;
     padding: 0em;
     margin: 0 auto;
 }
 
 .links li a {
     display: flex;
     justify-content: space-between;
     line-height: 2em;
     padding: 0 1em;
     gap: 1em;
 }
 
 .links li:hover {
     background-color: var(--bg-dark);
 }
 
 .links li h3 {
     text-align: left;
 }
 
 .links li span {
     text-align: right;
 }
 
 a.alt {
     text-decoration: none;
     text-align: center;
 
     justify-content: space-between;
 }
 
 a.alt h3 {
     font-size: 1em;
     color: var(--fg);
     font-weight: normal;
     text-align: left;
     margin: 0;
     display: inline;
 }
 
 a.alt:hover h3 {
     color: var(--link);
     text-decoration: underline;
 }
 
 a.alt:focus h3 {
     color: var(--link);
 }
 
 a.alt span {
     color: var(--comment);
 }
 
 span.ascii-border {
     color: var(--ascii-b);
     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
 }
 
 .about {
     border: 1px var(--border) dashed;
     padding: 1em;
     margin: 1em 0;
 }
 
 pre:not(.nocode) {
     margin: 1em 0;
     padding: 0.8em;
     margin-bottom: 2em;
     border: 1px var(--border) solid;
 
     overflow: scroll;
 }
 
 pre, code {
     font-family: Iosevka !important;
 }
 
 div.ascii {
     width: 7em;
     margin: 0 auto;
 }
 
 div.ascii pre {
     width: 5.4em;
     margin: 0 auto;
 }
 
 div.ascii a {
     display: block;
     margin: 0 auto;
     text-align: center;
     margin-left:3.2em;
 }
 
 nav {
     display: flex;
     flex-wrap: wrap;
 
     gap: 1.2em;
 }
 
 nav.center {
     justify-content: center;
 }
 
 nav.center a {
     align-content: center;
 }
 
 div {
     margin: 0;
 }
 
 div.index {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10vw;
 }
 
 div.index div {
     display: inline-block;
     margin-bottom: 1em;
 }
 
 div.index h3 {
     margin: 0;
 }
 
 div.index ul {
     margin: 0.1em 0;
 }
 
 td {
     padding-right: 1em;
 }
 
 @font-face {
     font-family: Hasklig;
     src: url(Hasklig-Regular.ttf);
 }
 
 @font-face {
     font-family: Iosevka;
     src: url(/Iosevka-Regular.woff2);
 }
 
 
 .presentation {
     display: grid;
     grid-template-columns: 25% 75%;
     width: 100%;
     margin-bottom: 2em;
 }
 
 .presentation .ascii {
     width: 80%;
 }
 
 .presentation .ascii pre {
     display: block;
     float: right;
 }
 
 .projects {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 1em;
 }
 
 .projects div {
     width: calc(50% - 2.5em);
     padding: 0 1em;
     background-color: var(--bg-dark);
 }
 
 .projects div h4 {
     margin-bottom: 0;
 }
 
 .projects div p {
     margin-top: 0.4em;
     margin-bottom: 1em;
 }
 
 .minititle {
     margin: 0;
 }
 
 img.banner {
     width: 80%;
     max-width: 800px;
     margin: 3em auto;
     display: block;
 }
 
 .tree {
     background-color: var(--bg-base);
     border: solid 2px var(--border);
     margin: 2em 0;
     padding: 1em;
     width: 100%;
 }
 
 .footer {
     color: var(--comment);
 }