mirror of
https://github.com/safing/web
synced 2025-04-18 09:59:08 +00:00
update styling
This commit is contained in:
Luke
parent
21e09f6e0b
commit
f7273008ee
1 changed files with 185 additions and 73 deletions
|
|
@ -12,114 +12,183 @@
|
|||
|
||||
#page-container content {
|
||||
p {
|
||||
padding-top: 1.8rem;
|
||||
color: #898989;
|
||||
margin-top: 1rem;
|
||||
color : #545454;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: .5;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
color: #353535;
|
||||
}
|
||||
|
||||
a {
|
||||
--text-opacity: 1;
|
||||
color: #667eea;
|
||||
color: rgba(102, 126, 234, var(--text-opacity));
|
||||
text-decoration: inherit;
|
||||
background-color: transparent;
|
||||
--text-opacity : 1;
|
||||
color : #667eea;
|
||||
color : rgba(102, 126, 234, var(--text-opacity));
|
||||
text-decoration : inherit;
|
||||
background-color : transparent;
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
|
||||
|
||||
strong {
|
||||
--text-opacity: 1;
|
||||
color : #667eea;
|
||||
color : rgba(102, 126, 234, var(--text-opacity))
|
||||
}
|
||||
}
|
||||
|
||||
a strong {
|
||||
--text-opacity: 1;
|
||||
color: #667eea;
|
||||
color: rgba(102, 126, 234, var(--text-opacity));
|
||||
a:hover {
|
||||
opacity : .5;
|
||||
transition-duration : 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size : 2rem;
|
||||
font-weight: 500;
|
||||
color : #000;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.875rem;
|
||||
padding-top: 4rem;
|
||||
font-weight: 800;
|
||||
font-size : 1.8rem;
|
||||
margin-top : 2rem;
|
||||
font-weight : 500;
|
||||
color : #000;
|
||||
border-bottom : 1px solid #d7d7d7;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
padding-top: 1rem;
|
||||
font-weight: 800;
|
||||
font-size : 1.4rem;
|
||||
margin-top : 2.5rem;
|
||||
font-weight: 500;
|
||||
color : #000;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem 0;
|
||||
font-size : 1.2rem;
|
||||
margin-top : 1.5rem;
|
||||
font-weight: 500;
|
||||
color : #000;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size : 1.1rem;
|
||||
margin-top : 1.5rem;
|
||||
font-weight: 500;
|
||||
color : #000;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size : 1rem;
|
||||
margin-top : 1.5rem;
|
||||
font-weight: 500;
|
||||
color : #000;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-top: 2rem;
|
||||
padding-top : 1.25rem;
|
||||
padding-left : 1.85rem;
|
||||
list-style-type: disc;
|
||||
color : #545454;
|
||||
|
||||
li {
|
||||
padding-left: .25rem;
|
||||
|
||||
li ul {
|
||||
padding-top : 0.05rem;
|
||||
padding-left : 1.25rem;
|
||||
list-style-type: disc;
|
||||
color : #545454;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding-top: 0.4rem;
|
||||
pre {
|
||||
padding : 16px;
|
||||
overflow : auto;
|
||||
font-size : 10%;
|
||||
line-height : 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius : 3px;
|
||||
padding-top : 1rem;
|
||||
display : flex;
|
||||
margin-top : 1rem;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
padding-left : 0;
|
||||
padding-right : 0;
|
||||
color : black;
|
||||
font-size : 0.8rem;
|
||||
font-weight : 500;
|
||||
max-width : 5rem;
|
||||
display : inline;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top : 3rem;
|
||||
margin-bottom : 3rem;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
code {
|
||||
color : #ba00bf;
|
||||
font-weight: 500;
|
||||
font-size : .875rem;
|
||||
word-break : break-word;
|
||||
|
||||
&::after {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "`";
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-top : 0.1rem;
|
||||
list-style-type: decimal;
|
||||
padding-left : 1rem;
|
||||
color : #545454;
|
||||
|
||||
li {
|
||||
padding-top: 0.4rem
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 750px;
|
||||
margin: auto;
|
||||
max-width : 750px;
|
||||
margin : auto;
|
||||
margin-top: 3rem;
|
||||
|
||||
ul {
|
||||
padding-top: 0.1rem;
|
||||
list-style-type: initial;
|
||||
padding-left: 1rem;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-top: 0.1rem;
|
||||
list-style-type: decimal;
|
||||
padding-left: 1rem;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
font-weight: bold;
|
||||
padding-left: 2rem;
|
||||
color: black;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
p img {
|
||||
--transform-translate-x: 0;
|
||||
--transform-translate-y: 0;
|
||||
--transform-rotate: 0;
|
||||
--transform-skew-x: 0;
|
||||
--transform-skew-y: 0;
|
||||
--transform-scale-x: 1.1;
|
||||
--transform-scale-y: 1.1;
|
||||
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
|
||||
box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
|
||||
margin-top: 5rem;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: .375rem;
|
||||
display: block;
|
||||
margin-bottom: 4rem;
|
||||
margin-top: 5rem;
|
||||
--transform-rotate : 0;
|
||||
--transform-skew-x : 0;
|
||||
--transform-skew-y : 0;
|
||||
--transform-scale-x : 1.1;
|
||||
--transform-scale-y : 1.1;
|
||||
transform : translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
|
||||
box-shadow : 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
|
||||
margin-top : 5rem;
|
||||
max-width : 100%;
|
||||
height : auto;
|
||||
border-radius : .375rem;
|
||||
display : block;
|
||||
margin-bottom : 4rem;
|
||||
margin-top : 5rem;
|
||||
}
|
||||
|
||||
.podcast h2 {
|
||||
padding-top: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
padding-top : 1rem;
|
||||
font-weight : 500;
|
||||
font-size : 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -128,3 +197,46 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-podcast {
|
||||
font-size : .85rem;
|
||||
background-color: #6e6e6e;
|
||||
width : fit-content;
|
||||
width : -moz-fit-content;
|
||||
overflow-wrap : break-word;
|
||||
padding-left : 1.25rem;
|
||||
padding : 1.25rem;
|
||||
margin-bottom : 1.25rem;
|
||||
margin-top : 1.25rem;
|
||||
display : flex;
|
||||
border-radius : .375rem;
|
||||
width : 100%;
|
||||
|
||||
p {
|
||||
color : #fff !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width : 1.5rem;
|
||||
margin-right: 1.25rem;
|
||||
height : 1.5rem;
|
||||
align-self : center;
|
||||
max-width : 100%;
|
||||
display : block;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
a {
|
||||
color : white !important;
|
||||
padding-left : .25rem;
|
||||
padding-right : .25rem;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity : .5;
|
||||
transition-duration : 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue