我的博客 scss (Thinkinside)

  1 $header-bg-color:#0678be;
  2 $link-color:#0678be;
  3 $link-hover-color:black;
  4
  5 #mainContent .forFlow{margin-left:0px;float:none;clear:both;width:auto;}
  6 #mainContent{width:73%;float:left;margin-left:1%;}
  7 body {
  8     background-attachment:fixed;
  9     background-repeat:repeat;
 10     padding-bottom: 40px;
 11     padding-top: 60px;
 12     min-height: 101%;
 13     background-color: #fff;
 14     color: #404040;
 15         font-family: ‘Noto Sans‘, Helvetica, ‘Microsoft Yahei‘, 微软雅黑, sans-serif;
 16     font-size: 16px;
 17     font-weight: normal;
 18     line-height: 1.8;
 19     margin: 0;
 20
 21 }
 22 a{
 23 color: $link-color;
 24     text-decoration: none;
 25 -webkit-transition: 0.25s;
 26     -moz-transition: 0.25s;
 27     -o-transition: 0.25s;
 28     transition: 0.25s;
 29     -webkit-backface-visibility: hidden;
 30 }
 31 *{
 32 -webkit-transition: 0.25s;
 33     -moz-transition: 0.25s;
 34     -o-transition: 0.25s;
 35     transition: 0.25s;
 36 }
 37 #sideBarMain ul{margin-left:0px;}
 38 #sideBarMain ul a{
 39      color: #444;
 40     zoom: 1;
 41     filter: alpha(opacity=50);
 42     -webkit-opacity: .5;
 43     -moz-opacity: .5;
 44     opacity: .5;
 45     word-break: break-all;
 46 }
 47 input{outline:0px;}
 48 #header {
 49     overflow: visible;
 50     background: $header-bg-color;
 51     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 52     clear: both;
 53     font-size:16px;
 54     content: "";
 55     margin: 0px;
 56     border-width: 0 0 1px;
 57     padding-right:2.5%;
 58 }
 59 .blogStats{margin:0px;padding:15px 0px 0px 0px;color:#FFF;}
 60 #blogTitle h1{
 61 padding:15px 15px 17px 0px;
 62 font-weight:400;
 63 }
 64 #navList li{    line-height: 20px;font-weight: 300;}
 65 #navList li a{
 66     text-decoration: none;
 67     color:#FFF;
 68     font-weight:400;
 69     padding: 15px 15px 17px;
 70     margin-top: 0px;
 71     border-radius: 5px;
 72     -moz-border-radius: 5px;
 73 }
 74 #navList a:link, #navList a:visited, #navList a:active{
 75    color:#FFF;
 76
 77 }
 78 #navList a:hover{
 79  color:#bce3fa;
 80 }
 81 #home,#main{min-width:120px;}
 82 #main{
 83
 84     text-align: left;
 85      padding-left: 0px;
 86       padding-right: 10px;
 87        background-color:#fff;
 88 }
 89 #sideBar{
 90    width:20%;
 91    background:none;
 92    border:none;
 93    border-radius:0px;
 94    box-shadow:none;
 95    float: right;
 96     margin-right: 1%;
 97 }
 98 .input_my_zzk{width:auto;}
 99 input.btn_my_zzk{
100     height:auto;
101     border: none;
102     padding: 5px 5px;
103     cursor: pointer;
104     border-radius: 5px;
105     cursor:pointer;
106
107 }
108 input.btn_my_zzk:hover{
109 color:#FFF;
110 }
111 .input_my_zzk{
112     background-color: #fff;
113     border: 1px solid #ccc;
114     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
115     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
116     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
117     -webkit-transition: border linear .2s,box-shadow linear .2s;
118     -moz-transition: border linear .2s,box-shadow linear .2s;
119     -o-transition: border linear .2s,box-shadow linear .2s;
120     transition: border linear .2s,box-shadow linear .2s;
121        display: inline-block;
122     height: 20px;
123     padding: 5px;
124     margin-bottom: 0px;
125     font-size: 14px;
126     line-height: 20px;
127     color: #555;
128     vertical-align: middle;
129     -webkit-border-radius: 4px;
130     -moz-border-radius: 4px;
131     border-radius: 4px;
132 }
133 .input_my_zzk:focus{
134 border-color: rgba(82,168,236,0.8);
135     outline: 0;
136     outline: thin dotted \9;
137     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
138     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
139     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
140 }
141
142 .post{
143  background:transparent;
144 }
145
146 .postCon{    line-height: 1.9;
147     font-family: Helvetica, ‘Microsoft Yahei‘, 微软雅黑, sans-serif;}
148 .c_b_p_desc_readmore{display:block;float:right;position: relative;}
149 .dayTitle{display:none;}
150 .postDesc{text-align:left;zoom: 1;
151     filter: alpha(opacity=50);
152     -webkit-opacity: .5;
153     -moz-opacity: .5;
154     opacity: .5;
155     margin-top: 24px;
156     font-size: 14px;
157     font-size: .875rem;clear: both;
158     float: none;border-bottom: 1px dashed $header-bg-color;}
159 .postTitle{
160     font-size: 1.2em;
161     line-height: 1.4;
162     text-transform: capitalize;
163     font-weight: normal;
164     word-break: break-word;
165     margin: 0px 0px 24px;
166     padding: 0px;
167 }
168 .pager{    text-align: center;
169     margin: 15px 0px;}
170 #nav_next_page a,.pager a{    display: inline-block;
171     padding: 6px 12px;
172     background: #5bc0de;
173     text-align: center;
174     color: #FFF;border-color: #46b8da;margin-top: 5px;
175     margin-bottom: 5px;}
176     #nav_next_page a:hover,.pager a:hover{
177     color: #fff;
178     background-color: #269abc;
179     border-color: #1b6d85;}
180
181 @media screen and (min-width: 960px) {
182      #main{width:960px;margin:0px auto;padding: 0px;}
183      #navigator{width:960px;margin:0 auto;}
184 }
185
186 @media screen and (max-width:960px){
187    #sideBar{display:none;}
188    #mainContent .forFlow{margin-left:0px;}
189    #main{margin:0px;padding:15px;}
190    #blogTitle{display:none;}
191    #navList li a{padding:15px 12px;}
192    .blogStats{display:none;}
193 }
时间: 2024-10-05 06:06:02

