First front-end prototype

2021-01-09 01:11:40 +01:00
parent c748f35786
commit 6b3f0df78a
24 changed files with 899 additions and 0 deletions
--- a/styles/main.css
+++ b/styles/main.css
@ -0,0 +1,213 @@
+@font-face {
+    font-family:Rubik;
+    src:url('fonts/Rubik-VariableFont_wght.ttf');
+}
+
+@font-face {
+    font-family:HotAugust;
+    src:url('fonts/hot-august-night.medium.ttf');
+}
+
+@font-face {
+    font-family:Commissioner;
+    src:url('fonts/Commissioner-VariableFont_wght.ttf');
+}
+
+body {
+    text-align:center;
+    margin:auto;
+    display:block;
+    font-family:'Rubik', Helvetica;
+}
+
+a {
+    color:#38686A;
+    text-decoration:none;
+}
+
+header nav {
+    border-top:.2rem solid #187795;
+    box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
+    border-bottom:.1rem solid #eff0f3;
+    margin-bottom:1.5rem;
+}
+
+header nav ul {
+    padding:0;
+    margin:0.6rem;
+}
+
+header nav ul li {
+    display:inline;
+    list-style-type:none;
+    margin:0 2.8rem;
+    padding:0;
+}
+
+header nav ul li.title {
+    font-weight:bold;
+    font-size:1.8rem;
+    font-family:'HotAugust', 'Comic Sans MS';
+    color:#187795;
+}
+
+header nav ul li a:hover,
+header nav ul li.selected a {
+    color:#2589BD;
+}
+
+header nav ul li a {
+    padding:0;
+}
+
+article {
+    width:85vw;
+    margin:auto;
+    display:block;
+    text-align:left;
+}
+
+article h1 {
+    text-align:center; 
+}
+
+article p {
+    font-family: 'Commissioner', Helvetica;
+}
+
+article.main {
+    width:55vw;
+    text-align:justify;
+}
+
+article.main img {
+    margin:auto;
+    max-width:30vw;
+    text-align:center;
+    display:block;
+}
+
+article.main p.signature {
+    margin-top:2rem;
+    margin-bottom:2rem;
+    font-style:italic;
+}
+
+
+/* Exposition */
+
+article #gallery {
+    display:inline-block;
+    position:relative;
+
+    margin:auto;
+    margin-top:0;
+    text-align:center;
+}
+
+article #gallery img {
+    max-height:30vh;
+    max-width:40vw;
+    margin:0.5rem;
+}
+
+
+/* Cartel (expo & painting) */
+
+#info {
+    width:300px;
+    box-shadow:.2rem .2rem .2rem .2rem rgba(0,0,0,.1);
+    padding:0.65rem 0 0.65rem 1.15rem;
+    position:relative;
+    display:block;
+
+    margin:auto;
+    text-align:left;
+}
+
+#info .info {
+    font-size:1.2rem;
+    position:absolute;
+    top:0.4rem;
+    right:1rem;
+    font-family:monospace;    
+}
+
+#info .title {
+    font-weight:bold;
+    font-style:italic;
+    margin-right:0.65rem;
+}
+
+#info .format {
+    display:block;
+    margin-top:0.3rem;
+    margin-bottom:1.15rem;
+}
+
+#info .comment {
+    display:block;
+}
+
+
+/* Painting */
+
+article.painting .container {
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    align-self: flex-end;
+    position:relative;
+    margin-bottom:1.8rem;
+}
+
+article.painting .container img {
+    max-height:75vh;
+    display:block;
+    text-align:center;
+    margin:auto;
+}
+
+article.painting .container ul.metadata {
+    width:15vw;
+    display:block;
+    margin:auto;
+    margin-left:0;
+    position:absolute;
+    bottom:0;
+    list-style-type: square;
+}
+
+article.painting .container .metadata span.title {
+    font-variant:small-caps;
+}
+
+article.painting .container .metadata span.content {
+    font-size:0.9em;
+}
+
+
+/* Divers */
+
+article #stats {
+    margin-top:2.5rem;
+    margin-bottom:1.5rem;
+
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+}
+
+article #stats #stat {
+    width:28vw;
+    margin-right:4vw;
+    margin-left:4vw;
+}
+
+
+/* Informations */
+
+.mail {
+    font-weight:bold;
+    font-size:1.2rem;
+}