Style fixes & cleaning
This commit is contained in:
parent
5e426340c2
commit
2d5cf0ff0a
GPG key ID:
45A3D5F880B9E6D0
2 changed files with 84 additions and 47 deletions
57
css/main.css
57
css/main.css
|
|
@ -229,7 +229,7 @@ nav#top:hover, nav#top:active {
|
|||
border-color: #FAFAFA;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
animation: UnwrapHeader 1s;
|
||||
animation: UnwrapHeader 1.5s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#section-main article {
|
||||
|
|
@ -241,7 +241,7 @@ nav#top:hover, nav#top:active {
|
|||
color: #202020;
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-width: 4px;
|
||||
border-color: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
background-color: #FAFAFA;
|
||||
|
|
@ -253,17 +253,16 @@ nav#top:hover, nav#top:active {
|
|||
}
|
||||
#section-main article h1:first-child {
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
margin-top: -24px;
|
||||
margin-left: -24px;
|
||||
width: 100%;
|
||||
padding: 20px 23px;
|
||||
margin-top: -23px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
padding: 0.6em 24px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background-color: #215D9C;
|
||||
background-image: url("/img/ui/stripes.png");
|
||||
color: #FAFAFA;
|
||||
font-family: "Croissant One", cursive;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-size: 1.7em;
|
||||
text-align: left;
|
||||
letter-spacing: -0.03em;
|
||||
|
|
@ -278,8 +277,8 @@ nav#top:hover, nav#top:active {
|
|||
height: 1em;
|
||||
}
|
||||
#section-main article h2 {
|
||||
margin: 0 -23px;
|
||||
padding: 10px 23px;
|
||||
margin: 0-24px;
|
||||
padding: 0.4em 24px;
|
||||
border-top: 1px solid #d5d5d5;
|
||||
border-bottom: 1px solid #d5d5d5;
|
||||
background-image: url("/img/ui/stripes.png");
|
||||
|
|
@ -293,12 +292,17 @@ nav#top:hover, nav#top:active {
|
|||
#section-main article h3 {
|
||||
color: #3A4145;
|
||||
font-family: "Croissant One", cursive;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: large;
|
||||
}
|
||||
#section-main article h4 {
|
||||
color: #3A4145;
|
||||
font-family: "Croissant One", cursive;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#section-main article hr {
|
||||
margin-left: -23px;
|
||||
width: calc(100% + 40px + 6px);
|
||||
margin-left: -24px;
|
||||
width: calc(100% + 24px24px);
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -360,9 +364,9 @@ nav#top:hover, nav#top:active {
|
|||
}
|
||||
#section-main article .cinema {
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
margin-left: -24px;
|
||||
width: 100%;
|
||||
padding: 10px 23px;
|
||||
padding: 10px 24px;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
color: #FAFAFA;
|
||||
|
|
@ -380,35 +384,46 @@ nav#top:hover, nav#top:active {
|
|||
border-color: #333;
|
||||
}
|
||||
#section-main article .cinema:first-child {
|
||||
margin-top: -23px;
|
||||
margin-top: -24px;
|
||||
padding-top: 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
#section-main article .cinema:last-child {
|
||||
margin-bottom: -23px;
|
||||
margin-bottom: -24px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
#section-main article code {
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.45em;
|
||||
padding: 0 0.3em;
|
||||
border-radius: 5px;
|
||||
background-color: #ccc;
|
||||
border: 1px solid #888;
|
||||
}
|
||||
#section-main article pre {
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
width: 100%;
|
||||
padding: 10px 23px;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 0.5em;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
color: #FAFAFA;
|
||||
background-image: url("/img/ui/bggray.png");
|
||||
box-shadow: 0px 0px 10px #000 inset;
|
||||
}
|
||||
#section-main article pre code, #section-main article pre pre {
|
||||
margin-bottom: 0px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
#section-main article > pre {
|
||||
display: block;
|
||||
margin-left: -24px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
}
|
||||
#section-main article figure {
|
||||
margin-bottom: 15px;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@ $ArticleMaxWidth: 800px;
|
|||
}
|
||||
|
||||
|
||||
$ArticleBorderWidth: 4px;
|
||||
$ArticlePadding: 20px;
|
||||
$ArticleBorderRadius: 20px;
|
||||
$ArticleFinalMargins: #{$ArticleBorderWidth + $ArticleBorderRadius};
|
||||
|
||||
|
||||
#section-main{
|
||||
position: absolute;
|
||||
|
|
@ -40,14 +45,14 @@ $ArticleMaxWidth: 800px;
|
|||
border-radius: 20px;
|
||||
|
||||
overflow: hidden;
|
||||
animation: UnwrapHeader 1s;
|
||||
animation: UnwrapHeader 1.5s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
article{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
padding: $ArticlePadding;
|
||||
padding-top: 0;
|
||||
margin-bottom: 10vh;
|
||||
|
||||
|
|
@ -55,9 +60,9 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-width: $ArticleBorderWidth;
|
||||
border-color: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
border-radius: $ArticleBorderRadius;
|
||||
background-color: $ClrWhite;
|
||||
|
||||
max-width: $ArticleMaxWidth;
|
||||
|
|
@ -72,12 +77,12 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
h1:first-child{
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
margin-top: -$ArticleFinalMargins;
|
||||
margin-left: -$ArticleFinalMargins;
|
||||
width: 100%;
|
||||
padding: 20px 23px;
|
||||
padding: 0.6em $ArticleFinalMargins;
|
||||
|
||||
margin-top: -23px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
border-radius: $ArticleBorderRadius $ArticleBorderRadius 0 0;
|
||||
|
||||
|
||||
background-color: #215D9C;
|
||||
|
|
@ -87,10 +92,8 @@ $ArticleMaxWidth: 800px;
|
|||
color: $ClrWhite;
|
||||
font-family: $FontTitle;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-size: 1.7em;
|
||||
text-align: left;
|
||||
// text-shadow: 0 0 5px $ClrBlack;
|
||||
|
||||
letter-spacing: -0.03em;
|
||||
|
||||
|
|
@ -109,8 +112,8 @@ $ArticleMaxWidth: 800px;
|
|||
}
|
||||
|
||||
h2{
|
||||
margin: 0 -23px;
|
||||
padding: 10px 23px;
|
||||
margin: 0 -$ArticleFinalMargins;
|
||||
padding: 0.4em $ArticleFinalMargins;
|
||||
border-top: 1px solid #d5d5d5;
|
||||
border-bottom: 1px solid #d5d5d5;
|
||||
|
||||
|
|
@ -131,14 +134,21 @@ $ArticleMaxWidth: 800px;
|
|||
{
|
||||
color: $ClrText;
|
||||
font-family: $FontTitle;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
color: $ClrText;
|
||||
font-family: $FontTitle;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
margin-left: -23px;
|
||||
width: calc(100% + 40px + 6px);
|
||||
margin-left: -$ArticleFinalMargins;
|
||||
width: calc(100% + #{$ArticleFinalMargins + $ArticleFinalMargins});
|
||||
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
|
|
@ -217,9 +227,9 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
.cinema{
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
margin-left: -$ArticleFinalMargins;
|
||||
width: 100%;
|
||||
padding: 10px 23px;
|
||||
padding: 10px $ArticleFinalMargins;
|
||||
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
|
|
@ -245,12 +255,12 @@ $ArticleMaxWidth: 800px;
|
|||
}
|
||||
|
||||
&:first-child{
|
||||
margin-top: -23px;
|
||||
margin-top: -$ArticleFinalMargins;
|
||||
padding-top: 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: -23px;
|
||||
margin-bottom: -$ArticleFinalMargins;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
|
@ -259,7 +269,7 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
code {
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.45em;
|
||||
padding: 0 0.3em;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: #ccc;
|
||||
|
|
@ -268,13 +278,14 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
// Code blocks
|
||||
pre {
|
||||
margin: 0;
|
||||
margin-left: -23px;
|
||||
width: 100%;
|
||||
padding: 10px 23px;
|
||||
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 0.5em;
|
||||
border-radius: 10px;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
|
||||
color: $ClrWhite;
|
||||
|
||||
|
|
@ -283,8 +294,19 @@ $ArticleMaxWidth: 800px;
|
|||
|
||||
code, pre{
|
||||
margin-bottom: 0px;
|
||||
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
> pre{
|
||||
display: block;
|
||||
margin-left: -$ArticleFinalMargins;
|
||||
width: 100%;
|
||||
padding: 10px $ArticleFinalMargins;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue