Страница проектов, поправил прозрачность

This commit is contained in:
Mootfrost777 2022-11-26 12:19:26 +03:00
parent b9a2912359
commit 88c4edbfc4
6 changed files with 104 additions and 35 deletions

View file

@ -30,7 +30,7 @@ steps:
path: /var/run/docker.sock
environment:
WAKATIME_APIKEY:
from_secret: BOT_TOKEN
from_secret: WAKATIME_APIKEY
commands:
- WAKATIME_APIKEY=$$WAKATIME_APIKEY
- docker-compose -p mootfrost-dev up -d

View file

@ -75,7 +75,7 @@
background-color: white;
background-repeat: no-repeat;
transition: 0.3s;
opacity: 0.2;
opacity: 0.4;
}
.lower-buttons a::after {
@ -90,7 +90,7 @@
background-color: white;
background-repeat: no-repeat;
transition: 0.3s;
opacity: 0.2;
opacity: 0.4;
}
.lower-buttons a:hover::before {

View file

@ -0,0 +1,65 @@
@import url(style.css);
.wrapper {
width: 40%;
position: relative;
margin-top: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
}
.wrapper {
width: 100%;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.project-card {
background: #272727;
border-radius: 5px;
margin: 7px;
padding: 5px;
width: 400px;
height: 200px;
word-wrap: break-word;
}
.divider {
background-color: white;
width: 80%;
border-top: 2px solid #bbb;
border-radius: 8px;
opacity: 0.5;
}
.project-title {
margin: 0;
font-size: 1.7em;
}
.project-description {
text-align: center;
}
.btn-goto {
font-family: Comfortaa, sans-serif;
width: 120px;
height: 35px;
background: #272727;
border-radius: 5px;
padding: 10px 15px;
color: white;
text-decoration: none;
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12) !important;
transition: 0.3s;
text-align: center;
}
.btn-goto:hover {
background: #383838;
color: white;
transition: 0.3s;
}

View file

@ -18,14 +18,14 @@
<head>
<meta charset="utf-8">
<title>Mootfrost обо мне</title>
<meta name="description" content="About me">
<title>Mootfrost DEV</title>
<meta name="description" content="Обо мне">
<link rel="stylesheet" type="text/css" href="/static/resources/styles/about.style.css"/>
<link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
</head>
<body>
<body ondragstart="return false;" ondrop="return false;">
<div id="background"></div>
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>

View file

@ -18,7 +18,7 @@
<head>
<meta charset="utf-8">
<title>Mootfrost</title>
<title>Mootfrost DEV</title>
<meta name="description" content="Mootfrost">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -32,7 +32,7 @@
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center overlay pe-none">
<div class="main-title text-uppercase">
<div class="main-title text-uppercase text-wrap">
<span>mootfrost</span>
<p class="thin">Development</p>
</div>
@ -81,7 +81,7 @@
<script src="/static/resources/scripts/particles.js"></script>
<script src="/static/resources/scripts/app.js"></script>
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
</body>
</body>
</html>

View file

@ -17,37 +17,38 @@
<!-- /Yandex.Metrika counter -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
<title>Mootfrost - проекты</title>
<meta name="description" content="My projects">
<meta charset="utf-8">
<title>Mootfrost DEV</title>
<meta name="description" content="Проекты">
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
<link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
</head>
<body id="particles-js" ondragstart="return false;" ondrop="return false;">
<div class="title-menu top">
<div class="title-div title-container">
<h1 class="title unselectable">проекты:</h1>
<div class="contents-div projects-container horizontal-container" id="projects-list"></div>
</div>
</div>
<footer>
<p class="footer-text">v0.6</p>
</footer>
</body>
<body ondragstart="return false;" ondrop="return false;">
<div id="background"></div>
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
<a class="btn-back" href="https://mootfrost.ru">
<svg ID="back-s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
<path id="pathBack" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256S114.6 512 256 512s256-114.6 256-256zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z" fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
</svg>
</a>
<div id="projects-container" class="wrapper pe-none">
</div>
<template id="project-card-template">
<a class="projects-contents" id="link" href="https://google.com/">
<div class="button-div project-container">
<h2 class="projects-title" id="title">Name</h2>
<hr class="rounded">
<p class="projects-contents" id="description">Description</p>
</div>
</a>
<div class="project-card d-flex flex-column justify-content-center align-items-center">
<h2 class="project-title" id="title">Name</h2>
<p class="project-description" id="description">Description</p>
<hr class="divider">
<a id="link" class="btn-goto pe-auto"><span class="text-uppercase">Перейти</span></a>
</div>
</template>
<script src="/static/resources/scripts/plugins/particles/particles.min.js"></script>
<script src="/static/resources/scripts/script.js"></script>
<script>
async function load_projects()
{
@ -63,11 +64,14 @@
card.querySelector('#title').innerText = projects[i].name
card.querySelector('#description').innerText = projects[i].description
document.getElementById('projects-list').appendChild(card)
document.getElementById('projects-container').appendChild(card)
}
}
load_projects()
</script>
<script src="/static/resources/scripts/particles.js"></script>
<script src="/static/resources/scripts/app.js"></script>
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
</body>
</html>