pn

the website
git clone ssh://anon@git.pastanoggin.com
Log | Files | Refs | README | LICENSE

main.css (2490B)

      1 :root {
      2 	--color-grey: #222222;
      3 	--text-color: #f9f9f9;
      4 	--color-purple: #8f60af;
      5 	--background-img: url(/img/tile.png);
      6 }
      7 
      8 * {
      9 	cursor: url("/img/cursor.png"), auto;
     10 }
     11 
     12 body {
     13 	min-width: 20rem;
     14 	max-width: 60rem;
     15 	margin: auto;
     16 	padding: 1em;
     17 	color: var(--text-color);
     18 	background-image: var(--background-img);
     19 	display: flex;
     20 	gap: 1em;
     21 	flex-wrap: wrap;
     22 	flex-direction: row-reverse;
     23 }
     24 
     25 header {
     26 	flex-basis: 100%;
     27 	display: flex;
     28 	position: relative;
     29 	justify-content: center;
     30 }
     31 
     32 nav {
     33 	flex-basis: 10%;
     34 	flex-grow: 1;
     35 	display: flex;
     36 	align-items: start;
     37 }
     38 
     39 main {
     40 	flex-basis: 70%;
     41 	flex-grow: 1;
     42 }
     43 
     44 footer {
     45 	flex-basis: 100%;
     46 	display: flex;
     47 	flex-wrap: wrap;
     48 	gap: 0.5em;
     49 }
     50 
     51 a {
     52 	color: lightblue;
     53 }
     54 
     55 .nav-list {
     56 	width: 100%;
     57 	margin: 0;
     58 	padding: 0;
     59 	list-style: none;
     60 	display: flex;
     61 	gap: 1em;
     62 	flex-wrap: wrap;
     63 }
     64 
     65 .nav-item {
     66 	flex-grow: 1;
     67 	flex-shrink: 1;
     68 	flex-basis: 0;
     69 	display: flex;
     70 }
     71 
     72 .box {
     73 	padding: 1em;
     74 	border-style: groove;
     75 	border-width: 0.5em;
     76     background-color: var(--color-grey);
     77 	border-color: var(--color-purple);
     78 }
     79 
     80 .lighten:hover {
     81 	filter: brightness(110%);
     82 }
     83 
     84 .nav-link {
     85 	width: 100%;
     86 	text-align: center;
     87 	align-content: center;
     88 	color: var(--color-grey);
     89     text-decoration: none;
     90 	background: var(--color-purple);
     91 	border-style: outset;
     92 	border-color: var(--color-purple);
     93 	padding: 0.5em;
     94 	font-family: monospace;
     95 	font-weight: bold;
     96 	font-size: 1.5em;
     97 }
     98 
     99 .nav-link:hover {
    100 	filter: brightness(130%);
    101 }
    102 
    103 .buttonbadge {
    104 	width: 88px;
    105 	height: 31px;
    106 	vertical-align: middle;
    107 }
    108 
    109 .codeblock {
    110     white-space: pre-wrap;
    111     word-break: break-all;
    112     background: black;
    113     color: lightgreen;
    114 }
    115 
    116 #banner {
    117 	max-width: 100%;
    118 	object-fit: contain;
    119 	image-rendering: pixelated;
    120 }
    121 
    122 #construction {
    123 	position: absolute;
    124 	bottom: 0;
    125 	right: 0;
    126 	height: auto;
    127 	width: 30%;
    128 	max-width: 125px;
    129 	max-height: 100%;
    130 }
    131 
    132 #status {
    133 	margin: 0;
    134     background-color: #8f60af;
    135     color: var(--color-grey);
    136     border-radius: 1.5em;
    137     padding: 0.5em;
    138     display: flex;
    139     align-items: center;
    140     gap: 1em;
    141     flex-basis: 100%;
    142     border-color: var(--color-grey);
    143     border-width: 0.1em;
    144     border-style: solid;
    145 }
    146 
    147 #status-header {
    148     padding: 0.1em 1em;
    149     background: white;
    150     height: 100%;
    151     border-radius: 1em;
    152     text-align: center;
    153     align-content: center;
    154 }
    155 
    156 #status-body {
    157     margin: 0;
    158     font-size: 1.2em;
    159     color: white;
    160 	word-break: break-word;
    161 }
    162 
    163 @media only screen and (min-width: 800px) {
    164 	ul {
    165 		flex-direction: column;
    166 	}
    167 }