From 504893486e3b6d650a77fcc9878f4497cc017c8c Mon Sep 17 00:00:00 2001 From: Benyamin Date: Wed, 8 Nov 2023 23:45:22 +0330 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20containerization=20via=20docker?= =?UTF-8?q?=20and=20docker=20compose?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dockerignore | 23 + Dockerfile | 22 + docker-compose.yaml | 60 +++ nginx/Dockerfile | 4 + nginx/nginx.conf | 37 ++ nginx/static/error_pages/custom_404.html | 59 +++ nginx/static/error_pages/style.css | 530 +++++++++++++++++++++++ 7 files changed, 735 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 docker-compose.yaml create mode 100644 nginx/Dockerfile create mode 100644 nginx/nginx.conf create mode 100755 nginx/static/error_pages/custom_404.html create mode 100755 nginx/static/error_pages/style.css diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..504c15f --- /dev/null +++ b/.dockerignore @@ -0,0 +1,23 @@ +# Ignore compiled python files +*.pyc +*.pyo +*.pyd +__pycache__ + +# Ignore environment related files +# .env +.venv +*.log +env/ + +# Ignore all git files +.git/ +.gitignore + +# Ignore OS generated files +.DS_Store +Thumbs.db + +db.sqlite3 + +poetry.lock diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..5b06cf0 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,22 @@ +FROM python:3.11-slim-buster + +ENV PYTHONDONTWRITEBYTECODE 1 +ENV PYTHONUNBUFFERED 1 + +# Install system dependencies +RUN apt-get update && apt-get install -y --no-install-recommends \ + build-essential \ + libpq-dev \ + curl \ + && rm -rf /var/lib/apt/lists/* + +RUN mkdir /app +WORKDIR /app + +RUN pip install poetry +COPY pyproject.toml /app + +COPY . /app +RUN poetry install + +CMD ["./start_app.sh"] \ No newline at end of file diff --git a/docker-compose.yaml b/docker-compose.yaml new file mode 100644 index 0000000..6c6c787 --- /dev/null +++ b/docker-compose.yaml @@ -0,0 +1,60 @@ +version: '3.8' + +services: + ifsguid_nginx: + build: ./nginx + image: nginx:alpine + restart: unless-stopped + container_name: ifsguid_nginx + ports: + - "80:80" + volumes: + - "./nginx/nginx.conf:/etc/nginx/conf.d/nginx.conf:ro" + - "./nginx/static:/static:ro" + depends_on: + - ifsguid_app + logging: + driver: "json-file" + options: + max-size: "50m" + + ifsguid_db: + image: postgres:15-alpine + restart: unless-stopped + expose: + - "5432" + ports: + - "5432:5432" + container_name: ifsguid_db + volumes: + - ifsguid-postgres-data:/var/lib/postgresql/data + logging: + driver: "json-file" + options: + max-size: "50m" + env_file: + - .env + + ifsguid_app: + build: . + image: ifsguid:1.0.0 + container_name: ifsguid_app + restart: unless-stopped + volumes: + - "/etc/timezone:/etc/timezone:ro" + - "/etc/localtime:/etc/localtime:ro" + - "./nginx:/opt/nginx:rw" + env_file: + - ./.docker.env + expose: + - "8000" + depends_on: + - ifsguid_db + logging: + driver: "json-file" + options: + max-size: "50m" + +volumes: + ifsguid-postgres-data: + driver: local diff --git a/nginx/Dockerfile b/nginx/Dockerfile new file mode 100644 index 0000000..8e5916e --- /dev/null +++ b/nginx/Dockerfile @@ -0,0 +1,4 @@ +FROM nginx:1.19.0-alpine + +RUN rm /etc/nginx/conf.d/default.conf +COPY nginx.conf /etc/nginx/conf.d \ No newline at end of file diff --git a/nginx/nginx.conf b/nginx/nginx.conf new file mode 100644 index 0000000..fbf7834 --- /dev/null +++ b/nginx/nginx.conf @@ -0,0 +1,37 @@ +upstream ifsguid { + server ifsguid_app:8000; +} + +limit_req_zone $binary_remote_addr zone=one:10m rate=50r/s; + +server { + client_max_body_size 20m; + + listen 80; + + location / { + proxy_pass http://ifsguid; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header Host $host; + proxy_redirect off; + proxy_intercept_errors on; + proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; + error_page 404 /custom_404.html; + error_page 502 503 504 /custom_404.html; + } + + location /static/ { + alias /static/; + } + + error_page 404 /custom_404.html; + error_page 502 /custom_502.html; + location = /custom_404.html { + root /static/error_pages; + internal; + } + location = /custom_502.html { + root /static/error_pages; + internal; + } +} diff --git a/nginx/static/error_pages/custom_404.html b/nginx/static/error_pages/custom_404.html new file mode 100755 index 0000000..e70be5a --- /dev/null +++ b/nginx/static/error_pages/custom_404.html @@ -0,0 +1,59 @@ + + + + + 404 Not Found Page + + + + + + +
+
+ + +
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+

