hxcde/yannmoelle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

„css/line.css“ hinzufügen

Browse Source
This commit is contained in:
Yann Mölle 2023-05-29 15:48:23 +02:00
parent 101500d33e
commit b666d74ca0
1 changed files with 209 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
css/line.css Normal file
View File

@ -0,0 +1,209 @@
@import url('https://fonts.googleapis.com/css?family=Niramit:300,300i,700');
// reset some browser default styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// colors
$primary: #1d8cf8;
$secondary: #4f537b;
$info: #11cdef;
$success: #00bf9a;
$warning: #ff8d72;
$danger: #fd5d93;
// timeline variables
$body-bg: #1e1e2f;
$timeline-before-bg : #222a42;
$timeline-body-bg: #27293d;
$timeline-body-round: 3px;
$timeline-body-shadow: 1px 3px 9px rgba(0,0,0, .1);
body {
font-family: 'K2D', sans-serif;
background: $body-bg;
letter-spacing: 1px;
}
// page container
.container {
max-width: 650px;
margin: 50px auto;
}
// typography
p {
font-weight: 300;
line-height: 1.5;
font-size: 14px;
opacity: .8;
}
// timeline style
.timeline {
position: relative;
padding-left: 4rem;
margin: 0 0 0 30px;
color: white;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: $timeline-body-bg;
}
.timeline-container {
position: relative;
margin-bottom: 2.5rem;;
.timeline-icon {
position: absolute;
left: -88px;
top: 4px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
font-size: 2rem;
background: $secondary;
i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.timeline-body {
background: $timeline-body-bg;
border-radius: $timeline-body-round;
padding: 20px 20px 15px;
box-shadow: $timeline-body-shadow;
&:before {
content: '';
background: inherit;
width: 20px;
height: 20px;
display: block;
position: absolute;
left: -10px;
transform: rotate(45deg);
border-radius: 0 0 0 2px;
}
.timeline-title {
margin-bottom: 1.4rem;
.badge {
background: $secondary;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
}
}
.timeline-subtitle {
font-weight: 300;
font-style: italic;
opacity: .4;
margin-top: 16px;
font-size: 11px;
}
}
// Primary Timeline
&.primary {
.badge,
.timeline-icon {
background: $primary !important;
}
}
// Info Timeline
&.info {
.badge,
.timeline-icon {
background: $info !important;
}
}
// Success Timeline
&.success {
.badge,
.timeline-icon {
background: $success !important;
}
}
// Warning Timeline
&.warning {
.badge,
.timeline-icon {
background: $warning !important;
}
}
// Dnager Timeline
&.danger {
.badge,
.timeline-icon {
background: $danger !important;
}
}
}
}
.author{
font-family: inherit;
padding: 3em;
text-align: center;
width: 100%;
color: white;
a:link,
a:visited{
color: white;
&:hover{
text-decoration: none;
}
}
.btn:link,
.btn:visited{
margin-top: 1em;
text-decoration: none;
display: inline-block;
font-family: inherit;
font-weight: 100;
color: white;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: black;
padding: 1.5em 2rem;
border-radius: 1em;
transition: .5s all;
&:hover,
&:focus,
&:active{
background-color: lighten(black, 10%);
}
}
}