Skip to content

Commit

Permalink
Bugfix in head.html to allow refactoring of some styles from HTML int…
Browse files Browse the repository at this point in the history 
…o CSS
  • Loading branch information
@liweiyap
liweiyap committed Oct 28, 2021
1 parent a2c0ca6 commit 62b6810
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 47 deletions.
2 changes: 1 addition & 1 deletion _includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
<link rel="stylesheet" href="../assets/css/syntax.css">
<link rel="stylesheet" href="../assets/css/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface|Inconsolata">
<link rel="stylesheet" href="../assets/css/liweiyap_ghpages.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="styleSheet" href="../assets/css/n-carousel.min.css">
<link rel="stylesheet" href="../assets/css/liweiyap_ghpages.css">

<!-- JS -->
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
Expand Down
44 changes: 22 additions & 22 deletions _includes/narradir-carousel.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div class="n-carousel n-carousel--controls-outside">
<ul class="n-carousel__content">
<li><img src="../assets/narradir/screenshot-avalon-characterselection.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-close.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-minions-open.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-pause.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-minions-close.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-merlin.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-percival.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-wake.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-secrethitler-characterselection.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-secrethitler-play-fascists.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-settings.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/narradir/screenshot-avalon-characterselection.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-close.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-minions-open.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-pause.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-minions-close.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-merlin.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-percival.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-avalon-play-wake.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-secrethitler-characterselection.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-secrethitler-play-fascists.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/narradir/screenshot-settings.webp" height="500px" class="centered-img"/></li>
</ul>
<div class="n-carousel__previous">
<button></button>
Expand All @@ -19,16 +19,16 @@
<button></button>
</div>
<div class="n-carousel__index">
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
4 changes: 2 additions & 2 deletions _includes/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="container">
<!-- Picture of myself -->
{% if page.lang == "en" %}
<a href="/"><img class="sidebar-avatar" style="transition: 0.3s;" src="{{ site.baseurl }}assets/logo-whitesmoke.svg" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
<a href="/"><img class="sidebar-avatar" src="{{ site.baseurl }}assets/logo-whitesmoke.svg" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
{% elsif page.lang == "de" %}
<a href="../de"><img class="sidebar-avatar" style="transition: 0.3s;" src="../assets/logo-whitesmoke.svg" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
<a href="../de"><img class="sidebar-avatar" src="../assets/logo-whitesmoke.svg" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
{% endif %}

<!-- Description of myself -->
Expand Down
8 changes: 4 additions & 4 deletions _includes/text-popover-carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h4 style="text-align: center;">
Hellmodus
{% endif %}
</h4>
<img src="../assets/text-popover/lightmode.webp" style="display: block; margin-left: auto; margin-right: auto; width:400px;"/>
<img src="../assets/text-popover/lightmode.webp" width="400px" class="centered-img"/>
</li>
<li>
<h4 style="text-align: center;">
Expand All @@ -18,7 +18,7 @@ <h4 style="text-align: center;">
Dunkelmodus
{% endif %}
</h4>
<img src="../assets/text-popover/darkmode.webp" style="display: block; margin-left: auto; margin-right: auto; width:400px;"/>
<img src="../assets/text-popover/darkmode.webp" width="400px" class="centered-img"/>
</li>
</ul>
<div class="n-carousel__previous">
Expand All @@ -28,7 +28,7 @@ <h4 style="text-align: center;">
<button></button>
</div>
<div class="n-carousel__index">
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button></button>
<button></button>
</div>
</div>
12 changes: 6 additions & 6 deletions _includes/xkcdbrowser-carousel.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="n-carousel n-carousel--controls-outside">
<ul class="n-carousel__content">
<li><img src="../assets/xkcdbrowser/screenshot-newestcomic.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/xkcdbrowser/screenshot-404.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/xkcdbrowser/screenshot-dialog-errorhandling.webp" style="display: block; margin-left: auto; margin-right: auto; height:500px;"/></li>
<li><img src="../assets/xkcdbrowser/screenshot-newestcomic.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/xkcdbrowser/screenshot-404.webp" height="500px" class="centered-img"/></li>
<li><img src="../assets/xkcdbrowser/screenshot-dialog-errorhandling.webp" height="500px" class="centered-img"/></li>
</ul>
<div class="n-carousel__previous">
<button></button>
Expand All @@ -11,8 +11,8 @@
<button></button>
</div>
<div class="n-carousel__index">
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button style="min-width: 1em; min-height: 1em; width: 1em; height: 1em;"></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
21 changes: 17 additions & 4 deletions assets/css/liweiyap_ghpages.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Overwrite specific functions in `assets/css/poole.css`
* Override specific functions in `assets/css/poole.css`
*/

/* words on page */
Expand Down Expand Up @@ -48,7 +48,7 @@ tbody tr:nth-child(odd) th {
}

/*
* Overwrite specific functions in `assets/css/hyde.css`
* Override specific functions in `assets/css/hyde.css`
*/

