이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
김채리
b39fbc23 2 parents 78125a9f 935e27e4

Merge branch 'cher' into 'feature/styles' 

CSS update for UserDetail and more



See merge request !13
Inline Side-by-side
Showing 11 changed files with 351 additions and 102 deletions
...@@ -21,6 +21,8 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr ...@@ -21,6 +21,8 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
21 21
22 ## <br> 22 ## <br>
23 23
24 +### Developers
25 +
24 ### test installation 26 ### test installation
25 27
26 This is the usage just for the being. 28 This is the usage just for the being.
...@@ -51,7 +53,9 @@ npm run dev:assets ...@@ -51,7 +53,9 @@ npm run dev:assets
51 [GitHub Contributuions API](https://api.github.com/graphql/) 53 [GitHub Contributuions API](https://api.github.com/graphql/)
52 54
53 <br> 55 <br>
54 -\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")--> 56 +\\<!--[GitHub Repositories API]
57 +
58 +### Libraries
55 59
56 ### License 60 ### License
57 61
......
...@@ -12,7 +12,7 @@ header { ...@@ -12,7 +12,7 @@ header {
12 .header__column { 12 .header__column {
13 ul { 13 ul {
14 display: flex; 14 display: flex;
15 - color: $blue; 15 + color: $lilac;
16 font-weight: 700; 16 font-weight: 700;
17 font-size: 20px; 17 font-size: 20px;
18 text-transform: uppercase; 18 text-transform: uppercase;
......
1 -$blue: #0063b2; 1 +$lilac: #8495ed;
2 -$skyblue: #9cc3d5; 2 +$navy: #00008b;
3 +$blue: #483d8b;
3 $star: #ffb700; 4 $star: #ffb700;
4 $space: 40px; 5 $space: 40px;
......
...@@ -11,19 +11,22 @@ ...@@ -11,19 +11,22 @@
11 .fileUpload { 11 .fileUpload {
12 display: flex; 12 display: flex;
13 flex-direction: column; 13 flex-direction: column;
14 + input {
15 + font-size: 13px;
16 + }
14 } 17 }
15 input { 18 input {
16 - padding: 10px;
17 display: block; 19 display: block;
18 border: none; 20 border: none;
19 border-bottom: 1px solid #ccc; 21 border-bottom: 1px solid #ccc;
20 width: 40%; 22 width: 40%;
21 - opacity: 0.6; 23 + padding: 10px;
22 margin-top: 19px; 24 margin-top: 19px;
23 font-family: "Roboto", sans-serif; 25 font-family: "Roboto", sans-serif;
24 font-size: 18px; 26 font-size: 18px;
25 } 27 }
26 label { 28 label {
29 + color: #6456bb;
27 font-family: "Raleway", sans-serif; 30 font-family: "Raleway", sans-serif;
28 font-size: 13px; 31 font-size: 13px;
29 font-weight: bold; 32 font-weight: bold;
...@@ -38,15 +41,29 @@ ...@@ -38,15 +41,29 @@
38 margin-top: 20px; 41 margin-top: 20px;
39 padding: 9px; 42 padding: 9px;
40 } 43 }
44 +
41 .box { 45 .box {
46 + margin-top: 50px;
42 input { 47 input {
43 - background-color: rgb(209, 219, 231); 48 + border-radius: 10px;
49 + background-color: #94a3ec;
44 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 50 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
45 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 51 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
46 0 8px 16px rgba(0, 0, 0, 0.11); 52 0 8px 16px rgba(0, 0, 0, 0.11);
47 font-family: "Raleway", sans-serif; 53 font-family: "Raleway", sans-serif;
54 + text-transform: uppercase;
55 + font-weight: bold;
48 opacity: 1; 56 opacity: 1;
49 font-size: 20px; 57 font-size: 20px;
58 + color: white;
59 + }
60 + input:hover {
61 + border-radius: 10px;
62 + background-color: #6456bb;
63 + -webkit-transform: scale(0.8);
64 + -ms-transform: scale(0.95);
65 + transform: scale(0.95);
66 + transition: 0.2s ease-in;
50 } 67 }
51 } 68 }
52 } 69 }
......
...@@ -57,10 +57,13 @@ ...@@ -57,10 +57,13 @@
57 font-size: 30px; 57 font-size: 30px;
58 font-weight: 700; 58 font-weight: 700;
59 display: flex; 59 display: flex;
60 + align-items: flex-end;
61 + align-content: flex-end;
62 + justify-items: flex-end;
60 justify-content: center; 63 justify-content: center;
61 align-items: center; 64 align-items: center;
62 a { 65 a {
63 - color: $blue; 66 + color: $lilac;
64 &:not(:last-child) { 67 &:not(:last-child) {
65 margin-right: 50px; 68 margin-right: 50px;
66 } 69 }
......
...@@ -9,32 +9,63 @@ ...@@ -9,32 +9,63 @@
9 9
10 h3 { 10 h3 {
11 display: flex; 11 display: flex;
12 - justify-content: center; 12 + justify-content: left;
13 align-items: center; 13 align-items: center;
14 - margin-top: 50px; 14 + margin: 50px 0px;
15 font-weight: 700; 15 font-weight: 700;
16 font-family: "Roboto", sans-serif; 16 font-family: "Roboto", sans-serif;
17 - font-size: 30px; 17 + font-size: 27px;
18 + color: rgb(15, 100, 142);
18 opacity: 0.8; 19 opacity: 0.8;
19 } 20 }
20 21
21 a { 22 a {
23 + .login-github::before {
24 + transform: scaleX(0);
25 + transform-origin: bottom right;
26 + }
27 +
28 + .login-github:hover::before {
29 + transform: scaleX(1);
30 + transform-origin: bottom left;
31 + }
32 +
33 + .login-github::before {
34 + content: " ";
35 + display: block;
36 + position: absolute;
37 + top: 0;
38 + right: 0;
39 + bottom: 0;
40 + left: 0;
41 + inset: 0 0 0 0;
42 + background: hsl(200 100% 80%);
43 + z-index: -1;
44 + transition: transform 0.3s ease;
45 + }
46 +
22 .login-github { 47 .login-github {
23 - display: flex; 48 + position: relative;
24 - justify-content: center; 49 + font-size: 5rem;
25 - border-radius: 25px; 50 + }
26 - align-items: center; 51 +
27 - margin-top: 30px; 52 + html {
28 - height: 80px; 53 + block-size: 100%;
29 - background-color: rgb(93, 32, 167); 54 + inline-size: 100%;
30 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 55 + }
31 - 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 56 +
32 - 0 8px 16px rgba(0, 0, 0, 0.11); 57 + body {
33 - font-family: "Raleway", sans-serif; 58 + min-block-size: 100%;
34 - color: white; 59 + min-inline-size: 100%;
35 - font-size: 50px; 60 + margin: 0;
36 - font-weight: 500; 61 + box-sizing: border-box;
37 - font-family: "Roboto", sans-serif; 62 + display: grid;
38 - font-size: 25px; 63 + place-content: center;
64 + }
65 +
66 + @media (orientation: landscape) {
67 + body {
68 + grid-auto-flow: column;
69 + }
39 } 70 }
40 } 71 }
......
1 .user-quote { 1 .user-quote {
2 - margin-top: 20px;
3 h2 { 2 h2 {
4 font-size: 30px; 3 font-size: 30px;
5 font-family: "Vollkorn", serif; 4 font-family: "Vollkorn", serif;
6 - margin: 15px 0px; 5 + margin-top: 40px;
7 } 6 }
8 h3 { 7 h3 {
9 display: flex; 8 display: flex;
10 - margin-right: 100px;
11 flex-direction: row-reverse; 9 flex-direction: row-reverse;
10 + margin-top: 20px;
11 + margin-right: 80px;
12 font-size: 20px; 12 font-size: 20px;
13 - opacity: 0.5;
14 font-family: "Vollkorn", serif; 13 font-family: "Vollkorn", serif;
14 + color: #74828e;
15 + font-weight: lighter;
15 } 16 }
16 } 17 }
17 -label { 18 +
19 +.labelSetting {
20 + width: 100px;
21 + display: inline-flex;
22 + flex-direction: row;
23 + justify-content: flex-end;
18 font-family: "Raleway", sans-serif; 24 font-family: "Raleway", sans-serif;
19 font-size: 13px; 25 font-size: 13px;
20 font-weight: bold; 26 font-weight: bold;
21 - padding: 10px; 27 + margin: 2px;
28 + color: $blue;
29 +}
30 +.infoSetting {
31 + display: inline-flex;
32 + flex-direction: row;
33 + justify-content: flex-end;
34 + font-family: "Roboto", sans-serif;
35 + font-size: 20px;
36 + font-weight: bold;
37 + padding: 2px;
38 + color: #1e1e1ed9;
39 + margin: 10px;
40 +}
41 +.mainText {
42 + display: inline-flex;
43 + font-family: "Raleway", sans-serif;
44 + font-size: 25px;
45 + font-weight: bolder;
46 + margin: 5px;
47 + color: $blue;
22 } 48 }
49 +
50 +.boxEffect {
51 + z-index: -1;
52 + content: "";
53 + bottom: 15px;
54 + right: 10px;
55 + left: auto;
56 + background: #777;
57 + -webkit-box-shadow: 0 15px 10px #777;
58 + -moz-box-shadow: 0 15px 10px #777;
59 + box-shadow: 0 15px 10px #777;
60 + -webkit-transform: rotate(-1deg);
61 + -moz-transform: rotate(-1deg);
62 + -o-transform: rotate(-1deg);
63 + -ms-transform: rotate(-1deg);
64 + transform: rotate(-1deg);
65 +}
66 +
67 +//#fff5f6
68 +//#f8f8ff
69 +//#f2f3f8;
70 +//lavender
71 +//#ecedfc
72 +//#e3edf7
73 +//#ddeeff
74 +//#fff6c3
75 +
23 .user-profile { 76 .user-profile {
77 + margin-bottom: 50px;
78 + margin-top: 30px;
79 + margin-right: 23px;
80 + width: 600px;
81 + padding: 10px;
82 + padding-bottom: 50px;
83 + background-color: #fff6c3;
84 + @extend .boxEffect;
85 +
24 .user-profile__column { 86 .user-profile__column {
25 img { 87 img {
26 - width: 100px; 88 + width: 120px;
27 - height: 100px; 89 + height: 120px;
28 object-fit: cover; 90 object-fit: cover;
91 + margin: 5px;
29 } 92 }
30 .user-profile__link { 93 .user-profile__link {
31 display: flex; 94 display: flex;
32 font-family: "Raleway", sans-serif; 95 font-family: "Raleway", sans-serif;
33 - flex-wrap: wrap;
34 font-weight: bold; 96 font-weight: bold;
35 - width: 5px; 97 + font-size: 15px;
36 - color: rgb(92, 92, 221); 98 + color: rgb(70, 70, 216);
99 + margin: 5px;
100 + padding: 2px;
101 + a {
102 + margin: 5px;
103 + margin-right: 15px;
104 + }
105 + }
106 + .user-profile__info {
107 + h3 {
108 + flex: 0 0 100px;
109 + @extend .labelSetting;
110 + }
111 + h4 {
112 + @extend .infoSetting;
113 + }
114 + .user-profile__career {
115 + display: flex;
116 + }
117 + .user-profile__tech {
118 + display: flex;
119 + }
120 + ul {
121 + display: flex;
122 + flex-direction: column;
123 + font-size: 20px;
124 + font-weight: bold;
125 + padding: 2px;
126 + color: rgba(0, 0, 0, 0.85);
127 + margin: 10px;
128 + }
129 + }
130 + }
131 +}
132 +
133 +.user-git {
134 + margin-left: 20px;
135 + .user-status {
136 + .user-status__contributions {
137 + margin-top: 40px;
138 + h3 {
139 + @extend .mainText;
140 + }
141 + span {
142 + color: orange;
143 + display: inline-flex;
144 + font-family: "Raleway", sans-serif;
145 + font-size: 40px;
146 + font-weight: bolder;
147 + margin: 5px;
148 + }
149 + img {
150 + width: 600px;
151 + height: auto;
152 + object-fit: cover;
153 + margin: 5px;
154 + }
155 + }
156 + .user-status__character {
157 + margin-top: 50px;
158 + h3 {
159 + @extend .mainText;
160 + }
161 + img {
162 + max-width: 130px;
163 + height: auto;
164 + object-fit: cover;
165 + margin-top: px;
166 + }
37 } 167 }
38 } 168 }
39 } 169 }
170 +
171 +.user-repositories {
172 + margin-top: 30px;
173 + text-transform: uppercase;
174 + h3 {
175 + margin-top: 15px;
176 + margin-bottom: 10px;
177 + @extend .mainText;
178 + }
179 + .user-repo {
180 + a {
181 + h3 {
182 + text-transform: lowercase;
183 + display: inline-flex;
184 + font-family: "Raleway", sans-serif;
185 + font-size: 15px;
186 + font-weight: bolder;
187 + margin: 5px;
188 + color: rgb(66, 68, 79);
189 + }
190 + }
191 + }
192 +}
193 +
194 +.pageLayout {
195 + display: flex;
196 + flex-direction: row;
197 +}
......
1 extends layouts/main 1 extends layouts/main
2 2
3 block content 3 block content
4 - i.fas.fa-location-arrow 4 + h3 Click Below to Join Us!
5 - h3 Join Us!
6 a(href="/auth/github") 5 a(href="/auth/github")
7 .login-github 6 .login-github
8 i.fab.fa-github 7 i.fab.fa-github
9 - span Join with GitHub 8 + span Join with GitHub
9 +
10 +
10 11
11 12
...\ No newline at end of file ...\ No newline at end of file
......
1 extends layouts/main 1 extends layouts/main
2 2
3 block content 3 block content
4 - i.fas.fa-location-arrow 4 + h3 Click Below to Login with GitHub!
5 - h3 Login with GitHub!
6 a(href="/auth/github") 5 a(href="/auth/github")
7 .login-github 6 .login-github
8 i.fab.fa-github 7 i.fab.fa-github
......
...@@ -6,55 +6,99 @@ block content ...@@ -6,55 +6,99 @@ block content
6 h3=author 6 h3=author
7 7
8 hr 8 hr
9 - .user-profile 9 + .pageLayout
10 - .user-profile__column 10 + .user-profile
11 - img(src=`/${user.avatarUrl}`) 11 + .user-profile__column
12 - .user-profile__link 12 + img(src=`/${user.avatarUrl}`)
13 - a(href=user.githubUrl target="_blank") Github 13 + .user-profile__link
14 - a(href=`//${user.blogUrl}` target="_blank") Blog 14 + a(href=user.githubUrl target="_blank") GitHub
15 - .user-profile__column 15 + i.fab.fa-github
16 - .user-profile__info 16 + a(href=`//${user.blogUrl}` target="_blank") Blog
17 - .user-profile__name 17 + i.fas.fa-link
18 - h3 NAME: 18 + .user-profile__column
19 - h4=user.name 19 + .user-profile__info
20 - .user-profile__github 20 + .user-profile__name
21 - h3 GITHUB NICKNAME: 21 + h3 NAME
22 - h4=user.githubName 22 + h4=user.name
23 - .user-profile__email 23 + .user-profile__github
24 - h3 EMAIL: 24 + h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
25 - h4=user.email 25 + br
26 - .user-profile__school 26 + |NICKNAME
27 - h3 SCHOOL: 27 + h4=user.githubName
28 - h4=user.school 28 + .user-profile__email
29 - .user-profile__tech 29 + h3 EMAIL
30 - h3 TECH: 30 + h4=user.email
31 - ul 31 + .user-profile__school
32 - each tech in user.tech 32 + h3 SCHOOL
33 - li=tech 33 + h4=user.school
34 - .user-profile__career 34 + .user-profile__tech
35 - h3 CAREER: 35 + h3 TECH
36 - ul 36 + ul
37 - each career in user.career 37 + each tech in user.tech
38 - li=career 38 + li=tech
39 - .user-profile__introduction 39 + .user-profile__career
40 - h3 SELF-INTRODUCTION: 40 + h3 CAREER
41 - h4=user.introduction 41 + ul
42 - hr 42 + each career in user.career
43 - .user-status 43 + li.career_list=career
44 - .user-status__contributions 44 + .user-profile__introduction
45 - span#jsTotalContributions=totalContributions 45 + h3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SELF
46 - img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") 46 + br
47 - .user-status__character 47 + |INTRODUCTION
48 - h3 Your step 48 + h4=user.introduction
49 - img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;") 49 +
50 - .user-repositories 50 + .user-git
51 - .user-repo 51 + .user-status
52 - a(href=firstRepoUrl) 52 + .user-status__contributions
53 - h3 REPO 1 53 + h3 YOU'VE MADE
54 - p=fitstRepoName 54 + span #{totalContributions}
55 - br 55 + h3 CONTRIBUTIONS!
56 - a(href=secondRepoUrl) 56 +
57 - h3 REPO 2 57 + img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
58 - p=secondRepoName 58 +
59 +
60 + .user-status__character
61 + h3 YOUR STATUS:
62 +
63 +
64 + .user-repositories
65 + h3 Your recent updated repositories
66 + .user-repo
67 + a(href=firstRepoUrl)
68 + h3 REPO 1
69 + p=fitstRepoName
70 + br
71 + a(href=secondRepoUrl)
72 + h3 REPO 2
73 + p=secondRepoName
74 +
75 +
76 +
77 +
78 +
79 + //- .user-status
80 + //- .user-status__contributions
81 + //- h3 YOU'VE MADE
82 + //- span #{totalContributions}
83 + //- h3 CONTRIBUTIONS!
84 +
85 + //- img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
86 +
87 +
88 + //- .user-status__character
89 + //- h3 YOUR STATUS:
90 +
91 +
92 + //- .user-repositories
93 + //- h3 Your recent updated repositories
94 + //- .user-repo
95 + //- a(href=firstRepoUrl)
96 + //- h3 REPO 1
97 + //- p=fitstRepoName
98 + //- br
99 + //- a(href=secondRepoUrl)
100 + //- h3 REPO 2
101 + //- p=secondRepoName
102 +
59 block scripts 103 block scripts
60 script(src="/static/js/githubInfo.js") 104 script(src="/static/js/githubInfo.js")
......
1 -scss -> screens/assets둘다
2 -사진 크기 설정하기
3 -
4 -youtube와 구글에 scss나 sass 검색마니하기
5 -
6 -pug 파일 안에 이미 있는 css 다 지워버리기
7 -css하다보면 pug파일 많이 수정해야할거임
8 -
9 -아직 세진님께 불러와지네요..? 최근 repos
...\ No newline at end of file ...\ No newline at end of file