tcharles/cv-online
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style fixes & cleaning

Browse source
This commit is contained in:
Crom (Thibaut CHARLES) 2018-05-17 12:38:41 +02:00
parent 5e426340c2
commit 2d5cf0ff0a
Signed by: tcharles
GPG key ID: 45A3D5F880B9E6D0
2 changed files with 84 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
css/main.css
View file

@ -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;

74
scss/section.scss
View file

@ -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;
}