Big Design Update #2

Merged
davidml merged 17 commits from dev into master 2021-12-15 15:21:54 +00:00
4 changed files with 329 additions and 87 deletions

View File

@@ -1,113 +1,102 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" dir="ltr"> <html lang="de" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>The Advertisement</title> <title>THE ADVERSARY</title>
<link rel="stylesheet" href="../sass/index.css"> <link rel="stylesheet" href="../sass/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div class="header">
<ul> <div class="navigation">
<li><a href="#">Home</a></li> <img id="logo" src="../img/logodark.svg">
<li><a href="#">Suche</a></li> <a href="#">LINUX</a>
<li><a href="#">Kontakt</a></li> <a href="#">OPEN SOURCE</a>
<li><a href="#">Impressum</a></li> <a href="#">OPINION</a>
</ul> <a href="#">PROGRAMMING</a>
</div>
<div class="greeting">
<h1>Welcome to the Advertisement</h1>
</div> </div>
<div class="content"> <div class="content">
<div class="navigation">
<ol>
<li><a href="#">Category1</a></li>
<li><a href="#">Category2</a></li>
<li><a href="#">Category3</a></li>
<li><a href="#">Category4</a></li>
</ol>
</div>
<div class="articles"> <div class="articles">
<a href="#"> <a href="#">
<div class="article"> <div class="article">
<div class="article-header"> <div class="article-header">
<h3>The World is Burning</h3> <h3>Java is trash, and here is the proof.</h3>
</div>
<div class="article-description">
<p>OPINION DAVID 15.12.2021</p>
</div> </div>
<div class="article-body"> <div class="article-body">
<p>SomeText</p> <p>After a recent vulnerability voices get louder that demand to retire the language.</p>
</div> </div>
</div> </div>
</a> </a>
<div class="divider"></div>
<a href="#"> <a href="#">
<div class="article"> <div class="article">
<div class="article-header"> <div class="article-header">
<h3>The World is Burning</h3> <h3>Render fractals on canvas with WASM.</h3>
</div>
<div class="article-description">
<p>PROGRAMMING DAVID 15.12.2021</p>
</div> </div>
<div class="article-body"> <div class="article-body">
<p>SomeText</p> <p>Learn how to render mandelbrot fractals with web assembly.</p>
</div> </div>
</div> </div>
</a> </a>
<div class="divider"></div>
<a href="#"> <a href="#">
<div class="article"> <div class="article">
<div class="article-header"> <div class="article-header">
<h3>The World is Burning</h3> <h3>Write directly to the framebuffer with Rust.</h3>
</div>
<div class="article-description">
<p>LINUX DAVID 15.12.2021</p>
</div> </div>
<div class="article-body"> <div class="article-body">
<p>SomeText</p> <p>Learn how to access the framebuffer with Rust.</p>
</div> </div>
</div> </div>
</a> </a>
<div class="divider"></div>
<a href="#"> <a href="#">
<div class="article"> <div class="article">
<div class="article-header"> <div class="article-header">
<h3>The World is Burning</h3> <h3>Kobalt a simple webserver for testing.</h3>
</div>
<div class="article-description">
<p>OPEN SOURCE DAVID 15.12.2021</p>
</div> </div>
<div class="article-body"> <div class="article-body">
<p>SomeText</p> <p>Meet kobalt, the new fast and simple production ready webserver.</p>
</div>
</div>
</a>
<a href="#">
<div class="article">
<div class="article-header">
<h3>The World is Burning</h3>
</div>
<div class="article-body">
<p>SomeText</p>
</div>
</div>
</a>
<a href="#">
<div class="article">
<div class="article-header">
<h3>The World is Burning</h3>
</div>
<div class="article-body">
<p>SomeText</p>
</div>
</div>
</a>
<a href="#">
<div class="article">
<div class="article-header">
<h3>The World is Burning</h3>
</div>
<div class="article-body">
<p>SomeText</p>
</div>
</div>
</a>
<a href="#">
<div class="article">
<div class="article-header">
<h3>The World is Burning</h3>
</div>
<div class="article-body">
<p>SomeText</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</body> </body>
<footer>
<div class="foot">
<a>ABOUT</a>
<a>IMPRESSUM</a>
<a>CONTACT</a>
</div>
</footer>
</html> </html>

98
img/logodark.svg Normal file
View File

