all repos — retro-website @ main

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