diff options
Diffstat (limited to 'static/css/style.css')
| -rw-r--r-- | static/css/style.css | 342 |
1 files changed, 342 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..32c4151 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,342 @@ +* { + scrollbar-color: #2a2c2e #1c1e1f; +} + +::-webkit-scrollbar { + background-color: #1C1E1F; +} + +::-webkit-scrollbar-thumb{ + background-color: #2A2C2E; +} + +::-webkit-scrollbar-corner { + background-color: rgb(24, 24, 24); +} + +html, body { + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; + font-size: 17px; + line-height: 1.6; + height: 100%; + margin: 0px; + background-color:#1A1C1D; + color : #D8D6D0; +} + +a { + text-decoration: none; + color: #389DFF; +} + +a:hover { + text-decoration: underline; +} + +aside { + background-color:rgb(45, 49, 51); + height: 100%; + width: 200px; + z-index: 1; + top: 0; + left: 0; + overflow-y: auto; + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + border-right: 1px solid #3D3D3D; + transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */ +} + +aside a { + color:rgb(238, 238, 238); +} + +aside i[class^="fa"]{ + padding: 0em 0.4em 0em 0em; +} + +aside header { + background-color:#23282E; + text-align: center; + display: flex; + align-items: center; + width: 100%; + flex-direction: column; + border-bottom: 1px solid #3D3D3D; +} + +aside header img{ + margin-top: 20px; + min-width: 150px; + max-width: 150px; + border-radius: 5px; + +} + +aside a:hover { + text-decoration: none; +} + +aside nav { + list-style: none; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0px 0px 0px; + margin: 0px; +} + +aside nav a { + padding: 10px 0%; + width: 100%; + min-height: 30px; + overflow-x: hidden; + overflow-y: auto; + white-space: nowrap; + text-align: center; + transition: 0.2s; +} + +aside nav a:hover { + background-color:rgb(48, 75, 102); +} + +#branding { + font-size: 32px; + margin-top: 10px; + margin-bottom: 20px; + color: #E8E8E8; +} + +#npq{ + color: #BFBFBF; +} + +#closebtn { + transition: 0.3s; + border-radius: 7px; + position: fixed; + left: 200px; + top: 0px; + padding: 10px; + color:rgba(238, 238, 238, 0.664); + background-color: rgba(61, 61, 61, 0.555); +} + +.list-item { + border: 1px solid #3D3D3D; + border-radius: 3px; + padding: 10px; + background-color:#181B1C; +} +.list-item+.list-item{ + margin-top: 10px; +} + +.entry-title { + font-size: large; + font-weight: bold; +} + +.list-item p { + margin: 5px 0px; +} + +.meta { + color: rgb(156, 151, 143); + font-size: small; +} + +main { + display: flex; + flex-direction: column; + margin-left: 200px; + padding: 0px; + height: 100%; + transition: 0.3s; +} + +#random-meme{ + font-size: 20px; +} + +button{ + padding: 15px 32px; + border: none; + margin: 5px; + font-size: 16px; + color: white; +} + +.button-red { + background-color: #AD1810; +} + +.button-green { + background-color: #206D38; +} + +.content { + width : 90%; + margin:0px auto auto auto; + word-break: break-word; +} + +h1, h2, h3 { + border-bottom: 1px solid #3D3D3D; +} +#title { + text-align: center; + margin: 20px; + padding-bottom: 5px; +} +.spacer{ + height: 50px; +} + +/* code */ +pre { + overflow: auto; + background-color: #2C2F30; + font-size: 16px; + padding: 5px; +} + +img { + max-width: 100%; +} + +blockquote { + border-left: 10px solid #2C2C2C; + padding-left: 10px; +} + +.pinned { + color: #EAD94C; +} + +.posts { + border: 1px solid #3D3D3D; +} + +.post { + padding: 10px; +} + +.post+.post { + border-top: 1px solid #3D3D3D; +} + + +.post p{ + margin:4px 0px; +} + +.post-footer{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.section{ + display:flex; + flex-direction: column; +} + +.section-title{ + margin: 20px; + font-size: 25px; + text-align: center; +} + +.nav-next-prev { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + font-size: 30px; + margin-top: 50px; + padding-top: 30px; + border-top: 1px solid #3D3D3D; +} +.nav-top:hover{ + text-decoration: none; +} + +.grayed-out { + color: rgb(70, 69, 69) ; +} + +footer{ + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 30px; + margin-top: 40px; + border-top: 1px solid #3D3D3D; + background-color:rgb(30, 34, 39) ; +} + +.contact-form { + display: flex; + flex-direction: column; + /* background-color:#1C1E1F; */ + align-items: flex-start; + border-radius: 3px; + padding: 10px; +} + +.contact-form input, .contact-form button, .contact-form textarea { + color : #D8D6D0; + background-color:#181A1B ; + border-radius: 3px; + border: 1px solid #3D3D3D; + padding: 10px; + margin: 10px; + height: 30px; + width: 50%; +} + +.contact-form textarea { + height: 200px; + width: 50%; +} + +.contact-form button{ + padding: 15px 32px; + height: auto; + width: auto; +} + +.contact-info { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +@media only screen and (max-width: 650px){ + #sidenav { + width: 0px; + } + #main { + margin-left: 0px; + } + #closebtn { + left:0px; + } + .content { + width : 95%; + margin:0px auto auto auto; + } +} + +@media only screen and (min-width: 1200px) { + .content { + width : 70%; + margin:0px auto auto auto; + } + +} |