Initial commit
322
css/main.css
Normal 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
@ -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
@ -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
After Width: | Height: | Size: 627 B |
BIN
images/icon-avatar.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
images/icon-expand.png
Normal file
After Width: | Height: | Size: 654 B |
BIN
images/icon-link.png
Normal file
After Width: | Height: | Size: 850 B |
BIN
images/logo.png
Normal file
After Width: | Height: | Size: 10 KiB |
61
images/logo.svg
Normal file
After Width: | Height: | Size: 19 KiB |
52
index.html
Normal 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">☰</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
489
result-01.svg
Normal file
After Width: | Height: | Size: 67 KiB |
621
result-02.svg
Normal file
After Width: | Height: | Size: 74 KiB |
157
search.html
Normal 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">☰</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">«</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">»</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>
|