Skip to content

L
LxxyxResume

OpenDocCN / LxxyxResume

通知 0
Star 0
Fork 0
L
LxxyxResume

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 92aa3946 编写于 作者: L Lxxyx
浏览文件
操作

optimze css code

上级 8fa794e9
隐藏空白更改
内联 并排
Showing with 152 addition and 147 deletion
.DS_Store 0 → 100644
浏览文件 @ 92aa3946
文件已添加
info.json
浏览文件 @ 92aa3946
{
"username": "Lxxyx",
"Author": "Lxxyx - Inspired by Joyee Cheung",
"Guide": [
"照着这里面的格式填写即可",
"PDF使用chrome浏览器的保存为PDF即可"
],
"title": "刘子健 - 个人简历",
"aside": [{
"href": "https://github.com/Lxxyx/LxxyxResume",
......@@ -75,7 +79,7 @@
"title": {
"place": "Koa2-Easy",
"links": [{
"name": "demo",
"name": "Demo",
"href": "http://koa.ncuhr.win"
}, {
"name": "源代码",
......@@ -83,12 +87,11 @@
}]
},
"content": {
"position": "Node.js开发",
"position": "Node.js",
"tasks": [
"从自身需求出发，基于`Koa2`开发",
"使用`ES6/7`开发，使用`Async/Await`避免回调地狱",
"默认支持`COR跨域，Gzip`，开箱即用",
"支持一键开启Github hook,`实现自动更新部署`"
"默认支持`COR跨域，Gzip`，开箱即用"
]
}
}, {
......@@ -119,7 +122,7 @@
}]
},
"content": {
"position": "全栈开发",
"position": "前端&Node.js",
"tasks": [
"仿写张秋怡学姐的简历，尝试学习移动端网页设计",
"前端使用 `Gulp+Scss` 完成响应式设计",
......@@ -140,14 +143,14 @@
}, {
"name": "`ECMAScript（JavaScript）`",
"description": [
"熟悉JavaScript，代码编写遵守规范",
"熟悉JavaScript，`代码编写遵守规范`",
"了解`JavaScript面向对象知识`与`MVC`，`MVVM`等模式",
"`学习ES6/7规范`，不断实践并在新项目中应用，对ES6新特性较为熟悉"
"学习ES6/7规范，不断实践并在新项目中应用，`对ES6新特性较为熟悉`"
]
}, {
"name": "前端工程化实践",
"description": [
"能熟练使用`Vue,Vuex与Vue-Router`完成SPA的编写",
"能熟练使用`Vue`并搭配Vuex与Vue-Router完成单页应用的编写",
"熟悉`jQuery/Bootstrap`等常见框架类库的使用",
"对React和Angular等业界主流框架有所了解",
"熟练使用`Gulp,Webpack`等代码构建工具"
......@@ -155,12 +158,12 @@
}]
},
"cloud": {
"name": "Web后台",
"name": "Web后端",
"skill": [{
"name": "`Node.js`",
"description": [
"能够使用`Node.js API/Koa`搭建后端服务器",
"能够使用Node.js编写`命令行程序`",
"能够使用`Express/Koa2`等流行框架搭建后端服务器",
"能够`使用Node.js开发命令行程序`",
"熟练使用`Node类库编写爬虫`，爬取所需数据",
"能配合MongoDB开发简单的CRUD应用"
]
......@@ -185,7 +188,7 @@
}, {
"name": "工具使用",
"description": [
"使用`Linux六个月，在Linux环境下完成日常工作`",
"使用Linux六个月，`在Linux环境下完成日常工作`",
"熟练使用Git等团队协作工具",
"日常使用`Sublime Text`进行开发，能简单的操作Vim"
]
......
src/css/_include-media.scss
浏览文件 @ 92aa3946
......@@ -32,7 +32,7 @@
/// $breakpoints: ('phone': 320px);
///
$breakpoints: (
'phone': 400px,
'phone': 414px,
'tablet': 768px,
'desktop': 1024px
) !default;
......
src/css/components/aside.scss
浏览文件 @ 92aa3946
aside {
@include media("print") {
display: none!important;
}
position: fixed;
right: 0;
top: 50%;
right: 0;
transform: translate(0, -50%);
li {
margin-top: 6px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px 0 0 5px;
transition: 0.2s linear;
a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 10px;
width: 100%;
}
&:hover {
background-color: rgba(55, 55, 55, 0.8);
}
@include media('print') {
display: none!important;
}
@include media("<tablet") {
@include media('<tablet') {
position: relative;
top: 0;
right: auto;
display: table;
width: 100%;
right: auto;
top: 0;
transform: none;
ul {
display: table-row;
......@@ -35,11 +19,27 @@ aside {
li {
display: table-cell;
text-align: center;
border-radius: 0px!important;
border-radius: 0!important;
}
a {
padding-left: 0;
padding-right: 0;
padding-left: 0;
}
}
li {
margin-top: 6px;
transition: .2s linear;
border-radius: 5px 0 0 5px;
background-color: rgba(0, 0, 0, .8);
a {
display: inline-block;
width: 100%;
padding: 10px;
text-decoration: none;
color: #fff;
}
&:hover {
background-color: rgba(55, 55, 55, .8);
}
}
}
\ No newline at end of file
}
src/css/components/content.scss
浏览文件 @ 92aa3946
$black: #333;
$white: #fff;
@mixin content-after {
float: left;
width: 0;
height: 0;
margin-top: -23px;
margin-left: 15px;
content: '';
border: 8px solid $black;
border-radius: 100%;
width: 0px;
height: 0px;
float: left;
margin-left: 15px;
margin-top: -23px;
}
section {
......@@ -20,17 +20,17 @@ dd {
}
.column-6 {
@include media(">=desktop") {
width: 50%;
@include media('>=desktop') {
float: left;
width: 50%;
}
@include media("<desktop") {
@include media('<desktop') {
width: 100%;
padding-left: 0!important;
}
@include media("print") {
width: 50%;
@include media('print') {
float: left;
width: 50%;
}
}
......@@ -39,14 +39,13 @@ dd {
}
.content {
background: $white;
padding: 30px 45px;
overflow: hidden;
@include media("<=phone") {
padding: 30px 45px;
background: $white;
@include media('<=phone') {
padding: 30px 10px;
}
@include media("print") {
@include media('print') {
padding: 30px 20px!important;
}
}
......@@ -55,45 +54,45 @@ dd {
overflow-y: hidden;
.sec-title {
float: left;
padding: 0;
margin: 0 0 0 10px;
padding: 0;
}
.sec-zh {
font-size: 20px;
float: left;
font-weight: 700;
float: left;
}
.sec-en {
font-size: 16px;
font-weight: 700;
font-variant: small-caps;
float: left;
clear: left;
color: teal;
font-weight: 700;
}
}
.sec-content {
margin-left: 20px;
margin-bottom: 22px;
margin-left: 20px;
}
.timeline-wrapper {
margin-top: -28px;
ul {
border-left: 5px solid $black;
padding-top: 28px;
border-left: 5px solid $black;
}
.timeline-title {
background: $black;
border-radius: 5px;
color: $white;
font-size: 17px;
line-height: 1.33;
font-weight: 400;
padding: 2px 0px 2px 22px;
margin-left: 10px;
line-height: 1.33;
margin-bottom: 0;
margin-left: 10px;
padding: 2px 0 2px 22px;
color: $white;
border-radius: 5px;
background: $black;
}
&::after {
@include content-after;
......@@ -118,36 +117,39 @@ dd {
font-size: 20px;
font-weight: 700;
float: left;
padding-bottom: 3px;
}
.language-cert-wrapper {
display: flex;
overflow-y: hidden;
align-items: center;
}
.progress {
float: left;
width: 78%;
@include media("<=phone") {
margin-left: 10px;
height: 25px;
margin-top: 1.8px;
margin-bottom: 5px;
margin-left: 26px;
border-radius: 4px;
background: $black;
@include media('<=phone') {
width: 75%;
margin-left: 10px;
}
@include media("print") {
@include media('print') {
width: 75%;
margin-left: 10px;
}
height:25px;
background:$black;
float: left;
margin-top: 1.8px;
margin-bottom: 5px;
border-radius: 4px;
margin-left: 26px;
.progress-bar {
background: teal;
height: 100%;
border-radius: 4px;
background: teal;
.progress-label {
float: right;
color: $white;
font-size: 19px;
float: right;
margin-right: 10px;
color: $white;
}
}
}
......@@ -169,28 +171,28 @@ dd {
margin: 6px 0 5px 26px;
}
.experience-task {
margin-left: 27px;
font-size: 15px;
margin-left: 27px;
}
.experience-time {
font-size: 15px;
float: right;
margin-right: 10px;
font-size: 15px;
}
.experience-link {
display: inline-block;
background: $white;
text-decoration: none;
float: right;
margin-right: 10px;
padding: 0 3px;
border-radius: 5px;
text-decoration: none;
color: $black;
float: right;
border-radius: 5px;
background: $white;
}
}
.skills {
@include media("print") {
@include media('print') {
.skill-content {
margin: 0;
}
......@@ -201,7 +203,7 @@ dd {
margin: 6px 0 5px 26px;
}
.skill-description {
margin-left: 23px;
font-size: 15px;
margin-left: 23px;
}
}
src/css/components/footer.scss
浏览文件 @ 92aa3946
footer {
@include media("print") {
margin: 15px 6px;
@include media('print') {
display: none;
}
margin: 15px 6px;
a {
font-weight: 700;
text-decoration: none;
color: teal;
font-weight: 700;
}
p {
text-align: center;
}
}
\ No newline at end of file
}
src/css/components/header.scss
浏览文件 @ 92aa3946
header {
background-color: #333;
padding: 30px 45px;
overflow: hidden;
padding: 30px 45px;
color: #fff;
@include media("<tablet") {
background-color: #333;
@include media('<tablet') {
padding: 30px 10px;
}
@include media("print") {
@include media('print') {
padding: 30px 45px;
}
}
......@@ -14,45 +14,45 @@ header {
.qrcode {
float: left;
margin: 0;
img {
width: 130px;
height: 130px;
}
@include media("<=desktop") {
@include media('<=desktop') {
display: none;
}
@include media("print") {
@include media('print') {
display: block;
margin-top: 5px;
}
img {
width: 130px;
height: 130px;
}
}
.title {
float: right;
text-align: right;
h1 {
padding: 5px 0;
margin: 5px 0;
font-size: 72px;
line-height: 1;
}
h2 {
margin: 5px 0;
padding: 5px 6px;
font-size: 20.8px;
font-weight: 400;
}
@include media("<tablet") {
@include media('<tablet') {
float: none;
text-align: center;
h2 {
padding: 0px 6px;
padding: 0 6px;
}
}
@include media("print") {
@include media('print') {
float: right;
text-align: right;
}
h1 {
font-size: 72px;
line-height: 1;
margin: 5px 0;
padding: 5px 0;
}
h2 {
font-size: 20.8px;
font-weight: 400;
margin: 5px 0;
padding: 5px 6px;
}
}
address {
......@@ -61,41 +61,41 @@ address {
.phone {
display: none;
@include media("print") {
@include media('print') {
display: block;
}
}
.wechat {
@include media("print") {
@include media('print') {
display: none;
}
}
.contacts {
font-size: 18px;
float: left;
padding-left: 16px;
font-size: 18px;
li {
@include media('<=desktop') {
margin-top: 5px;
li {
line-height: 1.6;
}
}
@include media('print') {
line-height: 1.4;
margin-top: 0;
}
li {
font-style: initial;
line-height: 1.4;
}
a {
color: #fff;
transition: .3s ease-out;
text-decoration: none;
transition: 0.3s ease-out;
color: #fff;
&:hover {
color: #a3d3d1;
}
}
@include media("<=desktop") {
margin-top: 5px;
li {
line-height: 1.6;
}
}
@include media("print") {
margin-top: 0px;
line-height: 1.4;
}
}
src/css/resume.scss
浏览文件 @ 92aa3946
......@@ -3,15 +3,14 @@
@import 'components/header.scss';
@import 'components/content.scss';
@import 'components/footer.scss';
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
h3 {
......@@ -19,12 +18,13 @@ h3 {
}
body {
background: #E0E0E0;
font-family: "Helvetica Neue","Arial","PingFang SC","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
background: #e0e0e0;
}
a,strong {
color:teal;
a,
strong {
color: teal;
}
strong {
......@@ -36,19 +36,19 @@ strong {
margin-right: auto;
margin-left: auto;
box-shadow: 2px 2px 5px;
@include media(">=desktop") {
@include media('>=desktop') {
width: 970px;
}
@include media(">=tablet", "<=desktop") {
@include media('>=tablet', '<=desktop') {
width: 750px;
}
@include media("<=phone") {
padding: 5px 0px;
margin-top: 0px;
box-shadow: 0px 0px 0px;
@include media('<=phone') {
margin-top: 0;
padding: 5px 0;
box-shadow: 0 0 0;
}
@include media("print") {
margin-top: 0px;
box-shadow: 0px 0px 0px;
@include media('print') {
margin-top: 0;
box-shadow: 0 0 0;
}
}
\ No newline at end of file
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或