fixed content boxes

This commit is contained in:
antifallobst 2023-08-24 14:38:54 +02:00
parent a04a9b248a
commit 5b78b830a5
Signed by: antifallobst
GPG Key ID: 2B4F402172791BAF
3 changed files with 111 additions and 59 deletions

View File

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<title> Nerdcult </title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="style/topbar.css">
<link rel="stylesheet" href="style/index.css">
</head>
<body>
@ -63,7 +64,8 @@
<li class="content-box">
<p class="content-box-heading">Community</p>
<p class="content-box-paragraph">
<div class="content-box-data">
<p>
Nerdcult is a platform for (and by) open source
software developers, that aims to make collaboration
as comfortable as possible. We also want to make
@ -71,25 +73,69 @@
for their projects.
Join now by creating an account.
</p>
<ul>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Explore</tspan></text>
</g></svg>
</a></li>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Rules</tspan></text>
</g></svg>
</a></li>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Join</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li>
<li class="content-box">
<p class="content-box-heading">Tools</p>
<p class="content-box-paragraph">
<div class="content-box-data">
<p>
We provide tools for software development, communication and project management.
This includes a git server, a matrix homeserver, pads and much more :)
</p>
<ul>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">List</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li>
<li class="content-box">
<p class="content-box-heading">Privacy</p>
<p class="content-box-paragraph">
<div class="content-box-data">
<p>
We save as less personal data as possible and our logs are anonymized.
Your private data, is encrypted with a key that derives from your password.
By that we couldn't sell data and give attackers nothing they could steal.
</p>
<ul>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Learn More</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li>
</ul>
</div>

View File

@ -2,45 +2,6 @@ body {
background: #191c2e;
}
.tabs li {
display: inline-block;
padding-left: 2px;
}
.tabs li a {
position: relative;
}
.tab-svg-path {
position: absolute;
fill: #21253c;
stroke: #690455;
stroke-width: 4;
stroke-miterlimit: 10;
pointer-events: all;
}
.tab-svg-text {
fill: #FFFFFF;
font-family: "Roboto";
font-size: 18px;
text-anchor: middle;
}
#tabs-main {
float: left;
margin-left: 32px;
padding: 0;
list-style: none;
}
#tabs-account {
float: right;
margin-right: 32px;
padding: 0;
list-style: none;
}
main {
position: absolute;
padding: 0;
@ -71,7 +32,7 @@ main {
border: 4px solid #690455;
border-radius: 12px;
margin-right: 32px;
width: auto;
width: calc(100% / 3);
height: auto;
position: relative;
display: inline-block;
@ -87,10 +48,16 @@ main {
width: 100%;
}
.content-box-paragraph {
.content-box-data {
font-family: Roboto;
font-size: 18px;
color: #FFFFFF;
text-align: center;
width: 100%;
}
.content-box-data ul {
margin: 0;
padding: 0;
list-style: none;
}

39
style/topbar.css Normal file
View File

@ -0,0 +1,39 @@
.tabs li {
display: inline-block;
padding-left: 2px;
}
.tabs li a {
position: relative;
}
.tab-svg-path {
position: absolute;
fill: #21253c;
stroke: #690455;
stroke-width: 4;
stroke-miterlimit: 10;
pointer-events: all;
}
.tab-svg-text {
fill: #FFFFFF;
font-family: "Roboto";
font-size: 18px;
text-anchor: middle;
}
#tabs-main {
float: left;
margin-left: 32px;
padding: 0;
list-style: none;
}
#tabs-account {
float: right;
margin-right: 32px;
padding: 0;
list-style: none;
}