Sara
/
distro-depot-mockup
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

made mockup

main
Sara 2023-05-25 14:57:56 +02:00
commit a1cd63b9af
7 changed files with 434 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/distro-fedora.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

51
assets/icons_negative.svg Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.5pt"
height="7.5pt"
viewBox="0 0 2.6458333 2.6458333"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-13.345129,-10.091206)">
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="10.218054" />
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-3"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="-12.427779"
transform="rotate(90)" />
<rect
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-6"
width="0.64499003"
height="2.3815017"
x="11.091627"
y="-15.858796"
transform="rotate(90)" />
<path
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
<path
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686-3"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

51
assets/icons_positive.svg Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.5pt"
height="7.5pt"
viewBox="0 0 2.6458333 2.6458333"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-10,-10)">
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="10.218054" />
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-3"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="-12.427779"
transform="rotate(90)" />
<rect
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-6"
width="0.64499003"
height="2.3815017"
x="11.091627"
y="-15.858796"
transform="rotate(90)" />
<path
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
<path
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686-3"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

23
assets/icons_star-empty.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.499999pt"
height="7.4999995pt"
viewBox="0 0 2.645833 2.6458331"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-20.479671,-10.051588)">
<path
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686-3"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 855 B

51
assets/icons_star.svg Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.499999pt"
height="7.4999995pt"
viewBox="0 0 2.645833 2.6458331"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-16.826532,-10.043116)">
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="10.218054" />
<rect
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-3"
width="0.59846729"
height="2.2097251"
x="11.023683"
y="-12.427779"
transform="rotate(90)" />
<rect
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
id="rect234-6"
width="0.64499003"
height="2.3815017"
x="11.091627"
y="-15.858796"
transform="rotate(90)" />
<path
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
<path
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
id="path5686-3"
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

126
index.html Normal file
View File

@ -0,0 +1,126 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="operating-system-card">
<div class="distro-header">
<div>
<h2>Operating System</h2>
</div>
<div>
<img class="distro-icon" src="assets/distro-fedora.png">
</div>
</div>
<div class="distro-links">
<a>wiki</a><a>download</a><a>website</a>
</div>
<p class="os-quick-summary">
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
</p>
<div class="operating-system-columns">
<span>
<h3>Freedom</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
</span>
<span>
<h3>Usability</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Ducimus fuga</li>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
</span>
<span>
<h3>Privacy</h3>
<ul>
<li p>Ducimus fuga</li>
<li p>Quaerat nostrum</li>
<br>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
<li n>Possimus delectus</li>
</ul>
<p>
</p>
</span>
</div>
<div class="star-columns">
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
<span>
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star.svg">
<img class="star" src="assets/icons_star-empty.svg">
<img class="star" src="assets/icons_star-empty.svg">
</span>
</div>
</div>
<div class="operating-system-card">
<h2>Operating System</h2>
<p class="os-quick-summary">
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
</p>
<div class="operating-system-columns">
<span>
<h3>Freedom</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
<span>
<h3>Usability</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
<span>
<h3>Privacy</h3>
<ul>
<li p>a</li>
<li n>a</li>
<li p>a</li>
</ul>
<h2 class="score"><span>5/10</span></h2>
</span>
</div>
</div>
</body>
</html>

132
style.css Normal file
View File

@ -0,0 +1,132 @@
html {
font: 100% monospace, sans-serif;
color: black;
background-color: #DDDF;
}
body {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
}
h1 {
font-size: 3.5em;
}
h3 {
font-size: 2em;
margin: 0.1em auto;
}
h2 {
font-size: 2.5em;
margin: 1px auto;
}
a.internal {
text-decoration: none;
color: black;
}
a:hover {
color: #99FF;
}
.operating-system-card {
background-color: #FFFF;
border-radius: 3px;
padding: 2em 2em;
margin: 1em 1em;
}
.operating-system-columns {
display: grid;
left:0;right:0;
grid-gap: 10px 5px;
grid-template-columns: repeat(3, 33%);
margin-top: 1em;
}
.star-columns {
display: grid;
left:0;right:0;
grid-gap: 10px 5px;
grid-template-columns: repeat(3, 33%);
margin-top: 1em;
}
.star-columns > span {
padding: 0.5em 2em;
border-width: 0;
border-left: 1px;
border-right: 1px;
border-color: gray;
border-style: inset;
border-radius: 3px;
}
.operating-system-columns > span {
padding: 0.5em 1em;
border-width: 0;
border-left: 1px;
border-right: 1px;
border-color: gray;
border-style: inset;
border-radius: 3px;
}
li[p] {
color: green;
list-style-image: url("assets/icons_positive.svg");
}
li[n] {
color: red;
list-style-image: url("assets/icons_negative.svg");
}
h2.score {
text-align: right;
padding: 0.3em 3em;
}
img.star {
min-width: 2em;
min-height: 2em;
margin: 0;
padding: 0;
}
div.distro-header {
display: grid;
grid-template-columns: 90% 0em
}
img.distro-icon {
max-width: 3em;
max-height: 3em;
padding:0;
margin:0;
display: inline;
}
div.distro-links {
margin-top: 20px;
}
div.distro-links > a {
display: inline;
color: white;
background-color: #44AF;
border-color: black;
margin: 0;
margin-right: 1em;
text-decoration: underline;
padding: 2px 6px;
border-radius: 4px;
width: fit-content;
line-height: 2em;
}