View file orblog-master/public/style/main.css

File size: 6.68Kb
/*-----------------------------------------------------------------------------
    
  orblog - Simple blog for hidden networks.  
  
    Version:   0.1
    GitLab:    https://github.com/neuberon/orblog/
    Copyright: [email protected] 2020
    License:   http://www.apache.org/licenses/LICENSE-2.0

-----------------------------------------------------------------------------*/
@font-face 
{
  font-family:                         roboto;
  src:                                 url(roboto.ttf);
}
*
{
  padding:                             0;
  margin:                              0;
  box-sizing:                          border-box;
  font-family:                         roboto, sans;
  line-height:                         1.5;
  outline:                             none;
}
.body
{
  max-width:                           840px;
  margin:                              auto;
}
a
{
  text-decoration:                     none;
  color:                               #673ab7;
}
p, h1, h2, h3, h4, h5, h6, hr, ul, ol, blockquote, pre
{
  margin-bottom:                       10px;
}
pre,
{
  background:                          #ededfd;
  padding:                             10px;
  padding-left:                        14px;
  border-left:                         4px solid #607d8b;
}
code
{
  font-family:                         monospace;
  font-size:                           14px;
}
h1, h2
{
  font-size:                           20px;
}
h3, h4
{
  font-size:                           18px;
}
h5, h6
{
  font-size:                           16px;
}
blockquote
{
  font-style:                          italic;
  border-left:                         4px solid #607d8b;
  padding-left:                        14px; 
  margin-left:                         20px;
}
li
{
  margin-left:                         30px;
}
img
{
  max-width:                           100%;
}
header
{
  background:                          #512da8;
  color:                               #fff;
  box-shadow:                          2px 2px 2px #ccc;
  margin-bottom:                       10px;
}
header, .header_logo, .header_desc
{
  height:                              60px;
}
.header_logo, .header_desc
{
  display:                             flex;
  align-items:                         center;
}
.header_logo
{
  width:                               30%;
  font-size:                           20px;
  float:                               left;                       
}
.header_desc
{
  width:                               70%;
  font-size:                           14px;
  float:                               left;
}
header a
{
  color:                               #fff;  
}
.main, .sidebar
{
  margin-bottom:                       10px;
}
.main
{
  width:                               70%;  
  float:                               left;
  padding-right:                       20px;
}
.sidebar
{
  width:                               30%;
  float:                               left;
}
.title
{
  width:                               100%;
  border-bottom:                       3px solid #607d8b;
  overflow:                            auto;
}
.title_tab
{
  background:                          #512da8;
  padding:                             10px;
  float:                               left;
  color:                               #fff;
  font-size:                           16px;  
}
.title_etc 
{
  float:                               right;
  padding:                             10px 0;
  color:                               #757575;
  font-size:                           16px;  
}
.title_etc a
{
  color:                               #757575;
}
.title_etc a:hover
{
  text-decoration:                     underline;
}
.post_title
{
  color:                               #333; 
}
.categories a
{
  padding:                             10px 0;
  display:                             block;
  border-bottom:                       1px solid #b0cddb;
  color:                               #607d8b;
  transition:                          0.2s linear; 
}
.categories a:hover
{
  padding:                             10px 5px;
}
.content
{
  padding:                             10px 0;   
  color:                               #333;
  font-size:                           16px; 
}
.comment_content
{
  padding-top:                             10px;  
}
input, textarea, select, option
{
  padding:                             10px 18px 10px 18px;
  margin:                              10px 0;
  border:                              1px solid #607d8b;
  font-size:                           14px;
  -webkit-appearance: none;
  -moz-appearance: none;  
  appearance:                          none;
  background:                          #fff; 
}
.button
{
  background:                          #512da8;
  color:                               #fff;  
  border:                              2px solid #512da8;
  transition:                          color 0.2s linear;  
}
.editor
{
  width:                               100%;
}
.button:hover
{
  background:                          #fff;
  color:                               #512da8;
 
}
.input_id, .input_name, .input_button
{
  display:                             flex;
  float:                               left;
}
.input_id
{
  width:                               10%;  
}
.input_name
{
  width:                               70%;
  border-left:                         0px;  
}
.input_button
{
  width:                               10%;
  border:                              1px solid #512da8; 
}
.error
{
  color:                               #fd2d2d;
}
.captcha
{
  margin-bottom:                       0;
}
.center
{
  text-align:                          center;
}
footer
{
  background:                          #607d8b;
  color:                               #fff;
  box-shadow:                          -2px -2px 2px #ccc;
  font-size:                           14px;
  height:                              80px;
  padding-top:                         10px;
}
.footer_copy
{
  width:                               30%;
  float:                               left;                       
}
.footer_text
{
  width:                               70%;
  float:                               left;
  text-align:                          right;
}
footer a
{
  color:                               #fff;
  text-decoration:                     underline;  
}
.clear
{
  clear:                               both;
}
@media only screen and (max-width: 860px)
{
  .body
  {
    padding:                           0 10px;
  }
  .header_logo, .footer_copy, .main, .sidebar
  {
    width:                             100%;
  }
  .header_desc, .footer_text
  {
    display:                           none;
  }
  .main
  {
    padding:                             0;
  }
}