2021_dev-profile / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
김채리
05724a20 1 parent 6ada939f

CSS update for UserDetail and more

Inline Side-by-side
Showing 10 changed files with 308 additions and 63 deletions
......@@ -12,7 +12,7 @@ header {
.header__column {
ul {
display: flex;
color: $blue;
color: $lilac;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
......
$blue: #0063b2;
$skyblue: #9cc3d5;
$lilac: #8495ed;
$navy: #00008b;
$blue: #483d8b;
$star: #ffb700;
$space: 40px;
......
......@@ -11,19 +11,22 @@
.fileUpload {
display: flex;
flex-direction: column;
input {
font-size: 13px;
}
}
input {
padding: 10px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 40%;
opacity: 0.6;
padding: 10px;
margin-top: 19px;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
label {
color: #6456bb;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
......@@ -38,15 +41,29 @@
margin-top: 20px;
padding: 9px;
}
.box {
margin-top: 50px;
input {
background-color: rgb(209, 219, 231);
border-radius: 10px;
background-color: #94a3ec;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
0 8px 16px rgba(0, 0, 0, 0.11);
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: bold;
opacity: 1;
font-size: 20px;
color: white;
}
input:hover {
border-radius: 10px;
background-color: #6456bb;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.95);
transform: scale(0.95);
transition: 0.2s ease-in;
}
}
}
......
......@@ -57,10 +57,13 @@
font-size: 30px;
font-weight: 700;
display: flex;
align-items: flex-end;
align-content: flex-end;
justify-items: flex-end;
justify-content: center;
align-items: center;
a {
color: $blue;
color: $lilac;
&:not(:last-child) {
margin-right: 50px;
}
......
......@@ -9,32 +9,63 @@
h3 {
display: flex;
justify-content: center;
justify-content: left;
align-items: center;
margin-top: 50px;
margin: 50px 0px;
font-weight: 700;
font-family: "Roboto", sans-serif;
font-size: 30px;
font-size: 27px;
color: rgb(15, 100, 142);
opacity: 0.8;
}
a {
.login-github::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.login-github:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.login-github::before {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%);
z-index: -1;
transition: transform 0.3s ease;
}
.login-github {
display: flex;
justify-content: center;
border-radius: 25px;
align-items: center;
margin-top: 30px;
height: 80px;
background-color: rgb(93, 32, 167);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
0 8px 16px rgba(0, 0, 0, 0.11);
font-family: "Raleway", sans-serif;
color: white;
font-size: 50px;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 25px;
position: relative;
font-size: 5rem;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
}
@media (orientation: landscape) {
body {
grid-auto-flow: column;
}
}
}
......
.user-quote {
margin-top: 20px;
h2 {
font-size: 30px;
font-family: "Vollkorn", serif;
margin: 15px 0px;
margin-top: 40px;
}
h3 {
display: flex;
margin-right: 100px;
flex-direction: row-reverse;
margin-top: 20px;
margin-right: 80px;
font-size: 20px;
opacity: 0.5;
font-family: "Vollkorn", serif;
color: #74828e;
font-weight: lighter;
}
}
label {
.labelSetting {
width: 100px;
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: bold;
padding: 10px;
margin: 2px;
color: $blue;
}
.infoSetting {
display: inline-flex;
flex-direction: row;
justify-content: flex-end;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: bold;
padding: 2px;
color: #1e1e1ed9;
margin: 10px;
}
.mainText {
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 25px;
font-weight: bolder;
margin: 5px;
color: $blue;
}
.boxEffect {
z-index: -1;
content: "";
bottom: 15px;
right: 10px;
left: auto;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
//#fff5f6
//#f8f8ff
//#f2f3f8;
//lavender
//#ecedfc
//#e3edf7
//#ddeeff
//#fff6c3
.user-profile {
margin-bottom: 50px;
margin-top: 30px;
margin-right: 23px;
width: 600px;
padding: 10px;
padding-bottom: 50px;
background-color: #fff6c3;
@extend .boxEffect;
.user-profile__column {
img {
width: 100px;
height: 100px;
width: 120px;
height: 120px;
object-fit: cover;
margin: 5px;
}
.user-profile__link {
display: flex;
font-family: "Raleway", sans-serif;
flex-wrap: wrap;
font-weight: bold;
width: 5px;
color: rgb(92, 92, 221);
font-size: 15px;
color: rgb(70, 70, 216);
margin: 5px;
padding: 2px;
a {
margin: 5px;
margin-right: 15px;
}
}
.user-profile__info {
h3 {
flex: 0 0 100px;
@extend .labelSetting;
}
h4 {
@extend .infoSetting;
}
.user-profile__career {
display: flex;
}
.user-profile__tech {
display: flex;
}
ul {
display: flex;
flex-direction: column;
font-size: 20px;
font-weight: bold;
padding: 2px;
color: rgba(0, 0, 0, 0.85);
margin: 10px;
}
}
}
}
.user-git {
margin-left: 20px;
.user-status {
.user-status__contributions {
margin-top: 40px;
h3 {
@extend .mainText;
}
span {
color: orange;
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 40px;
font-weight: bolder;
margin: 5px;
}
img {
width: 600px;
height: auto;
object-fit: cover;
margin: 5px;
}
}
.user-status__character {
margin-top: 50px;
h3 {
@extend .mainText;
}
img {
max-width: 130px;
height: auto;
object-fit: cover;
margin-top: px;
}
}
}
}
.user-repositories {
margin-top: 30px;
text-transform: uppercase;
h3 {
margin-top: 15px;
margin-bottom: 10px;
@extend .mainText;
}
.user-repo {
a {
h3 {
text-transform: lowercase;
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 15px;
font-weight: bolder;
margin: 5px;
color: rgb(66, 68, 79);
}
}
}
}
.pageLayout {
display: flex;
flex-direction: row;
}
......
extends layouts/main
block content
i.fas.fa-location-arrow
h3 Join Us!
h3 Click Below to Join Us!
a(href="/auth/github")
.login-github
i.fab.fa-github
span Join with GitHub
\ No newline at end of file
......
extends layouts/main
block content
i.fas.fa-location-arrow
h3 Login with GitHub!
h3 Click Below to Login with GitHub!
a(href="/auth/github")
.login-github
i.fab.fa-github
......
......@@ -6,48 +6,63 @@ block content
h3=author
hr
.pageLayout
.user-profile
.user-profile__column
img(src=`/${user.avatarUrl}`)
.user-profile__link
a(href=user.githubUrl target="_blank") Github
a(href=user.githubUrl target="_blank") GitHub
i.fab.fa-github
a(href=`//${user.blogUrl}` target="_blank") Blog
i.fas.fa-link
.user-profile__column
.user-profile__info
.user-profile__name
h3 NAME:
h3 NAME
h4=user.name
.user-profile__github
h3 GITHUB NICKNAME:
h3       GITHUB
br
|NICKNAME
h4=user.githubName
.user-profile__email
h3 EMAIL:
h3 EMAIL
h4=user.email
.user-profile__school
h3 SCHOOL:
h3 SCHOOL
h4=user.school
.user-profile__tech
h3 TECH:
h3 TECH
ul
each tech in user.tech
li=tech
.user-profile__career
h3 CAREER:
h3 CAREER
ul
each career in user.career
li=career
li.career_list=career
.user-profile__introduction
h3 SELF-INTRODUCTION:
h3                     SELF
br
|INTRODUCTION
h4=user.introduction
hr
.user-git
.user-status
.user-status__contributions
span#jsTotalContributions=totalContributions
h3 YOU'VE MADE
span #{totalContributions}
h3 CONTRIBUTIONS!
img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
.user-status__character
h3 Your step
img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;")
h3 YOUR STATUS:
.user-repositories
h3 Your recent updated repositories
.user-repo
a(href=firstRepoUrl)
h3 REPO 1
......@@ -56,5 +71,34 @@ block content
a(href=secondRepoUrl)
h3 REPO 2
p=secondRepoName
//- .user-status
//- .user-status__contributions
//- h3 YOU'VE MADE
//- span #{totalContributions}
//- h3 CONTRIBUTIONS!
//- img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
//- .user-status__character
//- h3 YOUR STATUS:
//- .user-repositories
//- h3 Your recent updated repositories
//- .user-repo
//- a(href=firstRepoUrl)
//- h3 REPO 1
//- p=fitstRepoName
//- br
//- a(href=secondRepoUrl)
//- h3 REPO 2
//- p=secondRepoName
block scripts
script(src="/static/js/githubInfo.js")
......
scss -> screens/assets둘다
사진 크기 설정하기
youtube와 구글에 scss나 sass 검색마니하기
pug 파일 안에 이미 있는 css 다 지워버리기
css하다보면 pug파일 많이 수정해야할거임
아직 세진님께 불러와지네요..? 최근 repos
\ No newline at end of file