all repos — retro-website @ 345e76b0ac9042616f4a3c5f44c9f72101713d6f

res/css/style.css (view raw)

  1@font-face {
  2    font-family: '04b_03';
  3    src: url('../ttf/04b03.ttf')  format('truetype');
  4}
  5
  6#overlay {
  7    position: absolute;
  8    text-align: center;
  9    padding-top: 450px;
 10    top: 0;
 11    left: 0;
 12    width:100%;
 13    height:100%;
 14    background-color: black;
 15    z-index: 999;
 16}
 17
 18html {
 19    font-family: "04b_03";
 20    color: white;
 21    cursor: url("../cur/cursor2x.cur"), auto;
 22    text-shadow: 1px 1px #000000;
 23}
 24
 25#mainframe {
 26    width: 100%;
 27    border: 0px;
 28    cursor: url("../cur/cursor2x.cur"), auto;
 29}
 30
 31a {
 32    cursor: url("../cur/pointer2x.cur"), auto;
 33}
 34
 35img {
 36    image-rendering: pixelated;
 37}
 38
 39.hover-tilt {
 40    transition: transform .1s ease-in-out;
 41    rotate: -1.5deg;
 42}
 43.hover-tilt:hover {
 44    transform: rotate(3deg);
 45}
 46
 47#main-container {
 48    /* width: calc(100% / 2); */
 49    height: 100%;
 50    width: 800px;
 51    margin: auto;
 52}
 53
 54#menu-div {
 55    text-align: center;
 56    background-image: url("../img/orange-banner.jpg");
 57    background-size: cover;
 58    color: white;
 59    padding:15px;
 60    margin-top: -18px;
 61}
 62
 63#menu-div a {
 64    color: white;
 65    text-decoration: none;
 66}
 67
 68#menu-div h1 {
 69    margin-left: 18px;
 70}
 71
 72.menu-item {
 73    text-align: center;
 74    display: inline-block;
 75    width: 118px;
 76}
 77
 78.menu-item img {
 79    height: 50px;
 80    margin: auto;
 81    display: block;
 82}
 83
 84#music-player {
 85    position: fixed;
 86    left: 5px;
 87    height: 66px;
 88    image-rendering: pixelated;
 89    transition: bottom .4s ease-in-out;
 90}
 91
 92#music-player-base {
 93    float: left;
 94    width: 114px;
 95    height: 66px;
 96    background-color: #141414;
 97    background-image: url("../img/player_pause.png");
 98    background-size: contain;
 99}
100
101#music-player-song {
102    position: relative;
103    float: right;
104    height: 66px;
105    min-width: 700px;
106    margin-left: 5px;
107    background-color: #141414;
108    background-image: url("../img/player_song.png");
109    background-size: 100% 100%;
110    transition: top .4s ease-in-out;
111}
112
113#song-text {
114    position: relative;
115    font-weight: 700;
116    color: black;
117    margin: 10px;
118    top: 30%;
119}
120
121.player-play {
122    background-image: url("../img/player_play.png")!important;
123}
124
125#music-player-overlay {
126    width: 100%;
127    height: 100%;
128    background-image: url("../img/player_overlay.png");
129    cursor: url("../cur/pointer2x.cur"), auto;
130    background-size: contain;
131}
132
133/* PAGES STUFF */
134.full-width {
135    left: 50px;
136    width: 700px;
137}
138
139.half-width {
140    width: 300px;
141}
142
143.center {
144    text-align: center;
145}
146
147.left {
148    text-align: left;
149}
150
151.right {
152    text-align: left;
153}
154
155.tilt-right {
156    rotate: 2deg;
157}
158
159.tilt-left {
160    rotate: -2deg;
161}
162
163.tilt-45 {
164    rotate: 45deg;
165}
166
167.flip-x {
168    transform: scaleX(-1);
169}
170
171.flip-y {
172    transform: scaleY(-1);
173}
174
175.white-shadow {
176    text-shadow: 1px 1px white;
177}
178
179.deeppink {
180    color: deeppink;
181}
182
183.mediumvioletred {
184    color: mediumvioletred;
185}
186
187.el {
188    position: absolute;
189    overflow-wrap: break-word;
190    font-size: large;
191    line-height: 25px;
192}
193
194.up-down {
195    animation: MoveUpDown 3s linear infinite;
196    position: relative;
197    left: 0;
198    bottom: 0;
199}
200  
201@keyframes MoveUpDown {
202    0%, 100% {
203      bottom: 0;
204    }
205    50% {
206      bottom: 10px;
207    }
208  }