我的博客 scss (Thinkinside)的相关文章

Vue.js实践:一个Node.js+mongoDB+Vue.js的博客内容管理系统

项目来源 以前曾用过WordPress搭建自己的博客网站,但感觉WordPress很是臃肿.所以一直想自己写一个博客内容管理器. 正好近日看完了Vue各个插件的文档,就用着Vue尝试写了这个简约的博客内容管理器(CMS). 嗯,我想完成的功能: 一个基本的博客内容管理器功能,如后台登陆,发布并管理文章等 支持markdown语法实时编辑 支持代码高亮 管理博客页面的链接 博客页面对移动端适配优化 账户管理(修改密码) Demo 登陆后台按钮在页面最下方"站长登陆",可以以游客身份登入后

博客园页面模板2--老牛大讲堂

这个界面不是我写的,不过感觉不错,就用了.其中也用了,一些自己的小插件. 一:其中css代码: 1 #sidebar_search{ 2 display: none; 3 } 4 #blog-calendar{ 5 display: none; 6 } 7 #blogCalendar{ 8 display: none; 9 } 10 .Cal{ 11 display: none; 12 } 二:侧边栏: 1 <link href="http://files.cnblogs.com/file

搭建 github.io 博客站点

前言 很多人都有搭建博客或知识库站点的想法,可自己买云服务器太不划算,部署管理也是个问题:基于免费又热门的 GitHub Pages 来搭建博客站点倒是省钱省力省事的好办法,于是上网一搜,满屏都是关于使用 Jekyll 来搭建站点的文章,这个 Jekyll 是基于 Ruby 开发的,上手得先装一大坨东西.各种啰嗦各种坑,看的一点欲望都没有了. 神器出现 平地一声雷,炸出了 Hexo (https://hexo.io/zh-cn) 这个神器.它只需要 NodeJS 即可,完全不依赖其他乱七八糟的玩

博客园自动生成目录及页面美化

一.自动生成目录 1.在博客园后台管理页面选择"设置" 2.生成三级目录 2.1.操作步骤 找到页脚HTML代码,复制自动生成目录的js代码,保存即可 代码如下: 2.2.效果: 3.生成一级目录 3.1.操作步骤: 找到页脚HTML代码,复制生成目录的代码,保存即可,代码如下: 回到顶部 二.引入自定义控件 1.侧边栏时间控件 1.1.操作步骤 找到侧边栏公告,复制时间控件代码,保存即可 代码如下: 复制代码 复制代码 1.2.效果 2.界面美化 2.1.选择皮肤:ThinkInsi

个人博客主页搭建随笔

经常在各种论坛.博客还有 github 上活跃的朋友不难发现,许多大牛都有自己的网站,也多以博客为主.博主作为一个立志前端的大白,难道不应该和大牛学习么? 说干就干,前端部分和 web 开发博主做了很多学习和总结,不少也写成了博客.对于后端,博主不敢说完全没有经验,但接触的也都比较简单.于是乎,博主去年六月底开始看 Node 和 Express,利用空闲时间做了自己的博客,现阶段还有许多不足,需要后续不断改进.不过这不妨碍博主先总结一下自己的感受. UI设计 和 架构设计 博主深刻的感受到自己并

阅读博客摘录

自动格式化代码工具:Prettier Prettier 的优点 它可以在编辑器中使用,也可以在命令行中使用,配置非常简单. 它既能在保存代码的时候进行格式化当前文件,也能一键格式化所有的文件: 它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式: 开启本地服务:一般在本地使用 webpack-dev-server 启动项目.然而一旦进入后续迭代,由于存在接口跨域和登陆信息限制问题,无法在本地打开页面进行开发.以往大都使用 whistle 或者 fi

Windows环境下Jekyll+Github搭建个人博客

萌新来讲讲如何使用 Jekyll 搭建个人博客,从安装到配置!炒鸡详细!.原文地址https://zhangmingemma.github.... 介绍 jekyll是一个静态站点生成器,会根据网页源码生成静态文件. 简单.无需数据库,评论功能,不需要不断更新版本,只用关注你的博客内容 静态.只用Markdown(或者Textile).Liquid.HTML&CSS就可以构建可部署的静态网站 博客形态.自定义地址.分类页面.分类博客内容以及自定义的布局设计 使用GitHub Pages可以运行j

从入门到放弃,.net构建博客系统(一):系统构建篇

demo:http://tonyblogs.top/ Git源码:https://github.com/Halifa/TonyBlogs 项目采用的技术有:asp.net mvc4 + autofac + ormlite + mysql + metronic + jquery.datatable + vue 一.项目分层 1. TonyBlogs.Framework,主要实现了框架的依赖注入,定义了依赖的生命周期 2. TonyBlogs.Entity,主要是数据表的实体对象,以Entity为后

Android ListView工作原理完全解析(转自 郭霖老师博客)

原文地址:http://blog.csdn.net/guolin_blog/article/details/44996879 在Android所有常用的原生控件当中,用法最复杂的应该就是ListView了,它专门用于处理那种内容元素很多,手机屏幕无法展示出所有内容的情况.ListView可以使用列表的形式来展示内容,超出屏幕部分的内容只需要通过手指滑动就可以移动到屏幕内了. 另外ListView还有一个非常神奇的功能,我相信大家应该都体验过,即使在ListView中加载非常非常多的数据,比如达到