Baguette/website
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Do some SASS-fu and import water.css for semantic markup styling

Browse Source
This commit is contained in:
southerntofu 2020-03-29 19:17:37 +02:00
parent e383aed2c2
commit 80980ee183
4 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
sass/style.scss Normal file
View File

@ -0,0 +1,26 @@
@import 'widgets/menu.scss';
.nav-menu {
font-weight: bold;
> a { margin: 0 1rem; } // Spacing entries
background-color: rgb(239, 239, 239);
color: black;
padding: 0.5rem; // Leaving background space around entries
}
header { text-align: center; font-weight: bold; }
article > h1:first-child {
text-align: center;
font-size: 2.6em;
}
main {
margin-top: 1rem;
}
.source {
background-color: rgb(239, 239, 239);
text-align: center;
font-weight: bold;
}

40
sass/widgets/menu.scss Normal file
View File

@ -0,0 +1,40 @@
/************************************************************
*************************************************************
******************* SQUAT THEME *********************
********** Javascript-free attempt at a better web **********
*************************************************************
************************************************************/
/* Menu widget styles */
.widget-menu {
width: 100%; white-space: nowrap; box-sizing: border-box;
ul {
list-style: none; margin: 0; padding: 0;
display: inline-block;
@media screen and (max-width: 62em) { display: none; }
li { display: inline-block; padding: 0; margin: 0; position: relative; }
}
}
#menu-nav-main { text-align: center; font-size: 1.2rem; }
.pure-menu-link, .pure-menu-open { display: block; padding: 0.5em 1em; }
#menu-nav-main .pure-menu-children { left: 50% !important; transform: translateX(-50%); }
.pure-menu-open {
display: none;
@media screen and (max-width: 62em) {
display: block;
&:target {
display: none;
& ~ .pure-menu-close { display: inline-block; }
& ~ ul {
display: block;
li { display: block; position: relative; }
}
}
}
}
/* Making pureCSS menu responsive without Javascript */
.pure-menu-close { display: none; }

1
static/style.css
View File

@ -1 +0,0 @@
header { text-align: center; font-weight: bold; }

2
static/water.css Normal file
View File

@ -0,0 +1,2 @@
@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
/*# sourceMappingURL=light.min.css.map */