all repos — site @ 1ebc0f110791288edc111ce5401efb37a2e41f15

source for my site, found at icyphox.sh

static/style.css (view raw)

  1html,
  2body {
  3	background: #021012;
  4}
  5
  6a {
  7	color: cyan;
  8	display: inline-block;
  9	/* margin: 0 20px; */
 10	position: relative;
 11	text-decoration: none;
 12}
 13
 14a:after {
 15	content: "";
 16	height: 0.7px;
 17	background: cyan;
 18	position: absolute;
 19	pointer-events: none;
 20	bottom: -5px;
 21	left: 0;
 22	right: 0;
 23	opacity: 0;
 24	transform: scale(0, 1);
 25	transition: all 200ms;
 26}
 27
 28a:hover:after {
 29	opacity: 1;
 30	transform: scale(1, 1);
 31}
 32
 33code {
 34	background: #222;
 35	padding: 4px;
 36}
 37
 38.container {
 39	position: absolute;
 40	/* overflow: hidden; */
 41	top: 0;
 42	bottom: 0;
 43	left: 0;
 44	right: 0;
 45	color: white;
 46	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 47
 48	-webkit-animation: fadein 3s;
 49	   -moz-animation: fadein 3s;
 50	    -ms-animation: fadein 3s;
 51	     -o-animation: fadein 3s;
 52	        animation: fadein 3s;
 53}
 54
 55@keyframes fadein {
 56	from { opacity: 0; }
 57	to   { opacity: 1; }
 58}
 59
 60@-moz-keyframes fadein {
 61	from { opacity: 0; }
 62	to   { opacity: 1; }
 63}
 64
 65@-webkit-keyframes fadein {
 66	from { opacity: 0; }
 67	to   { opacity: 1; }
 68}
 69
 70.introduction {
 71	position: absolute;
 72	top: 50%;
 73	transform: translateY(-50%);
 74	width: 100%;
 75}
 76
 77.content {
 78	position: absolute;
 79	top: 7%;
 80	left: 25%;
 81	width: 50%;
 82}
 83
 84.logo {
 85	width: 220px;
 86}
 87
 88.footer {
 89	color: #888;
 90	bottom: 20px;
 91	font-size: 14px;
 92	position: absolute;
 93	width: 100%;
 94	text-align: center;
 95	margin-bottom: 20px;
 96}
 97
 98.footer a {
 99	color: #888;
100	margin: 0;
101	transition: all 200ms;
102}
103
104.footer a:hover {
105	color: cyan;
106}
107
108.header {
109	color: white;
110	top: 20px;
111	font-size: 14px;
112	position: absolute;
113	width: 100%;
114	text-align: center;
115	margin-top: 20px;
116}
117
118.header a {
119	color: #888;
120	margin: 0;
121	transition: all 200ms;
122}
123
124.header a:hover {
125	color: cyan;
126}
127
128.left {
129	display: inline-block;
130	margin-bottom: 30px;
131	margin-left: 0;
132	margin-right: 30px;
133}
134
135.right {
136	display: inline-block;
137}
138
139.right a {
140	display: inline-block;
141	margin-right: 30px;
142}
143
144@media only screen and (max-width: 40em) {
145	.left {
146		display: block;
147		margin-right: 0;
148	}
149	.right {
150		display: block;
151	}
152	.right a:last-child {
153		margin-right: 0;
154	}
155	.content {
156		left: 15%;
157		width: 70%;
158	}
159}