diff options
Diffstat (limited to 'frontend/src/App.css')
| -rw-r--r-- | frontend/src/App.css | 53 |
1 files changed, 40 insertions, 13 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css index 14a9972..eb39d85 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css | |||
| @@ -2,17 +2,14 @@ main { | |||
| 2 | overflow: auto; | 2 | overflow: auto; |
| 3 | overflow-x: hidden; | 3 | overflow-x: hidden; |
| 4 | position: relative; | 4 | position: relative; |
| 5 | 5 | width: calc(100% - 23.75rem); | |
| 6 | width: calc(100% - 380px); | ||
| 7 | height: 100vh; | 6 | height: 100vh; |
| 8 | left: 350px; | 7 | left: 21.875rem; |
| 9 | 8 | padding-right: 1.875rem; | |
| 10 | padding-right: 30px; | 9 | font-size: 2.5rem; |
| 11 | |||
| 12 | font-size: 40px; | ||
| 13 | font-family: BarlowSemiCondensed-Regular; | 10 | font-family: BarlowSemiCondensed-Regular; |
| 14 | color: #cdcfdf; | 11 | color: #cdcfdf; |
| 15 | 12 | transition: all 0.3s ease; | |
| 16 | } | 13 | } |
| 17 | 14 | ||
| 18 | a { | 15 | a { |
| @@ -39,7 +36,7 @@ body { | |||
| 39 | background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); | 36 | background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); |
| 40 | user-select: none; | 37 | user-select: none; |
| 41 | color: #00000000; | 38 | color: #00000000; |
| 42 | border-radius: 1000px; | 39 | border-radius: 62.5rem; |
| 43 | } | 40 | } |
| 44 | 41 | ||
| 45 | @keyframes loader { | 42 | @keyframes loader { |
| @@ -57,20 +54,21 @@ body { | |||
| 57 | } | 54 | } |
| 58 | 55 | ||
| 59 | .loader { | 56 | .loader { |
| 60 | width: 48px; | 57 | width: 3rem; |
| 61 | height: 48px; | 58 | height: 3rem; |
| 62 | border: 5px solid #FFF; | 59 | border: 0.3125rem solid #FFF; |
| 63 | border-bottom-color: transparent; | 60 | border-bottom-color: transparent; |
| 64 | border-radius: 50%; | 61 | border-radius: 50%; |
| 65 | display: inline-block; | 62 | display: inline-block; |
| 66 | box-sizing: border-box; | 63 | box-sizing: border-box; |
| 67 | animation: rotation 1s linear infinite; | 64 | animation: rotation 1s linear infinite; |
| 68 | } | 65 | } |
| 69 | 66 | ||
| 70 | @keyframes rotation { | 67 | @keyframes rotation { |
| 71 | 0% { | 68 | 0% { |
| 72 | transform: rotate(0deg); | 69 | transform: rotate(0deg); |
| 73 | } | 70 | } |
| 71 | |||
| 74 | 100% { | 72 | 100% { |
| 75 | transform: rotate(360deg); | 73 | transform: rotate(360deg); |
| 76 | } | 74 | } |
| @@ -95,3 +93,32 @@ body { | |||
| 95 | font-family: 'BarlowSemiCondensed-SemiBold'; | 93 | font-family: 'BarlowSemiCondensed-SemiBold'; |
| 96 | src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype'); | 94 | src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype'); |
| 97 | } | 95 | } |
| 96 | |||
| 97 | @media screen and (max-width: 768px) { | ||
| 98 | * { | ||
| 99 | box-sizing: border-box; | ||
| 100 | } | ||
| 101 | |||
| 102 | main { | ||
| 103 | width: 100%; | ||
| 104 | left: 0; | ||
| 105 | padding: 5rem 20px 1rem 20px; | ||
| 106 | height: auto; | ||
| 107 | min-height: 100vh; | ||
| 108 | font-size: 1.5rem; | ||
| 109 | } | ||
| 110 | |||
| 111 | .loader { | ||
| 112 | width: 2.5rem; | ||
| 113 | height: 2.5rem; | ||
| 114 | border: 0.25rem solid #FFF; | ||
| 115 | } | ||
| 116 | } | ||
| 117 | |||
| 118 | @media screen and (min-width: 1920px) { | ||
| 119 | main { | ||
| 120 | width: calc(100% - 25rem); | ||
| 121 | left: 23rem; | ||
| 122 | padding-right: 2rem; | ||
| 123 | } | ||
| 124 | } \ No newline at end of file | ||