#1 Basic layout and colors

This commit is contained in:
glax 2023-05-22 23:52:35 +02:00
parent b6ac2682f6
commit e2b8888130
5 changed files with 173 additions and 31 deletions

View File

@ -7,21 +7,35 @@
</head>
<body>
<topbar>
<titlebox>Tranga</titlebox>
<titlebox>
<img src="media/blahaj.png">
<span>Tranga</span>
</titlebox>
<spacer></spacer>
<searchdiv>
<input id="searchbox" placeholder="Search" type="text">
</searchdiv>
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
</topbar>
<viewport>
<sidebar>
<background-placeholder></background-placeholder>
</sidebar>
<content>
<background-placeholder></background-placeholder>
<publication id="addPublication">
<p>+</p>
</publication>
<publication>
<connector class="pill">Connector Name</connector>
<connector-name class="pill">Connector Name</connector-name>
<publication-name>Publication Name</publication-name>
</publication>
</content>
<settingstab>
</viewport>
<settingstab id="settingstab">
</settingstab>
</viewport>
<script src="interaction.js"></script>
</body>
</html>

32
Website/interaction.js Normal file
View File

@ -0,0 +1,32 @@
const slideInRight = [
{ right: "-20rem" },
{ right: "0" }
];
const slideInRightTiming = {
duration: 200,
iterations: 1,
fill: "forwards",
easing: "ease-out"
}
const slideOutRightTiming = {
direction: "reverse",
duration: 200,
iterations: 1,
fill: "forwards",
easing: "ease-in"
}
const settingsTab = document.querySelector("#settingstab");
const settingsCog = document.querySelector("#settingscog");
var slideIn = true;
function slide(){
if(slideIn)
settingsTab.animate(slideInRight, slideInRightTiming);
else
settingsTab.animate(slideInRight, slideOutRightTiming);
slideIn = !slideIn;
}
settingsCog.addEventListener("click", () => slide());

BIN
Website/media/blahaj.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 93.5 93.5" xml:space="preserve">
<g>
<g>
<path d="M93.5,40.899c0-2.453-1.995-4.447-4.448-4.447H81.98c-0.74-2.545-1.756-5.001-3.035-7.331l4.998-5
c0.826-0.827,1.303-1.973,1.303-3.146c0-1.19-0.462-2.306-1.303-3.146L75.67,9.555c-1.613-1.615-4.673-1.618-6.29,0l-5,5
c-2.327-1.28-4.786-2.296-7.332-3.037v-7.07C57.048,1.995,55.053,0,52.602,0H40.899c-2.453,0-4.447,1.995-4.447,4.448v7.071
c-2.546,0.741-5.005,1.757-7.333,3.037l-5-5c-1.68-1.679-4.609-1.679-6.288,0L9.555,17.83c-1.734,1.734-1.734,4.555,0,6.289
l4.999,5c-1.279,2.33-2.295,4.788-3.036,7.333h-7.07C1.995,36.452,0,38.447,0,40.899V52.6c0,2.453,1.995,4.447,4.448,4.447h7.071
c0.74,2.545,1.757,5.003,3.036,7.332l-4.998,4.999c-0.827,0.827-1.303,1.974-1.303,3.146c0,1.189,0.462,2.307,1.302,3.146
l8.274,8.273c1.614,1.615,4.674,1.619,6.29,0l5-5c2.328,1.279,4.786,2.297,7.333,3.037v7.071c0,2.453,1.995,4.448,4.447,4.448
h11.702c2.453,0,4.446-1.995,4.446-4.448V81.98c2.546-0.74,5.005-1.756,7.332-3.037l5,5c1.681,1.68,4.608,1.68,6.288,0
l8.275-8.273c1.734-1.734,1.734-4.555,0-6.289l-4.998-5.001c1.279-2.329,2.295-4.787,3.035-7.332h7.071
c2.453,0,4.448-1.995,4.448-4.446V40.899z M62.947,46.75c0,8.932-7.266,16.197-16.197,16.197c-8.931,0-16.197-7.266-16.197-16.197
c0-8.931,7.266-16.197,16.197-16.197C55.682,30.553,62.947,37.819,62.947,46.75z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,86 +1,161 @@
body{
:root{
--background-color: #5bcefa;
--second-background-color: #000;
--primary-color: #f5a9b8;
--secondary-color: #fff;
--topbar-height: 60px;
box-sizing: content-box;
}
body{
padding: 0;
margin: 0;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
height: 100vh;
background-color: orange;
background-color: var(--background-color);
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
background-placeholder{
background-color: var(--second-background-color);
opacity: 0.05;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
}
topbar {
display: flex;
align-items: center;
background-color: red;
height: 4rem;
height: var(--topbar-height);
margin: 5px;
}
titlebox {
font-size: 20pt;
position: relative;
display: flex;
margin: 0 0 0 40px;
height: 100%;
align-items:center;
justify-content:center;
}
titlebox span{
font-size: 24pt;
font-weight: bold;
margin: 20px;
background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 20px;
}
titlebox img {
height: 100%;
margin-right: 10px;
}
spacer{
flex-grow: 1;
}
searchdiv{
display: block;
margin: 0 10px 0 0;
}
#searchbox {
padding: 6px 8px;
border: 0;
border-radius: 3px;
font-size: 14pt;
width: 250px;
}
#settingscog {
margin: 0px 30px;
height: calc(100% - 40px);
filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
}
viewport {
position: relative;
display: flex;
background-color: blue;
flex-flow: row;
flex-wrap: nowrap;
flex-grow: 1;
}
sidebar{
background-color: green;
position: relative;
width: 20rem;
margin-bottom: 10px;
border-radius: 0 0 5px 0;
border-radius: 0 5px 5px 0;
}
content {
background-color: yellow;
position: relative;
flex-grow: 1;
margin: 10px;
padding: 5px;
margin: 0 10px 10px 10px;
border-radius: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
align-content: start;
}
settingstab{
background-color: green;
position: absolute;
right: -20rem;
bottom: 0;
background-color: rgba(0,0,0,0.5);
width: 20rem;
height: calc(100% - var(--topbar-height) - 20px);
margin-bottom: 10px;
border-radius: 0 0 5px 0;
border-radius: 5px 0 0 5px;
}
publication{
background-color: gray;
width: 200px;
background-color: var(--secondary-color);
width: 180px;
height: 300px;
border-radius: 5px;
margin: 10px 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: start;
padding: 15px 20px;
}
#addPublication p{
width: 100%;
text-align: center;
font-size: 150pt;
vertical-align: middle;
line-height: 300px;
margin: 0;
}
.pill {
flex-grow: 0;
height: 14pt;
font-size: 12pt;
border-radius: 7pt;
background-color: white;
padding: 1pt 20px;
background-color: var(--primary-color);
padding: 1pt 15px;
}
connector{
position: absolute;
top: 10px;
left: 10px;
connector-name{
width: fit-content;
margin: 10px 0;
}
publication-name{
position: absolute;
width: fit-content;
font-size: 16pt;
font-weight: bold;
top: 35px;
left: 15px;
}