Page Not Found

+

We're sorry, the page you were looking for isn't found here. The link you followed may either be broken or no longer exists. Please try again, or take a look at our.

+
+
+ +
+
+ + +
+ + + + + + + + + + diff --git a/nginx/static/error_pages/style.css b/nginx/static/error_pages/style.css new file mode 100755 index 0000000..0c18798 --- /dev/null +++ b/nginx/static/error_pages/style.css @@ -0,0 +1,530 @@ +@charset "UTF-8"; + +/*********************************** + /* 1. BODY */ +/***********************************/ + +* { + margin: 0; + padding: 0; + -webkit-text-size-adjust: none; +} + +html, body { + height: 100%; + overflow: hidden; +} + +body { + padding: 0; + margin: 0; + background: #181828; + font-size: 14px; + line-height: 1; +} + +label { + cursor: pointer; +} + +a { + margin: 0; + padding: 0; + vertical-align: baseline; + background: transparent; + text-decoration: none; + color: #000; +} + +input, select, button, textarea { + margin: 0; + font-size: 100%; +} + +html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + + +.top-header:before { + background-image: url(https://1.bp.blogspot.com/-gxsOcYWghHA/Xp_izTh4sFI/AAAAAAAAU8s/y637Fwg99qAuzW9na_NT_uApny8Vce95gCEwYBhgL/s1600/header-footer-gradient-bg.png); +} +.top-header:before { + content: ''; + display: block; + width: 100%; + height: 4px; + background-repeat: repeat-x; + background-size: contain; + position: absolute; + top: 0; + left: 0; + opacity:0.5; +} + + +.starsec{ + content: " "; + position: absolute; + width: 3px; + height: 3px; + background: transparent; + box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; + animation: animStar 150s linear infinite; +} + +.starthird +{ + content: " "; + position: absolute; + width: 3px; + height: 3px; + background: transparent; + box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; + animation: animStar 10s linear infinite; +} + +.starfourth +{ + content: " "; + position: absolute; + width: 2px; + height: 2px; + background: transparent; + box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; + animation: animStar 50s linear infinite; +} + +.starfifth +{ + content: " "; + position: absolute; + width: 1px; + height: 1px; + background: transparent; + box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; + animation: animStar 80s linear infinite; +} + +@keyframes animStar +{ + 0% { + transform: translateY(0px); +} + 100% { + transform: translateY(-2000px); +} +} + + + +button { + border: none; + padding: 0; + font-size: 0; + line-height: 0; + background: none; + cursor: pointer; +} + +:focus { + outline: 0; +} + +.clearfix:before, .clearfix:after { + content: "\0020"; + display: block; + height: 0; + visibility: hidden; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; +} + + /* 1. END BODY */ +/***********************************/ + +/*********************************** + /* 2. CONTENT */ +/***********************************/ +/* 2.1. Section error */ +.error { + min-height: 100vh; + position: relative; + padding: 240px 0; + box-sizing: border-box; + width: 100%; + height: 100%; + text-align: center; + margin-top: 70px; +} + +.error__overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.error__content { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.error__message { + text-align: center; + color: #181828; +} + +.message__title { + font-family: 'Montserrat', sans-serif; + font-weight: 900; + text-transform: uppercase; + letter-spacing: 5px; + font-size: 5.6rem; + padding-bottom: 40px; + max-width: 960px; + margin: 0 auto; +} + +.message__text { + font-family: 'Montserrat', sans-serif; + line-height: 42px; + font-size: 18px; + padding: 0 60px; + max-width: 680px; + margin: auto; +} + +.error__nav { + max-width: 600px; + margin: 40px auto 0; + text-align: center; +} + +.e-nav__form { + position: relative; + height: 45px; + overflow: hidden; + width: 170px; + display: inline-block; + vertical-align: top; + border: 1px solid #212121; + padding-left: 10px; + padding-right: 46px; +} + +.e-nav__icon { + position: absolute; + right: 15px; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: #212121; + -webkit-transition: color .25s ease; + transition: color .25s ease; +} + +.e-nav__link { + height: 45px; + line-height: 45px; + width: 170px; + display: inline-block; + vertical-align: top; + margin: 0 15px; + border: 1px solid #181828; + color: #181828; + text-decoration: none; + font-family: 'Montserrat', sans-serif; + text-transform: uppercase; + font-size: 11px; + letter-spacing: .1rem; + position: relative; + overflow: hidden; +} + +.e-nav__link:before { + content: ''; + height: 200px; + background: #212121; + position: absolute; + top: 70px; + right: 70px; + width: 260px; + -webkit-transition: all .3s; + transition: all .3s; + -webkit-transform: rotate(50deg); + transform: rotate(50deg); +} + +.e-nav__link:after { + -webkit-transition: all .3s; + transition: all .3s; + z-index: 999; + position: relative; +} + +.e-nav__link:after { + content: "Home Page"; +} + +.e-nav__link:hover:before { + top: -60px; + right: -50px; +} + +.e-nav__link:hover { + color: #fff; +} + +.e-nav__link:nth-child(2):hover:after { + color: #fff; +} +/* 2.1. END Section Error */ + +/* 2.2. Social style */ +.error__social { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + left: 20px; + z-index: 10; +} + +.e-social__list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.e-social__icon { + padding-bottom: 30px; +} + +.e-social__icon:last-child { + padding-bottom: 0; +} + +.e-social__link { + color: #fff; + -webkit-transition: all .25s ease; + transition: all .25s ease; + display: block; +} + +.e-social__link:hover { + opacity: .7; +} +/* 2.2. END Social style */ + +/* 2.3. Lamp */ +.lamp { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + margin: 0px auto; + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + transform-origin: center top; + animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1); + animation: move 5.1s infinite; +} + +@keyframes move { + 0% { + transform: rotate(40deg); + } + 50% { + transform: rotate(-40deg); + } + 100% { + transform: rotate(40deg); + } +} + +.cable { + width: 8px; + height: 248px; + background-image: linear-gradient(rgb(32 148 218 / 70%), rgb(193 65 25)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); +} + +.cover { + width: 200px; + height: 80px; + background: #0bd5e8; + border-top-left-radius: 50%; + border-top-right-radius: 50%; + position: relative; + z-index: 200; +} + +.in-cover { + width: 100%; + max-width: 200px; + height: 20px; + border-radius: 100%; + background: #08ffff; + position: absolute; + left: 0px; + right: 0px; + margin: 0px auto; + bottom: -9px; + z-index: 100; +} +.in-cover .bulb { + width: 50px; + height: 50px; + background-color: #08fffa; + border-radius: 50%; + position: absolute; + left: 0px; + right: 0px; + bottom: -20px; + margin: 0px auto; + -webkit-box-shadow: 0 0 15px 7px rgba(0,255,255,0.8), 0 0 40px 25px rgba(0,255,255,0.5), -75px 0 30px 15px rgba(0,255,255,0.2); + box-shadow: 0 0 25px 7px rgb(127 255 255 / 80%), 0 0 64px 47px rgba(0,255,255,0.5), 0px 0 30px 15px rgba(0,255,255,0.2); +} + + +.light { + width: 200px; + height: 0px; + border-bottom: 900px solid rgb(44 255 255 / 24%); + border-left: 50px solid transparent; + border-right: 50px solid transparent; + position: absolute; + left: 0px; + right: 0px; + top: 270px; + margin: 0px auto; + z-index: 1; + border-radius: 90px 90px 0px 0px; +} +/* 2.3. END Lamp */ +/*********************************** + /* 2. END CONTENT */ +/***********************************/ + +/*********************************** + /* 3. RESPONSIVE */ +/***********************************/ +.error { + overflow: hidden; + max-height: 100vh; +} +@media (max-width: 1400px) { + .lamp { + zoom: .5; + } + .error__content { + top: 55%; + } + .message__title { + font-size: 3.5rem; + } +} +@media (max-width: 900px) { + + .message__title { + font-size: 34px; + + } + .error__content { + top: 55%; + } + } +@media (max-width: 950px) { + .lamp__wrap { + max-height: 100vh; + overflow: hidden; + max-width: 100vw; + } + .error__social { + bottom: 30px; + top: auto; + transform: none; + width: 100%; + position: fixed; + left: 0; + } + .e-social__icon { + display: inline-block; + padding-right: 30px; + } + .e-social__icon:last-child { + padding-right: 0; + } + .e-social__icon { + padding-bottom: 0; + } +} +@media (max-width: 750px) { + body, html, { + max-height: 100vh; + } + .error__content { + position: static; + margin: 0 auto; + transform: none; + padding-top: 300px; + } + .error { + padding-top: 0; + padding-bottom: 100px; + height: 100vh; + } + } +@media (max-width: 650px) { + .message__title { + font-size: 36px; + padding-bottom: 20px; + } + .message__text { + font-size: 16px; + line-height: 2; + padding-right: 20px; + padding-left: 20px; + } + .lamp { + zoom: .6; + } + .error__content { + padding-top: 180px; + } + } +@media (max-width: 480px) { + + .message__title { + font-size: 30px; + } + .message__text { + padding-left: 10px; + padding-right: 10px; + font-size: 15px; + } + .error__nav { + margin-top: 20px; + } +}