-
Lorem Ipsum
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium nulla eu turpis
- placerat tincidunt. Curabitur pretium et neque sit amet consectetur. Phasellus eget cursus
- libero. Fusce erat nisi, tincidunt a accumsan sed, pulvinar sed nisl. Aenean vestibulum dui
- quam, placerat fringilla nisl facilisis at. Maecenas vitae ex ultrices, commodo urna nec,
- tempor ante. Vivamus condimentum interdum accumsan. Mauris mattis venenatis sapien, a luctus
- elit pellentesque eu. Suspendisse fringilla, diam a mollis ultrices, elit lorem molestie mi,
- ac eleifend ligula libero non velit. Donec non lacus lobortis, laoreet lorem sed, interdum
- est. Nullam efficitur, eros at tempus tincidunt, felis magna placerat est, ut dapibus quam
- nunc a lacus. Donec mattis est nec condimentum rhoncus. Nulla vehicula placerat risus.
- Quisque fringilla tristique dui.
-
- Quisque fringilla vel lectus non condimentum. Curabitur eget ante mi. Praesent sit amet
- turpis et arcu congue blandit. Mauris turpis quam, iaculis in magna in, laoreet dapibus
- velit. Nullam ornare sem risus, vestibulum cursus orci tristique ultricies. Donec quis dolor
- et felis iaculis lacinia. Praesent vitae dui viverra, vehicula ante vel, condimentum felis.
- Sed eu odio nisl. Donec turpis sem, malesuada eu ipsum eu, dignissim vestibulum elit.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
- egestas. Pellentesque lorem diam, rutrum rhoncus magna vel, convallis dignissim eros.
-
- Nam euismod bibendum est, eu varius urna porttitor sit amet. Quisque dictum nibh dui, ut
- ornare ipsum efficitur quis. Maecenas lobortis consectetur lectus, eget feugiat turpis
- blandit vel. Sed non arcu convallis, gravida urna eu, eleifend turpis. Vestibulum ante ipsum
- primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ut lobortis
- ipsum. Suspendisse at pharetra arcu.
-
- Aliquam vitae pellentesque turpis, non molestie dolor. Morbi mi tortor, scelerisque et
- sagittis et, fringilla vel ligula. Morbi feugiat semper ipsum non vestibulum. Lorem ipsum
- dolor sit amet, consectetur adipiscing elit. Donec vehicula luctus ex ut ultricies. Donec
- consectetur euismod ante in pharetra. Morbi quis arcu nisl. Mauris fringilla sagittis turpis
- ac gravida. Nam et varius libero, eu ornare ex. In mattis nunc non felis cursus, et iaculis
- erat scelerisque. Cras scelerisque commodo imperdiet. Quisque quis malesuada urna. Fusce a
- lacus elit. Mauris pharetra nulla quis orci rutrum varius.
-
- Suspendisse vitae dolor in lectus pharetra elementum quis in erat. Fusce non finibus magna.
- Vestibulum consequat quis lorem eu scelerisque. Vivamus euismod eu elit et pulvinar. Nullam
- et pellentesque ligula. Vestibulum eros ipsum, rutrum ut elit vel, ullamcorper hendrerit
- massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
- himenaeos. Donec iaculis nulla lectus. Ut gravida elit at odio rhoncus mattis. Aliquam
- eleifend neque sem, et placerat sem blandit at.
-
-
- by
- Hansal Bachkaniwala at October 29, 2019 10:54 PM
-
+
+
+
+
+
+
+
+
Participants
+ ⨂
+
+
+
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
+
+
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
+
+
+ TEST CONTENT
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/planet.css b/planet.css
index 244d986dff..7e2977bfc0 100644
--- a/planet.css
+++ b/planet.css
@@ -1,151 +1,241 @@
+/* Regular theme starts */
+.normalTheme{
+ --main-bg-color: #ffffff;
+ --nav-font-color: #b51418;
+ --box-shadow-color: rgba(221, 220, 220, 0.911);
+ --nav-btn-bgcolor: #ffffff;
+ --close-btn-hover: #d85f61;
+ --content-font: #000000;
+ --title-border: #a0a0a0d8;
+
+}
+/* Regular Theme ends */
+
body {
- border-right: 1px solid black;
- margin-right: 200px;
padding-left: 20px;
padding-right: 20px;
}
-h1 {
- margin-top: 0px;
- padding-top: 20px;
-
- font-family: "Bitstream Vera Sans", sans-serif;
- font-weight: normal;
- letter-spacing: -2px;
- text-transform: lowercase;
- text-align: right;
-
- color: grey;
-}
-
-.admin {
- text-align: right;
-}
-
-h2 {
- font-family: "Bitstream Vera Sans", sans-serif;
- font-weight: normal;
- color: #200080;
- margin-left: -20px;
+#sideNav{
+ box-shadow: 5px 0px 5px var(--box-shadow-color);
}
-
-h3.planetauthor {
- font-family: "Bitstream Vera Sans", sans-serif;
- font-weight: bold;
-
- background-color: #dbdbdb;
- border: 1px solid #ccc;
- color: #b51418;
-
- padding: 4px;
-}
-
-h3.planetauthor a {
- text-decoration: none;
- color: inherit;
-}
-
-h4 {
- font-family: "Bitstream Vera Sans", sans-serif;
- font-weight: bold;
-}
-
-h4 a {
- text-decoration: none;
- color: inherit;
-}
-
-img.face {
- float: right;
- margin-top: -3em;
-}
-
-.entry {
- margin-bottom: 2em;
-}
-
-.entry .date {
- font-family: "Bitstream Vera Sans", sans-serif;
- color: grey;
-}
-
-.entry .date a {
- text-decoration: none;
- color: inherit;
-}
-
.sidebar {
- position: absolute;
- top: 0px;
- right: 0px;
+ margin: 0px;
+ padding: 0px;
width: 200px;
-
- margin-left: 0px;
- margin-right: 0px;
- padding-right: 0px;
-
- padding-top: 20px;
- padding-left: 0px;
-
- font-family: "Bitstream Vera Sans", sans-serif;
- font-size: 85%;
-}
-
-.sidebar h2 {
- font-size: 110%;
- font-weight: bold;
- color: black;
-
- padding-left: 5px;
- margin-left: 0px;
-}
-
-.sidebar ul {
- padding-left: 1em;
- margin-left: 0px;
-
- list-style-type: none;
-}
-
-.sidebar ul li:hover {
- color: grey;
+ background-color: var(--main-bg-color);
+ position: fixed;
+ height:100%;
+ overflow: auto;
}
-.sidebar ul li a {
- text-decoration: none;
-}
-.sidebar ul li a:hover {
- text-decoration: underline;
-}
-.sidebar ul li a img {
- border: 0;
+/* Logo anchor */
+.sidebar a {
+ display: block;
+ margin-left: 15px;
+ margin-top: 50px;
+ margin-bottom: 50px;
}
-.sidebar p {
- border-top: 1px solid grey;
- margin-top: 30px;
- padding-top: 10px;
-
- padding-left: 5px;
+/* Sidebar navigation buttons */
+.sideUl{
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
-
-.sidebar .message {
- cursor: help;
- border-bottom: 1px dashed red;
+.sideUl li {
+ margin-bottom: 15px;
}
-
-.sidebar a.message:hover {
- cursor: help;
- background-color: #ff0000;
- color: #ffffff !important;
- text-decoration: none !important;
+.sideNavBtn{
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ color: var(--nav-font-color);
+ background-color: var(--nav-btn-bgcolor);
+ margin-left: 5px;
+ margin-bottom: 5px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ font-weight: 900;
+ font-size: 100%;
+ width: 80%;
+ border: 2px solid var(--nav-font-color);
+ border-left-width: 6px;
+ border-left-color: var(--nav-font-color);
+}
+
+.sideNavBtn:hover {
+ background-color: var(--nav-font-color);
+ color: var(--nav-btn-bgcolor);
+ cursor: pointer;
+}
+
+.sideNavBtn:focus {
+ background-color: var(--nav-font-color);
+ color: var(--nav-btn-bgcolor);
+ outline: none !important;
+ border: 1px solid var(--nav-font-color);
+ box-shadow: 0 0 3px var(--close-btn-hover);
+}
+
+/* Sidebar Links */
+
+li #icon{
+ color: var(--nav-font-color);
+ margin: 10px;
+ display: inline;
+}
+
+
+
+/* Dialogue Box CSS */
+.dBox{
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 234px;
+ top: 0;
+ bottom: 0;
+ width: 90%;
+ overflow: auto;
+ background-color: rgb(0,0,0);
+ background-color: rgba(0,0,0,0.4);
+}
+
+.dBox-content{
+ display: block;
+ margin: 15% auto;
+ padding: 20px;
+ padding-left: 30px;
+ background-color: var(--main-bg-color);
+ border: 1px solid var(--box-shadow-color);
+ width: 70%;
+ animation-name: animateDialogue;
+ animation-duration: 0.4s;
+}
+
+.dBox-content h1:after{
+ content: "";
+ display: block;
+ text-align: left;
+ padding-bottom: 5px;
+ text-decoration: none;
+ color: var(--content-font-color);
+ font-weight: 900;
+ border-bottom: 15px solid var(--nav-font-color);
+ width: 25%;
}
-a:hover {
- text-decoration: underline !important;
- color: blue !important;
+.dBox-close{
+ color: var(--nav-font-color);
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+@-webkit-keyframes animateDialogue {
+ from {top:-300px; opacity:0}
+ to {top:0; opacity:1}
+ }
+
+@keyframes animateDialogue {
+ from {top:-300px; opacity:0}
+ to {top:0; opacity:1}
+ }
+
+.dBox-close:hover,
+.dBox-close:focus {
+ color: var(--close-btn-hover);
+ text-decoration: none;
+ cursor: pointer;
+}
+
+#dBox-text{
+ display: block;
+ margin-left: 50px;
+ text-align: justify;
+}
+
+/* Search bar CSS */
+#srchDiv .col{
+ justify-content: end !important;
+ margin-left: 650px;
+}
+form.srchBox input[type=text] {
+ padding-left: 2px;
+ font-size: 100%;
+ border: 1px solid var(--nav-font-color);
+ float: left;
+ width: 50%;
+ background: var(--nav-btn-bgcolor);
+ font-weight: 500;
+ }
+form.srchBox input:focus{
+ outline: none !important;
+ border: 1px solid var(--nav-font-color);
+ box-shadow: 0 0 5px var(--close-btn-hover);
+}
+
+form.srchBox button {
+ float: left;
+ width: 20%;
+ padding: 1px;
+ background: var(--nav-font-color);
+ color: var(--nav-btn-bgcolor);
+ font-size: 100%;
+ font-weight: 600;
+ border: 1px solid var(--nav-font-color);
+ border-left: none;
+ cursor: pointer;
+ }
+
+form.srchBox button:hover {
+ background: var(--close-btn-hover);
+ }
+
+form.srchBox::after {
+ content: "";
+ clear: both;
+ display: table;
+ }
+
+/* Custom h1 to ensure major posts are separated */
+h1c{
+ font-size: 2em;
+ margin: .67em 0;
+ border-bottom: 15px solid var(--nav-font-color);
+ display: inline-block;
+ font-weight: 700;
+ text-align: center;
+}
+
+h2,h3{
+ text-align: center;
+}
+
+#mainHead{
+ margin-left: 240px;
+ width: 90%;
+}
+
+#mainContent{
+ text-align: justify;
+ display: inline-block;
+}
+
+.author{
+ font-size: 1.5em;
+ font-weight: 400;
+ margin-top: 1em;
+ display: inline-block;
+}
+
+.date{
+ font-size: 1.17em;
+ margin-bottom: .5em;
+ display: inline-block;
}
\ No newline at end of file
diff --git a/src/dialogue.js b/src/dialogue.js
new file mode 100644
index 0000000000..6c0c48df02
--- /dev/null
+++ b/src/dialogue.js
@@ -0,0 +1,17 @@
+var dialogue = document.getElementById("dialogue");
+var btn = document.getElementById("participants");
+var span = document.getElementsByClassName("dBox-close")[0];
+
+btn.onclick = function() {
+ dialogue.style.display = "block";
+}
+
+span.onclick = function() {
+ dialogue.style.display = "none";
+}
+
+window.onclick = function(event) {
+ if (event.target == dialogue) {
+ dialogue.style.display = "none";
+ }
+}
\ No newline at end of file
- 
Planet Feed (Atom)