feat: further updates to index.html and added icons
This commit is contained in:
Sara
parent
8c5de4053c
commit
5a0c43bdad
30
delete.svg
Normal file
30
delete.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g9"
|
||||||
|
transform="matrix(0.90483182,0,0,0.90483182,6.4460431,6.4460594)"
|
||||||
|
style="stroke-width:21.6454;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 3.6986761,3.6986637 131.768,131.76798"
|
||||||
|
id="path7" />
|
||||||
|
<path
|
||||||
|
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 3.698678,131.76798 131.768,3.6986619"
|
||||||
|
id="path8" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 968 B |
27
edit.svg
Normal file
27
edit.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-145.46666)">
|
||||||
|
<g
|
||||||
|
id="g6"
|
||||||
|
transform="matrix(0.57817245,0.39306618,-0.39306618,0.57817245,196.48475,-45.935656)"
|
||||||
|
style="stroke-width:29.4217;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
id="rect9"
|
||||||
|
style="fill:none;stroke:#419a1d;stroke-width:30.2758;stroke-linecap:round;stroke-linejoin:round"
|
||||||
|
d="m 81.5053,42.343214 55.53716,-4.182831 7.98453,111.071247 -23.35426,63.49851 -32.182914,-59.31567 z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 854 B |
25
favicon-placeholder.svg
Normal file
25
favicon-placeholder.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1">
|
||||||
|
<rect
|
||||||
|
style="fill:#419a1d;fill-opacity:1;stroke:none;stroke-width:2"
|
||||||
|
id="rect1"
|
||||||
|
width="135.46666"
|
||||||
|
height="135.46666"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
ry="6.4950299" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 578 B |
89
icons/source-files/delete.svg
Normal file
89
icons/source-files/delete.svg
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
sodipodi:docname="delete.svg"
|
||||||
|
inkscape:export-filename="../../icon"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
inkscape:export-batch-path="../../personal-webportal"
|
||||||
|
inkscape:export-batch-name=""
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="0.40087893"
|
||||||
|
inkscape:cx="279.3861"
|
||||||
|
inkscape:cy="236.97928"
|
||||||
|
inkscape:window-width="2540"
|
||||||
|
inkscape:window-height="1367"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g6">
|
||||||
|
<inkscape:page
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="135.46666"
|
||||||
|
height="135.46666"
|
||||||
|
id="page3"
|
||||||
|
margin="0"
|
||||||
|
bleed="0"
|
||||||
|
inkscape:label="delete" />
|
||||||
|
<inkscape:page
|
||||||
|
x="145.46666"
|
||||||
|
y="0"
|
||||||
|
width="135.46666"
|
||||||
|
height="135.46666"
|
||||||
|
id="page4"
|
||||||
|
margin="0"
|
||||||
|
bleed="0"
|
||||||
|
inkscape:label="edit" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g6"
|
||||||
|
transform="matrix(0.57817245,0.39306618,-0.39306618,0.57817245,196.48475,-45.935656)"
|
||||||
|
style="stroke-width:29.4217;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
id="rect9"
|
||||||
|
style="fill:none;stroke:#419a1d;stroke-width:30.2758;stroke-linecap:round;stroke-linejoin:round"
|
||||||
|
d="m 81.5053,42.343214 55.53716,-4.182831 7.98453,111.071247 -23.35426,63.49851 -32.182914,-59.31567 z"
|
||||||
|
sodipodi:nodetypes="cccccc" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g9"
|
||||||
|
transform="matrix(0.90483182,0,0,0.90483182,6.4460431,6.4460594)"
|
||||||
|
style="stroke-width:21.6454;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 3.6986761,3.6986637 131.768,131.76798"
|
||||||
|
id="path7" />
|
||||||
|
<path
|
||||||
|
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 3.698678,131.76798 131.768,3.6986619"
|
||||||
|
id="path8" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
44
icons/source-files/edit.svg
Normal file
44
icons/source-files/edit.svg
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
sodipodi:docname="edit.svg"
|
||||||
|
inkscape:export-filename="../../edit.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="0.89619809"
|
||||||
|
inkscape:cx="104.32961"
|
||||||
|
inkscape:cy="190.80603"
|
||||||
|
inkscape:window-width="2540"
|
||||||
|
inkscape:window-height="1367"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
53
icons/source-files/favicon-placeholder.svg
Normal file
53
icons/source-files/favicon-placeholder.svg
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="135.46666mm"
|
||||||
|
height="135.46666mm"
|
||||||
|
viewBox="0 0 135.46666 135.46666"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
sodipodi:docname="favicon-placeholder.svg"
|
||||||
|
inkscape:export-filename="../../favicon-placeholder.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="1.7923962"
|
||||||
|
inkscape:cx="203.0801"
|
||||||
|
inkscape:cy="286.20905"
|
||||||
|
inkscape:window-width="2540"
|
||||||
|
inkscape:window-height="1367"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<rect
|
||||||
|
style="fill:#419a1d;stroke:none;stroke-width:2;fill-opacity:1"
|
||||||
|
id="rect1"
|
||||||
|
width="135.46666"
|
||||||
|
height="135.46666"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
ry="6.4950299" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
339
index.html
339
index.html
|
|
@ -5,23 +5,28 @@
|
||||||
<style>
|
<style>
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--base-back-color: #252525FF;
|
--back-color-0: #222;
|
||||||
--base-front-color: white;
|
--back-color-1: #333;
|
||||||
--back-color-1: #333F;
|
|
||||||
--front-color-1: white;
|
--front-color-0: darkgray;
|
||||||
|
--front-color-1: darkgray;
|
||||||
|
|
||||||
--links: #4A4F;
|
--links: #4A4F;
|
||||||
--input-back-color: #222;
|
--input-back-color: #111;
|
||||||
--input-front-color: white;
|
--input-front-color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--base-back-color: #F0F0F0FF;
|
--back-color-0: #FFF;
|
||||||
--base-front-color: black;
|
|
||||||
--back-color-1: #DDDF;
|
--back-color-1: #DDDF;
|
||||||
--front-color-1: black;
|
|
||||||
--links: #22DF;
|
--front-color-0: #555;
|
||||||
|
--front-color-1: #555;
|
||||||
|
|
||||||
|
--links: #22D;
|
||||||
|
--links: #383;
|
||||||
--input-back-color: white;
|
--input-back-color: white;
|
||||||
--input-front-color: black;
|
--input-front-color: black;
|
||||||
}
|
}
|
||||||
|
|
@ -29,25 +34,39 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--interaction-outline: 2px dotted var(--links);
|
--interaction-outline: 2px dotted var(--links);
|
||||||
--sidebar-width: 370px;
|
--sidebar-width: 250px;
|
||||||
--sidebar-padding: 30px;
|
--sidebar-padding: 30px;
|
||||||
--sidebar-border-width: 1px;
|
--border-width: 1px;
|
||||||
--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--sidebar-border-width));
|
--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
|
||||||
--article-panel-width: 400px;
|
--border-radius: 1px;
|
||||||
|
--content-padding: 5%;
|
||||||
|
--article-favicon-size: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--base-back-color);
|
background: var(--back-color-0);
|
||||||
color: var(--base-front-color);
|
color: var(--front-color-0);
|
||||||
font-family: Adwaita Sans, sans-serif;
|
font-family: Adwaita Sans, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
color: inherit;
|
||||||
margin-block: 0.67em;
|
margin-block: 0.67em;
|
||||||
font-size: 2em;
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -58,9 +77,18 @@ a:hover {
|
||||||
outline: var(--interaction-outline);
|
outline: var(--interaction-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*:focus {
|
||||||
|
outline: var(--interaction-outline);
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
--input-padding: 0.5em;
|
||||||
background: var(--input-back-color);
|
background: var(--input-back-color);
|
||||||
color: var(--input-front-color);
|
color: var(--input-front-color);
|
||||||
|
/*border: var(--border-width) solid var(--input-front-color);*/
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 3px var(--input-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:hover {
|
input:hover {
|
||||||
|
|
@ -70,16 +98,24 @@ input:hover {
|
||||||
button {
|
button {
|
||||||
background: var(--input-back-color);
|
background: var(--input-back-color);
|
||||||
color: var(--links);
|
color: var(--links);
|
||||||
|
/*border: var(--border-width) solid var(--front-color-0);*/
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
margin-top: 0.5em;
|
||||||
|
padding: 1px 0.5em;
|
||||||
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
outline: var(--interaction-outline);
|
outline: var(--interaction-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
#center-page {
|
main {
|
||||||
max-width: calc(0.9 * (100% - (var(--sidebar-true-width) * 2.0)));
|
color: var(--front-color-0);
|
||||||
height: fit-content;
|
padding: 0px var(--content-padding);
|
||||||
|
max-width: calc((100% - ((var(--sidebar-true-width) + var(--content-padding)) * 2.0)));
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
height: fit-content;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -95,17 +131,31 @@ button:hover {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar > * > h2 {
|
.sidebar > h2 {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
border-top: 1px solid black;
|
border-bottom: 1px solid var(--front-color-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-left {
|
.sidebar > h2 > a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > h2 > img {
|
||||||
|
display: inline;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: sub;
|
||||||
|
object-position: right;
|
||||||
|
margin: 0px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
float: left;
|
float: left;
|
||||||
left: 0;
|
left: 0;
|
||||||
border-right: var(--sidebar-border-width) solid black;
|
/*border-right: var(--border-width) solid var(--front-color-1);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-right {
|
#sidebar-right {
|
||||||
|
|
@ -113,78 +163,103 @@ button:hover {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
right: 0;
|
right: 0;
|
||||||
border-left: var(--sidebar-border-width) solid black;
|
/*border-left: var(--border-width) solid var(--front-color-1);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#search {
|
.sidebar > input {
|
||||||
|
--hpadd: 5px;
|
||||||
|
|
||||||
|
padding: 5px var(--hpadd);
|
||||||
|
width: calc(100% - var(--hpadd) * 2);
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
search {
|
||||||
margin: 200px auto 100px auto;
|
margin: 200px auto 100px auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search > * {
|
search > * {
|
||||||
margin: 3px 5px;
|
margin: 3px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search > button {
|
search > button {
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search > input {
|
search > input {
|
||||||
margin: 0 0 3px 0;
|
margin: 0 0 3px 0;
|
||||||
font-size: 220%;
|
font-size: 220%;
|
||||||
width: 99%;
|
width: calc(100% - var(--input-padding) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#articles {
|
section#articles {
|
||||||
|
color: var(--front-color-0);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
width: 80%;
|
width: 95%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#articles > * {
|
section#articles > h1 {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border-top: var(--border-width) solid var(--front-color-0);
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#articles > * {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article {
|
article {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
background-color: var(--back-color-1);
|
background-color: var(--back-color-1);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
height: 390px;
|
height: 390px;
|
||||||
min-width: var(--article-panel-width);
|
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
border: 1px solid black;
|
/*border: var(--border-width) solid var(--front-color-0);*/
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-header {
|
article > p {
|
||||||
|
overflow-y: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > hgroup {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
justify-self: left;
|
justify-self: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-header > h2 {
|
article > hgroup > h2 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fake-favicon-small {
|
img.favicon-small {
|
||||||
display: inline-block;
|
background-color: transparent;
|
||||||
background-color: aliceblue;
|
width: 1em;
|
||||||
width: 1.2em;
|
height: 1em;
|
||||||
height: 1.2em;
|
margin-left: 0.5em;
|
||||||
margin-left: 10px;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fake-favicon-big {
|
img.favicon-big {
|
||||||
display: inline-block;
|
background-color: transparent;
|
||||||
background-color: aliceblue;
|
width: var(--article-favicon-size);
|
||||||
width: 100px;
|
min-width: var(--article-favicon-size);
|
||||||
min-width: 100px;
|
height: var(--article-favicon-size);
|
||||||
height: 100px;
|
min-height: var(--article-favicon-size);
|
||||||
min-height: 100px;
|
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -193,81 +268,127 @@ button:hover {
|
||||||
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
||||||
<body>
|
<body>
|
||||||
<nav id="sidebar-left" class="sidebar">
|
<nav id="sidebar-left" class="sidebar">
|
||||||
<section id="your-lists">
|
|
||||||
<h1>Your Lists</h1>
|
<h1>Your Lists</h1>
|
||||||
<h2>Home</h2>
|
<h2>Home</h2>
|
||||||
<h2><a href="index.html">Social</a></h2>
|
<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<h2><a href="index.html">Tech</a></h2>
|
<h2><a href="index.html">Tech</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<h2><a href="index.html">News</a></h2>
|
<h2><a href="index.html">News</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<h2><a href="index.html">Gaming</a></h2>
|
<h2><a href="index.html">Gaming</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<h2><a href="index.html">Recipes</a></h2>
|
<h2><a href="index.html">Recipes</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<h2><a href="index.html">Makers</a></h2>
|
<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
</section>
|
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
|
||||||
|
<button>Add list</button>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="center-page">
|
<main>
|
||||||
<section id="search">
|
<search>
|
||||||
<input id="searchinput" inputmode="verbatim" placeholder="Search...">
|
<input inputmode="verbatim" placeholder="Search...">
|
||||||
<br/>
|
<br>
|
||||||
<button>Search Here</button><button>Search all</button>
|
<button>Search Here</button><button>Search All Lists</button>
|
||||||
</section>
|
</search>
|
||||||
<section id="articles">
|
<section id="articles">
|
||||||
<a href="index.html"><article class="article">
|
<h1>Home Feed</h1>
|
||||||
<span class="article-header">
|
<a href="index.html"><article>
|
||||||
<span class="fake-favicon-big"></span>
|
<hgroup>
|
||||||
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
||||||
<h2>This is a headline</h2>
|
<h2>This is a headline</h2>
|
||||||
</span>
|
</hgroup>
|
||||||
<span>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
</span>
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
</p>
|
||||||
</article></a>
|
</article></a>
|
||||||
<a href="index.html"><article class="article">
|
<a href="index.html"><article>
|
||||||
<span class="article-header">
|
<hgroup>
|
||||||
<span class="fake-favicon-big"></span>
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
||||||
<h2>This is a slightly somewhat notably longer headline</h2>
|
<h2>This is a slightly somewhat notably longer headline</h2>
|
||||||
</span>
|
</hgroup>
|
||||||
<span>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
</span>
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
</p>
|
||||||
</article></a>
|
</article></a>
|
||||||
<a href="index.html"><article class="article">
|
<a href="index.html"><article>
|
||||||
<span class="article-header">
|
<hgroup>
|
||||||
<span class="fake-favicon-big"></span>
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
||||||
<h2>What if the internet wasn't shit, wouldn't that be cool</h2>
|
<h2>What if the internet wasn't shit, wouldn't that be cool</h2>
|
||||||
</span>
|
</hgroup>
|
||||||
<span>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
</span>
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
</p>
|
||||||
</article></a>
|
</article></a>
|
||||||
<a href="index.html"><article class="article">
|
<a href="index.html"><article>
|
||||||
<span class="article-header">
|
<hgroup>
|
||||||
<span class="fake-favicon-big"></span>
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
||||||
<h2>Did you know: Genderfuckery can !</h2>
|
<h2>Did you know: Genderfuckery can !</h2>
|
||||||
</span>
|
</hgroup>
|
||||||
<span>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
</span>
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
</p>
|
||||||
</article></a>
|
</article></a>
|
||||||
<a href="index.html"><article class="article">
|
<a href="index.html"><article>
|
||||||
<span class="article-header">
|
<hgroup>
|
||||||
<span class="fake-favicon-big"></span>
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
||||||
<h2>This is a headline!!</h2>
|
<h2>This is a headline!!</h2>
|
||||||
</span>
|
</hgroup>
|
||||||
<span>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
</span>
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||||
|
</p>
|
||||||
</article></a>
|
</article></a>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</main>
|
||||||
<section id="sidebar-right" class="sidebar">
|
<section id="sidebar-right" class="sidebar">
|
||||||
<section id="current-list">
|
|
||||||
<h1>'Home' List</h1>
|
<h1>'Home' List</h1>
|
||||||
<h2><a href="index.html">Newspaper A</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Newspaper A<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
<h2><a href="index.html">Blog Z</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Blog Z<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
<h2><a href="index.html">Podcast Y</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Podcast Y<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
<h2><a href="index.html">Reviewer N</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Reviewer N<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
<h2><a href="index.html">Chef V</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Chef V<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
<h2><a href="index.html">Artist P</a></h2>
|
<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Artist P<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
|
||||||
</section>
|
<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
|
||||||
|
<button>Subscribe</button>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue