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

74
scss/section.scss
View File

@ -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;
@ -267,14 +277,15 @@ $ArticleMaxWidth: 800px;
}
// Code blocks
pre{
margin: 0;
margin-left: -23px;
width: 100%;
padding: 10px 23px;
pre {
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;
}