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