Initial commit

This commit is contained in:
farhan 2023-10-14 00:42:01 -04:00
commit 95f00445c1
Signed by: farhan
GPG Key ID: 45FE45AD7E54F59B
15 changed files with 2212 additions and 0 deletions

0
README.md Normal file
View File

322
css/main.css Normal file
View File

@ -0,0 +1,322 @@
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.clear {
clear: both;
}
html, body {
/* To vertically center align */
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
h1, h2, h3, h4, a {
color: #666666;
}
h1, h2, h3, h4 {
margin: 0 0 10px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.homepage .center {
text-align: center;
/* To vertically center align */
display: table-cell;
vertical-align: middle;
}
.section {
margin: 50px auto;
}
.searcharea {
border: 1px solid #b3b3b3;
border-radius: 30px;
max-width: 800px;
}
.searchinput {
width: 75%;
color: #666666;
background: none;
border: none;
font-size: 22px;
float: left;
padding: 10px 25px;
box-sizing: border-box;
outline: none;
}
.searchsubmit {
float: right;
width: 20%;
background: #333333;
color: #f2f2f2;
border: none;
border-radius: 30px;
padding: 10px 20px;
margin: 2px;
font-size: 18px;
cursor: pointer;
}
.links.section li {
display: inline-block;
margin: 0 10px;
color: #666666;
}
.hbmenu {
position: absolute;
top: 0;
right: 0;
background: #ffffff;
/* Remove focus border */
outline: none;
z-index: 100;
}
.hbmenu .hbbtn {
display: block;
padding: 15px 20px;
content: "\2630";
color: #666666;
font-size:24px;
cursor: pointer;
}
.hbmenu:focus {
pointer-events: none;
height: 100%;
border-left: 1px solid #b3b3b3;
padding: 0;
}
.hbmenu .menu {
display: none;
z-index: 1000;
pointer-events: auto;
}
.hbmenu:focus .menu {
display: unset;
}
.hbmenu .menu li {
display: block;
}
.hbmenu .menu li a {
display: inline-block;
width: 160px;
padding: 15px 20px;
}
/* ----- Search result page ----- */
.resultpage .navbar {
padding: 10px 10px;
}
.resultpage .logo {
margin: 20px 0 0 10px;
}
.resultpage .hbbtn {
margin: 20px 0 0;
}
.resultpage .logo img {
width: 150px;
float: left;
}
.resultpage .searcharea {
margin: 20px auto;
max-width: 600px;
}
.resultpage .resultarea {
margin: 0 auto;
max-width: 600px;
padding: 10px 25px;
color: #666666;
}
.resultpage .resultinfo {
font-style: italic;
margin: 0 0 10px 0;
}
.resultarea .result:last-child {
border-bottom: none;
}
.result {
padding: 30px 0;
border-bottom: 1px solid #d6d6d6;
}
.result .useravatar {
border-radius: 100px;
border: 3px solid #4d4d4d;
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}
.result .useravatar img {
border-radius: 100px;
width: 44px;
height: 44px;
}
.result .resulttop {
height: 54px;
margin: 0 0 10px 0;
}
.result .userdata {
width: 70%;
float:left;
}
.result .userlabel, .result .userident {
display: block;
width: auto;
}
.result .userlabel {
font-weight: bold;
padding-bottom: 2px;
padding: 2px 0;
color: #4d4d4d;
}
.result .userident {
padding: 0 0;
}
.result .actions {
float: right;
padding: 5px 10px;
display: none;
}
.result:hover .actions {
display: unset;
}
.result .actions li {
list-style: none;
display: inline-block;
margin: 0 2px;
}
.result:hover .actions li a {
padding: 2px;
border-radius: 100px;
background: #e6e6e6;
display: inline-block;
width:36px;
height:36px;
}
.result:hover .actions li a:hover {
background: #cccccc;
}
.result:hover .actions li img {
width: 18px;
height: 18px;
margin: 7px 0 0 7px;
}
.pagin {
text-align: center;
margin: 50px 0;
}
.pagin ul {
list-style: none;
}
.pagin ul li {
display: inline-block;
}
.pagin a {
padding: 10px;
display: inline-block;
border-radius: 30px;
min-height: 40px;
min-width: 40px;
}
.pagin a:hover {
background: #e6e6e6;
/* No underline for pagination links */
text-decoration: none;
}
.pagin a.current {
background: #333333;
color: #f2f2f2;
}
.sidebar {
position: absolute;
top: 100px;
width: 300px;
padding: 20px 30px;
}
.left.sidebar {
left: 0;
}
.right.sidebar {
right: 0;
}
.sidebar .list {
list-style: none;
}
.sidebar h4, .sidebar h5 {
margin-top: 10px;
}
.list.checks li a {
/* Create place for checkmark */
padding-left: 20px;
}
.list li.current a {
font-weight: bold;
}
.list.checks li.current {
background: url("../images/checkmark.png") no-repeat;
/* Size of checkmark */
background-size: 15px;
background-position-y: 5px;
}

322
css/main.css.bak Normal file
View File

@ -0,0 +1,322 @@
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.clear {
clear: both;
}
html, body {
/* To vertically center align */
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
h1, h2, h3, h4, a {
color: #666666;
}
h1, h2, h3, h4 {
margin: 0 0 10px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.homepage .center {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.section {
margin: 50px auto;
}
.searcharea {
border: 1px solid #b3b3b3;
border-radius: 30px;
max-width: 800px;
}
.searchinput {
color: #666666;
background: none;
border: none;
font-size: 22px;
float: left;
display: inline-block;
margin-right: 100px;
padding: 10px 25px;
box-sizing: border-box;
outline: none;
}
.searchsubmit {
display: inline-block;
float: right;
width: 100px;
background: #333333;
color: #f2f2f2;
border: none;
border-radius: 30px;
padding: 10px 20px;
margin: 2px;
font-size: 18px;
cursor: pointer;
}
.links.section li {
display: inline-block;
margin: 0 10px;
color: #666666;
}
.hbmenu {
position: absolute;
top: 0;
right: 0;
background: #ffffff;
/* Remove focus border */
outline: none;
z-index: 100;
}
.hbmenu .hbbtn {
display: block;
padding: 15px 20px;
content: "\2630";
color: #666666;
font-size:24px;
cursor: pointer;
}
.hbmenu:focus {
pointer-events: none;
height: 100%;
border-left: 1px solid #b3b3b3;
padding: 0;
}
.hbmenu .menu {
display: none;
z-index: 1000;
pointer-events: auto;
}
.hbmenu:focus .menu {
display: unset;
}
.hbmenu .menu li {
display: block;
}
.hbmenu .menu li a {
display: inline-block;
width: 160px;
padding: 15px 20px;
}
/* Search result page */
.resultpage .navbar {
padding: 10px 10px;
}
.resultpage .logo {
margin: 20px 0 0 10px;
}
.resultpage .hbbtn {
margin: 20px 0 0;
}
.resultpage .logo img {
width: 150px;
float: left;
}
.resultpage .searcharea {
margin: 20px auto;
max-width: 600px;
}
.resultpage .resultarea {
margin: 0 auto;
max-width: 600px;
padding: 10px 25px;
color: #666666;
}
.resultpage .resultinfo {
font-style: italic;
margin: 0 0 10px 0;
}
.resultarea .result:last-child {
border-bottom: none;
}
.result {
padding: 30px 0;
border-bottom: 1px solid #d6d6d6;
}
.result .useravatar {
border-radius: 100px;
border: 3px solid #4d4d4d;
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}
.result .useravatar img {
border-radius: 100px;
width: 44px;
height: 44px;
}
.result .resulttop {
height: 54px;
margin: 0 0 10px 0;
}
.result .userdata {
width: 70%;
float:left;
}
.result .userlabel, .result .userident {
display: block;
width: auto;
}
.result .userlabel {
font-weight: bold;
padding-bottom: 2px;
padding: 2px 0;
color: #4d4d4d;
}
.result .userident {
padding: 0 0;
}
.result .actions {
float: right;
padding: 5px 10px;
display: none;
}
.result:hover .actions {
display: unset;
}
.result .actions li {
list-style: none;
display: inline-block;
margin: 0 2px;
}
.result:hover .actions li a {
padding: 2px;
border-radius: 100px;
background: #e6e6e6;
display: inline-block;
width:36px;
height:36px;
}
.result:hover .actions li a:hover {
background: #cccccc;
}
.result:hover .actions li img {
width: 18px;
height: 18px;
margin: 7px 0 0 7px;
}
.pagin {
text-align: center;
margin: 50px 0;
}
.pagin ul {
list-style: none;
}
.pagin ul li {
display: inline-block;
}
.pagin a {
padding: 10px;
display: inline-block;
border-radius: 30px;
min-height: 40px;
min-width: 40px;
}
.pagin a:hover {
background: #e6e6e6;
/* No underline for pagination links */
text-decoration: none;
}
.pagin a.current {
background: #333333;
color: #f2f2f2;
}
.sidebar {
position: absolute;
top: 100px;
width: 300px;
padding: 20px 30px;
}
.left.sidebar {
left: 0;
}
.right.sidebar {
right: 0;
}
.sidebar .list {
list-style: none;
}
.sidebar h4, .sidebar h5 {
margin-top: 10px;
}
.list.checks li a {
/* place for checkmark */
padding-left: 20px;
}
.list li.current a {
font-weight: bold;
}
.list.checks li.current {
background: url("../images/checkmark.png") no-repeat;
/* size of checkmark */
background-size: 15px;
background-position-y: 5px;
}

188
homepage-01.svg Normal file
View File

@ -0,0 +1,188 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1920"
height="1080"
viewBox="0 0 1920 1080"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="website-01.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="0.15648011"
inkscape:cx="1156.6965"
inkscape:cy="354.67766"
inkscape:window-width="1280"
inkscape:window-height="729"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g25642"
showguides="false"
inkscape:guide-bbox="true">
<sodipodi:guide
position="925.83652,691.37233"
orientation="0,-1"
id="guide12736" />
<sodipodi:guide
position="928.23299,749.28704"
orientation="0,-1"
id="guide12738" />
</sodipodi:namedview>
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g25642"
transform="matrix(1.5476036,0,0,1.5476036,-332.87488,-194.2829)"
inkscape:export-filename="images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:70.5342px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.76336"
x="703.68182"
y="376.75885"
id="text1838"
inkscape:export-filename="/home/user/Codes/fedilogue_fe/images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><tspan
sodipodi:role="line"
id="tspan1836"
x="703.68182"
y="376.75885"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:ultra-condensed;font-family:'Fira Sans Compressed';-inkscape-font-specification:'Fira Sans Compressed Bold Ultra-Condensed';fill:#666666;stroke-width:1.76336">Fedi</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:69.1868px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1.72967"
x="816.16357"
y="376.09122"
id="text3330"
inkscape:export-filename="/home/user/Codes/fedilogue_fe/images/logo.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><tspan
sodipodi:role="line"
id="tspan3328"
x="816.16357"
y="376.09122"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Fira Sans Compressed';-inkscape-font-specification:'Fira Sans Compressed';fill:#666666;stroke-width:1.72967">logue</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:33.9048px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.847622"
x="1396.351"
y="170.29684"
id="text5546"><tspan
sodipodi:role="line"
id="tspan5544"
style="fill:#666666;fill-opacity:1;stroke-width:0.847622"
x="1396.351"
y="170.29684">☰</tspan></text>
</g>
<rect
style="fill:#ffffff;stroke:#b3b3b3;stroke-width:2.01012;stroke-miterlimit:4;stroke-dasharray:none"
id="rect25484"
width="1063.5865"
height="82.989876"
x="428.20673"
y="524.83313"
rx="41.077236"
ry="41.494938" />
<rect
style="fill:#333333;stroke:none;stroke-width:0.984461;stroke-miterlimit:4;stroke-dasharray:none"
id="rect25644"
width="186.50233"
height="74.015541"
x="1300.9961"
y="529.32025"
rx="38.191616"
ry="37.007771" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:35.8154px;line-height:1.25;font-family:sans-serif;fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.895386"
x="1340.4105"
y="579.75879"
id="text27275"><tspan
sodipodi:role="line"
id="tspan27273"
x="1340.4105"
y="579.75879"
style="stroke-width:0.895386;fill:#f2f2f2">Search</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="747.23029"
y="787.40198"
id="text31239"><tspan
sodipodi:role="line"
id="tspan31237"
x="747.23029"
y="787.40198">About</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="901.51971"
y="787.40198"
id="text32067"><tspan
sodipodi:role="line"
id="tspan32065"
x="901.51971"
y="787.40198">How it works</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="1179.2467"
y="787.40198"
id="text34761"><tspan
sodipodi:role="line"
id="tspan34759"
x="1179.2467"
y="787.40198">FAQ</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="1297.7744"
y="787.40198"
id="text35791"><tspan
sodipodi:role="line"
id="tspan35789"
x="1297.7744"
y="787.40198">Contact</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="484.97955"
y="787.40198"
id="text10093"><tspan
sodipodi:role="line"
id="tspan10091"
x="484.97955"
y="787.40198">Trending</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none"
x="683.76117"
y="787.40198"
id="text12155"><tspan
sodipodi:role="line"
id="tspan12153"
x="683.76117"
y="787.40198">|</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
images/checkmark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 B

BIN
images/icon-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/icon-expand.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B

BIN
images/icon-link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 850 B

BIN
images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

61
images/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 19 KiB

52
index.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fedilogue</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body class="homepage">
<div tabindex="0" class="hbmenu">
<span class="hbbtn">&#9776;</span>
<div class="menu">
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Trending</a></li>
</div>
</div>
<div class="center">
<div class="logo section">
<a class="logolink" href="#" title="Fedilogue logo">
<img src="images/logo.svg" alt="Fedilogue logo image"/>
</a>
</div>
<div class="searcharea section">
<form name="search" method="get" action="search.html">
<input class="searchinput" type="text" name="q" value="" />
<input class="searchsubmit" type="submit" name="" value="Search" />
<div class="clear"></div>
</form>
</div>
<div class="links section">
<ul>
<li><a href="#">Trending</a></li>
<li>|</li>
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

0
js/main.js Normal file
View File

489
result-01.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 67 KiB

621
result-02.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 74 KiB

157
search.html Normal file
View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fedilogue</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="resultpage">
<div class="navbar">
<div tabindex="0" class="hbmenu">
<span class="hbbtn">&#9776;</span>
<div class="menu">
<li><a href="#">About</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Trending</a></li>
</div>
</div>
<div class="logo">
<a class="logolink" href="index.html" title="Fedilogue logo">
<img src="images/logo.svg" alt="Fedilogue logo image"/>
</a>
</div>
<div class="searcharea">
<form name="search" method="get">
<input class="searchinput" type="text" name="q" value="test" />
<input class="searchsubmit" type="submit" name="" value="Search" />
<div class="clear"></div>
</form>
</div>
</div>
<div class="resultarea">
<div class="resultinfo">Search for <strong>test</strong> returned <strong>0000</strong> results.</div>
<div class="result">
<div class="resulttop">
<div class="userdata">
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
<a href="#" title="User Label" target="_blank" class="userlabel">User One</a>
<a href="#" title="User ID" target="_blank" class="userident">@userone@instance.tld</a>
</div>
<div id="test" class="actions">
<ul>
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
</ul>
</div>
</div>
<div class="resultbody">
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
</div>
</div>
<div class="result">
<div class="resulttop">
<div class="userdata">
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
<a href="#" title="User Label" target="_blank" class="userlabel">User Two</a>
<a href="#" title="User ID" target="_blank" class="userident">@usertwo@instance.tld</a>
</div>
<div class="actions">
<ul>
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
</ul>
</div>
</div>
<div class="resultbody">
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
</div>
</div>
<div class="result">
<div class="resulttop">
<div class="userdata">
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
<a href="#" title="User Label" target="_blank" class="userlabel">User Three</a>
<a href="#" title="User ID" target="_blank" class="userident">@userthree@instance.tld</a>
</div>
<div class="actions">
<ul>
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
</ul>
</div>
</div>
<div class="resultbody">
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
</div>
</div>
<div class="pagin">
<ul>
<li><a href="#" class="prev">&laquo;</a></li>
<li><a href="#" class="current">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#" class="next">&raquo;</a></li>
</ul>
</div>
</div>
<div class="sidebar left">
<h3>Finetune</h3>
<h4>Post time within:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">24 hours</a></li>
<li><a href="#">1 week</a></li>
<li><a href="#">1 month</a></li>
<li><a href="#">6 months</a></li>
<li><a href="#">1 year</a></li>
</ul>
<h4>Post length:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">small (150 chars)</a></li>
<li><a href="#">toot (500 chars)</a></li>
<li><a href="#">longer (1000 chars)</a></li>
<li><a href="#">very long (>1000 chars)</a></li>
</ul>
<h4>Other</h4>
<h4>Attachment:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">with attachments</a></li>
<li><a href="#">without attachments</a></li>
</ul>
<h4>Mentions:</h4>
<ul class="list checks">
<li class="current"><a href="#">all</a></li>
<li><a href="#">with mentions</a></li>
<li><a href="#">without mentions</a></li>
</ul>
</div>
<div class="sidebar right">
<h3>Trending</h3>
<ul class="list trending">
<li><a href="#">#onehashtag</a></li>
<li><a href="#">#somethingelse</a></li>
<li><a href="#">#anothertag</a></li>
<li><a href="#">#exampletrending</a></li>
<li><a href="#">#exampletag</a></li>
</ul>
</div>
</body>
</html>