/* font size when stretching */
Expand Down Expand Up @@ -142,7 +142,7 @@ a.sidebar-nav-item:focus {


/*
* Overwrite specific functions in `assets/css/n-carousel.css`
* Override specific functions in `assets/css/n-carousel.css`
*/

.n-carousel__index {
Expand All @@ -151,6 +151,13 @@ a.sidebar-nav-item:focus {
margin-bottom: 1em;
}

.n-carousel__index button {
min-width: 1em;
min-height: 1em;
width: 1em;
height: 1em;
}


/*
* New functions
Expand Down Expand Up @@ -217,7 +224,6 @@ a:focus .dim-on-focus {

/* picture */
.sidebar-avatar {
/* border-radius: 50%; */
display: block;
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -281,6 +287,13 @@ span {
margin-right: 10px;
}

/* carousel and others */
.centered-img {
display: block;
margin-left: auto;
margin-right: auto;
}

/* container for typewriter */
.container-typewriter {
max-width: 48rem;
Expand Down
3 changes: 3 additions & 0 deletions assets/js/switch-avatar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
/* https://stackoverflow.com/a/18032363/12367873 */

// set transition in both functions, and in JS rather than in CSS or HTML,
// otherwise we cannot get rid of corner radius when sidebar avatar is logo SVGs

function unhover(sidebarAvatar) {
sidebarAvatar.setAttribute('src', '../assets/logo-whitesmoke.svg');
sidebarAvatar.setAttribute('style', 'transition: 0.3s;');
Expand Down
8 changes: 4 additions & 4 deletions de/nebenprojekte.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ <h3 class="post-subtitle">MacOS Desktop-Applikation in SwiftUI für Fremdsprache
<p>Danach habe ich mit SwiftUI eine App für die Menüleiste geschrieben. Die App poppt in vom Benutzer spezifizierten Intervallen mit einer aus der SQLite Datenbank zufällig ausgewählten Redewendung auf. Diese Pop-ups dienen als virtuelle Zettel für mein regelmäßiges Lernen.</p>
{% include text-popover-carousel.html %}
<p>Der/Die BenutzerIn lässt sich auch das Einstellungsmenü öffnen und neue Datenbanken kreieren, damit das Pop-up andere vom Benutzer spezifizierten Texte anzeigen könnte:</p>
<img src="../assets/text-popover/settingswindow.webp" style="display: block; margin-left: auto; margin-right: auto; width:500px;"/>
<img src="../assets/text-popover/inspirationalquote.webp" style="display: block; margin-left: auto; margin-right: auto; width:350px;"/>
<img src="../assets/text-popover/settingswindow.webp" width="500px" class="centered-img"/>
<img src="../assets/text-popover/inspirationalquote.webp" width="350px" class="centered-img"/>
</div>

<div class="post">
Expand Down Expand Up @@ -62,7 +62,7 @@ <h3 class="post-subtitle">Simulation der Evolution einer gitterförmigen Populat
<li>Lebende Zellen mit mehr als drei lebenden Nachbarn sterben in der Folgegeneration an Überbevölkerung <i>(z.B. wegen mangelnder Nährstoffe)</i>.</li>
<li>Eine tote Zelle mit genau drei lebenden Nachbarn wird in der Folgegeneration neu geboren <i>(ideale Populationsdichte)</i>.</li>
</ol>
<img src="../assets/conway/chequered_slower.gif" width="600" style="display: block; margin-left: auto; margin-right: auto; width:600px;"/>
<img src="../assets/conway/random_gen275.gif" width="600" style="display: block; margin-left: auto; margin-right: auto; width:600px;"/>
<img src="../assets/conway/chequered_slower.gif" width="600px" class="centered-img"/>
<img src="../assets/conway/random_gen275.gif" width="600px" class="centered-img"/>
</div>
</body>
8 changes: 4 additions & 4 deletions projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ <h3 class="post-subtitle">MacOS menu bar app in SwiftUI for language learners</h
<p>I then used the SwiftUI framework to create a desktop application that pops up at user-specified intervals, each time with a random expression from the SQLite database. These pop-ups serve as virtual placards for my regular revision of German expressions.</p>
{% include text-popover-carousel.html %}
<p>The user can also open the settings window and create new databases, so that the pop-up can display other user-defined texts:</p>
<img src="assets/text-popover/settingswindow.webp" style="display: block; margin-left: auto; margin-right: auto; width:500px;"/>
<img src="assets/text-popover/inspirationalquote.webp" style="display: block; margin-left: auto; margin-right: auto; width:350px;"/>
<img src="assets/text-popover/settingswindow.webp" width="500px" class="centered-img"/>
<img src="assets/text-popover/inspirationalquote.webp" width="350px" class="centered-img"/>
</div>

<div class="post">
Expand Down Expand Up @@ -62,7 +62,7 @@ <h3 class="post-subtitle">Simulation of evolution in a grid-like population of c
<li>Any live cell with more than three live neighbours dies, as if by over-population <i>(scarce nutrients)</i>.</li>
<li>Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction <i>(ideal population density)</i>.</li>
</ol>
<img src="assets/conway/chequered_slower.gif" width="600" style="display: block; margin-left: auto; margin-right: auto; width:600px;"/>
<img src="assets/conway/random_gen275.gif" width="600" style="display: block; margin-left: auto; margin-right: auto; width:600px;"/>
<img src="assets/conway/chequered_slower.gif" width="600px" class="centered-img"/>
<img src="assets/conway/random_gen275.gif" width="600px" class="centered-img"/>
</div>
</body>

0 comments on commit 62b6810

Please sign in to comment.