比較文本

尋找兩個文字檔案之間的差異

Real-time diff
Unified diff
Collapse lines
Highlight change
Syntax highlighting
工具
Diffchecker Desktop icon
Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Untitled Diff

Created Diff never expires
16 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
128 lines
14 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
124 lines
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Merriweather");
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Merriweather");
body {
body {
font-family: "Inconsolata", monospace;
font-family: "Inconsolata", monospace;
margin: 0;
margin: 0;
}
}


button {
button {
cursor: pointer;
cursor: pointer;
}
}


#portfolio {
#portfolio {
width: 100%;
width: 100%;
min-height: 100vh;
min-height: 100vh;
background: #ffffff;
background: #ffffff;
position: relative;
position: relative;
display: grid;
display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 2px;
grid-gap: 2px;
}
}


.project {
.project {
position: relative;
position: relative;
background: #f2dad7;
background: #f2dad7;
overflow: hidden;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
}
.project img {
.project img {
position: absolute;
position: absolute;
opacity: 1;
width:300%;
object-fit: contain;
background-size: cover;
height: 50vh;
}
}
.project p {
.project p {
position: absolute;
position: absolute;
text-align: center;
text-align: center;
width: 100%;
width: 100%;
padding: 1em 0;
padding: 1em 0;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 2px;
z-index: 3;
/* just to make text more readable */
background-color:#ffffff80;
font-size:20px;
}
}


.project:hover .grid__overlay {
.project:hover .grid__overlay {
transform: translateY(0%);
transform: translateY(0%);
}
}


.grid__overlay {
.grid__overlay {
background: rgba(48, 40, 39, 0.9);
background: rgba(48, 40, 39, 0.9);
height: 100%;
height: 100%;
grid-column: 1/-1;
grid-column: 1/-1;
grid-row: 1/-1;
grid-row: 1/-1;
position: relative;
position: relative;
display: grid;
display: grid;
justify-items: center;
justify-items: center;
align-items: center;
align-items: center;
transform: translateY(101%);
transform: translateY(101%);
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 100%;
}
}
.grid__overlay button {
.grid__overlay button {
background: none;
background: none;
outline: none;
outline: none;
font-weight: 100;
font-weight: 100;
letter-spacing: 2px;
letter-spacing: 2px;
border: 1px solid #ffffff;
border: 1px solid #ffffff;
color: #ffffff;
color: #ffffff;
text-transform: uppercase;
text-transform: uppercase;
padding: 10px;
padding: 10px;
}
}
.grid__overlay button:hover {
.grid__overlay button:hover {
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: #ffffff;
background: #ffffff;
color: #d1a39e;
color: #d1a39e;
transform: scale(1.05);
transform: scale(1.05);
}
}


.overlay {
.overlay {
position: fixed;
position: fixed;
background: rgba(71, 69, 69, 0.7);
background: rgba(71, 69, 69, 0.7);
top: 0;
top: 0;
right: 0;
right: 0;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
display: none;
display: none;
z-index: 3;
z-index: 3;
}
}


.overlay.open {
.overlay.open {
display: block;
display: block;
align-items: center;

object-fit: none;
width: 100%;

padding-right: 500px;
}
}
.overlay.open img {
.overlay.open img {
display: block;
display: block;

margin:auto; /*align center*/
width: 100%;
max-width: 100%;
max-height: 100%;
max-height: 100%;
}
}


.overlay__inner {
.overlay__inner {
background: #ffffff;
background: #ffffff;
position: relative;
height: 100%;
opacity: 1;
display:flex; /*align vertical center*/
object-fit: cover;
}
}


.close {
.close {
position: absolute;
position: absolute;
top: 3px;
top: 3px;
right: 10px;
right: 10px;
background: none;
background: none;
outline: 0;
outline: 0;
color: #f7f1f1;
color: #f7f1f1;
border: 0;
border: 0;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 2px;
}
}
.close:hover {
.close:hover {
color: #d1a39e;
color: #d1a39e;
}
}


.project__image {
.project__image {
margin-left: -25%;
}
}
已保存差異