c3d2/c3d2-web
c3d2/c3d2-web
38
3
Fork 1
Code Issues 1 Pull Requests 1 Releases Wiki Activity

now for variable screen widths

Browse Source
This commit is contained in:
nek0 2016-04-15 04:01:52 +02:00
parent 0959f8e1a5
commit f711958c61
1 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
content/static/datenspuren/2016/style/style.css
View File

@ -15,17 +15,14 @@ body {
} }
nav { nav {
position: fixed; position: relative;
top: 0;
/*left: 1100px;*/
right: 0;
text-align: center; text-align: center;
z-index: 5; /* on top of <article> */ z-index: 5; /* on top of <article> */
padding-top: 10ex; padding-top: 4ex;
} }
nav ul { nav ul {
width: 60ex; /*width: auto;
height: 35ex; height: auto;*/
list-style-type: none; list-style-type: none;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
@ -33,34 +30,16 @@ nav ul {
/*font-size: 80%;*/ /*font-size: 80%;*/
} }
/** Circular menu **/
nav ul > *:nth-of-type(1) {
transform: rotate(-0deg) translate(-30ex) rotate(0deg);
}
nav ul > *:nth-of-type(2) {
transform: rotate(-20deg) translate(-30ex) rotate(20deg);
}
nav ul > *:nth-of-type(3) {
transform: rotate(-40deg) translate(-30ex) rotate(40deg);
}
nav ul > *:nth-of-type(4) {
transform: rotate(-60deg) translate(-30ex) rotate(60deg);
}
nav li { nav li {
width: 7.5ex;
height: 7.5ex;
display: inline-block; display: inline-block;
border: 0.5px solid #ffffff;
border-radius: 50%;
/*background-color: #ffffff;*/ /*background-color: #ffffff;*/
position: absolute; position: relative;
} }
nav li a { nav li a {
width: 7.5ex;
height: 7.5ex;
border: 0.5px solid #ffffff;
border-radius: 50%;
display: inline-block; display: inline-block;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
@ -137,8 +116,9 @@ article {
margin-bottom: 0; margin-bottom: 0;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
padding-left: 90px; padding-left: 5%;
max-width: 960px; /*max-width: 960px;*/
max-width: 90%;
/*background: url('../images/style/tsd4.png') center top no-repeat;*/ /*background: url('../images/style/tsd4.png') center top no-repeat;*/
} }
article > * { article > * {
@ -321,3 +301,46 @@ article .center a img {
article dl dd a { article dl dd a {
word-wrap: break-word; word-wrap: break-word;
} }
/** Circular menu **/
@media (min-width: 1000px) {
nav {
position: fixed;
top: 0;
right: 0;
padding-top: 10ex;
}
nav ul {
width: 40ex;
height: 35ex;
}
nav li {
position: absolute;
right: 0;
}
nav ul > *:nth-of-type(1) {
transform: rotate(-0deg) translate(-30ex) rotate(0deg);
}
nav ul > *:nth-of-type(2) {
transform: rotate(-20deg) translate(-30ex) rotate(20deg);
}
nav ul > *:nth-of-type(3) {
transform: rotate(-40deg) translate(-30ex) rotate(40deg);
}
nav ul > *:nth-of-type(4) {
transform: rotate(-60deg) translate(-30ex) rotate(60deg);
}
article {
padding-left: 90px;
/*max-width: 960px;*/
max-width: 66%;
}
}