phundrak/phundrak-com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated style

Browse Source
This commit is contained in:
Phuntsok Drak-pa 2019-07-10 21:58:29 +02:00
parent 03a33a7a3a
commit 2f44f13e62
1 changed files with 111 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
style/main.css
View File

@ -1,21 +1,15 @@
/*****************************************************************************/ @import 'https://fonts.googleapis.com/css?family=Fira+Sans&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese';
/* Inspired by the design of the Rust-lang website */ @import 'https://fonts.googleapis.com/css?family=Alfa+Slab+One&subset=latin-ext,vietnamese';
/*****************************************************************************/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&subset=latin-ext,vietnamese');
body { body {
display: grid; display: grid;
grid-template-areas: grid-template-areas: 'ribbon ribbon''sidebar content';
'ribbon ribbon'
'sidebar content';
grid-template-columns: 300px auto; grid-template-columns: 300px auto;
background-color: #3498db; background-color: #34495e;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Fira Sans', serif; font-family: fira sans, serif;
color: #ecf0f1; color: #ecf0f1
} }
a { a {
@ -24,46 +18,42 @@ a {
text-decoration: none; text-decoration: none;
font-style: italic; font-style: italic;
box-shadow: inset 0 -3px 0 #9b59b6; box-shadow: inset 0 -3px 0 #9b59b6;
transition: all .3s ease-in-out; transition: all .3s ease-in-out
} }
a:hover { a:hover {
box-shadow: inset 0 -21px 0 #9b59b6; box-shadow: inset 0 -21px 0 #9b59b6;
transition: all .3s ease-in-out; transition: all .3s ease-in-out
} }
h1, h1,
h2 { h2 {
margin: 0; margin: 0;
padding: 0 20px; padding: 0 20px
} }
.sidebar, .sidebar,
.content { .content {
padding: 10px; padding: 10px;
background-color: #bdc3c7; background-color: #2c3e50
} }
.center { .center {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto
} }
/* ribbon ********************************************************************/
.ribbon { .ribbon {
grid-area: ribbon; grid-area: ribbon;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #2c3e50; background-color: #2c3e50
} }
.ribbon, .ribbon,
.ribbon a { .ribbon a {
color: #ecf0f1; color: #ecf0f1
} }
.ribbon-links { .ribbon-links {
@ -74,7 +64,7 @@ h2 {
background-color: #7f8c8d; background-color: #7f8c8d;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
line-height: 2.5em; line-height: 2.5em
} }
.ribbon-links li { .ribbon-links li {
@ -82,195 +72,197 @@ h2 {
float: left; float: left;
padding: 5px 20px; padding: 5px 20px;
background-color: #7f8c8d; background-color: #7f8c8d;
transition: background-color 0.2s; transition: background-color .2s;
position: relative; position: relative;
z-position: 20; z-position: 20
} }
.ribbon li:hover { .ribbon li:hover {
background-color: #34495e; background-color: #34495e;
transition: background-color 0.3s; transition: background-color .3s
} }
/* sidebar *******************************************************************/
.sidebar { .sidebar {
display: grid; display: grid;
grid-template-areas: grid-template-areas: 'side-picture''side-contact''side-situation''side-bio''side-links';
'side-picture'
'side-contact'
'side-situation'
'side-bio'
'side-links';
grid-area: sidebar; grid-area: sidebar;
margin: 10px 5px 10px 10px; margin: 10px 5px 10px 10px;
grid-auto-rows: min-content; grid-auto-rows: min-content
} }
.side-picture { .side-picture {
grid-area: side-picture; grid-area: side-picture;
margin: 10px; max-width: 100%;
margin: 10px 10px
} }
.side-picture > .picture { .picture {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: auto;
} }
.side-contact { .side-contact {
grid-area: side-contact; grid-area: side-contact
} }
.side-situation { .side-situation {
grid-area: side-situation; grid-area: side-situation
} }
.side-bio { .side-bio {
grid-area: side-bio; grid-area: side-bio
} }
.side-liens { .side-liens {
grid-area: side-links; grid-area: side-links
} }
.side-card { .side-card {
margin: 10px; margin: 10px;
background-color: #2c3e50; background-color: #34495e
} }
.side-card h4, .side-card h4,
.side-content { .side-content {
padding: 10px 1em; padding: 10px 1em;
margin: 0; margin: 0
} }
p.side-content { p.side-content {
padding: 0.5em 1em; padding: .5em 1em
} }
.side-links { .side-links {
line-height: 1.75em; line-height: 1.75em
} }
/* content *******************************************************************/
.content { .content {
grid-area: content; grid-area: content;
margin: 10px 10px 10px 5px; margin: 10px 10px 10px 5px
} }
.card { .card {
background-color: #34495e; background-color: #34495e;
padding: 10px; padding: 10px;
margin: 40px 10px; margin: 40px 10px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); box-shadow: 3px 3px 6px rgba(0, 0, 0, .7);
transition: box-shadow 0.2s; transition: box-shadow .2s
} }
.card:hover { .card:hover {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.7); box-shadow: 8px 8px 15px rgba(0, 0, 0, .7);
transition: box-shadow 0.3s; transition: box-shadow .3s
} }
.card-lvl2 { .card-lvl2 {
margin: 10px 20px 20px 20px; margin: 10px 20px 20px;
padding-left: 0; padding-left: 0;
background-color: #2c3e50; background-color: #2c3e50;
color: #ecf0f1; color: #ecf0f1
} }
.list-lvl1, .list-lvl1,
.list-lvl1 a { .list-lvl1 a {
background-color: #2c3e50; background-color: #2c3e50;
list-style: none; list-style: none
} }
.list-lvl1 { .list-lvl1 {
padding: 10px 10px 25px 10px; padding: 10px
} }
.list-lvl1 h4 { .list-lvl1 h4 {
margin-block-start: 0.5em; margin-block-start: .5em;
margin-block-end: 1em; margin-block-end: 1em
}
.two-col-ul .elem-lang {
display: inline-block;
} }
.two-col-ul { .two-col-ul {
columns: 2; collumns: 2;
-webkit-columns: 2; -webkit-columns: 2;
-moz-columns: 2; -moz-columns: 2
}
.content > .card > ul {
padding: 0;
} }
.list-no-style > li { .list-no-style > li {
margin-bottom: 30px; padding-bottom: 20px
} }
/* highlights ****************************************************************/ .list-lvl1 > p {
h1,h2,h3,h4,h5 { margin: 20px;
font-family: 'Alfa Slab One', serif;
font-weight: 300;
margin: 0;
z-index: 20;
position: relative;
} }
h1 { .list-no-style > .elem-lang {
font-size: 4em;
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.4em;
}
.header-container {
display: inline-block; display: inline-block;
} }
.highlight-h1, .highlight-h2, .highlight-h3, .highlight-h4, .highlight-h5 { .content>.card>ul {
padding: 0
}
h1,
h2,
h3,
h4,
h5 {
font-family: alfa slab one, serif;
font-weight: 300;
margin: 0;
z-index: 20;
position: relative
}
h1 {
font-size: 4em
}
h2 {
font-size: 3em
}
h3 {
font-size: 2em
}
h4 {
font-size: 1.4em
}
h5 {
font-size: 1.4em
}
.header-container {
display: inline-block
}
.highlight-h1,
.highlight-h2,
.highlight-h3,
.highlight-h4,
.highlight-h5 {
position: relative; position: relative;
left: -10px; left: -10px;
width: 120%; width: 120%;
max-width: 90vw; max-width: 90vw;
z-index: 10; z-index: 10;
width: auto !important; width: auto !important
} }
.highlight-h1 { .highlight-h1 {
background-color: #1abc9c !important; background-color: #1abc9c !important;
height: 48px; height: 48px;
top: -48px; top: -48px
} }
.highlight-h2 { .highlight-h2 {
background-color: #f1c40f !important; background-color: #f1c40f !important;
height: 34px; height: 34px;
top: -34px; top: -34px
} }
.highlight-h3 { .highlight-h3 {
background-color: #27ae60 !important; background-color: #27ae60 !important;
height: 24px; height: 24px;
top: -24px; top: -24px
} }
.highlight-h4 { .highlight-h4 {
@ -278,7 +270,7 @@ h5 {
height: 24px; height: 24px;
top: -28px; top: -28px;
left: 0; left: 0;
width: 110%; width: 110%
} }
.list-lvl1 .highlight-h4 { .list-lvl1 .highlight-h4 {
@ -287,58 +279,46 @@ h5 {
top: -42px; top: -42px;
left: 0; left: 0;
left: -10px; left: -10px;
width: 120%; width: 120%
} }
.highlight-h5 { .highlight-h5 {
background-color: #9b59b6 !important; background-color: #9b59b6 !important;
height: 18px; height: 18px;
top: -20px; top: -20px
} }
.list-no-style { .list-no-style {
list-style: none; list-style: none
} }
/* smaller displays **********************************************************/ @media only screen and (max-width:1200px) {
@media only screen and (max-width: 1200px) {
.two-col-ul { .two-col-ul {
collumns: 1; collumns: 1;
-webkit-columns: 1; -webkit-columns: 1;
-moz-columns: 1; -moz-columns: 1
} }
} }
@media only screen and (max-width: 1050px) { @media only screen and (max-width:1050px) {
body { body {
grid-template-areas: grid-template-areas: 'ribbon''sidebar''content';
'ribbon'
'sidebar'
'content';
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto
} }
.sidebar { .sidebar {
grid-template-areas: grid-template-areas: 'side-picture side-links''side-contact side-situation''side-bio side-bio';
'side-picture side-links' margin: 10px
'side-contact side-situation'
'side-bio side-bio';
margin: 10px;
} }
.content { .content {
margin: 10px; margin: 10px
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width:600px) {
.sidebar { .sidebar {
grid-template-areas: grid-template-areas: 'side-picture''side-contact''side-situation''side-bio''side-links'
'side-picture'
'side-contact'
'side-situation'
'side-bio'
'side-links';
} }
} }