@@ -0,0 +1,98 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="LOGO-FINAL-DARK.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
id="svg8"
version="1.1"
viewBox="0 0 17.197914 15.875005"
height="15.875005mm"
width="17.197914mm">
<defs
id="defs2">
<inkscape:perspective
id="perspective1549"
inkscape:persp3d-origin="105 : -182.125 : 1"
inkscape:vp_z="210 : -132.625 : 1"
inkscape:vp_y="0 : 999.99997 : 0"
inkscape:vp_x="0 : -132.625 : 1"
sodipodi:type="inkscape:persp3d" />
</defs>
<sodipodi:namedview
fit-margin-bottom="0"
fit-margin-right="0"
fit-margin-left="0"
fit-margin-top="0"
showguides="true"
inkscape:window-maximized="1"
inkscape:window-y="-8"
inkscape:window-x="-8"
inkscape:window-height="1017"
inkscape:window-width="1920"
showgrid="true"
inkscape:document-rotation="0"
inkscape:current-layer="layer1"
inkscape:document-units="mm"
inkscape:cy="36.490448"
inkscape:cx="22.175528"
inkscape:zoom="22.627417"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
borderopacity="1.0"
bordercolor="#666666"
pagecolor="#ffffff"
id="base">
<inkscape:grid
originy="-120.38541"
originx="-88.635412"
id="grid833"
type="xygrid" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-88.635416,-120.38542)"
inkscape:label="Background"
id="layer2"
inkscape:groupmode="layer">
<path
id="path1541"
d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1682"
d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
transform="translate(-88.635416,-120.38542)"
id="layer1"
inkscape:groupmode="layer"
inkscape:label="Ebene 1">
<path
transform="scale(0.26458333)"
d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
style="fill:#d62828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1468" />
<path
id="path1678"
d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

98
img/logolight.svg Normal file
View File

@@ -0,0 +1,98 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="LOGO-FINAL-LIGHT.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
id="svg8"
version="1.1"
viewBox="0 0 17.197914 15.875005"
height="15.875005mm"
width="17.197914mm">
<defs
id="defs2">
<inkscape:perspective
id="perspective1549"
inkscape:persp3d-origin="105 : -182.125 : 1"
inkscape:vp_z="210 : -132.625 : 1"
inkscape:vp_y="0 : 999.99997 : 0"
inkscape:vp_x="0 : -132.625 : 1"
sodipodi:type="inkscape:persp3d" />
</defs>
<sodipodi:namedview
fit-margin-bottom="0"
fit-margin-right="0"
fit-margin-left="0"
fit-margin-top="0"
showguides="true"
inkscape:window-maximized="1"
inkscape:window-y="-8"
inkscape:window-x="-8"
inkscape:window-height="1017"
inkscape:window-width="1920"
showgrid="true"
inkscape:document-rotation="0"
inkscape:current-layer="layer2"
inkscape:document-units="mm"
inkscape:cy="35.054888"
inkscape:cx="18.899507"
inkscape:zoom="8"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
borderopacity="1.0"
bordercolor="#666666"
pagecolor="#ffffff"
id="base">
<inkscape:grid
originy="-120.38541"
originx="-88.635412"
id="grid833"
type="xygrid" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-88.635416,-120.38542)"
inkscape:label="Background"
id="layer2"
inkscape:groupmode="layer">
<path
id="path1541"
d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1682"
d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
transform="translate(-88.635416,-120.38542)"
id="layer1"
inkscape:groupmode="layer"
inkscape:label="Ebene 1">
<path
transform="scale(0.26458333)"
d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
style="fill:#003049;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1468" />
<path
id="path1678"
d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@@ -4,54 +4,111 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #03071e; background-color: #03071e;
color: #EAE2B7;
} }
a { a {
color: #EAE2B7; color: inherit;
font-size: 150%; font-size: 150%;
text-decoration: none; text-decoration: none;
} }
h3 { h3 {
font-size: 250%; font-size: 250%;
margin: 0;
} }
p { p {
margin: 0;
font-size: 175%; font-size: 175%;
} }
.divider {
height: 3px;
background-color: #ad080f;
}
.articles { .articles {
margin: auto; margin: auto;
width: 50%; width: 80%;
padding: 10px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
.navigation { .article {
font-family: 'Roboto', sans-serif padding: 2%;
}
.article:hover {
color: white;
}
.article-body {
width: 60%;
font-size: 80%;
font-weight: normal;
margin-top: 1%;
font-family: 'Roboto Mono', monospace;
}
.article-description {
font-weight: 500;
font-family: 'Roboto Mono', monospace;
color: #D00000;
font-size: 75%;
margin-top: 0.5%;
}
.article-description p {
white-space: pre;
}
#logo {
width: 3%;
padding-left: 2.5%;
} }
.header { .header {
background-color: #03071e;
color: #EAE2B7;
font-family: 'Roboto', sans-serif;
width: 100%;
height: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; } justify-content: space-between;
font-family: 'Roboto', sans-serif
}
ul { .navigation {
background-color: black;
color: inherit;
font-family: 'Roboto', sans-serif;
width: 100%;
padding-top: 1%;
padding-bottom: 1%;
height: 5%;
display: flex; display: flex;
flex-direction: row; align-items: center;
font-size: 20px; justify-content: space-between;
list-style: none; } }
ul li {
padding-right: 30px; }
ol { .navigation a {
padding-left: 2%;
padding-right: 2%;
font-size: 250%;
font-weight: bolder;
}
.foot {
display: flex; display: flex;
flex-direction: column; align-items: center;
list-style: georgian; } justify-content: space-between;
width: 100%;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
.foot a {
font-family: 'Roboto Mono', monospace;
font-weight: normal;
padding-left: 10%;
padding-right: 10%;
}
/*# sourceMappingURL=index.css.map */ /*# sourceMappingURL=index.css.map */